🚀 crud-syntheticaia

Motor universal de CRUD que gera automaticamente 80% de qualquer sistema administrativo através de schemas declarativos.

✨ Features

• 🎯 Schema-Driven Development - Defina schemas, obtenha CRUD completo
• 📝 25 Tipos de Campo - De texto simples a relacionamentos complexos
• ✅ Validação Automática - Zod com mensagens em português
• 🎨 UI Pronta - Componentes da ui-syntheticaia (WCAG AA)
• 🔌 Sistema de Plugins - Extensível via hooks e campos customizados
• 📊 Export Completo - CSV, Excel, PDF
• 🔍 Filtros Avançados - QueryBuilder com operadores complexos
• 🏢 Multi-Tenancy - Isolamento completo de dados
• 🧪 98.8% Testado - 949 testes, cobertura 93%+
• 📦 60KB gzipped - Bundle otimizado

📦 Instalação

npm install crud-syntheticaia ui-syntheticaia
# ou
yarn add crud-syntheticaia ui-syntheticaia
# ou
pnpm add crud-syntheticaia ui-syntheticaia

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "@tanstack/react-query": "^5.0.0",
  "zod": "^3.0.0"
}

🚀 Início Rápido

1. Defina um Schema

import { EntitySchema } from 'crud-syntheticaia'

const produtoSchema: EntitySchema = {
  entidade: 'produto',
  campos: [
    {
      name: 'nome',
      type: 'texto',
      label: 'Nome do Produto',
      required: true
    },
    {
      name: 'preco',
      type: 'moeda',
      label: 'Preço',
      required: true
    },
    {
      name: 'ativo',
      type: 'switch',
      label: 'Produto Ativo',
      defaultValue: true
    },
    {
      name: 'categoria',
      type: 'selecao',
      label: 'Categoria',
      options: ['Eletrônicos', 'Roupas', 'Alimentos']
    },
  ],
  display: {
    titulo: 'Produtos',
    descricao: 'Gestão de produtos',
    campoTitulo: 'nome'
  }
}

2. Use o CrudContainer

import { CrudContainer } from 'crud-syntheticaia'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CrudContainer schema={produtoSchema} />
    </QueryClientProvider>
  )
}

Pronto! Você tem um CRUD completo com:

• ✅ Formulário de criar/editar
• ✅ Tabela de listagem
• ✅ Busca
• ✅ Validação
• ✅ Ações CRUD

📚 Tipos de Campo Suportados

Básicos

• texto, textoLongo, numero, decimal, moeda, porcentagem
• email, telefone, url, cpf, cnpj
• booleano, switch

Datas

• data, dataHora, hora

Seleção

• selecao, selecaoMultipla, radio, tags

Avançados

• arquivo, imagem, video
• richText, codigo, json
• cor, avaliacao, localizacao

Relacionamentos

• relacao (1:1, N:1)
• relacaoMultipla (1:N, N:N)

🔧 Uso Avançado

Validação Customizada

{
  name: 'email',
  type: 'email',
  label: 'Email',
  required: true,
  validation: {
    pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i,
    message: 'Email inválido'
  }
}

Relacionamentos

{
  name: 'cliente',
  type: 'relacao',
  label: 'Cliente',
  relation: {
    entity: 'cliente',
    displayField: 'nome',
    filter: { ativo: true },
    orderBy: { field: 'nome', direction: 'asc' }
  }
}

Plugins

import { PluginManager, auditPlugin } from 'crud-syntheticaia'

const manager = PluginManager.getInstance()

// Plugin de auditoria
manager.register(auditPlugin)

// Plugin customizado
manager.register({
  name: 'my-plugin',
  version: '1.0.0',
  beforeHooks: {
    create: async (operation, data, context) => {
      return {
        ...data,
        createdBy: context.userId,
        createdAt: new Date().toISOString()
      }
    }
  }
})

Filtros Avançados

import { CrudContainer } from 'crud-syntheticaia'

<CrudContainer
  schema={schema}
  config={{
    allowAdvancedFilters: true
  }}
/>

Export de Dados

import { exportToCSV, exportToExcel, exportToPDF } from 'crud-syntheticaia'

// Export manual
exportToCSV(schema, data, 'produtos.csv')
exportToExcel(schema, data, 'produtos.xlsx')
exportToPDF(schema, data)

// Ou use bulk actions no CrudContainer
<CrudContainer
  schema={schema}
  config={{
    allowSelection: true
  }}
/>

🏗️ Arquitetura

┌─────────────────────────────────┐
│  Aplicações Específicas         │
│  (PDV, CRM, Estoque, etc)       │
└────────────┬────────────────────┘
             │ usa
             ▼
┌─────────────────────────────────┐
│  crud-syntheticaia              │  ← ESTE PACOTE
│  • Schemas & Validação          │
│  • Hooks & Estado               │
│  • Lógica de Negócio            │
└────────────┬────────────────────┘
             │ usa
             ▼
┌─────────────────────────────────┐
│  ui-syntheticaia                │
│  • 92+ Componentes UI           │
│  • Tailwind + Shadcn/UI         │
│  • WCAG AA 85% conforme         │
└────────────┬────────────────────┘
             │ conecta
             ▼
┌─────────────────────────────────┐
│  Backend API                    │
│  (REST, GraphQL, etc)           │
└─────────────────────────────────┘

🧪 Desenvolvimento

# Instalar dependências
npm install

# Dev mode (showcase)
npm run dev

# Testes
npm test
npm run test:watch
npm run test:coverage

# Type checking
npm run typecheck

# Build
npm run build

# Lint
npm run lint
npm run format

📊 Performance

• Bundle Size: 60KB gzipped (core)
• Tree Shakeable: ✅ Sim
• Code Splitting: ✅ Suportado
• SSR Compatible: ✅ Sim

🤝 Contribuindo

Contribuições são bem-vindas! Por favor:

1. Fork o projeto
2. Crie uma branch (git checkout -b feature/MinhaFeature)
3. Commit suas mudanças (git commit -m 'Add: Minha feature')
4. Push para a branch (git push origin feature/MinhaFeature)
5. Abra um Pull Request

📝 Licença

MIT © Synthetica Suite

🔗 Links

• Documentação Completa
• ROADMAP
• CHANGELOG
• Exemplos
• ui-syntheticaia

🙏 Agradecimentos

Parte do ecossistema Synthetica Suite - Ferramentas enterprise para desenvolvimento ágil.

Feito com ❤️ por Synthetica.IA