forlogic-core 2.1.3 → 2.1.5

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.
Files changed (69) hide show
  1. package/.note/memory/features/import/attachment-idempotency-registry.md +8 -8
  2. package/.note/memory/features/import/attachment-strategy.md +30 -30
  3. package/.note/memory/patterns/admin-i18n-policy.md +20 -20
  4. package/.note/memory/patterns/alias-url-resolution.md +69 -69
  5. package/.note/memory/patterns/doc-sync-rule.md +35 -35
  6. package/.note/memory/patterns/documentation-standard.md +17 -17
  7. package/.note/memory/patterns/dynamic-supabase-config.md +4 -4
  8. package/.note/memory/patterns/environment-detection-logic.md +35 -35
  9. package/.note/memory/patterns/i18n-architecture.md +3 -3
  10. package/README.md +68 -68
  11. package/dist/action-plans/components/ActionPlanStatusBadge.d.ts +6 -2
  12. package/dist/components/ui/__tests__/status-badge.test.d.ts +1 -0
  13. package/dist/components/ui/status-badge.d.ts +49 -0
  14. package/dist/crud/primitives/Table.d.ts +1 -1
  15. package/dist/crud/primitives/types.d.ts +6 -0
  16. package/dist/exports/crud.d.ts +5 -0
  17. package/dist/exports/ui.d.ts +1 -0
  18. package/dist/index.css +1 -1
  19. package/dist/index.css.map +1 -1
  20. package/dist/index.esm.js +1 -1
  21. package/dist/index.js +1 -1
  22. package/dist/utils/color.d.ts +26 -0
  23. package/dist/utils/index.d.ts +1 -0
  24. package/docs/PUBLISH.md +168 -0
  25. package/docs/WORKSPACE_KNOWLEDGE.md +119 -119
  26. package/docs/design-system/README.md +1 -1
  27. package/docs/design-system/buttons-actions.md +130 -130
  28. package/docs/design-system/charts-dashboards.md +340 -301
  29. package/docs/design-system/crud.md +174 -114
  30. package/docs/design-system/data-display.md +108 -103
  31. package/docs/design-system/dialogs.md +212 -212
  32. package/docs/design-system/domain.md +317 -317
  33. package/docs/design-system/examples.md +275 -275
  34. package/docs/design-system/foundation.md +1 -1
  35. package/docs/design-system/inputs.md +131 -131
  36. package/docs/design-system/layout.md +202 -154
  37. package/docs/design-system/navigation.md +271 -325
  38. package/docs/design-system/notifications-feedback.md +34 -34
  39. package/docs/design-system/patterns/README.md +53 -53
  40. package/docs/design-system/patterns/action-button.md +22 -22
  41. package/docs/design-system/patterns/alertdialog-deletion.md +46 -46
  42. package/docs/design-system/patterns/baseform-custom-fields.md +59 -59
  43. package/docs/design-system/patterns/baseform-usage.md +42 -42
  44. package/docs/design-system/patterns/body-content-scroll.md +56 -56
  45. package/docs/design-system/patterns/combo-tree.md +23 -23
  46. package/docs/design-system/patterns/components-registry.md +17 -17
  47. package/docs/design-system/patterns/core-providers.md +39 -39
  48. package/docs/design-system/patterns/crud-bulk-actions.md +12 -12
  49. package/docs/design-system/patterns/crud-config-props.md +16 -16
  50. package/docs/design-system/patterns/crud-defaults.md +17 -17
  51. package/docs/design-system/patterns/crud-toolbar.md +28 -28
  52. package/docs/design-system/patterns/delete-confirmation.md +40 -40
  53. package/docs/design-system/patterns/dialog-body-scroll.md +26 -26
  54. package/docs/design-system/patterns/dialog-structure.md +32 -32
  55. package/docs/design-system/patterns/dialog-variants.md +41 -41
  56. package/docs/design-system/patterns/feature-flags.md +24 -20
  57. package/docs/design-system/patterns/header-metadata.md +57 -57
  58. package/docs/design-system/patterns/i18n-setup.md +117 -117
  59. package/docs/design-system/patterns/pagination.md +27 -27
  60. package/docs/design-system/patterns/single-scroll.md +39 -39
  61. package/docs/design-system/patterns/vite-tailwind-setup.md +48 -48
  62. package/docs/design-system/platform.md +18 -18
  63. package/docs/design-system/selectors.md +236 -236
  64. package/docs/design-system/tables-grids.md +95 -38
  65. package/package.json +144 -144
  66. package/dist/README.md +0 -1079
  67. package/dist/bin/bootstrap.js +0 -40
  68. package/dist/bin/pull-docs.js +0 -186
  69. package/dist/docs/KNOWLEDGE.md +0 -109
