@majapisoftwares/ui 6.1.0 → 6.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +27 -27
- package/README.md +79 -79
- package/THIRD_PARTY_NOTICES.md +39 -39
- package/components.json +25 -25
- package/docs/MIGRATION-0.2.md +20 -20
- package/docs/MIGRATION-6.0.md +33 -33
- package/docs/NEXT-STARTER-VALIDATION.md +14 -14
- package/docs/STANDARDS.md +41 -41
- package/docs/VALIDATION.md +11 -11
- package/docs/VERSIONING.md +28 -28
- package/docs/validation/preference-titles.md +22 -0
- package/package.json +88 -84
- package/scripts/check-standards.mjs +41 -41
- package/src/components/ui/accordion.tsx +82 -82
- package/src/components/ui/alert-dialog.tsx +187 -187
- package/src/components/ui/alert.tsx +77 -77
- package/src/components/ui/avatar.tsx +108 -108
- package/src/components/ui/badge.tsx +55 -55
- package/src/components/ui/breadcrumb.tsx +125 -125
- package/src/components/ui/button-group.tsx +89 -89
- package/src/components/ui/button.tsx +59 -59
- package/src/components/ui/card.tsx +101 -101
- package/src/components/ui/checkbox.tsx +27 -27
- package/src/components/ui/collapsible.tsx +21 -21
- package/src/components/ui/context-menu.tsx +271 -271
- package/src/components/ui/dialog.tsx +161 -161
- package/src/components/ui/dropdown-menu.tsx +271 -271
- package/src/components/ui/empty.tsx +105 -105
- package/src/components/ui/field.tsx +238 -238
- package/src/components/ui/hover-card.tsx +50 -50
- package/src/components/ui/input-group.tsx +155 -155
- package/src/components/ui/input.tsx +21 -21
- package/src/components/ui/kbd.tsx +28 -28
- package/src/components/ui/label.tsx +19 -19
- package/src/components/ui/orb.css +1002 -1002
- package/src/components/ui/orb.tsx +752 -752
- package/src/components/ui/popover.tsx +89 -89
- package/src/components/ui/progress.tsx +82 -82
- package/src/components/ui/radio-group.tsx +37 -37
- package/src/components/ui/scroll-area.tsx +54 -54
- package/src/components/ui/select.tsx +204 -204
- package/src/components/ui/separator.tsx +24 -24
- package/src/components/ui/sheet.tsx +139 -139
- package/src/components/ui/sidebar.tsx +1039 -1035
- package/src/components/ui/skeleton.tsx +15 -15
- package/src/components/ui/slider.tsx +53 -53
- package/src/components/ui/sonner.tsx +44 -44
- package/src/components/ui/spinner.tsx +32 -32
- package/src/components/ui/switch.tsx +31 -31
- package/src/components/ui/table.tsx +121 -121
- package/src/components/ui/tabs.tsx +81 -81
- package/src/components/ui/textarea.tsx +19 -19
- package/src/components/ui/toggle-group.tsx +89 -89
- package/src/components/ui/toggle.tsx +44 -44
- package/src/components/ui/tooltip.tsx +65 -65
- package/src/hooks/use-mobile.ts +20 -20
- package/src/lib/i18n.tsx +109 -109
- package/src/lib/utils.ts +1 -1
- package/src/patterns/app-shell.tsx +177 -179
- package/src/patterns/data-table.tsx +2486 -2486
- package/src/patterns/details-sheet.tsx +54 -54
- package/src/patterns/filter-tabs.tsx +53 -53
- package/src/patterns/majapi-logo.tsx +32 -32
- package/src/patterns/page-header.tsx +62 -62
- package/src/patterns/preferences.tsx +15 -7
- package/src/patterns/status-badge.tsx +24 -24
- package/src/patterns/user-menu.tsx +218 -218
- package/src/patterns/workspace-switcher.tsx +176 -173
- package/src/styles.css +165 -165
- package/src/templates/admin-dashboard.tsx +44 -44
- package/src/templates/auth-layout.tsx +30 -30
- package/src/templates/login-form.tsx +129 -129
- package/src/templates/signup-form.tsx +177 -177
package/AGENTS.md
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
# Padrão obrigatório
|
|
2
|
-
|
|
3
|
-
- Apps e catálogo usam a versão estável mais recente do Next.js (confira com `npm view next version` antes de mudar dependências). O catálogo (`catalog/`) é um app Next.js como qualquer outro, com a mesma estrutura do starter; não use Vite nem outro framework.
|
|
4
|
-
- Toda mudança na biblioteca que afete apps entra no mesmo commit no starter (`starters/next-app`) e no catálogo. O starter sempre depende da versão atual da biblioteca (o teste `npm run test:starter` falha se divergir) e deve compilar e passar lint/typecheck/build com ela.
|
|
5
|
-
- Todo app é bilíngue: inglês (`en`) e português (`pt-BR`). Textos de UI ficam em catálogos `defineMessages` com as duas línguas; nada de texto fixo em componentes. Use `Preferences`/`PreferenceControls` da biblioteca para idioma e tema.
|
|
6
|
-
- Mantenha o texto mínimo: sem descrições, avisos ou rótulos que não ajudem a tarefa.
|
|
7
|
-
- `patterns/data-table` (TanStack Table, vindo da Numa) é a única tabela de dados: filtros por coluna, ordenação múltipla, colunas reordenáveis/ocultáveis/redimensionáveis, seleção, persistência e estados. Melhorias de tabela são feitas aqui e chegam a todos os apps por versão; apps não mantêm cópias próprias.
|
|
8
|
-
- Ao trazer componentes de outros apps, remova sobrescritas visuais (arredondamento, altura, sombra, padding, cores) e deixe os primitivos da biblioteca definirem o visual; containers usam os raios já adotados aqui (ex.: rounded-2xl em tabelas e listas).
|
|
9
|
-
- Seleção usa sempre o Select (Base UI) da biblioteca; não use select nativo nem NativeSelect (o check:standards bloqueia).
|
|
10
|
-
- Versionamento segue docs/VERSIONING.md (SemVer sobre a API pública). Prefira mudanças aditivas e deprecação a remoções; major só com aprovação explícita do responsável.
|
|
11
|
-
- Teste localmente com portless (`npm run dev` já roda via portless; o catálogo abre em https://majapi-ui.localhost). Não use portas fixas nem localhost:PORT nas instruções.
|
|
12
|
-
|
|
13
|
-
- Novos apps web devem partir de starters/next-app, criado por npm run create:app -- <diretorio-novo>. O starter usa a versão estável do Next.js fixada e validada no manifesto; atualizações devem manter lockfile, CI e revisão de compatibilidade.
|
|
14
|
-
|
|
15
|
-
- A base de primitivas é shadcn sobre Base UI (base-luma), não Radix. Use render para composição e nativeButton=false quando Button renderizar Link/a. Preserve as fronteiras use client da biblioteca em consumidores Next.js.
|
|
16
|
-
|
|
17
|
-
- Esta biblioteca pública é a base obrigatória de todos os apps atuais e futuros
|
|
18
|
-
- Antes de criar UI em um app, procure o componente, variante ou padrão existente aqui. Reutilize-o diretamente como dependência.
|
|
19
|
-
- Se faltar uma capacidade reutilizável, contribua primeiro para esta biblioteca: adicione uma API genérica, documente o comportamento e mostre o uso no catálogo. Depois atualize o app para o commit publicado.
|
|
20
|
-
- Não copie componentes shadcn para apps, não faça forks locais e não use CSS, classes ou wrappers locais para corrigir cores, tipografia, tamanho, estados ou comportamento de um componente compartilhado.
|
|
21
|
-
- Adaptações específicas de domínio e composição de layout ficam no app; capacidades compartilhadas, tokens e variantes ficam aqui. Não traga AWS, autenticação, secrets ou modelos de negócio para a biblioteca.
|
|
22
|
-
- Use o CLI oficial shadcn para adicionar componentes. Preserve a licença upstream e registre adaptações em docs/STANDARDS.md. Imports internos da biblioteca devem ser relativos, sem aliases particulares do consumidor.
|
|
23
|
-
- className nos apps é para layout. Mudanças visuais precisam de tokens, variantes ou padrões oficiais. Evite controles HTML crus quando houver um componente da biblioteca.
|
|
24
|
-
- Todos os fluxos devem incluir estados carregando, vazio, erro, parcial e indisponível quando aplicáveis. Não esconda falhas ou altere dados para o exemplo parecer funcionar.
|
|
25
|
-
- Preserve acessibilidade: nome acessível, foco visível, navegação por teclado, título e descrição de overlays, labels em campos, e texto junto aos estados.
|
|
26
|
-
- Antes de publicar: npm run typecheck, npm run lint, npm run check:standards, npm run build, git diff --check e revisão visual em desktop/mobile. Teste comportamentos novos de risco, sem testes que apenas espelhem markup.
|
|
27
|
-
- Publique código e evidências no GitHub e vincule os commits ao PLAN.md central. Registre breaking changes e migração antes de atualizar consumidores.
|
|
1
|
+
# Padrão obrigatório da Majapi
|
|
2
|
+
|
|
3
|
+
- Apps e catálogo usam a versão estável mais recente do Next.js (confira com `npm view next version` antes de mudar dependências). O catálogo (`catalog/`) é um app Next.js como qualquer outro, com a mesma estrutura do starter; não use Vite nem outro framework.
|
|
4
|
+
- Toda mudança na biblioteca que afete apps entra no mesmo commit no starter (`starters/next-app`) e no catálogo. O starter sempre depende da versão atual da biblioteca (o teste `npm run test:starter` falha se divergir) e deve compilar e passar lint/typecheck/build com ela.
|
|
5
|
+
- Todo app é bilíngue: inglês (`en`) e português (`pt-BR`). Textos de UI ficam em catálogos `defineMessages` com as duas línguas; nada de texto fixo em componentes. Use `Preferences`/`PreferenceControls` da biblioteca para idioma e tema.
|
|
6
|
+
- Mantenha o texto mínimo: sem descrições, avisos ou rótulos que não ajudem a tarefa.
|
|
7
|
+
- `patterns/data-table` (TanStack Table, vindo da Numa) é a única tabela de dados: filtros por coluna, ordenação múltipla, colunas reordenáveis/ocultáveis/redimensionáveis, seleção, persistência e estados. Melhorias de tabela são feitas aqui e chegam a todos os apps por versão; apps não mantêm cópias próprias.
|
|
8
|
+
- Ao trazer componentes de outros apps, remova sobrescritas visuais (arredondamento, altura, sombra, padding, cores) e deixe os primitivos da biblioteca definirem o visual; containers usam os raios já adotados aqui (ex.: rounded-2xl em tabelas e listas).
|
|
9
|
+
- Seleção usa sempre o Select (Base UI) da biblioteca; não use select nativo nem NativeSelect (o check:standards bloqueia).
|
|
10
|
+
- Versionamento segue docs/VERSIONING.md (SemVer sobre a API pública). Prefira mudanças aditivas e deprecação a remoções; major só com aprovação explícita do responsável.
|
|
11
|
+
- Teste localmente com portless (`npm run dev` já roda via portless; o catálogo abre em https://majapi-ui.localhost). Não use portas fixas nem localhost:PORT nas instruções.
|
|
12
|
+
|
|
13
|
+
- Novos apps web devem partir de starters/next-app, criado por npm run create:app -- <diretorio-novo>. O starter usa a versão estável do Next.js fixada e validada no manifesto; atualizações devem manter lockfile, CI e revisão de compatibilidade.
|
|
14
|
+
|
|
15
|
+
- A base de primitivas é shadcn sobre Base UI (base-luma), não Radix. Use render para composição e nativeButton=false quando Button renderizar Link/a. Preserve as fronteiras use client da biblioteca em consumidores Next.js.
|
|
16
|
+
|
|
17
|
+
- Esta biblioteca pública é a base obrigatória de todos os apps atuais e futuros da Majapi, incluindo administrativos, dashboards, login e cadastro. Leia README.md e docs/STANDARDS.md antes de alterar interfaces.
|
|
18
|
+
- Antes de criar UI em um app, procure o componente, variante ou padrão existente aqui. Reutilize-o diretamente como dependência.
|
|
19
|
+
- Se faltar uma capacidade reutilizável, contribua primeiro para esta biblioteca: adicione uma API genérica, documente o comportamento e mostre o uso no catálogo. Depois atualize o app para o commit publicado.
|
|
20
|
+
- Não copie componentes shadcn para apps, não faça forks locais e não use CSS, classes ou wrappers locais para corrigir cores, tipografia, tamanho, estados ou comportamento de um componente compartilhado.
|
|
21
|
+
- Adaptações específicas de domínio e composição de layout ficam no app; capacidades compartilhadas, tokens e variantes ficam aqui. Não traga AWS, autenticação, secrets ou modelos de negócio para a biblioteca.
|
|
22
|
+
- Use o CLI oficial shadcn para adicionar componentes. Preserve a licença upstream e registre adaptações em docs/STANDARDS.md. Imports internos da biblioteca devem ser relativos, sem aliases particulares do consumidor.
|
|
23
|
+
- className nos apps é para layout. Mudanças visuais precisam de tokens, variantes ou padrões oficiais. Evite controles HTML crus quando houver um componente da biblioteca.
|
|
24
|
+
- Todos os fluxos devem incluir estados carregando, vazio, erro, parcial e indisponível quando aplicáveis. Não esconda falhas ou altere dados para o exemplo parecer funcionar.
|
|
25
|
+
- Preserve acessibilidade: nome acessível, foco visível, navegação por teclado, título e descrição de overlays, labels em campos, e texto junto aos estados.
|
|
26
|
+
- Antes de publicar: npm run typecheck, npm run lint, npm run check:standards, npm run build, git diff --check e revisão visual em desktop/mobile. Teste comportamentos novos de risco, sem testes que apenas espelhem markup.
|
|
27
|
+
- Publique código e evidências no GitHub e vincule os commits ao PLAN.md central. Registre breaking changes e migração antes de atualizar consumidores.
|
package/README.md
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
# Majapi UI
|
|
2
|
-
|
|
3
|
-
Biblioteca pública `@majapisoftwares/ui`, base obrigatória de código, interface e experiência de **todos os apps atuais e futuros
|
|
4
|
-
|
|
5
|
-
## Regra central
|
|
6
|
-
|
|
7
|
-
**Contribuir para a biblioteca antes de customizar o app.** Quando um produto precisa de uma variante ou comportamento reutilizável, a mudança deve ser implementada aqui com documentação e exemplo. O produto passa a consumir a versão publicada. Não mantenha cópias, forks ou overrides visuais locais dos componentes.
|
|
8
|
-
|
|
9
|
-
Composição de páginas, lógica de domínio, dados e permissões pertencem ao app. Primitivos, variantes, tokens e comportamentos reutilizáveis pertencem à biblioteca. Consulte [AGENTS.md](AGENTS.md) e [docs/STANDARDS.md](docs/STANDARDS.md).
|
|
10
|
-
|
|
11
|
-
## Criar um app Next.js
|
|
12
|
-
|
|
13
|
-
O starter completo fica em [starters/next-app](starters/next-app), com **Next.js 16.4.3** (versão estável mais recente; mantenha atualizada), React, App Router, TypeScript, Tailwind e esta biblioteca já configurados. A dependência da UI é uma versão npm fixa; não depende de caminhos para este checkout.
|
|
14
|
-
|
|
15
|
-
Dentro deste repositório:
|
|
16
|
-
|
|
17
|
-
```sh
|
|
18
|
-
npm run create:app -- ../meu-app
|
|
19
|
-
cd ../meu-app
|
|
20
|
-
npm ci
|
|
21
|
-
npm run dev
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
O app gerado é bilíngue (en/pt-BR, textos em `src/messages.ts`) e roda via [portless](https://www.npmjs.com/package/portless) em `https://<nome>.localhost`. O comando não sobrescreve diretórios existentes. Copia dashboard, login, cadastro, carregamento/erro/404, regras de agentes, lockfile e CI, sem node_modules, builds ou secrets. Customize por componentes, props e slots. As telas de autenticação são demonstrativas e devem ser conectadas à autenticação real do produto.
|
|
25
|
-
|
|
26
|
-
## Catálogo visual
|
|
27
|
-
|
|
28
|
-
O catálogo em [catalog/](catalog) é um app Next.js com a mesma estrutura do starter, exportado estaticamente para S3 + CloudFront pelo workflow `deploy-catalog` a cada push na `main`.
|
|
29
|
-
|
|
30
|
-
```powershell
|
|
31
|
-
npm ci
|
|
32
|
-
npm run dev
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Abra https://majapi-ui.localhost (via portless). O catálogo permite revisar componentes, temas claro/escuro, tabela com busca/ordenação/paginação/filtro, detalhes e estados de vazio/erro/carregamento. Usa dados demonstrativos explícitos, sem AWS ou credenciais.
|
|
36
|
-
|
|
37
|
-
## Consumir
|
|
38
|
-
|
|
39
|
-
Pacote público **@majapisoftwares/ui@6.0.0**, publicado na organização npm existente. Instale com `npm install --save-exact @majapisoftwares/ui@6.0.0` e versione o lockfile. O pacote exporta fontes TSX para bundlers React/TypeScript (Vite ou Next.js), não para execução direta em Node sem transformação. O starter e o gerador permanecem neste repositório Git, separados do pacote npm da biblioteca.
|
|
40
|
-
|
|
41
|
-
O catálogo público está em **https://ui.majapi.com**. A versão 6 muda AppShell, AdminDashboard e os templates de autenticação; veja [docs/MIGRATION-6.0.md](docs/MIGRATION-6.0.md). A versão 5 substitui a base 4.x com uma mudança incompatível de API e a base antes chamada @workbench/ui. Apps existentes em ^4 permanecem nessa linha até migração explícita.
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
import { Button } from "@majapisoftwares/ui/components/button";
|
|
45
|
-
import { DataTable } from "@majapisoftwares/ui/patterns/data-table";
|
|
46
|
-
import { AdminDashboard } from "@majapisoftwares/ui/templates/admin-dashboard";
|
|
47
|
-
import { AuthLayout } from "@majapisoftwares/ui/templates/auth-layout";
|
|
48
|
-
import { LoginForm } from "@majapisoftwares/ui/templates/login-form";
|
|
49
|
-
import { SignupForm } from "@majapisoftwares/ui/templates/signup-form";
|
|
50
|
-
import {
|
|
51
|
-
Preferences,
|
|
52
|
-
PreferenceControls,
|
|
53
|
-
} from "@majapisoftwares/ui/patterns/preferences";
|
|
54
|
-
import { defineMessages, useMessages } from "@majapisoftwares/ui/lib/i18n";
|
|
55
|
-
import "@majapisoftwares/ui/styles.css";
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
O CSS inclui os tokens, fontes locais e o Tailwind, com `@source` da biblioteca. O app precisa processar esse CSS com Tailwind v4.
|
|
59
|
-
|
|
60
|
-
## Contribuir e validar
|
|
61
|
-
|
|
62
|
-
A sidebar do `AppShell` tem três modos (expandida, compacta e escondida), redimensionável pela borda, com troca de modo pela largura, menu de clique direito e Ctrl/⌘+B. Templates iniciais: **AdminDashboard**, **AuthLayout**, **LoginForm** e **SignupForm**. Configure marca, navegação, textos, dados, ações e conteúdo por props/slots React. Variações de tema são definidas e documentadas na biblioteca. Formulários recebem callbacks tipados; autenticação real, validação no servidor, sessões e autorização pertencem ao app. O catálogo demonstra os templates sem enviar ou persistir senhas.
|
|
63
|
-
|
|
64
|
-
1. Leia o padrão e procure o primitivo/padrão existente.
|
|
65
|
-
2. Adicione uma API reutilizável ou variante oficial, com defaults compatíveis e textos em en/pt-BR.
|
|
66
|
-
3. Documente motivos, estados e migração; adicione exemplo no catálogo e atualize o starter no mesmo commit.
|
|
67
|
-
4. Valide tipos, lint, padrões, build, teclado e visual desktop/mobile.
|
|
68
|
-
5. Publique o commit e atualize o consumidor para esse commit; registre no plano.
|
|
69
|
-
|
|
70
|
-
```powershell
|
|
71
|
-
npm run typecheck
|
|
72
|
-
npm run lint
|
|
73
|
-
npm run check:standards
|
|
74
|
-
npm run build
|
|
75
|
-
npm run test:starter
|
|
76
|
-
git diff --check
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
Os componentes foram instalados pelo CLI shadcn 4.22.1, preset base-luma e Base UI 1.9.0. A versão 0.2 migra a base anterior Radix; veja [docs/MIGRATION-0.2.md](docs/MIGRATION-0.2.md). Atribuição upstream: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). O Cloud Manager é o primeiro consumidor real.
|
|
1
|
+
# Majapi UI
|
|
2
|
+
|
|
3
|
+
Biblioteca pública `@majapisoftwares/ui`, base obrigatória de código, interface e experiência de **todos os apps atuais e futuros da Majapi**, baseada em shadcn/ui (**Base UI / base-luma**), React e Tailwind CSS v4. Repositório: https://github.com/majapisoftwares/ui.
|
|
4
|
+
|
|
5
|
+
## Regra central
|
|
6
|
+
|
|
7
|
+
**Contribuir para a biblioteca antes de customizar o app.** Quando um produto precisa de uma variante ou comportamento reutilizável, a mudança deve ser implementada aqui com documentação e exemplo. O produto passa a consumir a versão publicada. Não mantenha cópias, forks ou overrides visuais locais dos componentes.
|
|
8
|
+
|
|
9
|
+
Composição de páginas, lógica de domínio, dados e permissões pertencem ao app. Primitivos, variantes, tokens e comportamentos reutilizáveis pertencem à biblioteca. Consulte [AGENTS.md](AGENTS.md) e [docs/STANDARDS.md](docs/STANDARDS.md).
|
|
10
|
+
|
|
11
|
+
## Criar um app Next.js
|
|
12
|
+
|
|
13
|
+
O starter completo fica em [starters/next-app](starters/next-app), com **Next.js 16.4.3** (versão estável mais recente; mantenha atualizada), React, App Router, TypeScript, Tailwind e esta biblioteca já configurados. A dependência da UI é uma versão npm fixa; não depende de caminhos para este checkout.
|
|
14
|
+
|
|
15
|
+
Dentro deste repositório:
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm run create:app -- ../meu-app
|
|
19
|
+
cd ../meu-app
|
|
20
|
+
npm ci
|
|
21
|
+
npm run dev
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
O app gerado é bilíngue (en/pt-BR, textos em `src/messages.ts`) e roda via [portless](https://www.npmjs.com/package/portless) em `https://<nome>.localhost`. O comando não sobrescreve diretórios existentes. Copia dashboard, login, cadastro, carregamento/erro/404, regras de agentes, lockfile e CI, sem node_modules, builds ou secrets. Customize por componentes, props e slots. As telas de autenticação são demonstrativas e devem ser conectadas à autenticação real do produto.
|
|
25
|
+
|
|
26
|
+
## Catálogo visual
|
|
27
|
+
|
|
28
|
+
O catálogo em [catalog/](catalog) é um app Next.js com a mesma estrutura do starter, exportado estaticamente para S3 + CloudFront pelo workflow `deploy-catalog` a cada push na `main`.
|
|
29
|
+
|
|
30
|
+
```powershell
|
|
31
|
+
npm ci
|
|
32
|
+
npm run dev
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Abra https://majapi-ui.localhost (via portless). O catálogo permite revisar componentes, temas claro/escuro, tabela com busca/ordenação/paginação/filtro, detalhes e estados de vazio/erro/carregamento. Usa dados demonstrativos explícitos, sem AWS ou credenciais.
|
|
36
|
+
|
|
37
|
+
## Consumir
|
|
38
|
+
|
|
39
|
+
Pacote público **@majapisoftwares/ui@6.0.0**, publicado na organização npm existente. Instale com `npm install --save-exact @majapisoftwares/ui@6.0.0` e versione o lockfile. O pacote exporta fontes TSX para bundlers React/TypeScript (Vite ou Next.js), não para execução direta em Node sem transformação. O starter e o gerador permanecem neste repositório Git, separados do pacote npm da biblioteca.
|
|
40
|
+
|
|
41
|
+
O catálogo público está em **https://ui.majapi.com**. A versão 6 muda AppShell, AdminDashboard e os templates de autenticação; veja [docs/MIGRATION-6.0.md](docs/MIGRATION-6.0.md). A versão 5 substitui a base 4.x com uma mudança incompatível de API e a base antes chamada @workbench/ui. Apps existentes em ^4 permanecem nessa linha até migração explícita.
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Button } from "@majapisoftwares/ui/components/button";
|
|
45
|
+
import { DataTable } from "@majapisoftwares/ui/patterns/data-table";
|
|
46
|
+
import { AdminDashboard } from "@majapisoftwares/ui/templates/admin-dashboard";
|
|
47
|
+
import { AuthLayout } from "@majapisoftwares/ui/templates/auth-layout";
|
|
48
|
+
import { LoginForm } from "@majapisoftwares/ui/templates/login-form";
|
|
49
|
+
import { SignupForm } from "@majapisoftwares/ui/templates/signup-form";
|
|
50
|
+
import {
|
|
51
|
+
Preferences,
|
|
52
|
+
PreferenceControls,
|
|
53
|
+
} from "@majapisoftwares/ui/patterns/preferences";
|
|
54
|
+
import { defineMessages, useMessages } from "@majapisoftwares/ui/lib/i18n";
|
|
55
|
+
import "@majapisoftwares/ui/styles.css";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
O CSS inclui os tokens, fontes locais e o Tailwind, com `@source` da biblioteca. O app precisa processar esse CSS com Tailwind v4.
|
|
59
|
+
|
|
60
|
+
## Contribuir e validar
|
|
61
|
+
|
|
62
|
+
A sidebar do `AppShell` tem três modos (expandida, compacta e escondida), redimensionável pela borda, com troca de modo pela largura, menu de clique direito e Ctrl/⌘+B. Templates iniciais: **AdminDashboard**, **AuthLayout**, **LoginForm** e **SignupForm**. Configure marca, navegação, textos, dados, ações e conteúdo por props/slots React. Variações de tema são definidas e documentadas na biblioteca. Formulários recebem callbacks tipados; autenticação real, validação no servidor, sessões e autorização pertencem ao app. O catálogo demonstra os templates sem enviar ou persistir senhas.
|
|
63
|
+
|
|
64
|
+
1. Leia o padrão e procure o primitivo/padrão existente.
|
|
65
|
+
2. Adicione uma API reutilizável ou variante oficial, com defaults compatíveis e textos em en/pt-BR.
|
|
66
|
+
3. Documente motivos, estados e migração; adicione exemplo no catálogo e atualize o starter no mesmo commit.
|
|
67
|
+
4. Valide tipos, lint, padrões, build, teclado e visual desktop/mobile.
|
|
68
|
+
5. Publique o commit e atualize o consumidor para esse commit; registre no plano.
|
|
69
|
+
|
|
70
|
+
```powershell
|
|
71
|
+
npm run typecheck
|
|
72
|
+
npm run lint
|
|
73
|
+
npm run check:standards
|
|
74
|
+
npm run build
|
|
75
|
+
npm run test:starter
|
|
76
|
+
git diff --check
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Os componentes foram instalados pelo CLI shadcn 4.22.1, preset base-luma e Base UI 1.9.0. A versão 0.2 migra a base anterior Radix; veja [docs/MIGRATION-0.2.md](docs/MIGRATION-0.2.md). Atribuição upstream: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). O Cloud Manager é o primeiro consumidor real.
|
package/THIRD_PARTY_NOTICES.md
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
# Third-party notices
|
|
2
|
-
|
|
3
|
-
The primitives in src/components/ui were generated with shadcn/ui 4.22.1, base-luma preset (Base UI), from https://github.com/shadcn-ui/ui and https://ui.shadcn.com. They are distributed under the MIT License:
|
|
4
|
-
|
|
5
|
-
MIT License
|
|
6
|
-
|
|
7
|
-
Copyright (c) 2023 shadcn
|
|
8
|
-
|
|
9
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
10
|
-
|
|
11
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
12
|
-
|
|
13
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
14
|
-
|
|
15
|
-
src/components/ui/orb.tsx and orb.css are adapted from AICSS Orbs (https://github.com/kvnkld/aicss, registry https://www.aicss.dev/r/orbs.json): colors mapped to theme tokens, labels translated, CSS module turned into orb-prefixed global CSS. MIT License:
|
|
16
|
-
|
|
17
|
-
MIT License
|
|
18
|
-
|
|
19
|
-
Copyright (c) 2026 AICSS
|
|
20
|
-
|
|
21
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
22
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
23
|
-
in the Software without restriction, including without limitation the rights
|
|
24
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
25
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
26
|
-
furnished to do so, subject to the following conditions:
|
|
27
|
-
|
|
28
|
-
The above copyright notice and this permission notice shall be included in all
|
|
29
|
-
copies or substantial portions of the Software.
|
|
30
|
-
|
|
31
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
32
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
33
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
34
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
35
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
36
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
|
-
SOFTWARE.
|
|
38
|
-
|
|
39
|
-
Other dependencies retain their own licenses in their package metadata. This notice does not change ownership or licensing of Workbench-authored code.
|
|
1
|
+
# Third-party notices
|
|
2
|
+
|
|
3
|
+
The primitives in src/components/ui were generated with shadcn/ui 4.22.1, base-luma preset (Base UI), from https://github.com/shadcn-ui/ui and https://ui.shadcn.com. They are distributed under the MIT License:
|
|
4
|
+
|
|
5
|
+
MIT License
|
|
6
|
+
|
|
7
|
+
Copyright (c) 2023 shadcn
|
|
8
|
+
|
|
9
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
14
|
+
|
|
15
|
+
src/components/ui/orb.tsx and orb.css are adapted from AICSS Orbs (https://github.com/kvnkld/aicss, registry https://www.aicss.dev/r/orbs.json): colors mapped to theme tokens, labels translated, CSS module turned into orb-prefixed global CSS. MIT License:
|
|
16
|
+
|
|
17
|
+
MIT License
|
|
18
|
+
|
|
19
|
+
Copyright (c) 2026 AICSS
|
|
20
|
+
|
|
21
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
22
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
23
|
+
in the Software without restriction, including without limitation the rights
|
|
24
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
25
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
26
|
+
furnished to do so, subject to the following conditions:
|
|
27
|
+
|
|
28
|
+
The above copyright notice and this permission notice shall be included in all
|
|
29
|
+
copies or substantial portions of the Software.
|
|
30
|
+
|
|
31
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
32
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
33
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
34
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
35
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
36
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
|
+
SOFTWARE.
|
|
38
|
+
|
|
39
|
+
Other dependencies retain their own licenses in their package metadata. This notice does not change ownership or licensing of Workbench-authored code.
|
package/components.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://ui.shadcn.com/schema.json",
|
|
3
|
-
"style": "base-luma",
|
|
4
|
-
"rsc": false,
|
|
5
|
-
"tsx": true,
|
|
6
|
-
"tailwind": {
|
|
7
|
-
"config": "",
|
|
8
|
-
"css": "src/styles.css",
|
|
9
|
-
"baseColor": "neutral",
|
|
10
|
-
"cssVariables": true,
|
|
11
|
-
"prefix": ""
|
|
12
|
-
},
|
|
13
|
-
"iconLibrary": "lucide",
|
|
14
|
-
"rtl": false,
|
|
15
|
-
"aliases": {
|
|
16
|
-
"components": "@/components",
|
|
17
|
-
"utils": "@/lib/utils",
|
|
18
|
-
"ui": "@/components/ui",
|
|
19
|
-
"lib": "@/lib",
|
|
20
|
-
"hooks": "@/hooks"
|
|
21
|
-
},
|
|
22
|
-
"menuColor": "default",
|
|
23
|
-
"menuAccent": "subtle",
|
|
24
|
-
"registries": {}
|
|
25
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ui.shadcn.com/schema.json",
|
|
3
|
+
"style": "base-luma",
|
|
4
|
+
"rsc": false,
|
|
5
|
+
"tsx": true,
|
|
6
|
+
"tailwind": {
|
|
7
|
+
"config": "",
|
|
8
|
+
"css": "src/styles.css",
|
|
9
|
+
"baseColor": "neutral",
|
|
10
|
+
"cssVariables": true,
|
|
11
|
+
"prefix": ""
|
|
12
|
+
},
|
|
13
|
+
"iconLibrary": "lucide",
|
|
14
|
+
"rtl": false,
|
|
15
|
+
"aliases": {
|
|
16
|
+
"components": "@/components",
|
|
17
|
+
"utils": "@/lib/utils",
|
|
18
|
+
"ui": "@/components/ui",
|
|
19
|
+
"lib": "@/lib",
|
|
20
|
+
"hooks": "@/hooks"
|
|
21
|
+
},
|
|
22
|
+
"menuColor": "default",
|
|
23
|
+
"menuAccent": "subtle",
|
|
24
|
+
"registries": {}
|
|
25
|
+
}
|
package/docs/MIGRATION-0.2.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
# Migração 0.1 → 0.2: shadcn sobre Base UI
|
|
2
|
-
|
|
3
|
-
A base inicial era radix-nova. A versão 0.2 usa base-nova e @base-ui/react 1.9.0, regenerados pelo CLI oficial shadcn em diretório limpo e adaptados para preservar os contratos do Workbench. Tokens, estilos compartilhados, variantes navigation/success/warning e nomes dos padrões permanecem.
|
|
4
|
-
|
|
5
|
-
## Mudanças de API
|
|
6
|
-
|
|
7
|
-
- Primitivas com composição usam render, não asChild. Exemplo: `<Button render={<Link href="/dashboard" />} nativeButton={false}>Dashboard</Button>`.
|
|
8
|
-
- Sheet usa Dialog de Base UI, com Backdrop/Popup e composição render. Os padrões DetailsSheet e DetailList mantêm suas props.
|
|
9
|
-
- Badge usa useRender/mergeProps de Base UI. Button usa ButtonPrimitive.Props. Considere essas mudanças incompatíveis para consumidores diretos das primitivas antigas.
|
|
10
|
-
- Componentes e padrões interativos têm use client explícito. Dados vindos do servidor devem ser serializáveis; callbacks de UI e definição de colunas com funções ficam em Client Components.
|
|
11
|
-
- Não importe radix-ui ou @radix-ui diretamente nos consumidores. O verificador de padrões detecta esses imports.
|
|
12
|
-
|
|
13
|
-
## Atualizar um produto
|
|
14
|
-
|
|
15
|
-
1. Atualize a dependência @majapisoftwares/ui para o commit publicado da versão 0.2 e regenere o lockfile.
|
|
16
|
-
2. Substitua asChild por render e nativeButton=false em links/triggers não nativos.
|
|
17
|
-
3. Preserve imports dos padrões compostos, evitando reimplementar o comportamento no produto.
|
|
18
|
-
4. Execute typecheck, lint/padrões, build e verificações de navegação, foco, overlays, campos e telas menores.
|
|
19
|
-
|
|
20
|
-
O starter Next.js é o caminho padrão para novos apps. Autenticação real e permissões continuam sendo responsabilidade do produto, sem fallback ou simulação de login.
|
|
1
|
+
# Migração 0.1 → 0.2: shadcn sobre Base UI
|
|
2
|
+
|
|
3
|
+
A base inicial era radix-nova. A versão 0.2 usa base-nova e @base-ui/react 1.9.0, regenerados pelo CLI oficial shadcn em diretório limpo e adaptados para preservar os contratos do Workbench. Tokens, estilos compartilhados, variantes navigation/success/warning e nomes dos padrões permanecem.
|
|
4
|
+
|
|
5
|
+
## Mudanças de API
|
|
6
|
+
|
|
7
|
+
- Primitivas com composição usam render, não asChild. Exemplo: `<Button render={<Link href="/dashboard" />} nativeButton={false}>Dashboard</Button>`.
|
|
8
|
+
- Sheet usa Dialog de Base UI, com Backdrop/Popup e composição render. Os padrões DetailsSheet e DetailList mantêm suas props.
|
|
9
|
+
- Badge usa useRender/mergeProps de Base UI. Button usa ButtonPrimitive.Props. Considere essas mudanças incompatíveis para consumidores diretos das primitivas antigas.
|
|
10
|
+
- Componentes e padrões interativos têm use client explícito. Dados vindos do servidor devem ser serializáveis; callbacks de UI e definição de colunas com funções ficam em Client Components.
|
|
11
|
+
- Não importe radix-ui ou @radix-ui diretamente nos consumidores. O verificador de padrões detecta esses imports.
|
|
12
|
+
|
|
13
|
+
## Atualizar um produto
|
|
14
|
+
|
|
15
|
+
1. Atualize a dependência @majapisoftwares/ui para o commit publicado da versão 0.2 e regenere o lockfile.
|
|
16
|
+
2. Substitua asChild por render e nativeButton=false em links/triggers não nativos.
|
|
17
|
+
3. Preserve imports dos padrões compostos, evitando reimplementar o comportamento no produto.
|
|
18
|
+
4. Execute typecheck, lint/padrões, build e verificações de navegação, foco, overlays, campos e telas menores.
|
|
19
|
+
|
|
20
|
+
O starter Next.js é o caminho padrão para novos apps. Autenticação real e permissões continuam sendo responsabilidade do produto, sem fallback ou simulação de login.
|
package/docs/MIGRATION-6.0.md
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
# Migração para 6.0
|
|
2
|
-
|
|
3
|
-
Visual padrão do shadcn (tema neutral, Geist), textos em inglês e português e nova sidebar.
|
|
4
|
-
|
|
5
|
-
## Idiomas
|
|
6
|
-
|
|
7
|
-
Envolva o app com `Preferences` (idioma + tema) ou `LocaleProvider`. Os textos embutidos da biblioteca seguem o idioma ativo. Textos do app vão em `defineMessages({ en, "pt-BR" })` e são lidos com `useMessages`.
|
|
8
|
-
|
|
9
|
-
## AppShell / AdminDashboard
|
|
10
|
-
|
|
11
|
-
- `brand`, `brandMark` → `logo` (marca quadrada, fica fixa em todos os modos) e `name` (texto que some em fade no modo compacto).
|
|
12
|
-
- `navigation` passa a ser uma lista de grupos: `[{ label?, items: [...] }]`.
|
|
13
|
-
- `context` → `header` (ex.: breadcrumb) e `actions` (ex.: `PreferenceControls`).
|
|
14
|
-
- `defaultMode` (`open` | `compact` | `closed`) e `defaultWidth` opcionais; o estado é salvo no cookie `sidebar_state` (`parseSidebarCookie` lê no servidor).
|
|
15
|
-
- `AdminDashboard`: `actions` da página → `pageActions`; `description` opcional.
|
|
16
|
-
|
|
17
|
-
## Autenticação
|
|
18
|
-
|
|
19
|
-
- `AuthLayout`: `title`, `description`, `aside`, `brandMark` removidos; `brand` e `footer` opcionais.
|
|
20
|
-
- `LoginForm`/`SignupForm`: títulos e rótulos têm padrão traduzido; props de texto continuam aceitas para sobrescrever.
|
|
21
|
-
|
|
22
|
-
## Outros
|
|
23
|
-
|
|
24
|
-
- `PageHeader`: `eyebrow` removido, `description` opcional.
|
|
25
|
-
- `DetailsSheet`: `description` opcional.
|
|
26
|
-
- `DataTable` agora é a tabela completa da Numa, sobre TanStack Table:
|
|
27
|
-
- `columns` são `ColumnDef` do TanStack (`accessorKey`/`accessorFn`, `cell`, `meta: { label, align, filter }`); `rows` → `data`.
|
|
28
|
-
- Busca global embutida (`searchPlaceholder`, `initialGlobalFilter`); `searchValue`/`searchLabel`/`defaultQuery` saem.
|
|
29
|
-
- `onOpen`/`rowLabel` → `onRowClick`/`getRowLabel`; `filters` → `toolbarStart`/`toolbarEnd`/`toolbarBelow` (recebem a instância da tabela).
|
|
30
|
-
- Filtros por coluna (`text`, `multi` com incluir/excluir, `number-range`, `date-range`, `custom`), ordenação múltipla, colunas reordenáveis/ocultáveis/redimensionáveis, seleção de linhas e persistência em `localStorage` com `storageKey`.
|
|
31
|
-
- Estados mantidos: `loading`, `error` + `onRetry`, `warning`, `unavailable`, `emptyState`/`emptyMessage`.
|
|
32
|
-
- Classes `wb-*` removidas.
|
|
33
|
-
- `NativeSelect` removido: use `Select` (Base UI) com `items` para o rótulo do valor. O `check:ui` acusa imports de `native-select`. Variante `navigation` do Button removida.
|
|
1
|
+
# Migração para 6.0
|
|
2
|
+
|
|
3
|
+
Visual padrão do shadcn (tema neutral, Geist), textos em inglês e português e nova sidebar.
|
|
4
|
+
|
|
5
|
+
## Idiomas
|
|
6
|
+
|
|
7
|
+
Envolva o app com `Preferences` (idioma + tema) ou `LocaleProvider`. Os textos embutidos da biblioteca seguem o idioma ativo. Textos do app vão em `defineMessages({ en, "pt-BR" })` e são lidos com `useMessages`.
|
|
8
|
+
|
|
9
|
+
## AppShell / AdminDashboard
|
|
10
|
+
|
|
11
|
+
- `brand`, `brandMark` → `logo` (marca quadrada, fica fixa em todos os modos) e `name` (texto que some em fade no modo compacto).
|
|
12
|
+
- `navigation` passa a ser uma lista de grupos: `[{ label?, items: [...] }]`.
|
|
13
|
+
- `context` → `header` (ex.: breadcrumb) e `actions` (ex.: `PreferenceControls`).
|
|
14
|
+
- `defaultMode` (`open` | `compact` | `closed`) e `defaultWidth` opcionais; o estado é salvo no cookie `sidebar_state` (`parseSidebarCookie` lê no servidor).
|
|
15
|
+
- `AdminDashboard`: `actions` da página → `pageActions`; `description` opcional.
|
|
16
|
+
|
|
17
|
+
## Autenticação
|
|
18
|
+
|
|
19
|
+
- `AuthLayout`: `title`, `description`, `aside`, `brandMark` removidos; `brand` e `footer` opcionais.
|
|
20
|
+
- `LoginForm`/`SignupForm`: títulos e rótulos têm padrão traduzido; props de texto continuam aceitas para sobrescrever.
|
|
21
|
+
|
|
22
|
+
## Outros
|
|
23
|
+
|
|
24
|
+
- `PageHeader`: `eyebrow` removido, `description` opcional.
|
|
25
|
+
- `DetailsSheet`: `description` opcional.
|
|
26
|
+
- `DataTable` agora é a tabela completa da Numa, sobre TanStack Table:
|
|
27
|
+
- `columns` são `ColumnDef` do TanStack (`accessorKey`/`accessorFn`, `cell`, `meta: { label, align, filter }`); `rows` → `data`.
|
|
28
|
+
- Busca global embutida (`searchPlaceholder`, `initialGlobalFilter`); `searchValue`/`searchLabel`/`defaultQuery` saem.
|
|
29
|
+
- `onOpen`/`rowLabel` → `onRowClick`/`getRowLabel`; `filters` → `toolbarStart`/`toolbarEnd`/`toolbarBelow` (recebem a instância da tabela).
|
|
30
|
+
- Filtros por coluna (`text`, `multi` com incluir/excluir, `number-range`, `date-range`, `custom`), ordenação múltipla, colunas reordenáveis/ocultáveis/redimensionáveis, seleção de linhas e persistência em `localStorage` com `storageKey`.
|
|
31
|
+
- Estados mantidos: `loading`, `error` + `onRetry`, `warning`, `unavailable`, `emptyState`/`emptyMessage`.
|
|
32
|
+
- Classes `wb-*` removidas.
|
|
33
|
+
- `NativeSelect` removido: use `Select` (Base UI) com `items` para o rótulo do valor. O `check:ui` acusa imports de `native-select`. Variante `navigation` do Button removida.
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
# Validação do starter Next.js e Base UI
|
|
2
|
-
|
|
3
|
-
- Next.js e create-next-app 16.4.3 conferidos no registry npm e na documentação oficial; React 19.3.1; UI 0.2 com shadcn base-nova e @base-ui/react 1.9.0.
|
|
4
|
-
- Biblioteca regenerada pelo CLI oficial shadcn em diretório limpo, preservando tokens e variantes compartilhadas. Imports diretos de Radix removidos; fronteiras use client explícitas nas primitivas e padrões interativos.
|
|
5
|
-
- Biblioteca: typecheck, ESLint, verificação de padrões e build Vite aprovados.
|
|
6
|
-
- Starter: lint, typegen/TypeScript, check:ui e build Next.js de produção aprovados para /dashboard, /login e /signup.
|
|
7
|
-
- Um projeto independente foi criado pelo comando create:app e validado com npm ci, lint, tipos, padrões e build. O projeto não depende de um checkout local da biblioteca.
|
|
8
|
-
- Teste do gerador confirma nome/lockfile coerentes, rotas, regras de agentes, workflow, ausência de node_modules e recusa de sobrescrita de diretório existente.
|
|
9
|
-
- npm pack --dry-run foi inspecionado: starter incluído, sem node_modules, .next, tsbuildinfo ou arquivos de ambiente no pacote.
|
|
10
|
-
- Navegador com build de produção: dashboard, navegação para login/cadastro, painel de detalhes Base UI, devolução de foco ao fechar, console sem erros/warnings e revisão de cadastro em viewport mobile de 500px.
|
|
11
|
-
- As telas usam dados demonstrativos explícitos. Nenhuma credencial foi enviada nem conta criada; autenticação real e proteção das rotas são integração do produto consumidor.
|
|
12
|
-
- Cloud Manager atualizado para a mesma UI Base UI: build, types, padrões e 20 testes passaram.
|
|
13
|
-
|
|
14
|
-
A CI pública valida tanto a biblioteca quanto o starter Next.js. O processo de produção local do starter foi aberto em http://127.0.0.1:4319 para revisão. Não houve deploy público nem provisionamento de infraestrutura.
|
|
1
|
+
# Validação do starter Next.js e Base UI
|
|
2
|
+
|
|
3
|
+
- Next.js e create-next-app 16.4.3 conferidos no registry npm e na documentação oficial; React 19.3.1; UI 0.2 com shadcn base-nova e @base-ui/react 1.9.0.
|
|
4
|
+
- Biblioteca regenerada pelo CLI oficial shadcn em diretório limpo, preservando tokens e variantes compartilhadas. Imports diretos de Radix removidos; fronteiras use client explícitas nas primitivas e padrões interativos.
|
|
5
|
+
- Biblioteca: typecheck, ESLint, verificação de padrões e build Vite aprovados.
|
|
6
|
+
- Starter: lint, typegen/TypeScript, check:ui e build Next.js de produção aprovados para /dashboard, /login e /signup.
|
|
7
|
+
- Um projeto independente foi criado pelo comando create:app e validado com npm ci, lint, tipos, padrões e build. O projeto não depende de um checkout local da biblioteca.
|
|
8
|
+
- Teste do gerador confirma nome/lockfile coerentes, rotas, regras de agentes, workflow, ausência de node_modules e recusa de sobrescrita de diretório existente.
|
|
9
|
+
- npm pack --dry-run foi inspecionado: starter incluído, sem node_modules, .next, tsbuildinfo ou arquivos de ambiente no pacote.
|
|
10
|
+
- Navegador com build de produção: dashboard, navegação para login/cadastro, painel de detalhes Base UI, devolução de foco ao fechar, console sem erros/warnings e revisão de cadastro em viewport mobile de 500px.
|
|
11
|
+
- As telas usam dados demonstrativos explícitos. Nenhuma credencial foi enviada nem conta criada; autenticação real e proteção das rotas são integração do produto consumidor.
|
|
12
|
+
- Cloud Manager atualizado para a mesma UI Base UI: build, types, padrões e 20 testes passaram.
|
|
13
|
+
|
|
14
|
+
A CI pública valida tanto a biblioteca quanto o starter Next.js. O processo de produção local do starter foi aberto em http://127.0.0.1:4319 para revisão. Não houve deploy público nem provisionamento de infraestrutura.
|
package/docs/STANDARDS.md
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
# Padrão v1 de código e UI/UX
|
|
2
|
-
|
|
3
|
-
Base atual: shadcn base-luma com @base-ui/react. Os componentes interativos expõem fronteiras use client para uso no Next.js App Router. A migração da API Radix está documentada em MIGRATION-0.2.md.
|
|
4
|
-
|
|
5
|
-
## Arquitetura e código
|
|
6
|
-
|
|
7
|
-
TypeScript em modo strict, React com componentes funcionais e composição. APIs genéricas tipadas; sem any para contornar contratos, estado derivado duplicado ou dependências de domínio na UI. Imports públicos por subpath, internos relativos. Dependências e lockfile versionados. Interface, acesso a dados, autorização e operações de infraestrutura permanecem separados. Entradas externas são validadas no servidor; erros e resultados incompletos são explícitos.
|
|
8
|
-
|
|
9
|
-
## Base visual
|
|
10
|
-
|
|
11
|
-
`src/styles.css` é a fonte dos tokens de cor, tipografia, raio, bordas, foco, estados e estrutura. Preset base-luma do shadcn (o mesmo da home de ui.shadcn.com: cantos bem arredondados, campos com fundo suave, sombras leves) sobre o tema neutral, fonte Geist, foco visível e espaço consistente. Cores são semânticas: background, foreground, primary, muted, destructive, success e warning. Temas claro/escuro preservam a semântica. Tokens e padrões podem evoluir nesta biblioteca, nunca por overrides locais em um produto.
|
|
12
|
-
|
|
13
|
-
Primitivos shadcn ficam em src/components/ui (Button, Badge, Card, Input, Table, Sheet, Sidebar, Tooltip, DropdownMenu, ContextMenu, Breadcrumb, Avatar, Checkbox, Collapsible, Alert, Empty, Select, Separator, Skeleton, Tabs, Field e Label). Padrões compostos: AppShell (slots `sidebarHeader` e `footer`), WorkspaceSwitcher, UserMenu, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet, DetailList, Preferences, PreferenceControls e MajapiLogo. Templates React: AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
|
|
14
|
-
|
|
15
|
-
## Comportamentos de UX
|
|
16
|
-
|
|
17
|
-
- Ação primária destaca o objetivo; secundária usa outline/secondary; destrutiva usa variante própria e depende das autorizações do app.
|
|
18
|
-
- Busca, filtros, ordenação por coluna e paginação seguem DataTable (TanStack Table; origem: tabela da Numa). Filtros por coluna usam `meta.filter`; preferências do usuário persistem por `storageKey`. Telas centradas em uma tabela usam `AppShell fillHeight` + `DataTable fillHeight`: a tabela ocupa a altura restante e rola internamente, com cabeçalho, busca e paginação sempre visíveis.
|
|
19
|
-
- Áreas com rolagem interna usam `scroll-fade` do shadcn (só `scroll-fade-b` quando há cabeçalho fixo dentro do contêiner) e as barras de rolagem finas globais, que aparecem com o ponteiro sobre a área e seguem o tema (`color-scheme`).
|
|
20
|
-
- Espaçamento da página em uma escala só: padding, gap entre seções e entre cards de 16px no mobile e 24px a partir de md; o cabeçalho da página e o da sidebar têm a mesma altura (56px). Filtros de domínio são slots tipados do app. Não reconstruir tabelas por tela. Persistência não é habilitada por padrão para evitar guardar buscas sensíveis; quando necessária, deve evoluir como capacidade compartilhada com controle explícito.
|
|
21
|
-
- Estados com texto e cor: sucesso, aviso, erro e desconhecido. Nunca traduzir ausência de informação em zero ou sucesso.
|
|
22
|
-
- Carregamento usa Skeleton, vazio usa Empty, falhas usam Alert e detalhes usam DetailsSheet com título, descrição, foco preso ao overlay, Escape e devolução do foco ao fechar.
|
|
23
|
-
- Em telas pequenas, controles têm texto de pelo menos 16px e alvo de 44px, navegação se reorganiza e tabelas têm rolagem interna, sem rolagem horizontal da página.
|
|
24
|
-
- Preferência por movimento reduzido é respeitada. A ordem de leitura deve acompanhar a ordem visual. Ícones sozinhos exigem nome acessível.
|
|
25
|
-
- Distinguir dados demonstrativos de dados reais; mostrar observação e cobertura em telas de infraestrutura. Todo texto existe em inglês e português (`defineMessages`); texto mínimo, sem descrições que não ajudem a tarefa.
|
|
26
|
-
|
|
27
|
-
## Evolução sem customizações isoladas
|
|
28
|
-
|
|
29
|
-
Uma necessidade reutilizável entra na biblioteca por prop, variante, token ou novo padrão documentado. Não adicionar props específicas como awsAccountId a componentes genéricos. Novas variantes preservam defaults; mudanças incompatíveis exigem versão/migração explícitas e atualização coordenada dos consumidores. A versão semântica identifica a API, e o commit Git fixo identifica o código efetivamente consumido.
|
|
30
|
-
|
|
31
|
-
AGENTS.md nos apps exige contribuição upstream antes de uso. O verificador estático bloqueia primitivas locais e cores avulsas em consumidores; não substitui revisão humana de design, acessibilidade e comportamento. O catálogo e o primeiro consumidor devem ser revisados em navegador.
|
|
32
|
-
|
|
33
|
-
## Adaptações do upstream
|
|
34
|
-
|
|
35
|
-
- Imports internos relativos e `"use client"` são aplicados por `npm run normalize:ui` após o CLI do shadcn.
|
|
36
|
-
- Sheet traduz o nome acessível do fechamento pelo idioma ativo.
|
|
37
|
-
- Sidebar: três modos (open/compact/closed), largura redimensionável (208–448px) com troca de modo por largura, menu de clique direito, tooltip que fecha ao clicar e textos traduzidos.
|
|
38
|
-
- use-mobile usa useSyncExternalStore (compatível com SSR e com a regra de hooks).
|
|
39
|
-
- Field usa imports relativos. Button assume type=button para evitar submissões acidentais; formulários declaram type=submit. Badge inclui variantes success e warning reutilizadas por StatusBadge.
|
|
40
|
-
- Tokens de identidade, estados semânticos e padrões compostos são mantidos aqui.
|
|
41
|
-
- Mudanças posteriores no upstream devem ser avaliadas com o diff do CLI, preservando estas decisões e o contrato público.
|
|
1
|
+
# Padrão v1 de código e UI/UX
|
|
2
|
+
|
|
3
|
+
Base atual: shadcn base-luma com @base-ui/react. Os componentes interativos expõem fronteiras use client para uso no Next.js App Router. A migração da API Radix está documentada em MIGRATION-0.2.md.
|
|
4
|
+
|
|
5
|
+
## Arquitetura e código
|
|
6
|
+
|
|
7
|
+
TypeScript em modo strict, React com componentes funcionais e composição. APIs genéricas tipadas; sem any para contornar contratos, estado derivado duplicado ou dependências de domínio na UI. Imports públicos por subpath, internos relativos. Dependências e lockfile versionados. Interface, acesso a dados, autorização e operações de infraestrutura permanecem separados. Entradas externas são validadas no servidor; erros e resultados incompletos são explícitos.
|
|
8
|
+
|
|
9
|
+
## Base visual
|
|
10
|
+
|
|
11
|
+
`src/styles.css` é a fonte dos tokens de cor, tipografia, raio, bordas, foco, estados e estrutura. Preset base-luma do shadcn (o mesmo da home de ui.shadcn.com: cantos bem arredondados, campos com fundo suave, sombras leves) sobre o tema neutral, fonte Geist, foco visível e espaço consistente. Cores são semânticas: background, foreground, primary, muted, destructive, success e warning. Temas claro/escuro preservam a semântica. Tokens e padrões podem evoluir nesta biblioteca, nunca por overrides locais em um produto.
|
|
12
|
+
|
|
13
|
+
Primitivos shadcn ficam em src/components/ui (Button, Badge, Card, Input, Table, Sheet, Sidebar, Tooltip, DropdownMenu, ContextMenu, Breadcrumb, Avatar, Checkbox, Collapsible, Alert, Empty, Select, Separator, Skeleton, Tabs, Field e Label). Padrões compostos: AppShell (slots `sidebarHeader` e `footer`), WorkspaceSwitcher, UserMenu, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet, DetailList, Preferences, PreferenceControls e MajapiLogo. Templates React: AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
|
|
14
|
+
|
|
15
|
+
## Comportamentos de UX
|
|
16
|
+
|
|
17
|
+
- Ação primária destaca o objetivo; secundária usa outline/secondary; destrutiva usa variante própria e depende das autorizações do app.
|
|
18
|
+
- Busca, filtros, ordenação por coluna e paginação seguem DataTable (TanStack Table; origem: tabela da Numa). Filtros por coluna usam `meta.filter`; preferências do usuário persistem por `storageKey`. Telas centradas em uma tabela usam `AppShell fillHeight` + `DataTable fillHeight`: a tabela ocupa a altura restante e rola internamente, com cabeçalho, busca e paginação sempre visíveis.
|
|
19
|
+
- Áreas com rolagem interna usam `scroll-fade` do shadcn (só `scroll-fade-b` quando há cabeçalho fixo dentro do contêiner) e as barras de rolagem finas globais, que aparecem com o ponteiro sobre a área e seguem o tema (`color-scheme`).
|
|
20
|
+
- Espaçamento da página em uma escala só: padding, gap entre seções e entre cards de 16px no mobile e 24px a partir de md; o cabeçalho da página e o da sidebar têm a mesma altura (56px). Filtros de domínio são slots tipados do app. Não reconstruir tabelas por tela. Persistência não é habilitada por padrão para evitar guardar buscas sensíveis; quando necessária, deve evoluir como capacidade compartilhada com controle explícito.
|
|
21
|
+
- Estados com texto e cor: sucesso, aviso, erro e desconhecido. Nunca traduzir ausência de informação em zero ou sucesso.
|
|
22
|
+
- Carregamento usa Skeleton, vazio usa Empty, falhas usam Alert e detalhes usam DetailsSheet com título, descrição, foco preso ao overlay, Escape e devolução do foco ao fechar.
|
|
23
|
+
- Em telas pequenas, controles têm texto de pelo menos 16px e alvo de 44px, navegação se reorganiza e tabelas têm rolagem interna, sem rolagem horizontal da página.
|
|
24
|
+
- Preferência por movimento reduzido é respeitada. A ordem de leitura deve acompanhar a ordem visual. Ícones sozinhos exigem nome acessível.
|
|
25
|
+
- Distinguir dados demonstrativos de dados reais; mostrar observação e cobertura em telas de infraestrutura. Todo texto existe em inglês e português (`defineMessages`); texto mínimo, sem descrições que não ajudem a tarefa.
|
|
26
|
+
|
|
27
|
+
## Evolução sem customizações isoladas
|
|
28
|
+
|
|
29
|
+
Uma necessidade reutilizável entra na biblioteca por prop, variante, token ou novo padrão documentado. Não adicionar props específicas como awsAccountId a componentes genéricos. Novas variantes preservam defaults; mudanças incompatíveis exigem versão/migração explícitas e atualização coordenada dos consumidores. A versão semântica identifica a API, e o commit Git fixo identifica o código efetivamente consumido.
|
|
30
|
+
|
|
31
|
+
AGENTS.md nos apps exige contribuição upstream antes de uso. O verificador estático bloqueia primitivas locais e cores avulsas em consumidores; não substitui revisão humana de design, acessibilidade e comportamento. O catálogo e o primeiro consumidor devem ser revisados em navegador.
|
|
32
|
+
|
|
33
|
+
## Adaptações do upstream
|
|
34
|
+
|
|
35
|
+
- Imports internos relativos e `"use client"` são aplicados por `npm run normalize:ui` após o CLI do shadcn.
|
|
36
|
+
- Sheet traduz o nome acessível do fechamento pelo idioma ativo.
|
|
37
|
+
- Sidebar: três modos (open/compact/closed), largura redimensionável (208–448px) com troca de modo por largura, menu de clique direito, tooltip que fecha ao clicar e textos traduzidos.
|
|
38
|
+
- use-mobile usa useSyncExternalStore (compatível com SSR e com a regra de hooks).
|
|
39
|
+
- Field usa imports relativos. Button assume type=button para evitar submissões acidentais; formulários declaram type=submit. Badge inclui variantes success e warning reutilizadas por StatusBadge.
|
|
40
|
+
- Tokens de identidade, estados semânticos e padrões compostos são mantidos aqui.
|
|
41
|
+
- Mudanças posteriores no upstream devem ser avaliadas com o diff do CLI, preservando estas decisões e o contrato público.
|