153 lines
3.5 KiB
Markdown
153 lines
3.5 KiB
Markdown
# Scripts de Automação – Dev Sênior Front-end
|
||
|
||
Scripts para acelerar tarefas repetitivas no desenvolvimento.
|
||
|
||
---
|
||
|
||
## Scripts Disponíveis
|
||
|
||
### 1. `check-reuse.js` - Análise de Reutilização
|
||
**Antes de criar qualquer código**, use este script para verificar o que já existe.
|
||
|
||
```bash
|
||
# Buscar componentes/hooks/services relacionados
|
||
node .agent/scripts/check-reuse.js user
|
||
node .agent/scripts/check-reuse.js card
|
||
node .agent/scripts/check-reuse.js auth
|
||
```
|
||
|
||
**Saída**: Lista todos os arquivos relacionados ao termo buscado.
|
||
|
||
---
|
||
|
||
### 2. `create-component.js` - Criar Componente
|
||
Cria estrutura completa de componente (Produção + Dev + index).
|
||
|
||
```bash
|
||
# Componente compartilhado
|
||
node .agent/scripts/create-component.js UserCard
|
||
|
||
# Componente de feature específica
|
||
node .agent/scripts/create-component.js EmployeeCard rh
|
||
node .agent/scripts/create-component.js BoletoList financeiro-v2
|
||
```
|
||
|
||
**Gera**:
|
||
- `[Nome].jsx` - Versão produção
|
||
- `[Nome].dev.jsx` - Versão Playground
|
||
- `index.js` - Entry point
|
||
|
||
---
|
||
|
||
### 3. `create-hook.js` - Criar Hook
|
||
Cria hook customizado com template padrão.
|
||
|
||
```bash
|
||
# Hook global
|
||
node .agent/scripts/create-hook.js useAuth
|
||
|
||
# Hook de feature
|
||
node .agent/scripts/create-hook.js useEmployeeData rh
|
||
node .agent/scripts/create-hook.js useBoletos financeiro-v2
|
||
```
|
||
|
||
**Template inclui**: useState, useEffect, loading, error handling.
|
||
|
||
---
|
||
|
||
### 4. `create-service.js` - Criar Service
|
||
Cria service com CRUD completo.
|
||
|
||
```bash
|
||
# Service global
|
||
node .agent/scripts/create-service.js userService
|
||
|
||
# Service de feature
|
||
node .agent/scripts/create-service.js employeeService rh
|
||
node .agent/scripts/create-service.js boletoService financeiro-v2
|
||
```
|
||
|
||
**Métodos inclusos**: getList, getById, create, update, delete.
|
||
|
||
---
|
||
|
||
## Workflow Recomendado
|
||
|
||
### Criar Novo Componente
|
||
```bash
|
||
# 1. Verificar se já existe
|
||
node .agent/scripts/check-reuse.js UserCard
|
||
|
||
# 2. Se não existir, criar
|
||
node .agent/scripts/create-component.js UserCard rh
|
||
|
||
# 3. Implementar lógica
|
||
# Editar: src/features/rh/components/UserCard/UserCard.jsx
|
||
|
||
# 4. Adicionar ao Playground
|
||
# Cadastrar em: src/features/dev-tools/views/PlaygroundView.jsx
|
||
|
||
# 5. Testar no Playground antes de usar em views
|
||
```
|
||
|
||
### Criar Nova Feature Completa
|
||
```bash
|
||
# 1. Verificar reutilização
|
||
node .agent/scripts/check-reuse.js employee
|
||
|
||
# 2. Criar service
|
||
node .agent/scripts/create-service.js employeeService rh
|
||
|
||
# 3. Criar hook
|
||
node .agent/scripts/create-hook.js useEmployee rh
|
||
|
||
# 4. Criar componentes necessários
|
||
node .agent/scripts/create-component.js EmployeeCard rh
|
||
node .agent/scripts/create-component.js EmployeeForm rh
|
||
|
||
# 5. Testar componentes no Playground
|
||
|
||
# 6. Criar view usando os componentes
|
||
```
|
||
|
||
---
|
||
|
||
## Outros Scripts Úteis
|
||
|
||
### Scripts Existentes
|
||
- `check-orchestrator.js` - Validar orquestrador de agentes
|
||
- `docs-update.js` - Atualizar documentação
|
||
- `git-commit-by-day.js` - Commits organizados por dia
|
||
|
||
---
|
||
|
||
## Regras de Ouro
|
||
|
||
1. **SEMPRE** rodar `check-reuse.js` antes de criar código novo
|
||
2. **SEMPRE** testar no Playground antes de usar em produção
|
||
3. **SEMPRE** validar build: `npm run dev`
|
||
4. **Componentes < 150 linhas** - extrair se maior
|
||
|
||
---
|
||
|
||
## Atalhos Package.json (Adicionar)
|
||
|
||
```json
|
||
{
|
||
"scripts": {
|
||
"new:component": "node .agent/scripts/create-component.js",
|
||
"new:hook": "node .agent/scripts/create-hook.js",
|
||
"new:service": "node .agent/scripts/create-service.js",
|
||
"check:reuse": "node .agent/scripts/check-reuse.js"
|
||
}
|
||
}
|
||
```
|
||
|
||
**Uso após adicionar**:
|
||
```bash
|
||
npm run check:reuse user
|
||
npm run new:component UserCard rh
|
||
npm run new:hook useUserData
|
||
npm run new:service userService
|
||
```
|