# @seniorsistemas/angular-components

Biblioteca de componentes Angular reutilizáveis da Senior Sistemas, construída com Angular 18 e Tailwind CSS.

Inclui mais de 70 componentes, diretivas e pipes para construção de interfaces — desde inputs e formulários dinâmicos até tabelas, kanban, chat e muito mais.

## Documentação

A documentação oficial é feita via **Storybook**. Cada componente tem stories com exemplos interativos, descrição de inputs/outputs e variantes visuais.

### Rodar o Storybook localmente

```bash
npm run storybook
```

Acesse em `http://localhost:6006`.

### Build do Storybook

```bash
npm run build-storybook
```

O output é gerado em `storybook-static/`.

## Showcase

Além do Storybook, há um projeto de showcase com exemplos reais de uso:

```bash
npm run start
```

Acesse em `http://localhost:4200`.

## Estrutura do monorepo

```
projects/
  angular-components/     # Biblioteca de componentes
    <nome-componente>/    # Cada componente é um sub-pacote independente
      src/lib/
      ng-package.json
  showcase/               # Aplicação de demonstração
```

## Instalação

```bash
npm install @seniorsistemas/angular-components
```

Cada componente é importado individualmente pelo seu sub-pacote:

```typescript
import { ButtonModule } from '@seniorsistemas/angular-components/button';
import { DynamicFormModule } from '@seniorsistemas/angular-components/dynamic-form';
```

## Schematics de migração

A biblioteca oferece schematics de migração via `ng update`, então é boa prática sempre atualizar a versão instalada com esse comando em vez de só trocar o número no `package.json` — além de atualizar a dependência, ele aplica automaticamente as migrations necessárias no seu projeto e mostra o que há de novo relevante para o seu código:

```bash
ng update @seniorsistemas/angular-components
```

Migrations disponíveis (por versão em que passam a ser aplicadas):

| Versão   | Migration                                  | O que faz                                                                                                                                                                                                                                   |
| -------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `19.0.0` | `migration-v19-0-0-dynamic-form`           | Migra o `DynamicForm` de v18 para v19: construtores → plain objects, enums → string literals, `[fields]` → `[configs]`, `Editor` → `provideEditorField()`, estilos → `angular.json`                                                         |
| `19.0.0` | `migration-v19-0-0-steps-to-stepper`       | Migra `Steps` para `Stepper`: `<s-steps>` → `<s-stepper>`, import de `.../steps` → `.../stepper`, `StepsComponent` → `StepperComponent`, e remove o `StepsModule` (componente agora standalone) substituindo por `StepperComponent`         |
| `19.6.0` | `migration-v19-6-0-p-datepicker`           | Migra `p-datepicker` (PrimeNG) para `s-datepicker` (`@seniorsistemas/angular-components`)                                                                                                                                                   |
| `19.6.0` | `migration-v19-6-0-p-editor`               | Migra `p-editor` (PrimeNG/Quill) para `s-editor`: renomeia tag e eventos, remove atributos sem equivalente, limpa configs legadas do `DynamicForm` e atualiza dependências do `package.json`                                                |
| `19.6.2` | `migration-v19-6-2-s-chips-outputs`        | Renomeia outputs legados do `s-chips`: `onAdd`→`added`, `onRemove`→`removed`, `onChipClick`→`chipClicked`, `onFocus`→`focused`, `onBlur`→`focusLost`                                                                                        |
| `19.9.3` | `migration-v19-9-3-fieldset-body-template` | Envolve o conteúdo projetado do `s-fieldset` em `<ng-template sTemplate="body">`, mantendo templates de slot como `sTemplate="header"` fora do body, e garante o `TemplateDirective` no escopo do componente (standalone ou via `NgModule`) |

A lista completa, com a `version` que dispara cada migration e a `factory` correspondente, fica em [`projects/angular-components/schematics/migrations.json`](projects/angular-components/schematics/migrations.json).

### Executando uma migration individualmente

Se você já está na versão instalada (não chegou até ela via `ng update`) e só precisa aplicar uma migration específica no seu projeto, sem atualizar nada, há duas formas:

**Via `ng generate`** (mais simples) — cada migration também está disponível com um nome curto, sem o prefixo de versão (`migrate-<nome>` em vez de `migration-v<versão>-<nome>`):

```bash
ng generate @seniorsistemas/angular-components:migrate-fieldset-body-template
```

**Via `ng update --name`** (mais completo) — usa o nome versionado, o mesmo que aparece na tabela acima:

```bash
ng update @seniorsistemas/angular-components --name migration-v19-9-3-fieldset-body-template
```

Os dois rodam exatamente a mesma migration e nenhum dos dois altera a versão instalada ou reinstala dependências.

## Build da biblioteca

```bash
npm run build
```

## Testes

```bash
npm run test
```