Contrução de um Design System do Figma ao React.
- Estrutura visual do Design System no Figma;
- Definição dos tokens e os componentes;
- Criação dos componentes e Documentação utilizando Storybook;
- Testes automatizados e simulação de interação do usuário;
- Automatização do processo de deploy (CI/CD).
- React | ^18.2.0
- Typescript | ^4.6.4 -D
- Vite | ^3.1.0 -D
- TailwindCSS | ^3.1.8 -D
- Radix UI | ^1.0.0
- Storybook | ^6.5.12 -D
- CLSX | ^1.2.1
- Storybook/jest | ^0.0.10 -D
- Storybbook/testing-library | ^0.0.13 -D
Aplicação Base | Components | Colors |
---|---|---|
Clone o projeto e instale as dependências
$ npm i
Para rodar a documentação storybook: (abrirá http://localhost:6006)
$ npm run storybook
Parar rodar os testes automatizados no terminal:
$ npm run test-storybook
Para rodar a aplicação: (abrirá http://localhost:3000)
$ npm run dev
https://jfernandesdev.github.io/design-system-lab