Design System

um design system criado desde o figma até o react utilizando vŕios pacotes novos

Porque um Design System é importante

manter um padrão de desenvolvimentos em 1 ou vários projetos dentro de uma empresa não é uma tarefa fácil
Para manter isso de maneira mais eficiênte e segura para todos os devs esse systema é criado

Dentro dele a gente define fontes, cores e até bordas usadas, desde o primeiro traço do projeto, desse jeito se torna mais fácil para toda equipe saber oque colocar em certa parte da aplicação e não ficar com medo de fugir do padrão do projeto

Algumas das ferramentas usadas:

oque é e porque usar o storybook:

o storybook é uma maneira mais fácil e dinâmica de você documentar seus components, por exemplo:

você criou um component do React ou Vue ou qualquer framework que trabalhe com tais
Normalmente esses components possuem variações, como: hover; focus; active; etc.

você não iris querer fazer cada variação manualmente pra documentar cada componente da sua aplicação
Aí que entra o storybook. Ele cria para você STORIES que você pode verificar com uma interface
Contendo todas as variações que você adcionar no arquivo de configuração do component para o Storybook

como entrar no no projeto:

baixe as dependencias do package.json

para acessar o Storybook localmente:

$ npm run storybook

para acessar o Storybook on web:

https://eramoss.github.io/Design-System

para rodar o Vite localmente:

$ npm run dev