/design-system-lab

Design System criado no Ignite Lab 3.0 - Do Figma ao React

Primary LanguageTypeScript

Design System LAB

Descrição:

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).

Tecnologias utilizadas: 🚀

  • 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

Screenshot

Aplicação Base Components Colors

Rodando o projeto localmente: ⚙

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

Documentação Storybook online 👀

https://jfernandesdev.github.io/design-system-lab


footer-signature