# Guia de Migração

## 📦 Migrando para @seniorsistemas/components-ai

Este guia ajuda na migração de projetos que usavam componentes antigos ou outras bibliotecas.

---

## 🔄 Migração de @senior-gestao-relacionamento/angular-components

Se você está migrando do pacote antigo `@senior-gestao-relacionamento/angular-components`:

### 1. Atualizar Dependência

```bash
# Remover pacote antigo
npm uninstall @senior-gestao-relacionamento/angular-components

# Instalar novo pacote
npm install @seniorsistemas/components-ai
```

### 2. Atualizar Imports

Substituir todos os imports:

```typescript
// Antes
import { DynamicFormComponent } from '@senior-gestao-relacionamento/angular-components';

// Depois
import { DynamicFormComponent } from '@seniorsistemas/components-ai';
```

**Script para substituição em massa (Linux/Mac):**
```bash
find src -type f -name "*.ts" -exec sed -i 's/@senior-gestao-relacionamento\/angular-components/@seniorsistemas\/components-ai/g' {} +
```

**Script para substituição em massa (Windows PowerShell):**
```powershell
Get-ChildItem -Path src -Filter *.ts -Recurse | ForEach-Object { 
  (Get-Content $_.FullName) -replace '@senior-gestao-relacionamento/angular-components', '@seniorsistemas/components-ai' | 
  Set-Content $_.FullName 
}
```

### 3. Atualizar Prefixos de Componentes

Os componentes agora usam o prefixo `sia-` ao invés de `sgr-`:

```html
<!-- Antes -->
<sgr-dynamic-form></sgr-dynamic-form>
<sgr-export-dialog></sgr-export-dialog>
<sgr-breadcrumb></sgr-breadcrumb>

<!-- Depois -->
<sia-dynamic-form></sia-dynamic-form>
<sia-export-dialog></sia-export-dialog>
<sia-breadcrumb></sia-breadcrumb>
```

**Script para substituição em massa (Linux/Mac):**
```bash
find src -type f -name "*.html" -exec sed -i 's/<sgr-/<sia-/g' {} +
find src -type f -name "*.html" -exec sed -i 's/<\/sgr-/<\/sia-/g' {} +
```

**Script para substituição em massa (Windows PowerShell):**
```powershell
Get-ChildItem -Path src -Filter *.html -Recurse | ForEach-Object { 
  (Get-Content $_.FullName) -replace '<sgr-', '<sia-' -replace '</sgr-', '</sia-' | 
  Set-Content $_.FullName 
}
```

### 4. Recompilar

```bash
npm run build
```

---

## 🔄 Migração de Componentes Legados

### De EntityFormDialogComponent para DynamicFormComponent

**Antes:**
```typescript
<app-entity-form-dialog
  [(visible)]="showDialog"
  [entity]="selectedEntity"
  [formFields]="formFields"
  [service]="entityService"
  [entityName]="'Product'"
  (onSave)="loadData()"
></app-entity-form-dialog>
```

**Depois:**
```typescript
<sia-dynamic-form
  [(visible)]="showDialog"
  [entity]="selectedEntity"
  [formFields]="formFields"
  [mode]="selectedEntity ? 'edit' : 'create'"
  [displayMode]="'dialog'"
  [dialogHeader]="selectedEntity ? 'Editar Produto' : 'Novo Produto'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

**Mudanças no TypeScript:**
```typescript
// Antes
onSave(): void {
  this.loadData();
}

// Depois
handleSubmit(formValue: any): void {
  const operation = this.selectedEntity
    ? this.entityService.update(this.selectedEntity.id, formValue)
    : this.entityService.insert(formValue);

  operation.subscribe({
    next: () => {
      this.messageService.add({
        severity: 'success',
        summary: 'Sucesso',
        detail: 'Registro salvo com sucesso'
      });
      this.showDialog = false;
      this.loadData();
    },
    error: (error: any) => {
      this.messageService.add({
        severity: 'error',
        summary: 'Erro',
        detail: 'Erro ao salvar registro'
      });
    }
  });
}
```

---

### De FormFilterComponent para DynamicFormComponent

**Antes:**
```typescript
<app-form-filter
  [filterFields]="filterFields"
  (onFilter)="applyFilter($event)"
></app-form-filter>
```

**Depois:**
```typescript
<sia-dynamic-form
  [formFields]="filterFields"
  [mode]="'filter'"
  [submitButtonLabel]="'Filtrar'"
  (onSubmit)="applyFilter($event)"
