About | Deploy | Functionalities | Layout | How It Works | Technologies | Author | License
Neste projeto, construímos um Design System em formato de monorepo, documentando tokens (cores, tamanhos de fonte, espaçamento, etc.) e componentes React com a ferramenta Storybook. Utilizamos o turbo-repo para automatizar o processo de build dos pacotes, garantindo eficiência e escalabilidade. Com o changeset, facilitamos a atualização e publicação dos pacotes no npm, mantendo um histórico claro das alterações. Essa abordagem promove reutilização, padronização e colaboração entre diferentes projetos.
Vale ressaltar que este projeto foi desenvolvido como conclusão de um desafio proposto no curso/trilha Ignite oferecido pela Rocketseat.
Documentação Storybook:
A Documentação do Design System pode ser acessada através da seguinte URL base: https://pabloxt14.github.io/Ignite-Design-System/
Pacotes no NPM:
- Pacote com as configurações base do ESLint na aplicação
- Pacote com as configurações base do TypeScript na aplicação
- Pacote de tokens e documentação com Storybook
- colors
- fonts
- font-sizes
- font-weights
- line-heights
- radii
- space
- Criação componentes React e documentação com Storybook
- Text
- Heading (Títulos, subtítulos)
- Box / Card
- Button
- TextInput
- TextArea
- Checkbox
- Avatar
- MultiStep (indicador de etapas de preenchimento de algo, ex: formulário)
- Tooltip
- Toast
Você pode visualizar o layout do projeto no qual nos baseamos para criar o Design System através desse link. É necessário ter conta no Figma para acessá-lo.
Veja uma simples demonstração da documentação do Design System feito com o Storybook
Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:
Além disto é bom ter um editor para trabalhar com o código como VSCode
Passo a passo para clonar e executar a aplicação na sua máquina:
# Clone este repositório
$ git clone [email protected]:pabloxt14/Ignite-Design-System.git
# Acesse a pasta do projeto no terminal
$ cd Ignite-Design-System
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# O documentação Storybook inciará abrindo uma aba no navegador em alguma porta disponível As seguintes principais ferramentas foram usadas na construção do projeto:
Para mais detalhes das dependências gerais da aplicação veja o arquivo package.json
Para mais detalhes das dependências individuais de cada um dos pacotes da aplicação, acesse o arquivo
package.jsonde cada pacote respectivamente.
Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais informações
Feito com 💜 por Pablo Alan 👋🏽 Entre em contato!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent