forlogic-core 1.5.0 → 1.5.2

package/dist/docs/templates/app-layout.tsx

@@ -0,0 +1,192 @@
+/**
+ * TEMPLATE: App Layout
+ * ⚠️ ORDEM DOS PROVIDERS É CRÍTICA: Consulte docs/AI_REFERENCE.md
+ */
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { 
+  AuthProvider, 
+  AppLayout, 
+  ProtectedRoute,
+  SidebarConfig,
+  Toaster
+} from 'forlogic-core'
+import { Home, Users, Settings, BarChart3 } from 'lucide-react'
+
+// Importar suas páginas
+import { HomePage } from './pages/HomePage'
+import { UsersPage } from './pages/UsersPage'
+import { SettingsPage } from './pages/SettingsPage'
+import { LoginPage } from './pages/LoginPage'
+
+// Configurar React Query
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutos
+      retry: 1
+    }
+  }
+})
+
+// Configuração da sidebar
+const sidebarConfig: SidebarConfig = {
+  appName: 'APP_NAME',
+  navigation: [
+    { 
+      label: 'Dashboard', 
+      path: '/', 
+      icon: BarChart3,
+      complementaryText: 'Visão geral do sistema'
+    },
+    { 
+      label: 'Usuários', 
+      path: '/users', 
+      icon: Users,
+      complementaryText: 'Gestão de usuários'
+    },
+    { 
+      label: 'Configurações', 
+      path: '/settings', 
+      icon: Settings,
+      complementaryText: 'Configurações do sistema'
+    }
+  ]
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <Router>
+          <Routes>
+            {/* Rota pública de login */}
+            <Route path="/login" element={<LoginPage />} />
+            
+            {/* Rotas protegidas com layout */}
+            <Route path="/*" element={
+              <ProtectedRoute>
+                <AppLayout sidebarConfig={sidebarConfig}>
+                  <Routes>
+                    <Route path="/" element={<HomePage />} />
+                    <Route path="/users" element={<UsersPage />} />
+                    <Route path="/settings" element={<SettingsPage />} />
+                  </Routes>
+                </AppLayout>
+              </ProtectedRoute>
+            } />
+          </Routes>
+        </Router>
+        <Toaster />
+      </AuthProvider>
+    </QueryClientProvider>
+  )
+}
+
+export default App
+
+/* 
+ESTRUTURA ALTERNATIVA - Layout por Página:
+
+Se preferir controlar o layout por página:
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <Router>
+          <Routes>
+            {/* Páginas sem layout */}
+            <Route path="/login" element={<LoginPage />} />
+            
+            {/* Páginas com layout */}
+            <Route path="/" element={
+              <ProtectedRoute>
+                <AppLayout sidebarConfig={sidebarConfig}>
+                  <HomePage />
+                </AppLayout>
+              </ProtectedRoute>
+            } />
+            
+            <Route path="/users" element={
+              <ProtectedRoute>
+                <AppLayout sidebarConfig={sidebarConfig}>
+                  <UsersPage />
+                </AppLayout>
+              </ProtectedRoute>
+            } />
+          </Routes>
+        </Router>
+        <Toaster />
+      </AuthProvider>
+    </QueryClientProvider>
+  )
+}
+
+EXEMPLO DE PÁGINA DE LOGIN:
+
+import { useState } from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth, Button, Input, Card, CardContent, CardHeader, CardTitle } from 'forlogic-core'
+
+export function LoginPage() {
+  const { user, login } = useAuth()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  if (user) {
+    return <Navigate to="/" replace />
+  }
+
+  const handleLogin = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      await login(email, password)
+    } catch (error) {
+      console.error('Erro no login:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Entrar no Sistema</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleLogin} className="space-y-4">
+            <Input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <Input
+              type="password"
+              placeholder="Senha"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Entrando...' : 'Entrar'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+CONFIGURAÇÃO DE AMBIENTE:
+
+Certifique-se de ter as variáveis de ambiente configuradas:
+
+REACT_APP_SUPABASE_URL=your_supabase_url
+REACT_APP_SUPABASE_ANON_KEY=your_supabase_anon_key
+*/

package/dist/docs/templates/basic-crud-page.tsx

@@ -0,0 +1,97 @@
+/**
+ * TEMPLATE: CRUD Básico
+ * ⚠️ REGRAS: Consulte docs/AI_REFERENCE.md
+ */
+import { createSimpleService, createCrudPage, createSimpleSaveHandler } from 'forlogic-core';
+
+// 1. Definir interfaces
+interface ENTITY_INTERFACE {
+  id: string;
+  FIELD_NAME: FIELD_TYPE;
+  created_at?: Date;
+  updated_at?: Date;
+}
+
+interface CreateENTITY_INTERFACEPayload {
+  FIELD_NAME: FIELD_TYPE;
+}
+
+interface UpdateENTITY_INTERFACEPayload {
+  FIELD_NAME: FIELD_TYPE;
+}
+
+// 2. Criar service
+const { service: SERVICE_NAME, useCrudHook: useENTITY_NAMECrud } = 
+  createSimpleService<ENTITY_INTERFACE, CreateENTITY_INTERFACEPayload, UpdateENTITY_INTERFACEPayload>({
+    tableName: 'TABLE_NAME',
+    entityName: 'ENTITY_NAME_SINGULAR',
+    searchFields: ['FIELD_NAME'],
+    schemaName: 'YOUR_SCHEMA' // Use o schema do seu projeto (ex: 'central', 'trainings', 'public')
+  });
+
+// 3. Criar página
+export const ENTITY_NAMEPage = () => {
+  const manager = useENTITY_NAMECrud();
+
+  const handleSave = createSimpleSaveHandler<ENTITY_INTERFACE, CreateENTITY_INTERFACEPayload, UpdateENTITY_INTERFACEPayload>(
+    manager,
+    (data) => ({ FIELD_NAME: data.FIELD_NAME }),
+    (data) => ({ FIELD_NAME: data.FIELD_NAME })
+  );
+
+  const CrudPageComponent = createCrudPage({
+    manager,
+    config: {
+      entityName: 'ENTITY_NAME_SINGULAR',
+      entityNamePlural: 'ENTITY_PLURAL',
+      columns: [
+        { key: 'FIELD_NAME', label: 'FIELD_LABEL', type: 'FIELD_TYPE' as const }
+      ],
+      formSections: [
+        {
+          id: 'basic',
+          title: 'Informações',
+          fields: [
+            { name: 'FIELD_NAME', label: 'FIELD_LABEL', type: 'FIELD_TYPE', required: true }
+          ]
+        }
+      ]
+    },
+    onSave: handleSave
+  });
+
+  return <CrudPageComponent />;
+};
+
+/* 
+INSTRUÇÕES DE USO:
+
+1. Substitua os placeholders:
+   - ENTITY_NAME: Nome do componente (ex: Products)
+   - ENTITY_INTERFACE: Interface TypeScript (ex: Product)
+   - ENTITY_NAME_SINGULAR: Nome singular em português (ex: produto)
+   - ENTITY_PLURAL: Nome plural em português (ex: Produtos)
+   - TABLE_NAME: Nome da tabela no Supabase (ex: products)
+   - FIELD_NAME: Nome do campo (ex: name)
+   - FIELD_LABEL: Label do campo (ex: Nome)
+   - FIELD_TYPE: Tipo TypeScript (ex: string, number, boolean)
+
+2. Adicione ao router:
+   <Route path="/ROUTE_PATH" element={<ENTITY_NAMEPage />} />
+
+3. Adicione à sidebar se necessário:
+   { label: 'LABEL', path: '/ROUTE_PATH', icon: ICON_NAME }
+
+4. Este padrão garante:
+   ✅ Interface CRUD completa
+   ✅ Formulário com validação
+   ✅ Tabela com ações
+   ✅ Estados de loading
+   ✅ UPDATE que funciona corretamente (preserva ID)
+   ✅ Tratamento de erros
+
+IMPORTANTE:
+- SEMPRE use useCrudHook() dentro do componente
+- SEMPRE use createSimpleSaveHandler para garantir UPDATE correto
+- NUNCA passe service diretamente para createCrudPage (causa erro "isLoading is undefined")
+*/

package/dist/docs/templates/basic-crud-working.tsx

@@ -0,0 +1,182 @@
+/**
+ * TEMPLATE: CRUD 100% Funcional
+ * ⚠️ REGRAS: Consulte docs/AI_REFERENCE.md
+ */
+
+import { createSimpleService, createCrudPage, createSimpleSaveHandler } from 'forlogic-core';
+
+// ============= PASSO 1: DEFINIR TIPOS =============
+
+interface MyEntity {
+  id: string;
+  title: string;
+  description: string;
+  active: boolean;
+  created_at?: Date;
+  updated_at?: Date;
+}
+
+interface CreateMyEntityPayload {
+  title: string;
+  description: string;
+  active: boolean;
+}
+
+interface UpdateMyEntityPayload {
+  title: string;
+  description: string;
+  active: boolean;
+}
+
+// ============= PASSO 2: CRIAR SERVICE =============
+
+const { service, useCrudHook } = createSimpleService<MyEntity, CreateMyEntityPayload, UpdateMyEntityPayload>({
+  tableName: 'my_entities',        // Nome da tabela no Supabase
+  entityName: 'minha entidade',    // Nome singular (para mensagens)
+  searchFields: ['title', 'description'], // Campos pesquisáveis
+  schemaName: 'YOUR_SCHEMA',        // Use o schema do seu projeto (ex: 'central', 'trainings', 'public')
+  enableQualiexEnrichment: true     // Enriquecimento automático com dados do Qualiex
+});
+
+// ============= PASSO 3: CRIAR COMPONENTE DA PÁGINA =============
+
+export const MyEntitiesPage = () => {
+  // Hook que retorna o manager com todos os métodos CRUD
+  const manager = useCrudHook();
+
+  // Handler que garante que UPDATE preserva o ID
+  const handleSave = createSimpleSaveHandler<MyEntity, CreateMyEntityPayload, UpdateMyEntityPayload>(
+    manager,
+    // Transform CREATE - define campos do payload de criação
+    (data) => ({
+      title: data.title,
+      description: data.description || '',
+      active: data.active ?? true
+    }),
+    // Transform UPDATE - define campos do payload de atualização
+    (data) => ({
+      title: data.title,
+      description: data.description || '',
+      active: data.active
+    })
+  );
+
+  // Cria o componente da página CRUD
+  const CrudPageComponent = createCrudPage({
+    manager, // SEMPRE passe manager aqui, NUNCA service
+    config: {
+      entityName: 'Minha Entidade',
+      entityNamePlural: 'Minhas Entidades',
+      
+      // Colunas da tabela
+      columns: [
+        { 
+          key: 'title', 
+          label: 'Título', 
+          type: 'text' as const, 
+          required: true, 
+          searchable: true 
+        },
+        { 
+          key: 'description', 
+          label: 'Descrição', 
+          type: 'text' as const 
+        },
+        { 
+          key: 'active', 
+          label: 'Ativo', 
+          type: 'boolean' as const 
+        }
+      ],
+      
+      // Seções do formulário
+      formSections: [
+        {
+          id: 'basic-info',
+          title: 'Informações Básicas',
+          fields: [
+            { 
+              name: 'title', 
+              label: 'Título', 
+              type: 'text', 
+              required: true,
+              placeholder: 'Digite o título'
+            },
+            { 
+              name: 'description', 
+              label: 'Descrição', 
+              type: 'textarea',
+              placeholder: 'Digite a descrição (opcional)'
+            },
+            { 
+              name: 'active', 
+              label: 'Ativo', 
+              type: 'boolean' 
+            }
+          ]
+        }
+      ]
+    },
+    onSave: handleSave // Handler que garante UPDATE correto
+  });
+
+  return <CrudPageComponent />;
+};
+
+// ============= CHECKLIST DE USO =============
+/*
+✅ Definir interface da entidade (MyEntity)
+✅ Definir interfaces de payload (CreateMyEntityPayload, UpdateMyEntityPayload)
+✅ Criar service com createSimpleService
+✅ Usar useCrudHook() dentro do componente
+✅ Criar handleSave com createSimpleSaveHandler
+✅ Passar manager (não service) para createCrudPage
+✅ Configurar columns e formSections
+✅ Adicionar rota no router
+✅ Adicionar item na sidebar se necessário
+
+❌ ERROS COMUNS A EVITAR:
+- Passar service para createCrudPage (causa "isLoading is undefined")
+- Não usar createSimpleSaveHandler (causa UPDATE criar novo registro)
+- Esquecer de chamar useCrudHook() (sem manager, componente quebra)
+- Usar interface errada para payloads (validação falha)
+*/
+
+// ============= EXEMPLOS DE CAMPOS ESPECIAIS =============
+/*
+// Campo select com opções fixas:
+{ 
+  name: 'category', 
+  label: 'Categoria', 
+  type: 'select',
+  options: [
+    { label: 'Opção 1', value: 'opt1' },
+    { label: 'Opção 2', value: 'opt2' }
+  ],
+  required: true
+}
+
+// Campo de usuário do Qualiex:
+{ 
+  name: 'id_user', 
+  label: 'Responsável', 
+  type: 'simple-qualiex-user-field',
+  required: true
+}
+
+// Campo de data:
+{ 
+  name: 'due_date', 
+  label: 'Data de Vencimento', 
+  type: 'date'
+}
+
+// Campo numérico:
+{ 
+  name: 'quantity', 
+  label: 'Quantidade', 
+  type: 'number',
+  min: 0,
+  step: 1
+}
+*/