paulocoghi

Task Description: Frontend Integration with Nuxt.js, Storybook, cypress for e2e and cypress studio for record interaction test flux without need to code them , and at last  CI/CD Setup
Objective:
In this one-week trial, developers will take an existing frontend repository built with Nuxt.js and Pinia, featuring custom components alongside others from external libraries such as Element Plus. The goal is to integrate Storybook, set up CI/CD pipelines, and perform visual regression tests using Cypress, while organizing the project following atomic design principles.

Requirements:

##Storybook Integration:

Developers must integrate Storybook into the Nuxt.js project using the custom module created by Chakir Qatab.
They should document and visualize as many components as possible using Storybook, ensuring a seamless interaction between custom and library-based components (Element Plus).

paulocoghi

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "Firefox",
      "version": "72.0.1"
    },
    "browser": {
      "name": "Firefox",
      "version": "72.0.1"

paulocoghi

<InputAdd></InputAdd>

<List></List>

<script>
	import InputAdd from './InputAdd.html'
	import List from './List.html'

	import { Store } from 'svelte/store.js';
	

paulocoghi

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("$todos", newTodo)'>add todo</button>

<ul>
	{{#each $todos as todo, i}}
		<li>
			<button on:click='splice("$todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}

paulocoghi

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("todos", newTodo)'>add todo</button>

<ul>
	{{#each todos as todo, i}}
		<li>
			<button on:click='splice("todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}

paulocoghi

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("todos", newTodo)'>add todo</button>

<ul>
	{{#each todos as todo, i}}
		<li>
			<button on:click='splice("todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}

paulocoghi

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("$todos", newTodo)'>add todo</button>

<ul>
	{{#each ( $todos || [] ) as todo, i}}
		<li>
			<button on:click='splice("$todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}

paulocoghi

/*

	ractive-decorators-bootstrap-select
	=============================================

	Integrate Ractive with Bootstrap Select

	==========================

	Usage: Include this file on your page below Ractive, e.g: