# Sira UI Components (@marsaude/sira-components)

Biblioteca de componentes Angular reutilizáveis para o Design System Sira.

## 🛠️ Build e Desenvolvimento

Para compilar a biblioteca localmente:

```bash
# Compilar uma vez
ng build @marsaude/sira-components

# Compilar em modo "watch" (recompila ao salvar arquivos)
ng build @marsaude/sira-components --watch

Os arquivos compilados serão gerados na pasta dist/marsaude/sira-components.

📦 Instalação

Via NPM (Recomendado)

Para instalar a versão mais recente publicada no registro:

npm install @marsaude/sira-components

Caso tenha conflitos de versão do Angular, use:

npm install @marsaude/sira-components --legacy-peer-deps

Via Arquivo Local (Para testes antes de publicar)

Se você gerou um arquivo .tgz localmente (npm pack), instale assim:

npm install ./caminho/para/dist/marsaude/sira-components/marsaude-sira-components-1.0.X.tgz

🚀 Como Usar

1. Importar no Componente (Standalone)

Importe os componentes diretamente no imports do seu componente Angular:

import { Component } from '@angular/core';
import { AlertComponent, NavCardComponent } from '@marsaude/sira-components';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [AlertComponent, NavCardComponent],
  template: `
    <div siraAlert theme="info" title="Bem-vindo">
      Componentes carregados com sucesso!
    </div>
  `
})
export class HomeComponent {}

2. Importar os Estilos (SCSS)

Para que os componentes tenham a aparência correta, adicione o import global no seu arquivo styles.scss da aplicação:

/* No arquivo src/styles.scss */
@import '@marsaude/sira-components/styles';

☁️ Publicação no NPM

Pré-requisitos

Certifique-se de que você está logado ou com o token configurado.

Passo a Passo para Publicar

1. Atualize a versão:

# Opções: patch (1.0.0 -> 1.0.1), minor (1.0.0 -> 1.1.0) ou major (1.0.0 -> 2.0.0)
cd projects/marsaude/sira-components
npm version patch
cd ../../..

2. Faça o Build:

ng build @marsaude/sira-components

3. Publique:

cd dist/marsaude/sira-components
npm publish --access public

🔑 Renovação do Token de Acesso (Granular Token)

Utilizamos Granular Access Tokens para publicar sem precisar digitar OTP (2FA) a cada comando. Esses tokens expiram e precisam ser renovados periodicamente.

Quando o token expirar (Erro 401/403 no publish):

1. Acesse npmjs.com e faça login.
2. Clique na Foto de Perfil > Access Tokens.
3. Clique em Generate New Token > Granular Access Token.
4. Configure assim:

• Name: "Computador [Seu Nome] - Publish"

• Expiration: 90 dias (ou Custom)

• Permissions:

• Packages and scopes: Selecione @marsaude (ou sua organização).

• Permissions: Read and write.

• ✅ Bypass 2FA requirements: Marque esta opção (obrigatório para publish direto sem digitar código OTP).

5. Clique em Generate Token e copie o código (npm_...).

Atualizar no computador local:

No terminal, rode o comando abaixo substituindo pelo novo token:

npm config set //registry.npmjs.org/:_authToken=npm_seu_novo_token_aqui

Pronto! Você pode voltar a publicar normalmente.