></sia-dynamic-form>
```

**Mudanças no TypeScript:**
```typescript
// Antes
applyFilter(filters: any): void {
  this.filters = filters;
  this.loadData();
}

// Depois
applyFilter(filterValues: any): void {
  // Remover valores vazios
  const filters = Object.entries(filterValues)
    .filter(([_, value]) => value !== null && value !== undefined && value !== '')
    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
  
  this.filters = filters;
  this.loadData();
}
```

---

### De EditInlineComponent para DynamicFormComponent

**Antes:**
```typescript
<app-edit-inline
  [fields]="editFields"
  [entity]="entity"
  (onSave)="handleSave($event)"
></app-edit-inline>
```

**Depois:**
```typescript
<sia-dynamic-form
  [formFields]="editFields"
  [entity]="entity"
  [mode]="'inline-edit'"
  (onSubmit)="handleSave($event)"
></sia-dynamic-form>
```

---

## 🆕 Novos Recursos

### Suporte a Seções

O DynamicFormComponent agora suporta seções colapsáveis:

```typescript
formSections: DynamicFormSection[] = [
  {
    title: 'Dados Básicos',
    fields: [/* campos */]
  },
  {
    title: 'Endereço',
    collapsible: true,
    collapsed: true,
    fields: [/* campos */]
  }
];
```

```html
<sia-dynamic-form
  [formSections]="formSections"
  [mode]="'create'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

### Modo Inline Edit

Novo modo para edição inline sem botões de ação:

```typescript
<sia-dynamic-form
  [formFields]="fields"
  [entity]="entity"
  [mode]="'inline-edit'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

### Display Modes

Três modos de exibição:

- `inline`: Formulário inline (padrão)
- `dialog`: Formulário em dialog modal
- `drawer`: Formulário em drawer lateral

---

## ⚠️ Breaking Changes

### 1. Método create() renomeado para insert()

```typescript
// Antes
this.entityService.create(entity);

// Depois
this.entityService.insert(entity);
```

### 2. Evento onSave renomeado para onSubmit

```typescript
// Antes
(onSave)="handleSave($event)"

// Depois
(onSubmit)="handleSubmit($event)"
```

### 3. Prefixo de componentes alterado

Todos os componentes agora usam `sia-` ao invés de `sgr-`.

### 4. Estrutura de FormFields

O campo `cols` agora é obrigatório para controle de layout:

```typescript
// Antes
{
  name: 'name',
  label: 'Nome',
  type: FieldType.TEXT
}

// Depois
{
  name: 'name',
  label: 'Nome',
  type: FieldType.TEXT,
  cols: 12  // 1-12 (grid de 12 colunas)
}
```

---

## 📋 Checklist de Migração

- [ ] Atualizar dependência no package.json
- [ ] Substituir imports em arquivos TypeScript
- [ ] Atualizar prefixos de componentes em templates HTML
- [ ] Substituir `create()` por `insert()` nos serviços
- [ ] Atualizar eventos `onSave` para `onSubmit`
- [ ] Adicionar propriedade `cols` nos formFields
- [ ] Testar compilação
- [ ] Testar funcionalidades em desenvolvimento
- [ ] Executar testes automatizados
- [ ] Atualizar documentação do projeto

---

## 🆘 Problemas Comuns

### Erro: Module not found '@senior-gestao-relacionamento/angular-components'

**Solução:** Certifique-se de ter atualizado todos os imports. Use os scripts de substituição em massa fornecidos acima.

### Erro: Property 'create' does not exist on type 'EntityService'

**Solução:** Substitua `create()` por `insert()`.

### Componentes não aparecem no template

**Solução:** Verifique se atualizou os prefixos de `sgr-` para `sia-`.

### Erro de compilação em formFields

**Solução:** Adicione a propriedade `cols` em todos os campos.

---

## 📞 Suporte

Se encontrar problemas durante a migração:

1. Consulte a [documentação completa](./COMPONENTS.md)
2. Veja os [exemplos práticos](./EXAMPLES.md)
3. Abra uma issue no repositório
4. Entre em contato com a equipe de desenvolvimento

---

## 🔗 Veja Também

- [Documentação de Componentes](./COMPONENTS.md)
- [Exemplos Práticos](./EXAMPLES.md)
- [Referência da API](./API.md)
