forlogic-core 2.0.3 → 2.0.4

package/docs/design-system/examples.md

@@ -0,0 +1,275 @@
+# Golden Snippets — Exemplos Completos do Design System
+
+> Implementações de referência para a IA copiar e adaptar.
+> Cada snippet é funcional e segue 100% dos padrões do DS.
+
+---
+
+## 1. CRUD Completo com createCrudPage
+
+```tsx
+// src/pages/ProcessesPage.tsx
+import { createSimpleService, createCrudPage, usePageMetadata } from 'forlogic-core';
+
+const processService = createSimpleService({
+  tableName: 'processes',
+  schema: 'quality',
+  entityName: 'processo',
+  searchFields: ['title', 'description'],
+});
+
+const ProcessesPage = createCrudPage({
+  title: 'Processos',
+  service: processService,
+  columns: [
+    { key: 'title', header: 'Título' },
+    { key: 'status', header: 'Status' },
+    { key: 'responsible', header: 'Responsável' },
+    { key: 'updated_at', header: 'Atualizado em', format: 'datetime' },
+  ],
+  formSections: [{
+    id: 'main',
+    fields: [
+      { name: 'title', label: 'Título', type: 'text', required: true },
+      { name: 'description', label: 'Descrição', type: 'textarea' },
+      { name: 'status', label: 'Status', type: 'combobox', options: [
+        { value: 'active', label: 'Ativo' },
+        { value: 'inactive', label: 'Inativo' },
+      ]},
+      { name: 'id_responsible', label: 'Responsável', type: 'combobox', entity: 'users' },
+    ],
+  }],
+  actions: [
+    { label: 'Editar', action: 'edit' },
+    { label: 'Inativar', action: 'toggle-status', confirm: true },
+  ],
+});
+
+export default ProcessesPage;
+```
+
+---
+
+## 2. CrudTable Customizado com ActionButton
+
+```tsx
+// src/pages/DocumentsPage.tsx
+import {
+  CrudTable, CrudActionBar, ActionButton, Badge,
+  usePageMetadata, useTranslation, getSupabaseClient,
+} from 'forlogic-core';
+
+export function DocumentsPage() {
+  const { t } = useTranslation();
+  usePageMetadata({ title: t('documents'), subtitle: t('documents_subtitle') });
+
+  const columns = [
+    { key: 'name', header: 'Nome' },
+    {
+      key: 'status',
+      header: 'Status',
+      cell: (row) => (
+        <Badge variant={row.status === 'approved' ? 'default' : 'secondary'}>
+          {row.status}
+        </Badge>
+      ),
+    },
+    { key: 'version', header: 'Versão' },
+    {
+      key: 'actions',
+      header: '',
+      cell: (row) => (
+        <ActionButton
+          actions={[
+            { label: 'Editar', onClick: () => handleEdit(row) },
+            { label: 'Duplicar', onClick: () => handleDuplicate(row) },
+            { label: 'Inativar', onClick: () => handleDeactivate(row), variant: 'destructive' },
+          ]}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-6 space-y-4">
+      <CrudActionBar
+        onAdd={() => setDialogOpen(true)}
+        addLabel="Novo Documento"
+        showSearch
+      />
+      <CrudTable columns={columns} data={documents} />
+    </div>
+  );
+}
+```
+
+---
+
+## 3. Layout com AppLayout + Sidebar + Separador
+
+```tsx
+// src/App.tsx
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { CoreProviders, AppLayout } from 'forlogic-core';
+import { Home, FileText, Settings, BarChart3 } from 'lucide-react';
+import ptBR from './i18n/pt-BR.json';
+
+const sidebarConfig = {
+  navigation: [
+    { label: 'Início', path: '/', icon: Home },
+    { label: 'Documentos', path: '/documents', icon: FileText },
+    { label: 'Relatórios', path: '/reports', icon: BarChart3 },
+    { type: 'separator' as const, label: '', path: '' },
+    { label: 'Configurações', path: '/settings', icon: Settings },
+  ],
+};
+
+export default function App() {
+  return (
+    <CoreProviders moduleAlias="quality" appTranslations={{ 'pt-BR': ptBR }}>
+      <BrowserRouter>
+        <AppLayout sidebarConfig={sidebarConfig}>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/documents" element={<DocumentsPage />} />
+          </Routes>
+        </AppLayout>
+      </BrowserRouter>
+    </CoreProviders>
+  );
+}
+```
+
+---
+
+## 4. Formulário com Dialog + BaseForm + Combobox
+
+```tsx
+// src/components/ProcessForm.tsx
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+  Input, Label, Combobox, Button,
+  useTranslation,
+} from 'forlogic-core';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const schema = z.object({
+  title: z.string().min(3, 'Mínimo 3 caracteres'),
+  status: z.string(),
+  id_responsible: z.string().uuid(),
+});
+
+type FormData = z.infer<typeof schema>;
+
+interface ProcessFormProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: FormData) => void;
+  defaultValues?: Partial<FormData>;
+}
+
+export function ProcessForm({ open, onOpenChange, onSubmit, defaultValues }: ProcessFormProps) {
+  const { t } = useTranslation();
+  const form = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues,
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{defaultValues ? t('edit') : t('create')}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">{t('title')}</Label>
+            <Input id="title" {...form.register('title')} />
+          </div>
+          <div className="space-y-2">
+            <Label>{t('status')}</Label>
+            <Combobox
+              options={[
+                { value: 'active', label: 'Ativo' },
+                { value: 'inactive', label: 'Inativo' },
+              ]}
+              value={form.watch('status')}
+              onValueChange={(v) => form.setValue('status', v)}
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>{t('cancel')}</Button>
+            <Button type="submit">{t('save')}</Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+---
+
+## 5. Supabase com Schema Correto
+
+```tsx
+// src/services/processService.ts
+import { getSupabaseClient } from 'forlogic-core';
+
+const SCHEMA = 'quality';
+
+export async function fetchProcesses() {
+  const supabase = getSupabaseClient();
+  const { data, error } = await supabase
+    .schema(SCHEMA)
+    .from('processes')
+    .select('*')
+    .is('deleted_at', null)
+    .order('created_at', { ascending: false });
+
+  if (error) throw error;
+  return data;
+}
+
+export async function softDeleteProcess(id: string) {
+  const supabase = getSupabaseClient();
+  const { error } = await supabase
+    .schema(SCHEMA)
+    .from('processes')
+    .update({ deleted_at: new Date().toISOString() })
+    .eq('id', id);
+
+  if (error) throw error;
+}
+```
+
+---
+
+## 6. Página com usePageMetadata + Breadcrumbs
+
+```tsx
+// src/pages/ProcessDetailPage.tsx
+import { usePageMetadata } from 'forlogic-core';
+import { useParams } from 'react-router-dom';
+
+export function ProcessDetailPage() {
+  const { id } = useParams();
+
+  usePageMetadata({
+    title: 'Detalhes do Processo',
+    subtitle: 'Visualize e edite os dados do processo',
+    breadcrumbs: [
+      { label: 'Processos', href: '/processes' },
+      { label: 'Detalhes' },
+    ],
+  });
+
+  return (
+    <div className="p-6">
+      {/* conteúdo da página */}
+    </div>
+  );
+}
+```

package/docs/design-system/foundation.md

@@ -0,0 +1,82 @@
+<!-- ⚠️ ARQUIVO GERADO AUTOMATICAMENTE — NÃO EDITAR MANUALMENTE -->
+<!-- Fonte: src/design-system/docs/ | Regenerar: npx tsx scripts/generate-ds-docs.ts -->
+
+# Fundação
+
+Categoria: **Fundação** | 7 componentes
+
+### CRUD Overview
+
+Visão geral da arquitetura CRUD do forlogic-core. Explica os 3 níveis de abstração: createCrudPage (alto nível), CrudTable/CrudGrid (médio nível) e Primitives (baixo nível).
+
+**Uso:**
+```tsx
+import { createSimpleService, createCrudPage } from 'forlogic-core';
+
+const notesService = createSimpleService({
+  tableName: 'notes',
+  entityName: 'nota',
+  searchFields: ['title', 'content'],
+});
+
+const NotesPage = createCrudPage({
+  title: 'Notas',
+  service: notesService,
+  columns: [
+    { key: 'title', header: 'Título' },
+    { key: 'content', header: 'Conteúdo' },
+  ],
+  formSections: [{
+    id: 'main',
+    fields: [
+      { name: 'title', label: 'Título', type: 'text', required: true },
+      { name: 'content', label: 'Conteúdo', type: 'textarea' },
+    ],
+  }],
+});
+```
+
+**Notas:**
+- Nível Alto: createCrudPage — página CRUD completa com 1 configuração
+- Nível Médio: CrudTable/CrudGrid — componentes compostos para layouts customizados
+- Nível Baixo: Primitives (DataTable, DataPagination, DataFilterBar) — controle total
+
+> Fonte: `src\design-system\docs\components\crud\CrudOverviewDoc.tsx`
+
+---
+
+### Cores
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Espaçamento
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Ícones
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Raio
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Sombras
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Tipografia
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---

package/docs/design-system/infra-utils.md

@@ -0,0 +1,36 @@
+<!-- ⚠️ ARQUIVO GERADO AUTOMATICAMENTE — NÃO EDITAR MANUALMENTE -->
+<!-- Fonte: src/design-system/docs/ | Regenerar: npx tsx scripts/generate-ds-docs.ts -->
+
+# Developer Tools
+
+Categoria: **Developer Tools** | 5 componentes
+
+### Audit Log (Elasticsearch)
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Contexts
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Hooks
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Services
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Utilities
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---