@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

npm run storybook

Acesse em http://localhost:6006.

Build do Storybook

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:

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

npm install @seniorsistemas/angular-components

Cada componente é importado individualmente pelo seu sub-pacote:

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:

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.

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>):

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:

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

npm run build

Testes

npm run test