Design System da Alfabit

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.

🔨 Funcionalidades do projeto

As bibliotecas de botão, input, modal e typography 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 é aplicar CI/CD no monorepo, automatizando as etapas de execução de tarefas do Nx, publicação do Storybook, testes visuais do Chromatic e publicação dos componentes no NPM.

Acesse o Figma do Design System.

✔️ Técnicas e tecnologias utilizadas

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
• CI/CD com GitHub Actions: automação de tarefas comuns do monorepo

🛠️ Abrir e rodar o projeto

Após baixar ou clonar o projeto, instale as dependências:

npm i

Em seguida, execute o seguinte comando para subir o servidor do Storybook:

npx nx run storybook-host:storybook
# ou:
npx nx storybook storybook-host