story-generator/docs/desenvolvimento.md

Fluxo de Desenvolvimento

Padrões de Código

1. Nomenclatura

• Diretórios em kebab-case: components/form-wizard
• Componentes em PascalCase: StoryCard.tsx
• Utilitários em camelCase: formatText.ts
• Variáveis em camelCase: userScore

2. TypeScript

• Preferir interfaces sobre types
• Usar const com asserção as const
• Retornos explícitos em funções
• Imports relativos

Estrutura de Commits

1. Prefixos

• fix: Correções de bugs
• feat: Novos recursos
• perf: Melhorias de performance
• docs: Documentação
• style: Formatação
• refactor: Refatoração
• test: Testes
• chore: Manutenção

2. Formato

<tipo>: <descrição>

[corpo]

[rodapé]

Fluxo de Branches

1. Principais

• main: Produção
• develop: Desenvolvimento
• staging: Homologação

2. Features

# Nova feature
git checkout -b feature/nome-da-feature

# Commit das mudanças
git commit -m "feat: adiciona novo componente"

# Push para remote
git push origin feature/nome-da-feature

Code Review

1. Checklist

• Código limpo e legível
• Testes adequados
• Documentação atualizada
• Performance otimizada
• Segurança verificada

2. Pull Request

## Descrição
Breve descrição das mudanças

## Mudanças
- [ ] Item 1
- [ ] Item 2

## Screenshots
[Se aplicável]

## Testes
- [ ] Unitários
- [ ] Integração
- [ ] E2E

Testes

1. Unitários

describe('StoryComponent', () => {
  it('deve renderizar corretamente', () => {
    const { getByText } = render(<Story />);
    expect(getByText('Título')).toBeInTheDocument();
  });
});

2. Integração

describe('ExerciseFlow', () => {
  it('deve completar exercício', async () => {
    const result = await completeExercise({
      type: 'word-formation',
      answer: 'casa'
    });
    expect(result.success).toBe(true);
  });
});

Documentação

1. Código

/**
 * Componente de exercício de formação de palavras
 * @param {WordFormationProps} props - Propriedades do componente
 * @returns {JSX.Element} Componente renderizado
 */
export const WordFormation: React.FC<WordFormationProps> = ({
  word,
  syllables,
  onComplete
}) => {
  // ...
};

2. README

• Setup do projeto
• Comandos disponíveis
• Estrutura de arquivos
• Contribuição
• Licença

Segurança

1. Checklist

• Validação de inputs
• Sanitização de dados
• Proteção contra XSS
• Autenticação segura

2. Revisão

// ❌ Inseguro
const query = `SELECT * FROM users WHERE id = ${id}`;

// ✅ Seguro
const query = 'SELECT * FROM users WHERE id = $1';
const values = [id];

Performance

1. Frontend

• Lazy loading
• Memoização
• Bundle splitting
• Image optimization

2. Backend

• Caching
• Query optimization
• Connection pooling
• Rate limiting

Deploy

1. Staging

# Build
yarn build

# Testes
yarn test

# Deploy staging
yarn deploy:staging

2. Produção

# Merge para main
git checkout main
git merge develop

# Deploy produção
yarn deploy:prod

Monitoramento

1. Métricas

• Tempo de resposta
• Taxa de erro
• Uso de recursos
• Satisfação do usuário

2. Logs

logger.info('Exercício completado', {
  userId: user.id,
  exerciseId: exercise.id,
  score: result.score,
  timeSpent: result.time
});

Manutenção

1. Dependências

# Atualizar deps
yarn upgrade-interactive --latest

# Auditar segurança
yarn audit

# Limpar cache
yarn cache clean

2. Backup

• Database dumps
• Logs históricos
• Configurações
• Assets

Contribuição

1. Setup

# Clone
git clone https://github.com/org/repo.git

# Install
yarn install

# Dev
yarn dev

2. Guidelines

• Código limpo
• Testes completos
• Documentação clara
• Pull requests concisos