@@ -1,23 +1,23 @@
1
- # Padrão: ComboTree — Seleção Hierárquica
2
-
3
- O componente `ComboTree` permite a seleção de dados hierárquicos com busca recursiva e separação entre expansão (chevron) e seleção (label).
4
-
5
- ## Layout
6
- - O **chevron** (▶/▼) fica no **final da linha** (à direita), indicando que o nó tem filhos
7
- - O **check** (✓) e o **ícone** ficam no início, seguidos pelo label
8
- - Nós sem filhos não exibem chevron
9
-
10
- ## Ícones customizados por nó
11
-
12
- - `icon` — ícone padrão (nó colapsado e não selecionado)
13
- - `iconOpen` — ícone quando o nó está **expandido** (fallback para `icon`)
14
- - `iconSelected` — ícone quando o nó está **selecionado** (fallback para `iconOpen` se expandido, senão `icon`)
15
- - `iconClassName` — classe CSS para cor/estilo do ícone (fallback: `text-muted-foreground`)
16
-
17
- Prioridade de resolução:
18
- - Selecionado + Expandido → `iconSelected ?? iconOpen ?? icon`
19
- - Selecionado + Colapsado → `iconSelected ?? icon`
20
- - Não selecionado + Expandido → `iconOpen ?? icon`
21
- - Não selecionado + Colapsado → `icon`
22
-
23
- A busca preserva e auto-expande o caminho dos ancestrais para os itens encontrados.
1
+ # Padrão: ComboTree — Seleção Hierárquica
2
+
3
+ O componente `ComboTree` permite a seleção de dados hierárquicos com busca recursiva e separação entre expansão (chevron) e seleção (label).
4
+
5
+ ## Layout
6
+ - O **chevron** (▶/▼) fica no **final da linha** (à direita), indicando que o nó tem filhos
7
+ - O **check** (✓) e o **ícone** ficam no início, seguidos pelo label
8
+ - Nós sem filhos não exibem chevron
9
+
10
+ ## Ícones customizados por nó
11
+
12
+ - `icon` — ícone padrão (nó colapsado e não selecionado)
13
+ - `iconOpen` — ícone quando o nó está **expandido** (fallback para `icon`)
14
+ - `iconSelected` — ícone quando o nó está **selecionado** (fallback para `iconOpen` se expandido, senão `icon`)
15
+ - `iconClassName` — classe CSS para cor/estilo do ícone (fallback: `text-muted-foreground`)
16
+
17
+ Prioridade de resolução:
18
+ - Selecionado + Expandido → `iconSelected ?? iconOpen ?? icon`
19
+ - Selecionado + Colapsado → `iconSelected ?? icon`
20
+ - Não selecionado + Expandido → `iconOpen ?? icon`
21
+ - Não selecionado + Colapsado → `icon`
22
+
23
+ A busca preserva e auto-expande o caminho dos ancestrais para os itens encontrados.
@@ -1,17 +1,17 @@
1
- # Referência: Registry de Componentes Consolidados
2
-
3
- Design System mantém um registro de componentes documentados em conjunto sob entradas únicas:
4
-
5
- - **Breadcrumb** (documenta Breadcrumb e PageBreadcrumb)
6
- - **Calendar & Date Picker** (documenta Calendar e DatePicker)
7
- - **Combobox** (documenta Combobox com Command usado internamente)
8
- - **Toggle & Group** (documenta Toggle e ToggleGroup)
9
- - **Skeleton** (documenta base Skeleton e todas as variantes)
10
- - **AppSidebar** (documenta AppSidebar, Sidebar base, SidebarProvider, SidebarMenu*, Collapsible)
11
- - **Accordion** (documenta Accordion e Collapsible)
12
- - **Input** (documenta Input, InputGroup, InputGroupAddon, InputGroupButton)
13
- - **Grid & Stack** (documenta Grid e Stack layout components)
14
- - **Dialog** (documenta Dialog, AlertDialog, Sheet, Drawer)
15
- - **Tabs** (documenta Tabs e TabPageLayout)
16
-
17
- Este registro deve ser consultado antes de criar nova documentação para evitar duplicatas.
1
+ # Referência: Registry de Componentes Consolidados
2
+
3
+ Design System mantém um registro de componentes documentados em conjunto sob entradas únicas:
4
+
5
+ - **Breadcrumb** (documenta Breadcrumb e PageBreadcrumb)
6
+ - **Calendar & Date Picker** (documenta Calendar e DatePicker)
7
+ - **Combobox** (documenta Combobox com Command usado internamente)
8
+ - **Toggle & Group** (documenta Toggle e ToggleGroup)
9
+ - **Skeleton** (documenta base Skeleton e todas as variantes)
10
+ - **AppSidebar** (documenta AppSidebar, Sidebar base, SidebarProvider, SidebarMenu*, Collapsible)
11
+ - **Accordion** (documenta Accordion e Collapsible)
12
+ - **Input** (documenta Input, InputGroup, InputGroupAddon, InputGroupButton)
13
+ - **Grid & Stack** (documenta Grid e Stack layout components)
14
+ - **Dialog** (documenta Dialog, AlertDialog, Sheet, Drawer)
15
+ - **Tabs** (documenta Tabs e TabPageLayout)
16
+
17
+ Este registro deve ser consultado antes de criar nova documentação para evitar duplicatas.
@@ -1,39 +1,39 @@
1
- # Padrão: CoreProviders Setup
2
-
3
- ## Providers incluídos
4
-
5
- | Provider | Descrição |
6
- |----------|-----------|
7
- | ErrorBoundary | Captura erros de renderização React |
8
- | I18nextProvider | Sistema de internacionalização |
9
- | QueryClientProvider | Cache e queries (React Query) |
10
- | AuthProvider | Autenticação e sessão |
11
- | LocaleProvider | Idioma, timezone, formato de data |
12
- | ModuleProvider | Configuração de módulo ativo |
13
- | ModuleAccessGuard | Bloqueio de acesso por módulo |
14
-
15
- ## Uso básico
16
-
17
- ```tsx
18
- <CoreProviders moduleAlias="performance" appTranslations={{ 'pt-BR': ptBR }}>
19
- <BrowserRouter>
20
- <Routes />
21
- </BrowserRouter>
22
- </CoreProviders>
23
- ```
24
-
25
- ## Props
26
-
27
- | Prop | Tipo | Obrigatório | Descrição |
28
- |------|------|-------------|-----------|
29
- | children | ReactNode | Sim | Componentes filhos |
30
- | queryClient | QueryClient | Não | Instância customizada (default criado automaticamente) |
31
- | moduleAlias | string | Não | Alias do módulo para verificação de acesso |
32
- | moduleAccessGuardProps | object | Não | Props para o ModuleAccessGuard |
33
- | appTranslations | Record<string, Record<string, string>> | Não | Traduções por idioma no namespace 'app' |
34
-
35
- ## QueryClient default
36
-
37
- ```ts
38
- { defaultOptions: { queries: { staleTime: 5 * 60 * 1000, retry: 1 } } }
39
- ```
1
+ # Padrão: CoreProviders Setup
2
+
3
+ ## Providers incluídos
4
+
5
+ | Provider | Descrição |
6
+ |----------|-----------|
7
+ | ErrorBoundary | Captura erros de renderização React |
8
+ | I18nextProvider | Sistema de internacionalização |
9
+ | QueryClientProvider | Cache e queries (React Query) |
10
+ | AuthProvider | Autenticação e sessão |
11
+ | LocaleProvider | Idioma, timezone, formato de data |
12
+ | ModuleProvider | Configuração de módulo ativo |
13
+ | ModuleAccessGuard | Bloqueio de acesso por módulo |
14
+
15
+ ## Uso básico
16
+
17
+ ```tsx
18
+ <CoreProviders moduleAlias="performance" appTranslations={{ 'pt-BR': ptBR }}>
19
+ <BrowserRouter>
20
+ <Routes />
21
+ </BrowserRouter>
22
+ </CoreProviders>
23
+ ```
24
+
25
+ ## Props
26
+
27
+ | Prop | Tipo | Obrigatório | Descrição |
28
+ |------|------|-------------|-----------|
29
+ | children | ReactNode | Sim | Componentes filhos |
30
+ | queryClient | QueryClient | Não | Instância customizada (default criado automaticamente) |
31
+ | moduleAlias | string | Não | Alias do módulo para verificação de acesso |
32
+ | moduleAccessGuardProps | object | Não | Props para o ModuleAccessGuard |
33
+ | appTranslations | Record<string, Record<string, string>> | Não | Traduções por idioma no namespace 'app' |
34
+
35
+ ## QueryClient default
36
+
37
+ ```ts
38
+ { defaultOptions: { queries: { staleTime: 5 * 60 * 1000, retry: 1 } } }
39
+ ```
@@ -1,12 +1,12 @@
1
- # Padrão: CRUD — Ações em Lote
2
-
3
- As ações em lote foram unificadas em um dropdown "Ações em lote" no CrudActionBar.
4
-
5
- **Comportamento:**
6
- - O menu permanece visível se habilitado
7
- - Exibe um badge com a contagem de itens selecionados
8
- - As opções internas são desabilitadas se a seleção for zero
9
-
10
- **Regras:**
11
- - O componente `BulkActionBar` foi **removido** para evitar barras duplicadas e layout shifts
12
- - Na CrudTable, a coluna de ações de linha não deve ter label no cabeçalho (usar apenas ícone ⋮ ou tooltip) para evitar confusão com o menu de ações em lote da toolbar
1
+ # Padrão: CRUD — Ações em Lote
2
+
3
+ As ações em lote foram unificadas em um dropdown "Ações em lote" no CrudActionBar.
4
+
5
+ **Comportamento:**
6
+ - O menu permanece visível se habilitado
7
+ - Exibe um badge com a contagem de itens selecionados
8
+ - As opções internas são desabilitadas se a seleção for zero
9
+
10
+ **Regras:**
11
+ - O componente `BulkActionBar` foi **removido** para evitar barras duplicadas e layout shifts
12
+ - Na CrudTable, a coluna de ações de linha não deve ter label no cabeçalho (usar apenas ícone ⋮ ou tooltip) para evitar confusão com o menu de ações em lote da toolbar
@@ -1,16 +1,16 @@
1
- # Padrão: CRUD — Props Padronizadas de Configuração
2
-
3
- A interface CrudPageConfig foi estendida para padronizar a UX em todos os CRUDs (createCrudPage, CrudTable, CrudGrid).
4
-
5
- **Props disponíveis:**
6
-
7
- | Prop | Default | Descrição |
8
- |------|---------|-----------|
9
- | `showNewButton` | `true` | Exibe botão de criação |
10
- | `showSearch` | `true` | Exibe campo de busca |
11
- | `showBulkActions` | — | Alias para `enableBulkActions` |
12
- | `showActionBar` | `true` | Exibe a barra de ações (substitui `hideActionBar`) |
13
- | `newButtonLabel` | — | Customiza texto do botão de criação |
14
- | `searchPlaceholder` | — | Customiza placeholder da busca |
15
-
16
- Esta padronização garante que todos os CRUDs ofereçam as mesmas capacidades de busca, criação e ações em lote de forma consistente.
1
+ # Padrão: CRUD — Props Padronizadas de Configuração
2
+
3
+ A interface CrudPageConfig foi estendida para padronizar a UX em todos os CRUDs (createCrudPage, CrudTable, CrudGrid).
4
+
5
+ **Props disponíveis:**
6
+
7
+ | Prop | Default | Descrição |
8
+ |------|---------|-----------|
9
+ | `showNewButton` | `true` | Exibe botão de criação |
10
+ | `showSearch` | `true` | Exibe campo de busca |
11
+ | `showBulkActions` | — | Alias para `enableBulkActions` |
12
+ | `showActionBar` | `true` | Exibe a barra de ações (substitui `hideActionBar`) |
13
+ | `newButtonLabel` | — | Customiza texto do botão de criação |
14
+ | `searchPlaceholder` | — | Customiza placeholder da busca |
15
+
16
+ Esta padronização garante que todos os CRUDs ofereçam as mesmas capacidades de busca, criação e ações em lote de forma consistente.
@@ -1,17 +1,17 @@
1
- # Padrão: CRUD — Defaults Obrigatórios
2
-
3
- Todos os CRUDs (CrudTable, createCrudPage) incluem por padrão:
4
-
5
- | Feature | Default | Nota |
6
- |---------|---------|------|
7
- | Column resize | `true` ✓ | Já obrigatório |
8
- | Column manager | `true` ✓ | Botão ⋮ no header da coluna "Ações" |
9
- | Sort | `true` ✓ | Todas as colunas ordenáveis por padrão. Use `sortable: false` para desabilitar |
10
- | Busca | Header global | Para busca na action bar, usar `showSearch=true` |
11
- | Paginação | 25 itens/página | — |
12
-
13
- **NÃO vem por padrão:**
14
- - **Agrupamento** (`enableGrouping=false`) — precisa ser habilitado explicitamente
15
- - **Busca na action bar** (`showSearch=false`) — padrão é busca no header
16
-
17
- **Storage keys:** `createCrudPage` gera automaticamente `columnManagerStorageKey` e `resizeStorageKey` a partir do `entityName`.
1
+ # Padrão: CRUD — Defaults Obrigatórios
2
+
3
+ Todos os CRUDs (CrudTable, createCrudPage) incluem por padrão:
4
+
5
+ | Feature | Default | Nota |
6
+ |---------|---------|------|
7
+ | Column resize | `true` ✓ | Já obrigatório |
8
+ | Column manager | `true` ✓ | Botão ⋮ no header da coluna "Ações" |
9
+ | Sort | `true` ✓ | Todas as colunas ordenáveis por padrão. Use `sortable: false` para desabilitar |
10
+ | Busca | Header global | Para busca na action bar, usar `showSearch=true` |
11
+ | Paginação | 25 itens/página | — |
12
+
13
+ **NÃO vem por padrão:**
14
+ - **Agrupamento** (`enableGrouping=false`) — precisa ser habilitado explicitamente
15
+ - **Busca na action bar** (`showSearch=false`) — padrão é busca no header
16
+
17
+ **Storage keys:** `createCrudPage` gera automaticamente `columnManagerStorageKey` e `resizeStorageKey` a partir do `entityName`.
@@ -1,28 +1,28 @@
1
- # Padrão: CRUD Toolbar — Layout 3 Zonas
2
-
3
- O CrudActionBar implementa um layout rígido de 3 zonas:
4
-
5
- | Zona | Posição | Conteúdo |
6
- |------|---------|----------|
7
- | Esquerda | `justify-start` | Botão "Novo" (ação principal) + Dropdown ações em lote |
8
- | Centro | `flex-1 max-w-md` | Campo de busca (FilterBar/Input) |
9
- | Direita | `justify-end` | Filtros customizados + Toggle de visualização |
10
-
11
- ```tsx
12
- // ✅ CORRETO
13
- <div className="flex items-center gap-4">
14
- <Button>Novo Item</Button>
15
- <div className="flex-1 max-w-md">
16
- <Input placeholder="Buscar..." />
17
- </div>
18
- <div className="flex gap-2">
19
- <Button variant="outline">Filtrar</Button>
20
- <ActionButton items={actions} />
21
- </div>
22
- </div>
23
- ```
24
-
25
- **Regras:**
26
- - Botão de criação NUNCA deve ficar isolado no cabeçalho do Card
27
- - Este componente substitui implementações locais de barra de ferramentas
28
- - Garante visual consistente (bg-muted/50), comportamento e espaçamento em todos os CRUDs
1
+ # Padrão: CRUD Toolbar — Layout 3 Zonas
2
+
3
+ O CrudActionBar implementa um layout rígido de 3 zonas:
4
+
5
+ | Zona | Posição | Conteúdo |
6
+ |------|---------|----------|
7
+ | Esquerda | `justify-start` | Botão "Novo" (ação principal) + Dropdown ações em lote |
8
+ | Centro | `flex-1 max-w-md` | Campo de busca (FilterBar/Input) |
9
+ | Direita | `justify-end` | Filtros customizados + Toggle de visualização |
10
+
11
+ ```tsx
12
+ // ✅ CORRETO
13
+ <div className="flex items-center gap-4">
14
+ <Button>Novo Item</Button>
15
+ <div className="flex-1 max-w-md">
16
+ <Input placeholder="Buscar..." />
17
+ </div>
18
+ <div className="flex gap-2">
19
+ <Button variant="outline">Filtrar</Button>
20
+ <ActionButton items={actions} />
21
+ </div>
22
+ </div>
23
+ ```
24
+
25
+ **Regras:**
26
+ - Botão de criação NUNCA deve ficar isolado no cabeçalho do Card
27
+ - Este componente substitui implementações locais de barra de ferramentas
28
+ - Garante visual consistente (bg-muted/50), comportamento e espaçamento em todos os CRUDs
@@ -1,40 +1,40 @@
1
- # Padrão: Dialog de Confirmação de Exclusão
2
-
3
- Dialog de exclusão segue padrão visual específico (NÃO usar AlertDialog para deleções simples):
4
-
5
- ```tsx
6
- <Dialog open={open} onOpenChange={setOpen}>
7
- <DialogContent size="sm" className="bg-white">
8
- <DialogHeader showSeparator>
9
- <DialogTitle className="sr-only">Confirmação</DialogTitle>
10
- </DialogHeader>
11
-
12
- <div className="flex flex-col items-center text-center space-y-3 py-4">
13
- <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
14
- <AlertTriangle className="h-6 w-6 text-destructive" />
15
- </div>
16
- <h3 className="text-lg font-semibold">Tem certeza?</h3>
17
- <p className="text-sm text-muted-foreground">
18
- Você está prestes a excluir este registro.<br />
19
- Esta ação não pode ser desfeita.
20
- </p>
21
- </div>
22
-
23
- <DialogFooter className="justify-center gap-2 mt-6">
24
- <Button variant="outline" onClick={() => setOpen(false)}>
25
- Cancelar
26
- </Button>
27
- <Button variant="destructive" onClick={handleDelete}>
28
- Sim, excluir
29
- </Button>
30
- </DialogFooter>
31
- </DialogContent>
32
- </Dialog>
33
- ```
34
-
35
- **Regras:**
36
- - Usar `size="sm"` (~420px quadrado)
37
- - Background branco (`bg-white`)
38
- - Ícone AlertTriangle com `bg-destructive/10`
39
- - Botões lado a lado, centralizados
40
- - Texto fixo em português
1
+ # Padrão: Dialog de Confirmação de Exclusão
2
+
3
+ Dialog de exclusão segue padrão visual específico (NÃO usar AlertDialog para deleções simples):
4
+
5
+ ```tsx
6
+ <Dialog open={open} onOpenChange={setOpen}>
7
+ <DialogContent size="sm" className="bg-white">
8
+ <DialogHeader showSeparator>
9
+ <DialogTitle className="sr-only">Confirmação</DialogTitle>
10
+ </DialogHeader>
11
+
12
+ <div className="flex flex-col items-center text-center space-y-3 py-4">
13
+ <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
14
+ <AlertTriangle className="h-6 w-6 text-destructive" />
15
+ </div>
16
+ <h3 className="text-lg font-semibold">Tem certeza?</h3>
17
+ <p className="text-sm text-muted-foreground">
18
+ Você está prestes a excluir este registro.<br />
19
+ Esta ação não pode ser desfeita.
20
+ </p>
21
+ </div>
22
+
23
+ <DialogFooter className="justify-center gap-2 mt-6">
24
+ <Button variant="outline" onClick={() => setOpen(false)}>
25
+ Cancelar
26
+ </Button>
27
+ <Button variant="destructive" onClick={handleDelete}>
28
+ Sim, excluir
29
+ </Button>
30
+ </DialogFooter>
31
+ </DialogContent>
32
+ </Dialog>
33
+ ```
34
+
35
+ **Regras:**
36
+ - Usar `size="sm"` (~420px quadrado)
37
+ - Background branco (`bg-white`)
38
+ - Ícone AlertTriangle com `bg-destructive/10`
39
+ - Botões lado a lado, centralizados
40
+ - Texto fixo em português
@@ -1,26 +1,26 @@
1
- # Padrão: Scroll Interno em Dialogs
2
-
3
- Conteúdo de Dialog/Sheet com scroll interno **DEVE** usar o padrão responsivo:
4
-
5
- ```tsx
6
- // ✅ CORRETO - padrão obrigatório
7
- <div className="flex-1 min-h-0 overflow-auto py-4 px-2 -mx-2">
8
- {/* Conteúdo scrollável */}
9
- </div>
10
-
11
- // ❌ ERRADO - overflow escondido, sem scroll
12
- <div className="p-4">
13
- {/* Conteúdo pode ser cortado */}
14
- </div>
15
- ```
16
-
17
- **Breakdown das classes:**
18
- | Classe | Função |
19
- |--------|--------|
20
- | `flex-1` | Expande para preencher espaço disponível |
21
- | `min-h-0` | Permite shrink em flex container |
22
- | `overflow-auto` | Habilita scroll quando necessário |
23
- | `py-4` | Padding vertical padrão (16px) |
24
- | `px-2 -mx-2` | Previne corte de focus rings (8px de respiro) |
25
-
26
- **Aplica-se a:** Dialog, Sheet, Drawer, AlertDialog
1
+ # Padrão: Scroll Interno em Dialogs
2
+
3
+ Conteúdo de Dialog/Sheet com scroll interno **DEVE** usar o padrão responsivo:
4
+
5
+ ```tsx
6
+ // ✅ CORRETO - padrão obrigatório
7
+ <div className="flex-1 min-h-0 overflow-auto py-4 px-2 -mx-2">
8
+ {/* Conteúdo scrollável */}
9
+ </div>
10
+
11
+ // ❌ ERRADO - overflow escondido, sem scroll
12
+ <div className="p-4">
13
+ {/* Conteúdo pode ser cortado */}
14
+ </div>
15
+ ```
16
+
17
+ **Breakdown das classes:**
18
+ | Classe | Função |
19
+ |--------|--------|
20
+ | `flex-1` | Expande para preencher espaço disponível |
21
+ | `min-h-0` | Permite shrink em flex container |
22
+ | `overflow-auto` | Habilita scroll quando necessário |
23
+ | `py-4` | Padding vertical padrão (16px) |
24
+ | `px-2 -mx-2` | Previne corte de focus rings (8px de respiro) |
25
+
26
+ **Aplica-se a:** Dialog, Sheet, Drawer, AlertDialog
@@ -1,32 +1,32 @@
1
- # Padrão: Dialog — Tamanhos e Estrutura
2
-
3
- Dialog possui 3 tamanhos opcionais (sem default) e estrutura obrigatória:
4
-
5
- | Size | Width | MaxHeight | Uso |
6
- |------|-------|-----------|-----|
7
- | (nenhum) | Auto (className controla) | Auto | Quando classes Tailwind definem o tamanho |
8
- | `sm` | 30vw (320-480px) | 320px | Confirmações rápidas |
9
- | `md` | 50vw (480-720px) | 70vh | Formulários padrão |
10
- | `lg` | 85vw (max 1440px) | 900px | Tabelas, conteúdo extenso |
11
-
12
- **Mobile (<640px):** Todos os tamanhos são sobrepostos para ocupar `calc(100vw-2rem)` x `calc(100dvh-2rem)` com padding reduzido (`p-4`).
13
-
14
- **Regra de prioridade:** Quando `size` é informado, inline styles são aplicados e vencem sobre className. Sem `size`, className controla livremente.
15
-
16
- **Estrutura obrigatória:**
17
- ```tsx
18
- <DialogContent size="md">
19
- <DialogHeader showSeparator>
20
- <DialogTitle>Título</DialogTitle>
21
- </DialogHeader>
22
- <DialogBody>
23
- {/* Conteúdo aqui */}
24
- </DialogBody>
25
- <DialogFooter>...</DialogFooter>
26
- </DialogContent>
27
- ```
28
-
29
- **Regras:**
30
- - `showSeparator` no DialogHeader para linha divisória
31
- - DialogBody é obrigatório para scroll interno
32
- - `size` é opcional — sem ele, classes Tailwind no className controlam o tamanho
1
+ # Padrão: Dialog — Tamanhos e Estrutura
2
+
3
+ Dialog possui 3 tamanhos opcionais (sem default) e estrutura obrigatória:
4
+
5
+ | Size | Width | MaxHeight | Uso |
6
+ |------|-------|-----------|-----|
7
+ | (nenhum) | Auto (className controla) | Auto | Quando classes Tailwind definem o tamanho |
8
+ | `sm` | 30vw (320-480px) | 320px | Confirmações rápidas |
9
+ | `md` | 50vw (480-720px) | 70vh | Formulários padrão |
10
+ | `lg` | 85vw (max 1440px) | 900px | Tabelas, conteúdo extenso |
11
+
12
+ **Mobile (<640px):** Todos os tamanhos são sobrepostos para ocupar `calc(100vw-2rem)` x `calc(100dvh-2rem)` com padding reduzido (`p-4`).
13
+
14
+ **Regra de prioridade:** Quando `size` é informado, inline styles são aplicados e vencem sobre className. Sem `size`, className controla livremente.
15
+
16
+ **Estrutura obrigatória:**
17
+ ```tsx
18
+ <DialogContent size="md">
19
+ <DialogHeader showSeparator>
20
+ <DialogTitle>Título</DialogTitle>
21
+ </DialogHeader>
22
+ <DialogBody>
23
+ {/* Conteúdo aqui */}
24
+ </DialogBody>
25
+ <DialogFooter>...</DialogFooter>
26
+ </DialogContent>
27
+ ```
28
+
29
+ **Regras:**
30
+ - `showSeparator` no DialogHeader para linha divisória
31
+ - DialogBody é obrigatório para scroll interno
32
+ - `size` é opcional — sem ele, classes Tailwind no className controlam o tamanho
@@ -1,41 +1,41 @@
1
- # Padrão: Dialog — Variantes Semânticas
2
-
3
- O `DialogContent` possui uma prop `variant` que controla o comportamento de fechamento:
4
-
5
- ## Variantes
6
-
7
- | Variante | Clique externo | ESC | Botão X | Uso |
8
- |----------|---------------|-----|---------|-----|
9
- | `informative` (padrão) | Fecha | Fecha | Fecha | Avisos, leitura |
10
- | `form` | Bloqueado | Fecha* | Fecha* | Formulários, edições |
11
- | `destructive` | Bloqueado | Bloqueado | Oculto | Exclusões, ações irreversíveis |
12
-
13
- \* Com `isDirty={true}`, exibe `window.confirm` antes de fechar.
14
-
15
- ## Props
16
-
17
- ```typescript
18
- interface DialogContentProps {
19
- variant?: 'informative' | 'form' | 'destructive'; // default: 'informative'
20
- isDirty?: boolean; // para variant='form', confirmação antes de fechar
21
- }
22
- ```
23
-
24
- ## Padrão de uso
25
-
26
- ```tsx
27
- // Formulários
28
- <DialogContent variant="form" isDirty={form.formState.isDirty}>
29
-
30
- // Exclusões
31
- <DialogContent variant="destructive" size="sm">
32
-
33
- // Informativos (comportamento padrão, pode omitir variant)
34
- <DialogContent variant="informative">
35
- ```
36
-
37
- ## Regras
38
- - Default é `'informative'` para compatibilidade com dialogs existentes
39
- - `destructive` oculta o botão X — fechamento apenas por botões no DialogFooter
40
- - `form` com `isDirty` usa `window.confirm` nativo para confirmação
41
- - Tipos exportados: `DialogVariant`, `DialogSize`, `DialogContentProps`
1
+ # Padrão: Dialog — Variantes Semânticas
2
+
3
+ O `DialogContent` possui uma prop `variant` que controla o comportamento de fechamento:
4
+
5
+ ## Variantes
6
+
7
+ | Variante | Clique externo | ESC | Botão X | Uso |
8
+ |----------|---------------|-----|---------|-----|
9
+ | `informative` (padrão) | Fecha | Fecha | Fecha | Avisos, leitura |
10
+ | `form` | Bloqueado | Fecha* | Fecha* | Formulários, edições |
11
+ | `destructive` | Bloqueado | Bloqueado | Oculto | Exclusões, ações irreversíveis |
12
+
13
+ \* Com `isDirty={true}`, exibe `window.confirm` antes de fechar.
14
+
15
+ ## Props
16
+
17
+ ```typescript
18
+ interface DialogContentProps {
19
+ variant?: 'informative' | 'form' | 'destructive'; // default: 'informative'
20
+ isDirty?: boolean; // para variant='form', confirmação antes de fechar
21
+ }
22
+ ```
23
+
24
+ ## Padrão de uso
25
+
26
+ ```tsx
27
+ // Formulários
28
+ <DialogContent variant="form" isDirty={form.formState.isDirty}>
29
+
30
+ // Exclusões
31
+ <DialogContent variant="destructive" size="sm">
32
+
33
+ // Informativos (comportamento padrão, pode omitir variant)
34
+ <DialogContent variant="informative">
35
+ ```
36
+
37
+ ## Regras
38
+ - Default é `'informative'` para compatibilidade com dialogs existentes
39
+ - `destructive` oculta o botão X — fechamento apenas por botões no DialogFooter
40
+ - `form` com `isDirty` usa `window.confirm` nativo para confirmação
41
+ - Tipos exportados: `DialogVariant`, `DialogSize`, `DialogContentProps`
@@ -1,20 +1,24 @@
1
- # Padrão: Feature Flags (Variáveis de Ambiente)
2
-
3
- ## Variáveis disponíveis
4
-
5
- | Variável | Descrição | Padrão |
6
- |----------|-----------|--------|
7
- | `VITE_SHOW_USER_PREFERENCES` | Exibe "Preferências" no menu do usuário (idioma, timezone, formato de data) | Não exibe |
8
- | `VITE_I18N_DEBUG_MODE` | Modo debug de i18n (mostra chaves ao invés de traduções) | `"false"` |
9
- | `VITE_IS_QUALIEX` | Usa logos Qualiex ao invés de Forlogic | `"false"` |
10
- | `VITE_SHOW_EDIT_PROFILE` | Exibe "Editar Perfil" no menu do usuário (foto e idioma) | Não exibe |
11
-
12
- ## Uso
13
-
14
- ```env
15
- VITE_SHOW_USER_PREFERENCES=true
16
- VITE_I18N_DEBUG_MODE=false
17
- VITE_IS_QUALIEX=true
18
- ```
19
-
20
- Variáveis Vite precisam do prefixo `VITE_` para serem expostas ao cliente.
1
+ # Padrão: Feature Flags (Variáveis de Ambiente)
2
+
3
+ ## Variáveis disponíveis
4
+
5
+ | Variável | Descrição | Padrão |
6
+ |----------|-----------|--------|
7
+ | `VITE_SHOW_USER_PREFERENCES` | Exibe "Preferências" no menu do usuário (idioma, timezone, formato de data) | Não exibe |
8
+ | `VITE_I18N_DEBUG_MODE` | Modo debug de i18n (mostra chaves ao invés de traduções) | `"false"` |
9
+ | `VITE_IS_QUALIEX` | Usa logos Qualiex ao invés de Forlogic | `"false"` |
10
+ | `VITE_SHOW_EDIT_PROFILE` | Exibe "Editar Perfil" no menu do usuário (foto e idioma) | Não exibe |
11
+ | `VITE_WIKI_URL` | Exibe botão "Wiki" no header da aplicação. O valor é a URL que será aberta ao clicar | Não exibe |
12
+ | `VITE_SHOW_ADMIN_REPORTS` | Exibe relatórios administrativos | `"false"` |
13
+
14
+ ## Uso
15
+
16
+ ```env
17
+ VITE_SHOW_USER_PREFERENCES=true
18
+ VITE_I18N_DEBUG_MODE=false
19
+ VITE_IS_QUALIEX=true
20
+ VITE_WIKI_URL=https://wiki.example.com
21
+ VITE_SHOW_ADMIN_REPORTS=false
22
+ ```
23
+
24
+ Variáveis Vite precisam do prefixo `VITE_` para serem expostas ao cliente.