@esperanca-ui/componentes 2.13.6 → 2.14.0

package/COMPONENTS.md

@@ -168,10 +168,13 @@ export function TopQuickActions() {
 - `PageHeader` aceita qualquer `actions`, mas o layout do grupo de acoes continua sendo responsabilidade do app.
 - `Tabs` foi pensado para dois niveis: navegacao contextual (`Resumo`, `Timeline`, `Gantt`, `Calendario`) e troca de modo (`Dia`, `Semana`, `Mes`).
 - `Sidebar` agora expõe `surface="default" | "soft" | "glass"` como API publica para definir a superficie do menu lateral.
+- Itens do `Sidebar` aceitam `children` para submenu nativo. Em desktop o grupo abre no hover; em mobile o mesmo item funciona como toggle por clique.
 - No desktop, o `Sidebar` se comporta como lateral fixa real; a docs aplica um override local so para manter os previews contidos na vitrine.
 - `TaskStatusBadge` e `TaskPriorityBadge` foram pensados como blocos base para agenda, cards de tarefa, timeline e Gantt.
 - Ambos aceitam presets prontos e tambem `name` + `colors` para cenarios customizados sem criar outro componente.
 - `TaskCard` e um wrapper de alto nivel sobre `Card`, herdando as mesmas variantes (`elevated`, `outlined`, `filled`, `glass`) e props visuais como `interactive`, `glassOpacity` e `glassBlur`.
+- `LineChart` e `BarChart` usam SVG nativo, tooltip/legenda embutidos e o mesmo shell visual de `Card`, com controle de `legendPosition`, `xAxisLabel`, `yAxisLabel`, `yAxisTickWidth`, `showValueLabels` e `xTickRotation`.
+- Quando `enableUserPreferences` estiver ativo, o proprio usuario pode ajustar itens como titulo, legenda, nomes dos eixos, valores sobre os dados e orientacao do eixo X. Se `preferencesStorageKey` for informado, isso fica salvo em `localStorage`.
 - `TaskCalendar` usa o mesmo contrato visual do `Card` e agora suporta `month`, `week` e `day`. No mes as tarefas ficam pequenas como badges; em semana e dia o padrao vira card com mais contexto.
 - `GanttChart` fecha a visao horizontal de planejamento e usa `groups` como primeiro nivel. Assim, o mesmo componente serve para agrupar por projeto ou por responsavel.
 
@@ -189,6 +192,8 @@ export function TopQuickActions() {
 | `FormSidebar` | `import { FormSidebar } from '@esperanca-ui/componentes'` | `<FormSidebar isOpen={open} onClose={...}>...</FormSidebar>` |
 | `Grid` | `import { Grid } from '@esperanca-ui/componentes'` | `<Grid columns={{ base: 1, md: 2 }} gap={4}>...</Grid>` |
 | `Input` | `import { Input } from '@esperanca-ui/componentes'` | `<Input label="Email" placeholder="Digite" />` |
+| `LineChart` | `import { LineChart } from '@esperanca-ui/componentes'` | `<LineChart data={data} series={series} legendPosition="top" showValueLabels enableUserPreferences preferencesStorageKey="receita-board" />` |
+| `BarChart` | `import { BarChart } from '@esperanca-ui/componentes'` | `<BarChart data={data} series={series} xAxisLabel="Mes" yAxisLabel="Valor" yAxisTickWidth={112} showValueLabels enableUserPreferences />` |
 | `Loading` | `import { Loading } from '@esperanca-ui/componentes'` | `<Loading variant="spinner" />` ou `<Loading fullScreen text="Validando acesso" />` |
 | `Modal` | `import { Modal } from '@esperanca-ui/componentes'` | `<Modal isOpen={open} onClose={...}>...</Modal>` |
 | `PageHeader` | `import { PageHeader } from '@esperanca-ui/componentes'` | `<PageHeader title="Clientes" />` |
@@ -196,7 +201,7 @@ export function TopQuickActions() {
 | `Portal` | `import { Portal } from '@esperanca-ui/componentes'` | `<Portal><div>Overlay</div></Portal>` |
 | `Radio` | `import { Radio } from '@esperanca-ui/componentes'` | `<Radio label="Opcao A" />` |
 | `RadioGroup` | `import { RadioGroup } from '@esperanca-ui/componentes'` | `<RadioGroup name="status" options={[...]} />` |
-| `Sidebar` | `import { Sidebar } from '@esperanca-ui/componentes'` | `<Sidebar sections={[...]} surface="glass" />` |
+| `Sidebar` | `import { Sidebar } from '@esperanca-ui/componentes'` | `<Sidebar sections={[{ items: [{ label: 'Relatorios', children: [...] }] }]} surface="glass" />` |
 | `TaskStatusBadge` | `import { TaskStatusBadge } from '@esperanca-ui/componentes'` | `<TaskStatusBadge status="in_progress" />` |
 | `TaskPriorityBadge` | `import { TaskPriorityBadge } from '@esperanca-ui/componentes'` | `<TaskPriorityBadge priority="high" />` |
 | `TaskCard` | `import { TaskCard } from '@esperanca-ui/componentes'` | `<TaskCard title="Revisar agenda" status="in_progress" />` |

package/README.md

@@ -2,78 +2,35 @@
 
 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 (DataTable, Sidebar, FormSidebar, Input, ComboBox, Checkbox, Radio, RadioGroup, Textarea e Button) com estilos em CSS puro, build com Vite e documentação via Storybook.
+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 Storybook: `npm run storybook`
+- Rodar docs locais: `npm run dev:docs`
 - Build da biblioteca: `npm run build`
-- Docker (docs + CDN): `docker compose up --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`
-- Documentacao visual via Storybook em `.storybook/`
-- Publicacao no GitLab Package Registry via pipeline de tag
+- 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
 ```
 .
-├── .cz.toml
-├── .env.example
-├── .gitlab-ci.yml
-├── .npmrc
-├── .storybook
-│   ├── main.ts
-│   ├── preview.css
-│   └── preview.tsx
-├── CHANGELOG.md
-├── README.md
-├── docker
-│   └── Dockerfile
-├── docker-compose.yml
-├── docs
-│   ├── components.md
-│   ├── functions.md
-│   ├── tutorial-instalacao-pacote-npm-gitlab.md
-│   └── wiki-componentes-react.md
-├── src
-│   ├── components
-│   │   ├── Button
-│   │   │   ├── Button.stories.tsx
-│   │   │   └── Button.tsx
-│   │   ├── Checkbox
-│   │   │   ├── Checkbox.stories.tsx
-│   │   │   └── Checkbox.tsx
-│   │   ├── ComboBox
-│   │   │   ├── ComboBox.stories.tsx
-│   │   │   └── ComboBox.tsx
-│   │   ├── FormSidebar
-│   │   │   ├── FormSidebar.stories.tsx
-│   │   │   └── FormSidebar.tsx
-│   │   ├── Input
-│   │   │   ├── Input.stories.tsx
-│   │   │   └── Input.tsx
-│   │   ├── Radio
-│   │   │   ├── Radio.stories.tsx
-│   │   │   └── Radio.tsx
-│   │   ├── Textarea
-│   │   │   ├── Textarea.stories.tsx
-│   │   │   └── Textarea.tsx
-│   │   ├── Sidebar
-│   │   │   ├── Sidebar.stories.tsx
-│   │   │   └── Sidebar.tsx
-│   │   └── Table
-│   │       ├── DataTable.stories.tsx
-│   │       └── DataTable.tsx
-│   ├── hooks
-│   │   └── useClickOutside.ts
-│   ├── index.css
-│   └── index.ts
-├── tsconfig.json
-├── tsconfig.node.json
-└── vite.config.ts
+├── docs-site/          # app de documentacao
+├── docker/             # imagens e configuracao nginx
+├── docs/               # guias de uso/publicacao
+├── src/                # biblioteca publicada
+├── .gitlab-ci.yml      # validacao + publicacao
+├── package.json        # scripts e metadados do pacote
+├── vite.config.ts      # build da biblioteca
+└── vite.config.docs.ts # build das docs
 ```
 
 ## Configuracao (.env)
@@ -86,22 +43,36 @@ TODO: completar
 ### Desenvolvimento
 ```bash
 npm install
-npm run storybook
+npm run dev:docs
 ```
 
-Acesse o Storybook local em `http://localhost:6006`.
+Acesse o site de documentacao local em `http://localhost:3000`.
 
 ### Build da biblioteca
 ```bash
 npm run build
 ```
 
-### Docker (Storybook estatico + CDN)
+### Build das docs
 ```bash
-docker compose up --build
+npm run build:docs
 ```
 
-Acesse a versao estatica em `http://localhost:3007`.
+### Docker
+Desenvolvimento:
+
+```bash
+docker compose up --build dev
+```
+
+Docs em producao + artefatos da biblioteca em `/cdn`:
+
+```bash
+docker compose up --build prod
+```
+
+- Dev em `http://localhost:3007`
+- Prod em `http://localhost:3008`
 
 ## Uso rapido
 ```tsx
@@ -110,6 +81,7 @@ 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
 
@@ -120,7 +92,7 @@ O exemplo completo esta em `COMPONENTS.md`.
 ## Verificacao rapida
 ```bash
 npm run build
-npm run build-storybook
+npm run build:docs
 ```
 
 ## Documentacao
@@ -128,4 +100,6 @@ npm run build-storybook
 - Funcoes/exports: `docs/functions.md`
 - Componentes: `docs/components.md`
 - Roadmap de gestao de projetos: `docs/componentes-gestao-projetos.md`
-- Tutorial de instalacao em outro projeto: `docs/tutorial-instalacao-pacote-npm-gitlab.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`