forlogic-core 2.0.8 → 2.1.0

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.
@@ -9,6 +9,10 @@ const forlogicTailwindPreset = {
9
9
  }
10
10
  },
11
11
  extend: {
12
+ fontFamily: {
13
+ sans: ["Inter", "Roboto", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', '"Helvetica Neue"', "Arial", "sans-serif"],
14
+ mono: ['"Roboto Mono"', "Menlo", "Monaco", '"Courier New"', "monospace"]
15
+ },
12
16
  colors: {
13
17
  border: "hsl(var(--border))",
14
18
  input: "hsl(var(--input))",
@@ -11,6 +11,10 @@ const forlogicTailwindPreset = {
11
11
  }
12
12
  },
13
13
  extend: {
14
+ fontFamily: {
15
+ sans: ["Inter", "Roboto", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', '"Helvetica Neue"', "Arial", "sans-serif"],
16
+ mono: ['"Roboto Mono"', "Menlo", "Monaco", '"Courier New"', "monospace"]
17
+ },
14
18
  colors: {
15
19
  border: "hsl(var(--border))",
16
20
  input: "hsl(var(--input))",
@@ -1,254 +1,119 @@
1
- # forlogic-core — Workspace Knowledge
2
-
3
- > **Documento de referência** para todos os projetos que consomem `forlogic-core`.
4
- > Cole este conteúdo como **Workspace Knowledge** no Lovable.
5
-
6
- ---
7
-
8
- ## 🔗 Cross-Project: Projeto Admin (DS + Lib)
9
-
10
- > **Para consultar componentes, props, tipos, exemplos e implementação**: use cross-project (`@Admin`) para ler arquivos do projeto **"Admin"** (`qualiex-admin`).
11
-
12
- ### Caminhos úteis no projeto Admin
13
-
14
- | O que procurar | Caminho no Admin |
15
- |----------------|------------------|
16
- | Código-fonte dos componentes UI | `lib/components/ui/` |
17
- | Sistema CRUD | `lib/crud/` |
18
- | Barrel exports (lista completa) | `lib/exports/ui.ts`, `lib/exports/index.ts` |
19
- | Documentação MD do Design System | `docs/design-system/` |
20
- | Docs interativos (código-fonte) | `src/design-system/docs/` |
21
- | Hooks compartilhados | `lib/hooks/` |
22
- | Providers (CoreProviders) | `lib/providers/` |
23
- | Serviços (Base, Email, Error) | `lib/services/` |
24
- | Config Vite/Tailwind | `lib/vite/`, `lib/tailwind/` |
25
- | Constituição (regras canônicas) | `spec/constitution.md` |
26
- | Prompt template | `docs/PROMPT_TEMPLATE.md` |
27
- | Project Knowledge template | `docs/PROJECT_KNOWLEDGE_TEMPLATE.md` |
28
- | Starter template | `docs/STARTER_TEMPLATE.md` |
29
- | Golden snippets | `docs/design-system/examples.md` |
30
-
31
- ---
32
-
33
- ## 0. Schema do Projeto
34
-
35
- > ⚠️ **O schema é definido no `README.md` de cada projeto.** Consulte-o antes de qualquer query.
36
-
37
- ```ts
38
- // CORRETO substituir pelo schema do projeto (ex: 'common', 'docs', etc.)
39
- supabase.schema('SCHEMA_DO_PROJETO').from('tabela').select('*');
40
-
41
- // ERRADO (vai falhar em produção)
42
- supabase.from('tabela').select('*');
43
- ```
44
-
45
- > Nunca usar o schema `public`. Cada projeto tem seu próprio schema documentado no `README.md`.
46
-
47
- ---
48
-
49
- ## 1. Constituição — Regras Canônicas
50
-
51
- > 📖 **Todas as regras, convenções e melhores práticas estão em `spec/constitution.md`** no projeto Admin.
52
-
53
- Antes de implementar qualquer funcionalidade, consulte a constituição via cross-project:
54
- ```
55
- @Admin spec/constitution.md
56
- ```
57
-
58
- ### Resumo das regras invioláveis
59
-
60
- | Regra | Detalhe |
61
- |-------|---------|
62
- | Schema obrigatório | `.schema('...')` em toda query Supabase (schema do `README.md`) |
63
- | Sem DELETE físico | Soft delete com `deleted_at` + policy `FOR UPDATE` |
64
- | Sem índices automáticos | Apenas com aprovação explícita + `EXPLAIN ANALYZE` |
65
- | Sem modificar `.env` | Apenas com autorização do usuário |
66
- | Sem hardcoded admin | Nunca localStorage/sessionStorage para roles |
67
- | Lib-first | Usar `forlogic-core` antes de criar componente |
68
- | Import do Supabase | Sempre `getSupabaseClient()` de `forlogic-core` |
69
- | Import de i18n | Sempre `useTranslation` de `forlogic-core`, nunca de `react-i18next` |
70
-
71
- ---
72
-
73
- ## 2. Lib-First forlogic-core
74
-
75
- > Antes de criar qualquer componente, **verificar se existe em `forlogic-core`**.
76
-
77
- ```ts
78
- // ✅ CORRETO
79
- import { Button, Dialog, Input, Combobox, ActionButton, useTranslation } from 'forlogic-core';
80
-
81
- // PROIBIDO criar componente local que já existe na lib
82
- import { MyCustomButton } from '@/components/MyCustomButton';
83
- ```
84
-
85
- ### Checklist
86
-
87
- - [ ] Pesquisei se existe na forlogic-core?
88
- - [ ] Verifiquei o Design System (`@Admin docs/design-system/`)?
89
- - [ ] Pode ser alcançado com props/variantes existentes?
90
-
91
- ### Exceções permitidas
92
-
93
- 1. Componente específico de domínio de negócio (ex: `InvoiceCard`)
94
- 2. Composição de componentes da lib (wrapper Dialog + Form)
95
- 3. Protótipo temporário que será migrado para a lib
96
-
97
- ---
98
-
99
- ## 3. Design System — Categorias
100
-
101
- > Para ver props e exemplos: `@Admin docs/design-system/<arquivo>.md`
102
-
103
- | Categoria | Arquivo |
104
- |-----------|---------|
105
- | Fundação | `foundation.md` |
106
- | Botões & Ações | `buttons-actions.md` |
107
- | Inputs | `inputs.md` |
108
- | Seletores | `selectors.md` |
109
- | Data Display | `data-display.md` |
110
- | Data Grid | `tables-grids.md` |
111
- | Gráficos & Dashboards | `charts-dashboards.md` |
112
- | Navegação | `navigation.md` |
113
- | Dialogs | `dialogs.md` |
114
- | Notifications & Feedback | `notifications-feedback.md` |
115
- | Layout | `layout.md` |
116
- | CRUD | `crud.md` |
117
- | Plataforma | `platform.md` |
118
- | Business Components | `domain.md` |
119
- | Developer Tools | `infra-utils.md` |
120
-
121
- ### Aliases disponíveis
122
-
123
- | Original | Alias(es) |
124
- |----------|-----------|
125
- | Combobox | SelectSearch, MultiSelect, EntitySelect, AutoComplete |
126
- | ComboTree | TreeSelect |
127
- | StepSelector | Stepper |
128
- | ActionButton | ActionMenu, RowActions |
129
- | TruncatedCell | EllipsisText |
130
- | CrudPrimitiveTable | DataTable |
131
- | CrudPrimitivePagination | DataPagination |
132
- | CrudPrimitiveFilterBar | DataFilterBar |
133
-
134
- ---
135
-
136
- ## 4. Instrução para IA — Leitura Obrigatória
137
-
138
- **QUANDO** criar ou modificar qualquer arquivo `.tsx` com JSX:
139
-
140
- - **SE** contém tabela, listagem ou CRUD → **LER** `@Admin docs/design-system/crud.md` e `@Admin docs/design-system/tables-grids.md` ANTES
141
- - **SE** contém formulário, input ou campo → **LER** `@Admin docs/design-system/inputs.md` e `@Admin docs/design-system/selectors.md` ANTES
142
- - **SE** contém modal ou confirmação → **LER** `@Admin docs/design-system/dialogs.md` ANTES
143
- - **SE** contém botões ou ações de linha → **LER** `@Admin docs/design-system/buttons-actions.md` ANTES
144
- - **SE** é estrutura de página/layout → **LER** `@Admin docs/design-system/layout.md` ANTES
145
-
146
- **SEMPRE** consultar `@Admin docs/design-system/examples.md` como referência de implementação.
147
-
148
- **VALIDAÇÃO pós-geração**: Todo import de componente visual DEVE vir de `forlogic-core`. Se criou componente local que existe na lib, refatore imediatamente.
149
-
150
- ---
151
-
152
- ## 5. Padrões CRUD
153
-
154
- ### Toolbar — Layout obrigatório de 3 zonas
155
-
156
- | Zona | Posição | Conteúdo |
157
- |------|---------|----------|
158
- | Esquerda | `justify-start` | Botão "Novo" + Dropdown ações em lote |
159
- | Centro | `flex-1 max-w-md` | Campo de busca |
160
- | Direita | `justify-end` | Filtros + Toggle view |
161
-
162
- ### Defaults obrigatórios
163
-
164
- - Paginação: `CrudPrimitivePagination variant="full"`, **10 itens/página** (menor opção)
165
- - Column resize: ativado por padrão
166
- - Column manager: ativado por padrão
167
- - Ordenação: ativada em todas as colunas por padrão
168
- - Busca: na action bar com `showSearch=true`
169
- - Ações de linha: sempre usar `ActionButton` da lib
170
-
171
- ---
172
-
173
- ## 6. Padrões Deprecated
174
-
175
- | ❌ Não usar | ✅ Usar |
176
- |------------|--------|
177
- | `BulkActionBar` separado | Dropdown no `CrudActionBar` |
178
- | `<MoreHorizontal>` genérico | `ActionButton` |
179
- | Paginação manual | `CrudPrimitivePagination` |
180
- | `StatusSelect` | `Combobox` |
181
- | `DeleteConfirmationDialog` | `Dialog` |
182
- | `Searchbar` | `Input` com ícone |
183
- | Schema `public` | `.schema('...')` com schema do projeto |
184
-
185
- ---
186
-
187
- ## 7. Feature Flags
188
-
189
- | Variável | Descrição | Padrão |
190
- |----------|-----------|--------|
191
- | `VITE_SHOW_USER_PREFERENCES` | Exibe "Preferências" no menu do usuário (idioma, timezone, formato de data) | Não exibe |
192
- | `VITE_I18N_DEBUG_MODE` | Modo debug de i18n (mostra `🔑 chave` ao invés de traduções) | `"false"` |
193
- | `VITE_IS_QUALIEX` | Usa logos Qualiex ao invés de Forlogic | `"false"` |
194
- | `VITE_SHOW_EDIT_PROFILE` | Exibe "Editar Perfil" no menu do usuário (foto e idioma) | Não exibe |
195
-
196
- Todas precisam do prefixo `VITE_` para serem expostas ao cliente.
197
-
198
- ---
199
-
200
- ## 8. Configuração — Setup do Projeto
201
-
202
- ### CoreProviders
203
-
204
- ```tsx
205
- import { CoreProviders } from 'forlogic-core';
206
- import ptBR from './i18n/pt-BR.json';
207
-
208
- function App() {
209
- return (
210
- <CoreProviders moduleAlias="seu-modulo" appTranslations={{ 'pt-BR': ptBR, 'en-US': enUS }}>
211
- <BrowserRouter><Routes /></BrowserRouter>
212
- </CoreProviders>
213
- );
214
- }
215
- ```
216
-
217
- ### Vite
218
-
219
- ```ts
220
- import { createSecurityHeadersPlugin } from 'forlogic-core/vite';
221
-
222
- export default defineConfig(({ mode }) => ({
223
- plugins: [
224
- react(),
225
- createSecurityHeadersPlugin(mode === 'development', {
226
- supabaseUrls: ['https://SEU_PROJETO.supabase.co'],
227
- additionalConnectSrc: ['https://*.qualiex.com'],
228
- }),
229
- ],
230
- resolve: { alias: { '@': path.resolve(__dirname, './src') } },
231
- }));
232
- ```
233
-
234
- ### Tailwind
235
-
236
- ```ts
237
- import { forlogicTailwindPreset, forlogicContentPaths } from 'forlogic-core/tailwind';
238
-
239
- export default {
240
- presets: [forlogicTailwindPreset],
241
- content: [...forlogicContentPaths],
242
- } satisfies Config;
243
- ```
244
-
245
- ---
246
-
247
- ## 9. Estrutura de Documentação
248
-
249
- | Local | Responsabilidade |
250
- |-------|-----------------|
251
- | `README.md` (raiz de cada projeto) | **Schema do projeto** — única fonte canônica |
252
- | `spec/constitution.md` (projeto Admin) | **Regras e convenções** — fonte canônica para todos os projetos |
253
- | `docs/design-system/` (projeto Admin) | **Design System** — documentação de componentes |
254
- | Rota `/ds` no app Admin | **Design System visual** — documentação interativa |
1
+ # forlogic-core — Workspace Knowledge
2
+
3
+ > **Documento para colar no Lovable Workspace Knowledge** de projetos consumidores.
4
+ > Funciona como mapa de referências cruzadas entre os projetos.
5
+
6
+ ---
7
+
8
+ ## Projetos do Ecossistema
9
+
10
+ | Projeto | Alias | Responsabilidade |
11
+ |---------|-------|-----------------|
12
+ | **forlogic-docs** | `@forlogic-docs` | Fonte canônica de regras, padrões, templates e documentação |
13
+ | **qualiex-admin** | `@Admin` | Código-fonte da lib `forlogic-core`, Design System e docs gerados |
14
+
15
+ ---
16
+
17
+ ## Onde buscar cada informação
18
+
19
+ ### Regras e Padrões `@forlogic-docs`
20
+
21
+ | O que | Caminho |
22
+ |-------|---------|
23
+ | Constituição (regras canônicas) | `docs/engenharia/padroes/constitution.md` |
24
+ | Guia de migração de ícones | `docs/engenharia/padroes/icon-migration.md` |
25
+ | Guia de publicação da lib | `docs/engenharia/devops/publish.md` |
26
+ | Prompt: auditoria | `docs/templates/prompts/audit.md` |
27
+ | Prompt: criação de tela | `docs/templates/prompts/new-screen.md` |
28
+ | Prompt: starter template | `docs/templates/prompts/starter.md` |
29
+ | ADRs (decisões de arquitetura) | `docs/adrs/` |
30
+ | Specs de API | `docs/apis/` |
31
+
32
+ ### Código-fonte e Design System → `@Admin`
33
+
34
+ | O que | Caminho |
35
+ |-------|---------|
36
+ | Código dos componentes UI | `lib/components/ui/` |
37
+ | Sistema CRUD | `lib/crud/` |
38
+ | Barrel exports (lista completa) | `lib/exports/ui.ts`, `lib/exports/index.ts` |
39
+ | Documentação MD do Design System | `docs/design-system/` |
40
+ | Golden snippets (exemplos) | `docs/design-system/examples.md` |
41
+ | Docs interativos (código-fonte) | `src/design-system/docs/` |
42
+ | Hooks compartilhados | `lib/hooks/` |
43
+ | Providers (CoreProviders) | `lib/providers/` |
44
+ | Serviços (Base, Email, Error) | `lib/services/` |
45
+ | Config Vite/Tailwind | `lib/vite/`, `lib/tailwind/` |
46
+ | Spec do módulo Queries | `spec/queries.md` |
47
+
48
+ ---
49
+
50
+ ## Schema do Projeto
51
+
52
+ > ⚠️ **O schema é definido no `README.md` de cada projeto consumidor.** Consulte-o antes de qualquer query.
53
+
54
+ ```ts
55
+ // ✅ CORRETO — substituir pelo schema do projeto
56
+ supabase.schema('SCHEMA_DO_PROJETO').from('tabela').select('*');
57
+
58
+ // ERRADO
59
+ supabase.from('tabela').select('*');
60
+ ```
61
+
62
+ ---
63
+
64
+ ## Regras Invioláveis (resumo)
65
+
66
+ > Fonte canônica: `@forlogic-docs docs/engenharia/padroes/constitution.md`
67
+
68
+ | Regra | Detalhe |
69
+ |-------|---------|
70
+ | Schema obrigatório | `.schema('...')` em toda query Supabase |
71
+ | Sem DELETE físico | Soft delete com `deleted_at` |
72
+ | Lib-first | Usar `forlogic-core` antes de criar componente |
73
+ | Import do Supabase | `getSupabaseClient()` de `forlogic-core` |
74
+ | Import de i18n | `useTranslation` de `forlogic-core`, nunca de `react-i18next` |
75
+ | Sem hardcoded admin | Nunca localStorage/sessionStorage para roles |
76
+
77
+ ---
78
+
79
+ ## Design System Categorias
80
+
81
+ > Para ver props e exemplos: `@Admin docs/design-system/<arquivo>.md`
82
+
83
+ | Categoria | Arquivo |
84
+ |-----------|---------|
85
+ | Fundação | `foundation.md` |
86
+ | Botões & Ações | `buttons-actions.md` |
87
+ | Inputs | `inputs.md` |
88
+ | Seletores | `selectors.md` |
89
+ | Data Display | `data-display.md` |
90
+ | Data Grid | `tables-grids.md` |
91
+ | Navegação | `navigation.md` |
92
+ | Dialogs | `dialogs.md` |
93
+ | Layout | `layout.md` |
94
+ | CRUD | `crud.md` |
95
+
96
+ ### Aliases
97
+
98
+ | Original | Alias(es) |
99
+ |----------|-----------|
100
+ | Combobox | SelectSearch, MultiSelect, EntitySelect |
101
+ | ComboTree | TreeSelect |
102
+ | ActionButton | ActionMenu, RowActions |
103
+ | CrudPrimitiveTable | DataTable |
104
+
105
+ ---
106
+
107
+ ## Instrução para IA — Leitura Obrigatória
108
+
109
+ **QUANDO** criar ou modificar qualquer arquivo `.tsx`:
110
+
111
+ - **SE** contém tabela/CRUD **LER** `@Admin docs/design-system/crud.md` ANTES
112
+ - **SE** contém formulário → **LER** `@Admin docs/design-system/inputs.md` ANTES
113
+ - **SE** contém modal → **LER** `@Admin docs/design-system/dialogs.md` ANTES
114
+ - **SE** contém botões/ações **LER** `@Admin docs/design-system/buttons-actions.md` ANTES
115
+ - **SE** é layout → **LER** `@Admin docs/design-system/layout.md` ANTES
116
+
117
+ **SEMPRE** consultar `@Admin docs/design-system/examples.md` como referência.
118
+
119
+ **VALIDAÇÃO**: Todo import de componente visual DEVE vir de `forlogic-core`.
@@ -3,7 +3,7 @@
3
3
 
4
4
  # Design System — forlogic-core
5
5
 
6
- > Gerado automaticamente em 2026-04-08
6
+ > Gerado automaticamente em 2026-04-09
7
7
  > Total: 92 componentes documentados em 15 categorias
8
8
 
9
9
  ## Categorias
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "forlogic-core",
3
- "version": "2.0.8",
3
+ "version": "2.1.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -1,177 +0,0 @@
1
- # Guia de Migração de Ícones: Angular Material → Lucide React
2
-
3
- > Referência para substituir ícones do Material Symbols/Icons pelos equivalentes do [Lucide React](https://lucide.dev/icons/).
4
-
5
- ---
6
-
7
- ## 1. Material Icons → Lucide React
8
-
9
- | Material Icon | Lucide React | Import |
10
- |:---|:---|:---|
11
- | `add` | `Plus` | `import { Plus } from 'lucide-react'` |
12
- | `alarm` | `AlarmClock` | `import { AlarmClock } from 'lucide-react'` |
13
- | `arrow_back` | `ArrowLeft` | `import { ArrowLeft } from 'lucide-react'` |
14
- | `arrow_downward` | `ArrowDown` | `import { ArrowDown } from 'lucide-react'` |
15
- | `arrow_drop_down` | `ChevronDown` | `import { ChevronDown } from 'lucide-react'` |
16
- | `arrow_drop_up` | `ChevronUp` | `import { ChevronUp } from 'lucide-react'` |
17
- | `arrow_outward` | `ExternalLink` | `import { ExternalLink } from 'lucide-react'` |
18
- | `arrow_right_alt` | `ArrowRight` | `import { ArrowRight } from 'lucide-react'` |
19
- | `arrow_upward` | `ArrowUp` | `import { ArrowUp } from 'lucide-react'` |
20
- | `article` | `FileText` | `import { FileText } from 'lucide-react'` |
21
- | `attach_file` | `Paperclip` | `import { Paperclip } from 'lucide-react'` |
22
- | `auto_stories` | `BookOpen` | `import { BookOpen } from 'lucide-react'` |
23
- | `cancel` | `XCircle` | `import { XCircle } from 'lucide-react'` |
24
- | `chat` | `MessageCircle` | `import { MessageCircle } from 'lucide-react'` |
25
- | `check` | `Check` | `import { Check } from 'lucide-react'` |
26
- | `check_circle` | `CheckCircle` | `import { CheckCircle } from 'lucide-react'` |
27
- | `circle` | `Circle` | `import { Circle } from 'lucide-react'` |
28
- | `clear` | `X` | `import { X } from 'lucide-react'` |
29
- | `close` | `X` | `import { X } from 'lucide-react'` |
30
- | `cloud_upload` | `CloudUpload` | `import { CloudUpload } from 'lucide-react'` |
31
- | `comment` | `MessageSquare` | `import { MessageSquare } from 'lucide-react'` |
32
- | `delete` | `Trash2` | `import { Trash2 } from 'lucide-react'` |
33
- | `done` | `Check` | `import { Check } from 'lucide-react'` |
34
- | `drag_indicator` | `GripVertical` | `import { GripVertical } from 'lucide-react'` |
35
- | `edit` | `Pencil` | `import { Pencil } from 'lucide-react'` |
36
- | `error` | `CircleAlert` | `import { CircleAlert } from 'lucide-react'` |
37
- | `exit_to_app` | `LogOut` | `import { LogOut } from 'lucide-react'` |
38
- | `expand_more` | `ChevronDown` | `import { ChevronDown } from 'lucide-react'` |
39
- | `favorite` | `Heart` | `import { Heart } from 'lucide-react'` |
40
- | `favorite_border` | `Heart` (sem fill) | `import { Heart } from 'lucide-react'` |
41
- | `group` | `Users` | `import { Users } from 'lucide-react'` |
42
- | `help` | `HelpCircle` | `import { HelpCircle } from 'lucide-react'` |
43
- | `hourglass_bottom` | `Hourglass` | `import { Hourglass } from 'lucide-react'` |
44
- | `info` | `Info` | `import { Info } from 'lucide-react'` |
45
- | `keyboard_arrow_down` | `ChevronDown` | `import { ChevronDown } from 'lucide-react'` |
46
- | `keyboard_tab` | `ArrowRightToLine` | `import { ArrowRightToLine } from 'lucide-react'` |
47
- | `label` | `Tag` | `import { Tag } from 'lucide-react'` |
48
- | `link` | `Link` | `import { Link } from 'lucide-react'` |
49
- | `menu` | `Menu` | `import { Menu } from 'lucide-react'` |
50
- | `more_vert` | `MoreVertical` | `import { MoreVertical } from 'lucide-react'` |
51
- | `person` | `User` | `import { User } from 'lucide-react'` |
52
- | `person_outline` | `User` | `import { User } from 'lucide-react'` |
53
- | `place` | `MapPin` | `import { MapPin } from 'lucide-react'` |
54
- | `refresh` | `RefreshCw` | `import { RefreshCw } from 'lucide-react'` |
55
- | `repeat` | `Repeat` | `import { Repeat } from 'lucide-react'` |
56
- | `schedule` | `Clock` | `import { Clock } from 'lucide-react'` |
57
- | `search` | `Search` | `import { Search } from 'lucide-react'` |
58
- | `star` | `Star` | `import { Star } from 'lucide-react'` |
59
- | `star_border` | `Star` (sem fill) | `import { Star } from 'lucide-react'` |
60
- | `supervisor_account` | `UserCheck` | `import { UserCheck } from 'lucide-react'` |
61
- | `swap_horiz` | `ArrowLeftRight` | `import { ArrowLeftRight } from 'lucide-react'` |
62
- | `verified` | `BadgeCheck` | `import { BadgeCheck } from 'lucide-react'` |
63
- | `visibility` | `Eye` | `import { Eye } from 'lucide-react'` |
64
- | `warning` | `TriangleAlert` | `import { TriangleAlert } from 'lucide-react'` |
65
-
66
- ---
67
-
68
- ## 2. Ícones de gráficos (Material → Lucide/Recharts)
69
-
70
- | Material Icon | Lucide React | Nota |
71
- |:---|:---|:---|
72
- | `area_chart_black_24dp` | `AreaChart` | `import { AreaChart } from 'lucide-react'` |
73
- | `bar_chart_black_24dp` | `BarChart3` | `import { BarChart3 } from 'lucide-react'` |
74
- | `legend_toggle` | `ListFilter` | Alternativa mais próxima |
75
- | `multiline_chart_black_24dp` | `LineChart` | `import { LineChart } from 'lucide-react'` |
76
- | `pie_chart_black_24dp` | `PieChart` | `import { PieChart } from 'lucide-react'` |
77
- | `pin_black_24dp` | `Pin` | `import { Pin } from 'lucide-react'` |
78
- | `poll` | `BarChart` | `import { BarChart } from 'lucide-react'` |
79
- | `show_chart_black_24dp` | `TrendingUp` | `import { TrendingUp } from 'lucide-react'` |
80
- | `stacked_bar_chart_black_24dp` | `BarChart3` | Mesmo ícone, sem variante "stacked" |
81
- | `stacked_line_chart` | `LineChart` | Mesmo ícone |
82
- | `trending_up` | `TrendingUp` | `import { TrendingUp } from 'lucide-react'` |
83
- | `view_list_black_24dp` | `List` | `import { List } from 'lucide-react'` |
84
- | `view_module` | `LayoutGrid` | `import { LayoutGrid } from 'lucide-react'` |
85
-
86
- ---
87
-
88
- ## 3. SVGs customizados do flc-icon (sem equivalente Lucide)
89
-
90
- Estes ícones são SVGs específicos do projeto e **não têm equivalente no Lucide**. Devem ser mantidos como assets SVG importados diretamente:
91
-
92
- ### Ícones de extensão de arquivo
93
- | SVG | Uso | Ação |
94
- |:----|:----|:-----|
95
- | `asp.svg`, `csv.svg`, `doc.svg`, `docx.svg`, `gif.svg`, `htm.svg`, `html.svg`, `jpg.svg`, `jpeg.svg`, `mp3.svg`, `mp4.svg`, `ods.svg`, `odt.svg`, `pdf.svg`, `png.svg`, `ppt.svg`, `pptx.svg`, `rar.svg`, `txt.svg`, `xls.svg`, `xlsx.svg`, `zip.svg` | Ícones de tipo de arquivo | Manter como SVG — representam extensões com cores e tipografia específicas |
96
- | `gdocs.svg`, `gsheets.svg` | Google Docs/Sheets | Manter como SVG |
97
-
98
- ### Ícones customizados do domínio
99
- | SVG | Lucide alternativo | Ação |
100
- |:----|:----|:-----|
101
- | `calendar.svg` | `Calendar` | Substituir por Lucide |
102
- | `clock-exclamation.svg` | `ClockAlert` ¹ | Verificar se existe no Lucide |
103
- | `distance.svg`, `distance-control.svg`, `distance-flow.svg` | — | Manter como SVG (domínio específico) |
104
- | `document.svg`, `document-configuration.svg`, `document-configuration-active.svg` | `FileText` / `FileCog` | Avaliar substituição |
105
- | `double-check.svg` | `CheckCheck` | Substituir por Lucide |
106
- | `double-square.svg` | `CopyPlus` | Avaliar substituição |
107
- | `drag-pan.svg` | `Move` | Substituir por Lucide |
108
- | `empty-state.svg`, `empty-state-control.svg`, `empty-state-flow.svg` | — | Manter (ilustrações) |
109
- | `eye.svg` | `Eye` | Substituir por Lucide |
110
- | `family-star.svg` | — | Manter como SVG |
111
- | `file-key.svg` | `FileKey` | Substituir por Lucide |
112
- | `file-lock.svg`, `file-locker.svg` | `FileLock` | Substituir por Lucide |
113
- | `file-plus.svg` | `FilePlus` | Substituir por Lucide |
114
- | `file-remove.svg` | `FileX` | Substituir por Lucide |
115
- | `flag-check.svg` | `FlagTriangleRight` | Avaliar substituição |
116
- | `folder.svg` | `Folder` | Substituir por Lucide |
117
- | `folder-key.svg` | `FolderKey` | Substituir por Lucide |
118
- | `groups.svg`, `groups-filled.svg` | `Users` | Substituir por Lucide |
119
- | `history.svg` | `History` | Substituir por Lucide |
120
- | `hourglass.svg`, `hourglass_empty.svg` | `Hourglass` | Substituir por Lucide |
121
- | `ia.svg` | `Sparkles` | Substituir por Lucide |
122
- | `info.svg` | `Info` | Substituir por Lucide |
123
- | `key.svg` | `Key` | Substituir por Lucide |
124
- | `notification.svg` | `Bell` | Substituir por Lucide |
125
- | `print.svg` | `Printer` | Substituir por Lucide |
126
- | `recycle-bin.svg` | `Trash2` | Substituir por Lucide |
127
- | `refresh.svg` | `RefreshCw` | Substituir por Lucide |
128
- | `star.svg` | `Star` | Substituir por Lucide |
129
- | `stop.svg` | `CircleStop` | Substituir por Lucide |
130
- | `trash.svg`, `trash-bin.svg` | `Trash2` | Substituir por Lucide |
131
- | `triangle-alert.svg` | `TriangleAlert` | Substituir por Lucide |
132
- | `upload.svg` | `Upload` | Substituir por Lucide |
133
- | `user-group.svg` | `Users` | Substituir por Lucide |
134
- | `user-key.svg` | `UserCog` | Avaliar substituição |
135
- | `user-team.svg`, `user-team-control.svg`, `user-team-flow.svg` | `Users` | Manter se visual único |
136
-
137
- ---
138
-
139
- ## 4. Como migrar na prática
140
-
141
- ### Antes (Angular)
142
- ```html
143
- <mat-icon>edit</mat-icon>
144
- <mat-icon>delete</mat-icon>
145
- <flc-icon iconSize="24px">pdf</flc-icon>
146
- ```
147
-
148
- ### Depois (React)
149
- ```tsx
150
- import { Pencil, Trash2 } from 'lucide-react';
151
- import pdfIcon from '@/assets/icons/pdf.svg';
152
-
153
- <Pencil size={24} />
154
- <Trash2 size={24} />
155
- <img src={pdfIcon} alt="PDF" width={24} height={24} />
156
- ```
157
-
158
- ### Dica: Tamanhos padrão
159
-
160
- | Contexto | Tamanho |
161
- |:---------|:--------|
162
- | Inline (texto, botões) | `size={16}` |
163
- | Padrão (toolbar, menu) | `size={20}` |
164
- | Destaque (cards, empty states) | `size={24}` |
165
- | Ilustração | `size={48}` ou maior |
166
-
167
- ---
168
-
169
- ## 5. Resumo
170
-
171
- | Categoria | Total | Substituir por Lucide | Manter como SVG |
172
- |:----------|:------|:---------------------|:----------------|
173
- | Material Icons | ~50 | **50** (100%) | 0 |
174
- | SVGs de extensão | ~24 | 0 | **24** (100%) |
175
- | SVGs customizados | ~40 | **~25** (62%) | **~15** (38%) |
176
-
177
- > ¹ `ClockAlert` não existe no Lucide atualmente. Usar `Clock` + badge ou manter SVG customizado.