@esperanca-ui/componentes

Se voce estiver integrando esta biblioteca em outro projeto e quiser um indice rapido dos componentes publicos, leia tambem COMPONENTS.md.

Biblioteca de componentes React com estilos em CSS puro, build com Vite e um site de documentacao proprio em docs-site/.

TL;DR

• Instalar dependencias: npm install
• Rodar docs locais: npm run dev:docs
• Build da biblioteca: npm run build
• Build das docs: npm run build:docs
• Docker dev: docker compose up --build dev
• Docker prod (docs + CDN): docker compose up --build prod

Arquitetura (alto nivel)

• Componentes React em src/components/
• Estilos globais em src/index.css (tema claro/escuro via variaveis CSS)
• Build com tsc + vite e geracao de tipos via vite-plugin-dts
• Site de documentacao em docs-site/ com Vite + React Router
• Publicacao automatizada via pipeline de tag
• Publicacao npm com token injetado em CI, sem credenciais no repositorio

Estrutura de pastas

.
├── docs-site/          # app de documentacao
├── docker/             # imagens e configuracao nginx
├── docs/               # guias de uso/publicacao
├── scripts/            # wrappers Node para tarefas locais das docs
├── src/                # biblioteca publicada
├── .gitlab-ci.yml      # validacao + publicacao
├── package.json        # scripts e metadados do pacote
├── vite.config.ts       # build da biblioteca
└── vite.config.docs.mjs # build das docs

Configuracao (.env)

Arquivo de exemplo: .env.example.

Nao encontrado no repositorio
TODO: completar

Como rodar

Desenvolvimento

npm install
npm run dev:docs

Acesse o site de documentacao local em http://localhost:3000.

Build da biblioteca

npm run build

Build das docs

npm run build:docs

Docker

Desenvolvimento:

docker compose up --build dev

Docs em producao + artefatos da biblioteca em /cdn:

docker compose up --build prod

• Dev em http://localhost:3007
• Prod em http://localhost:3008

Uso rapido

import { DataTable, Sidebar, FormSidebar, Input, ComboBox, Checkbox, Radio, RadioGroup, Textarea, Button } from '@esperanca-ui/componentes';
import '@esperanca-ui/componentes/style.css';

Tambem inclui componentes para gestao de projetos, como TaskStatusBadge, TaskPriorityBadge, TaskCard e TaskCalendar. Os estilos dos graficos (LineChart e BarChart) tambem saem nesse mesmo @esperanca-ui/componentes/style.css.

Quick Actions de Topo

O CSS publico tambem inclui classes esp-* para acoes rapidas com Button, como esp-quick-action, esp-quick-action-expand, esp-quick-action-outline, esp-quick-action-soft e esp-quick-action-glass.

O exemplo completo esta em COMPONENTS.md.

Verificacao rapida

npm run build
npm run build:docs

Documentacao

• Wiki tecnica: docs/wiki-componentes-react.md
• Funcoes/exports: docs/functions.md
• Componentes: docs/components.md
• Roadmap de gestao de projetos: docs/componentes-gestao-projetos.md
• Tutorial de instalacao do pacote publico: docs/tutorial-instalacao-pacote-publico.md
• Tutorial de instalacao via GitLab interno: docs/tutorial-instalacao-pacote-npm-gitlab.md
• Publicacao do pacote: docs/publicacao-npm-e-gitlab.md