CoreSuit React Generator

Gerador de CRUD completo em React + TypeScript, seguindo o padrão arquitetural CoreSuit, focado em produtividade, padronização e integração direta com APIs REST.

Este gerador cria automaticamente types, services, páginas, hooks, filtros, formulários, tabelas e modais utilizando:

• React + TypeScript
• MUI (Material UI)
• React Hook Form
• Yup
• React Query
• Estrutura modular e escalável

🎯 Objetivo

Padronizar e acelerar a criação de módulos CRUD no front-end, garantindo:

• Consistência de código
• Redução de erros manuais
• Facilidade de manutenção
• Integração direta com APIs REST
• Escalabilidade para sistemas grandes (ERP, CRM, SaaS)

📦 O que é gerado automaticamente

Para cada entidade, o gerador cria:

🔹 Types

• Interface principal da entidade (I<Entity>)
• Types de request (Get, Create, Update, Delete, Restore)

🔹 Service

• Funções de comunicação com a API:
  • Get (paginado)
  • GetById
  • Create
  • Update
  • Delete (soft delete)
  • Restore

🔹 Páginas

• Listagem com tabela paginada
• Create (Drawer)
• Update (Drawer)
• Delete (Dialog)
• Restore (Dialog)

🔹 Hooks

• useIndex
• useCreate
• useUpdate
• useDelete
• useRestore

🔹 UI / UX

• Filtros dinâmicos
• Drawer de filtros
• Tabela com ordenação
• Labels de status (ativo/inativo)
• Feedback visual com Snackbar
• Integração com React Query

🗂️ Estrutura gerada

src/
├── types/
│   └── system/
│       └── i-bank.ts
│
├── services/
│   └── system/
│       └── bank/
│           ├── index.ts
│           └── types.ts
│
├── pages/
│   └── bank/
│       ├── index.tsx
│       ├── consts/
│       │   └── index.ts
│       ├── components/
│       │   └── bank-filters-component.tsx
│       ├── hooks/
│       │   ├── use-bank-index.ts
│       │   ├── use-bank-create.ts
│       │   ├── use-bank-update.ts
│       │   ├── use-bank-delete.ts
│       │   └── use-bank-restore.ts
│       ├── create/
│       ├── update/
│       ├── delete/
│       └── restore/

⚙️ Instalação no projeto

1 Instalar o gerador como dependência de desenvolvimento

npm install -D C:\dev\core-suit\generate-crud-react-js

npm i @jean.anjos/coresuit-gen-crud

Pode ser publicado no npm e instalado via npm i -D @coresuit/react-gen.

2 Configurar script no package.json

{
  "scripts": {
    "generate": "coresuit-react-gen"
  }
}

🚀 Como usar o gerador

🔹 Modo

Geração direta informando nome da entidade e campos:

npm run generate -- --name=Bank --fields="Code:string:true,Name:string:true"

• Formato dos campos:
• Campo:Tipo:Obrigatório

Exemplo:

• Code:string:true
• Name:string:true

Tipos suportados:

• nstring

• int

• number

• boolean

• date

🧠 Convenções adotadas

Entidade: PascalCase (Bank)

Service: camelCase (bankService)

Rotas: nome da entidade (Bank)

Campos da API: respeitam exatamente o contrato do backend

Soft Delete: baseado em deletedAt

Paginação: padrão PageNumber, PageSize, SortBy, Direction

📤 Publicação no npm (para mantenedores)

Após atualizar versão no package.json:

npm publish --access public

É necessário:

Conta no npm

2FA habilitado

📄 Licença

MIT © CoreSuit

👨‍💻 Autor

• Jean Anjos
• Arquiteto de Software | Full Stack Engineer
• Especialista em sistemas corporativos, SaaS, ERPs e automação de CRUDs.