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.
Atualmente, a biblioteca de botão criada no monorepo (mono-repositório) pode ser visualizada em um servidor do Storybook, onde foi feita uma documentação interativa do componente. Além disso, a publicação da biblioteca de botão foi automatizada com o Nx Release.
Agora está na hora de evoluir a documentação do Storybook! Iremos trabalhar em um novo componente de input e evoluir a documentação de nossos componentes, utilizando MDX e outros recursos. Além disso, iremos melhorar a publicação automática do Nx Release.
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
- 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