Uma biblioteca de componentes e design system Droz. Com testes e documentação para todos os componentes.
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:
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)
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.
Abaixo a lista dos scrips principais para a utilização do projeto.
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:packagesPara 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:packagesPara 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:coverageNa 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.
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.
- Abra uma nova branch chamada "release-x.x.x"
- Na nova branch rode o script scripts/versioning [
major|minor|patch] - Dê o nome pro commit de "release: x.x.x"
- Faça merge dessa branch na main
- Abra a branch main atualizada
- Em um terminal autenticado com o NPM, execute
npm publishdentro da pastapackages/visu(importante) e pronto
Aprenda mais sobre Packages:
Aprenda mais sobre Turborepo:
Aprenda mais sobre Vite:
Aprenda mais sobre React:
Aprenda mais sobre Tailwindcss:
Aprenda mais sobre Storybook:
Aprenda mais sobre Testes: