@seniorsistemas/components-ai 0.0.0-master-d4a804fe

package/docs/COMPONENTS.md

@@ -0,0 +1,272 @@
+# Documentação de Componentes
+
+## 📦 @seniorsistemas/components-ia
+
+Esta biblioteca fornece componentes reutilizáveis com inteligência artificial para aplicações da Senior Sistemas.
+
+---
+
+## 🎨 Componentes Disponíveis
+
+### Dynamic Form Component
+
+Componente de formulário dinâmico que renderiza campos baseado em configuração.
+
+**Seletor**: `sia-dynamic-form`
+
+**Inputs**:
+- `formFields: DynamicFormFieldConfig[]` - Configuração dos campos (modo direto)
+- `formSections: DynamicFormSection[]` - Configuração com seções
+- `entity: any` - Entidade para edição (opcional)
+- `mode: 'create' | 'edit' | 'filter' | 'inline-edit'` - Modo do formulário
+- `displayMode: 'inline' | 'dialog' | 'drawer'` - Modo de exibição
+- `visible: boolean` - Visibilidade (para dialog/drawer)
+- `dialogHeader: string` - Título do dialog/drawer
+- `submitButtonLabel: string` - Label do botão submit
+- `cancelButtonLabel: string` - Label do botão cancelar
+
+**Outputs**:
+- `onSubmit: EventEmitter<any>` - Emitido ao submeter o formulário
+- `onCancel: EventEmitter<void>` - Emitido ao cancelar
+- `visibleChange: EventEmitter<boolean>` - Two-way binding de visibilidade
+
+**Métodos Públicos**:
+- `getForm(): FormGroup` - Retorna o FormGroup
+- `resetForm(): void` - Reseta o formulário
+
+**Exemplo Básico**:
+```typescript
+<sia-dynamic-form
+  [formFields]="fields"
+  [mode]="'create'"
+  (onSubmit)="handleSubmit($event)"
+></sia-dynamic-form>
+```
+
+**Exemplo com Dialog**:
+```typescript
+<sia-dynamic-form
+  [(visible)]="showDialog"
+  [formFields]="fields"
+  [entity]="selectedEntity"
+  [mode]="'edit'"
+  [displayMode]="'dialog'"
+  [dialogHeader]="'Editar Registro'"
+  (onSubmit)="handleSubmit($event)"
+></sia-dynamic-form>
+```
+
+**Exemplo com Seções**:
+```typescript
+<sia-dynamic-form
+  [formSections]="sections"
+  [mode]="'create'"
+  (onSubmit)="handleSubmit($event)"
+></sia-dynamic-form>
+```
+
+**Exemplo Inline Edit**:
+```typescript
+<sia-dynamic-form
+  [formFields]="fields"
+  [entity]="entity"
+  [mode]="'inline-edit'"
+  (onSubmit)="handleSubmit($event)"
+></sia-dynamic-form>
+```
+
+---
+
+### Export Dialog Component
+
+Dialog para exportação de dados em Excel ou PDF.
+
+**Seletor**: `sia-export-dialog`
+
+**Inputs**:
+- `visible: boolean` - Visibilidade do dialog
+- `data: any[]` - Dados para exportação
+- `columns: ColumnOption[]` - Configuração das colunas
+- `fileName: string` - Nome do arquivo (padrão: 'export')
+
+**Outputs**:
+- `visibleChange: EventEmitter<boolean>` - Two-way binding de visibilidade
+
+**Exemplo**:
+```typescript
+<sia-export-dialog
+  [(visible)]="showExportDialog"
+  [data]="records"
+  [columns]="exportColumns"
+  [fileName]="'relatorio-produtos'"
+></sia-export-dialog>
+```
+
+---
+
+### Bulk Delete Dialog Component
+
+Dialog para exclusão em massa de registros.
+
+**Seletor**: `sia-bulk-delete-dialog`
+
+**Inputs**:
+- `visible: boolean` - Visibilidade do dialog
+- `selectedItems: any[]` - Itens selecionados
+- `entityName: string` - Nome da entidade (singular)
+- `entityPluralName: string` - Nome da entidade (plural)
+
+**Outputs**:
+- `visibleChange: EventEmitter<boolean>` - Two-way binding de visibilidade
+- `onConfirm: EventEmitter<void>` - Emitido ao confirmar exclusão
+
+**Exemplo**:
+```typescript
+<sia-bulk-delete-dialog
+  [(visible)]="showBulkDeleteDialog"
+  [selectedItems]="selectedRecords"
+  [entityName]="'produto'"
+  [entityPluralName]="'produtos'"
+  (onConfirm)="handleBulkDelete()"
+></sia-bulk-delete-dialog>
+```
+
+---
+
+### Breadcrumb Component
+
+Componente de navegação breadcrumb.
+
+**Seletor**: `sia-breadcrumb`
+
+**Inputs**:
+- `items: MenuItem[]` - Itens do breadcrumb (PrimeNG MenuItem)
+- `home: MenuItem` - Item home (opcional)
+
+**Exemplo**:
+```typescript
+<sia-breadcrumb
+  [items]="breadcrumbItems"
+  [home]="{ icon: 'pi pi-home', routerLink: '/' }"
+></sia-breadcrumb>
+```
+
+```typescript
+breadcrumbItems: MenuItem[] = [
+  { label: 'Cadastros' },
+  { label: 'Produtos', routerLink: '/products' },
+  { label: 'Editar' }
+];
+```
+
+---
+
+## 🔧 Tipos e Interfaces
+
+### DynamicFormFieldConfig
+
+```typescript
+interface DynamicFormFieldConfig {
+  name: string;                    // Nome do campo
+  label: string;                   // Label exibido
+  type: FieldType;                 // Tipo do campo
+  value?: any;                     // Valor inicial
+  required?: boolean;              // Campo obrigatório
+  disabled?: boolean;              // Campo desabilitado
+  placeholder?: string;            // Placeholder
+  options?: SelectOption[];        // Opções (select, radio, checkbox)
+  rows?: number;                   // Linhas (textarea)
+  mask?: string;                   // Máscara (text)
+  validators?: ValidatorFn[];      // Validadores customizados
+  lookupConfig?: LookupConfig;     // Config para lookup
+  dateFormat?: string;             // Formato de data
+  showTime?: boolean;              // Mostrar hora (date)
+  minDate?: Date;                  // Data mínima
+  maxDate?: Date;                  // Data máxima
+  accept?: string;                 // Tipos aceitos (file)
+  multiple?: boolean;              // Múltiplos arquivos
+  min?: number;                    // Valor mínimo (number)
+  max?: number;                    // Valor máximo (number)
+  step?: number;                   // Incremento (number)
+  cols?: number;                   // Colunas do grid (1-12)
+}
+```
+
+### DynamicFormSection
+
+```typescript
+interface DynamicFormSection {
+  title: string;                   // Título da seção
+  fields: DynamicFormFieldConfig[]; // Campos da seção
+  collapsible?: boolean;           // Seção colapsável
+  collapsed?: boolean;             // Inicialmente colapsada
+}
+```
+
+### FieldType
+
+```typescript
+enum FieldType {
+  TEXT = 'text',
+  TEXTAREA = 'textarea',
+  NUMBER = 'number',
+  EMAIL = 'email',
+  PASSWORD = 'password',
+  DATE = 'date',
+  DATETIME = 'datetime',
+  SELECT = 'select',
+  MULTISELECT = 'multiselect',
+  CHECKBOX = 'checkbox',
+  RADIO = 'radio',
+  SWITCH = 'switch',
+  LOOKUP = 'lookup',
+  FILE = 'file',
+  HIDDEN = 'hidden'
+}
+```
+
+### ColumnOption
+
+```typescript
+interface ColumnOption {
+  field: string;                   // Nome do campo
+  header: string;                  // Cabeçalho da coluna
+  selected?: boolean;              // Selecionada para exportação
+}
+```
+
+---
+
+## 📱 Responsividade
+
+Todos os componentes são responsivos e se adaptam a diferentes tamanhos de tela:
+
+- **Desktop**: Layout completo com todas as features
+- **Tablet**: Layout adaptado com priorização de conteúdo
+- **Mobile**: Layout otimizado para toque e telas pequenas
+
+---
+
+## 🎨 Temas
+
+Os componentes suportam temas do PrimeNG e se adaptam automaticamente ao tema configurado na aplicação.
+
+---
+
+## ♿ Acessibilidade
+
+Todos os componentes seguem as diretrizes de acessibilidade:
+
+- Labels associados aos campos
+- Navegação por teclado
+- ARIA attributes
+- Contraste adequado
+- Foco visível
+
+---
+
+## 🔗 Veja Também
+
+- [Exemplos Práticos](./EXAMPLES.md)
+- [Referência da API](./API.md)
+- [Guia de Migração](./MIGRATION.md)