testes/Modulos Angular/projects/idt_app/docs/patterns/PATTERNS_INDEX.md

Patterns Index - Angular IDT App

📚 Índice de Padrões e Documentação

Este documento centraliza todos os padrões de arquitetura, implementação e documentação técnica do projeto Angular IDT App.

🏗️ Padrões de Arquitetura

App Component Pattern

Arquivo: APP_COMPONENT_PATTERN.md

• Objetivo: Integração de serviços PWA e Mobile no componente raiz
• Inclui: Dependency injection, auto-initialization, logging pattern
• Aplicação: Funcionalidades que devem estar ativas desde o início da app

Mobile Zoom Prevention Pattern

Arquivo: MOBILE_ZOOM_PREVENTION.md

• Objetivo: Prevenção completa de zoom em dispositivos móveis
• Inclui: Meta tags, CSS prevention, JavaScript service
• Aplicação: Apps que precisam de experiência nativa sem zoom

📱 Progressive Web App (PWA)

PWA Implementation

Arquivo: PWA_IMPLEMENTATION.md

• Objetivo: Implementação completa de funcionalidades PWA
• Inclui: Service Worker, Manifest, notificações, install prompts
• Aplicação: Apps que precisam funcionar como aplicativos nativos

PWA Quick Start

Arquivo: PWA_QUICK_START.md

• Objetivo: Guia rápido para desenvolvimento e troubleshooting PWA
• Inclui: Comandos essenciais, testes por dispositivo, debugging
• Aplicação: Desenvolvimento e manutenção de funcionalidades PWA

🎯 Componentes Reutilizáveis

Tab System Pattern

Localização: shared/components/tab-system/

• Objetivo: Sistema avançado de abas para edição de registros
• Inclui: Limite configurável, gestão de estado, títulos responsivos
• Aplicação: Formulários de edição complexos, CRUD operations

Data Table Pattern

Localização: shared/components/data-table/

• Objetivo: Tabelas responsivas com otimizações mobile
• Inclui: Header adaptativo, paginação compacta, filtros expansíveis
• Aplicação: Listagem de dados em dispositivos móveis e desktop

🔧 Serviços e Utilities

Service Naming Standards Pattern

Arquivo: SERVICE_NAMING_CHECKLIST.md

• Objetivo: Garantir nomenclatura consistente em todos os services
• Inclui: Checklist obrigatório, templates corretos, anti-patterns
• Aplicação: OBRIGATÓRIO consultar antes de criar/editar qualquer service

PWA Service Pattern

Arquivo: shared/services/pwa.service.ts

• Objetivo: Gerenciamento centralizado de funcionalidades PWA
• Inclui: Update detection, install prompts, observables
• Aplicação: Qualquer app que implemente PWA

Mobile Behavior Service Pattern

Arquivo: shared/services/mobile-behavior.service.ts

• Objetivo: Controle de comportamentos móveis nativos
• Inclui: Zoom prevention, touch optimization, device detection
• Aplicação: Apps com foco em experiência mobile nativa

📊 Otimizações e Performance

CSS Budget Management

Localização: assets/styles/app.scss

• Objetivo: Compressão de CSS para manter funcionalidades dentro do limite
• Inclui: Compressão manual, seletores combinados, mobile-first
• Aplicação: Projetos com restrições de bundle size

Responsive Design Patterns

Localização: Multiple files (*.scss)

• Objetivo: Padrões de responsividade mobile-first
• Inclui: Breakpoints consistentes, edge-to-edge layouts, touch-friendly controls
• Aplicação: Interfaces adaptivas para todos os dispositivos

🎨 UI/UX Patterns

Standalone Component Pattern

Aplicação: All components

• Objetivo: Componentes independentes sem NgModules
• Inclui: Imports explícitos, tree-shaking otimizado
• Aplicação: Arquitetura Angular moderna (17+)

Material Design Integration

Localização: assets/styles/app.scss

• Objetivo: Integração consistente com Angular Material
• Inclui: Theme customization, component overrides
• Aplicação: Apps que usam Angular Material como base

🔄 Domain-Driven Design (DDD)

Domain Structure Pattern

Localização: app/domain/

• Objetivo: Organização por domínios de negócio
• Inclui: vehicles/, drivers/, routes/, finances/
• Aplicação: Apps com múltiplos contextos de negócio

Shared Resources Pattern

Localização: app/shared/

• Objetivo: Recursos compartilhados entre domínios
• Inclui: components/, services/, interfaces/
• Aplicação: Funcionalidades transversais aos domínios

🧪 Testing Patterns

Service Testing Pattern

Aplicação: All services

• Objetivo: Testes unitários para serviços Angular
• Inclui: Mocks, spies, dependency injection testing
• Aplicação: Garantia de qualidade e confiabilidade

Component Testing Pattern

Aplicação: All components

• Objetivo: Testes de componentes standalone
• Inclui: TestBed configuration, async testing
• Aplicação: Validação de comportamento de UI

📚 Documentação Patterns

README Pattern

Arquivo: README.md

• Objetivo: Documentação principal do projeto
• Inclui: Setup, comandos, estrutura geral
• Aplicação: Onboarding de novos desenvolvedores

MCP Pattern

Arquivo: MCP.md (Model Context Protocol)

• Objetivo: Contexto completo para desenvolvimento assistido por IA
• Inclui: Arquitetura, padrões, configurações
• Aplicação: Desenvolvimento com assistentes de IA

🔗 Interconexões de Padrões

PWA + Mobile Pattern

App Component (DI) → PWA Service → PWA Notifications
                  → Mobile Service → Zoom Prevention

Domain + Shared Pattern

Domain Components → Shared Components → Tab System
                                     → Data Table
                 → Shared Services → PWA Service
                                  → Mobile Service

Testing + Documentation Pattern

Implementation → Testing → Documentation → MCP Context

📋 Quick Reference

Para Novo Componente

1. Usar Standalone pattern
2. Documentar no domain apropriado
3. Adicionar testes unitários
4. Atualizar MCP.md se relevante

Para Nova Funcionalidade PWA

1. Implementar no PWAService
2. Adicionar notification no PWANotificationsComponent
3. Testar em mobile real
4. Documentar em PWA_IMPLEMENTATION.md

Para Nova Otimização Mobile

1. Implementar no MobileBehaviorService
2. Adicionar CSS em app.scss
3. Testar responsividade
4. Documentar em MOBILE_ZOOM_PREVENTION.md

Para Novo Service

1. OBRIGATÓRIO: Consultar SERVICE_NAMING_CHECKLIST.md
2. Implementar seguindo nomenclatura padrão: create, update, delete, getById, get[Domain]s
3. Usar ApiClientService (nunca HttpClient diretamente)
4. Implementar DomainService interface
5. Adicionar fallback com dados mock

Para Novo Padrão

1. Implementar seguindo padrões existentes
2. Criar documentação específica
3. Adicionar ao PATTERNS_INDEX.md
4. Referenciar no MCP.md

---

📊 Status dos Padrões

Padrão	Status	Documentação	Testes	Aplicação
App Component	✅	✅	⚠️	✅
PWA Implementation	✅	✅	⚠️	✅
Mobile Zoom Prevention	✅	✅	⚠️	✅
Tab System	✅	✅	✅	✅
Data Table	✅	⚠️	⚠️	✅
Service Naming Standards	✅	✅	✅	✅
Standalone Components	✅	✅	✅	✅
DDD Structure	✅	✅	⚠️	✅

Legenda: ✅ Completo | ⚠️ Parcial | ❌ Pendente

---

Última atualização: Janeiro 2025 Contribuidores: Equipe de desenvolvimento IDT App