iForth UI Library

Bem-vindo à library de componentes UI da iForth Sistemas. Esta biblioteca foi desenvolvida para ser utilizada em diferentes projetos da empresa, garantindo a consistência e a padronização dos componentes de interface. O projeto foi construído utilizando as seguintes tecnologias:

• Vite para o bundling e desenvolvimento.
• React e TypeScript para a construção dos componentes.
• Storybook para documentação visual e desenvolvimento de componentes isolados.
• Vitest para testes unitários.

Componentização

Todos os componentes desta biblioteca seguem os padrões de componentização do React, utilizando a filosofia de componentes reutilizáveis e modulares. Cada componente é projetado com foco em acessibilidade e performance, garantindo flexibilidade para ser utilizado em diferentes contextos.

Os componentes estão organizados de forma que cada um tenha seu próprio arquivo .tsx e seu estilo associado, utilizando Styled Components para garantir consistência visual e modularidade nos estilos.

Padrões de Tipagens

Para garantir a consistência e previsibilidade no uso da biblioteca, seguimos os seguintes padrões de tipagens em TypeScript:

• Type: Utilizamos type para representar aliases simples de tipos ou combinações de tipos.
• Interface: Usamos interface quando se trata de definir a estrutura de objetos mais complexos e para suportar herança entre diferentes tipos de dados.

A library está configurada para exportar corretamente todos os tipos utilizados, tanto os definidos com type quanto os definidos com interface.

Storybook

O Storybook está configurado para documentar e visualizar todos os componentes de forma isolada. Isso facilita o desenvolvimento e a revisão de cada componente individualmente, antes de integrá-los em uma aplicação maior.

Rodando o Storybook

npm run storybook

Este comando vai iniciar o Storybook em modo de desenvolvimento, acessível pela porta 6006.

Para gerar uma build estática do Storybook:

npm run build-storybook

Testes

Usamos Vitest como o framework de testes para validar o comportamento dos componentes e garantir a estabilidade do código.

Rodando os testes

npm run test

Este comando executa todos os testes unitários.

Para rodar os testes com cobertura:

npm run covarage

Scripts Disponíveis

Aqui está a lista completa dos scripts disponíveis no projeto e suas funções:

• dev: Inicia o servidor de desenvolvimento com Vite.

  npm run dev

• prebuild: Limpa a pasta dist antes de rodar a build.

  npm run prebuild

• build: Gera a build da biblioteca. Compila os arquivos TypeScript com tsc e executa a build do Vite.

  npm run build

• lint: Verifica o código para encontrar e corrigir problemas de formatação e padrões com ESLint.

  npm run lint

• preview: Visualiza a aplicação já empacotada (build) no navegador.

  npm run preview

• produce: Gera a build final e publica a biblioteca no NPM.

  npm run produce

• storybook: Inicia o Storybook para visualização dos componentes isolados.

  npm run storybook

• build-storybook: Gera uma build estática do Storybook para deploy.

  npm run build-storybook

• test: Executa os testes unitários com Vitest.

  npm run test

• covarage: Executa os testes unitários e gera um relatório de cobertura de código.

  npm run covarage