forlogic-core 2.1.4 → 2.2.0

package/docs/design-system/examples.md

@@ -1,275 +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>
-  );
-}
-```
+# 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

@@ -41,7 +41,7 @@ const NotesPage = createCrudPage({
 - 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`
+> Fonte: `src/design-system/docs/components/crud/CrudOverviewDoc.tsx`
 
 ---