Iforth-ui NPM | npm.io

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
```