Monorepo criado para implementação do Design System da empresa fictícia Alfabit, uma empresa de consultoria de software. Reconhecendo a importância do design consistente e intuitivo em todas as suas plataformas e produtos, a Alfabit decidiu investir em um Design System de ponta.
As bibliotecas de botão e de input criadas no monorepo (mono-repositório) podem ser visualizadas em um servidor do Storybook, onde foi feita uma documentação interativa dos componentes. A publicação das bibliotecas foi automatizada com o Nx Release e o Chromatic foi utilizado para publicação do Storybook e automação de testes visuais.
O próximo passo agora é desenvolver mais componentes do Design System: o typography e o modal. Com esses novos componentes, iremos lidar com dependências entre bibliotecas e suas publicações.
Acesse o Figma do Design System.
As técnicas e tecnologias utilizadas pra isso são:
- Design System e Atomic Design: criados pela equipe de design para organizar o Design System da empresa
- Angular: framework utilizado para implementação dos componentes
- Nx e monorepo: utilizados para criar e gerenciar aplicações e bibliotecas de forma produtiva
- Storybook: ferramenta para criação de documentação interativa
- Chromatic: ferramenta para publicação do Storybook e automação de testes visuais
- Nx Release: recurso do Nx que facilita a automatização da publicação de bibliotecas
Após baixar ou clonar o projeto, instale as dependências:
npm iEm seguida, execute o seguinte comando para subir o servidor do Storybook:
npx nx run storybook-host:storybook
# ou:
npx nx storybook storybook-host