Esse projeto foi desenvolvido durante o módulo 5: Construindo Design System, no bootcamp Ignite (Rocketseat), com o objetivo de construir um Design System do zero, documentando os componentes React e descobrir diversas ferramentas que vão nos ajudar desde a implementação do DS até a sua publicação.
Tecnologias | Sobre | Layout | Como executar
Para a construção do projeto, foram utilizadas as seguintes tecnologias:
Um dos desafios quando falamos de desenvolvimento de produtos digitais é manter a consistência, precisão e padronização dos mesmos conforme as equipes mudam ou crescem. O Design System pode ser uma ferramenta útil para a situação.
Design System é um documento vivo com padrões visuais e códigos unificando as duas práticas, disponibilizado para toda a equipe de design e desenvolvimento para, além de tudo, garantir uniformidade na experiência final do usuário. Ecossistema de bibliotecas instaláveis, com componentes programados e padrões semânticos de design, que reúne padrões de comportamentos.
- Product serving products
Através de um monorepo (repositório único contendo projetos distintos com relações bem definidas), o Design Syestem do Ignite Call contém os seguintes pacotes:
-
Tokens -> A menor parte do estilo. Variáveis nomeadas que armazenam atributos de design visual, que não dependem de uma tecnologia específica (agnóstico). São coisas como cores, espaçamentos e tamanhos, que quando sozinhos parecem não ter muita importância, mas que em conjunto são muito relevantes para determinar a consistência de um produto;
-
Storybook -> Permite o desenvolvimento e projeção das interfaces de forma, rápida, isolada e independente. Podemos interagir com os componentes criados no pacote React, definindo diferentes estados, documentando seu comportamento;
-
React -> Pacote que contém nossos componentes a serem reutilizados. Construído com as tecnologias ReactJs, Typescript, Stitches e Radix, o pacote é servido por Tokens, e serve os produtos que utilizarão os componentes. Obs: React foi instalado como uma dependência de desenvolvimento, esperamos que as aplicções que utilizem o pacote, já tenham React instalado;
-
ESLint -> Pacote com confiurações específicas, para auxiliar a escrita do código nos pacotes que são servidos por ele.
Ferramenta para processo de conversão do nosso código em um pacote JavaScript que poderá ser carregado por outros aplicativos.
- Converte para diversos formatos, assim, aplicativos com diferentes suportes poderão consumir (aplicações mais recentes e mais antigas);
- Não limitamos quem vai consumir nosso pacote;
- Mais performático, utiliza esbuild.
Ferramenta para processo de conversão do nosso código em um pacote JavaScript que poderá ser carregado por outros aplicativos.
- Converte para diversos formatos, assim, aplicativos com diferentes suportes poderão consumir (aplicações mais recentes e mais antigas);
- Não limitamos quem vai consumir nosso pacote;
- Mais performático, utiliza esbuild.
O layout da aplicação foi desenvolvido e forneciso pela equipe da Rocketseat.
Clique aqui e acesse o conteúdo!