3.4 KiB

Raw Blame History

description
Workflow completo para criar nova feature

Workflow: Criar Nova Feature

Processo completo para desenvolver uma nova funcionalidade seguindo padrões do projeto.

Pré-requisitos

Identificar o ambiente (rh, financeiro-v2, prafrota, etc)
Definir nome da feature
Listar componentes/hooks/services necessários

Etapas

1. Análise de Reutilização

Antes de criar qualquer código, verificar o que já existe:

# Buscar componentes similares
node .agent/scripts/check-reuse.js [termo-relacionado]

Pergunte:

Posso reutilizar componentes existentes?
Posso estender hooks atuais?
Services similares já existem?

2. Criar Service (se necessário)

node .agent/scripts/create-service.js [nomeService] [ambiente]

Ajustar:

Endpoints da API
Mapeamento de dados (adapters)
Tratamento de erros

3. Criar Hook (se necessário)

node .agent/scripts/create-hook.js use[NomeHook] [ambiente]

Implementar:

Lógica de negócio
Integração com service
Estados (loading, error, data)

4. Criar Componentes

# Para cada componente necessário
node .agent/scripts/create-component.js [NomeComponente] [ambiente]

Ordem recomendada:

Componentes básicos (Cards, Forms)
Componentes compostos (que usam os básicos)
View principal

5. Testar no Playground

OBRIGATÓRIO antes de usar em produção:

Cadastrar componentes em PlaygroundView.jsx
Adicionar variantes Dev com controles
Testar estados: loading, error, success
Validar responsividade

6. Criar View

Estrutura:

src/features/[ambiente]/views/
└── [FeatureName]View.jsx

Implementar:

Importar componentes do Playground
Usar hooks criados
Layout e estrutura
Validar isolamento (não importar de outros ambientes)

7. Validação

// turbo-all

# Build sem erros
npm run dev

# Verificar console (sem warnings)
# Abrir no navegador: http://localhost:5173

# Testar fluxos:
# - Happy path (uso normal)
# - Error path (API offline, campos vazios)

8. Documentação

Atualizar documentação relevante:

README do ambiente (se houver)
Comentários JSDoc nos arquivos
Adicionar exemplos no Playground

Checklist Final

Reutilização verificada com check-reuse.js
Service criado e testado
Hook implementado com error handling
Componentes < 150 linhas cada
Todos os componentes testados no Playground
View usando apenas componentes validados
Build roda sem erros
Sem warnings no console
Responsividade validada
Documentação atualizada

Exemplo Completo: Feature "Folha de Pagamento"

# 1. Verificar reutilização
node .agent/scripts/check-reuse.js payroll

# 2. Criar service
node .agent/scripts/create-service.js payrollService rh

# 3. Criar hook
node .agent/scripts/create-hook.js usePayroll rh

# 4. Criar componentes
node .agent/scripts/create-component.js PayrollCard rh
node .agent/scripts/create-component.js PayrollForm rh
node .agent/scripts/create-component.js PayrollTable rh

# 5. Cadastrar no Playground e testar

# 6. Criar view: src/features/rh/views/PayrollView.jsx

# 7. Validar
npm run dev

IMPORTANTE: Nunca pular a etapa de Playground! Todo componente deve ser validado antes de usar em produção.

3.4 KiB Raw Blame History