Uma biblioteca de componentes e design system Droz. Com testes e documentação para todos os componentes.

Como o projeto funciona?

O projeto é um monorepo, que foi criado utilizando o Turborepo, para saber mais acesse o Monorepo Handbook. O projeto conta com dois workspaces docs e package:

Docs

Projeto onde são desenvolvidas as documentações dos components do Visu. Utilizando principalmente o Storybook. Os componentes documentados são baseados no último build feito na biblioteca, então é necessários que haja pelo menos um build antes de documentar os componentes.

Importante: Antes de criar/modificar uma story de qualquer componente SEMPRE construa o Visu e execute o comando npm run install para atualizar as dependências do Storybook (especialmente o Visu)

Package

Projeto onde são desenvolvidos os componentes e o design system da biblioteca Visu. O projeto utiliza principalmente Vite, React e Tailwindcss. O build é realizado na pasta src/library para os componentes e copiando os arquivos da pasta src/theme para o design system que consiste em um plugin do tailwindcss. O projeto testa os componentes utilizando Jest e React Testing Library.

Script

Abaixo a lista dos scrips principais para a utilização do projeto.

Build

Para executar o build em docs e package utilize o comando abaixo na raiz do projeto:

npm run build
// npm run build:docs
// npm run build:packages

Desenvolvimento

Para executar em paralelo e no modo de desenvolvimento todos os docs e package utilize o comando abaixo na raiz do projeto:

npm run dev
// npm dev build:docs
// npm dev build:packages

Teste

Para executar os testes da biblioteca, acesse o diretório package e utilize o comando abaixo:

npm run test
// npm run test:watch
// npm run test:coverage

Biblioteca

Na Biblioteca é publicado o conteúdo da pasta dist que é gerado a partir das pastas src/library e src/theme. Para realizar a publicação precisamos gerar um build da biblioteca que irá criar a pasta dist com essa pasta criada podemos então publicar o pacote.

Publicação NPM

Para realizar a publicação no Github Packages, após ter feito todas as atualizações necessárias em uma PR separada, siga os passos abaixo.

1. Abra uma nova branch chamada "release-x.x.x"
2. Na nova branch rode o script scripts/versioning [major | minor | patch]
3. Dê o nome pro commit de "release: x.x.x"
4. Faça merge dessa branch na main
5. Abra a branch main atualizada
6. Em um terminal autenticado com o NPM, execute npm publish dentro da pasta packages/visu (importante) e pronto

Links úteis:

Aprenda mais sobre Packages:

• NPM Publish
• Vite Build Library Mode
• package.json Configs
• Github Packages

Aprenda mais sobre Turborepo:

• Package Installation
• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

Aprenda mais sobre Vite:

• Início
• CLI
• Plugins
• Library Mode Build

Aprenda mais sobre React:

• Início
• Hooks
• Built-in Components
• Built-in APIs
• Directives
• Client APIs
• Server APIs

Aprenda mais sobre Tailwindcss:

• Instalação
• Configuração
• Configuração do setup
• Utility-first
• Responsive Design
• Dark Mode
• Plugins

Aprenda mais sobre Storybook:

• Story
• Setup
• Addons
• Testing
• Builders
• Controls

Aprenda mais sobre Testes:

• Exemplos
• API
• Cheatsheet
• Expect

License

Copyright