@marsaude/sira-components 1.0.0 → 1.0.1

package/README.md

@@ -1,63 +1,159 @@
-# SiraComponents
+```markdown
+# Sira UI Components (@marsaude/sira-components)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
+Biblioteca de componentes Angular reutilizáveis para o Design System Sira.
 
-## Code scaffolding
+## 🛠️ Build e Desenvolvimento
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+Para compilar a biblioteca localmente:
 
 ```bash
-ng generate component component-name
+# Compilar uma vez
+ng build @marsaude/sira-components
+
+# Compilar em modo "watch" (recompila ao salvar arquivos)
+ng build @marsaude/sira-components --watch
+
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+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:
 
 ```bash
-ng generate --help
+npm install @marsaude/sira-components
+
 ```
 
-## Building
+*Caso tenha conflitos de versão do Angular, use:*
 
-To build the library, run:
+```bash
+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:
 
 ```bash
-ng build sira-components
+npm install ./caminho/para/dist/marsaude/sira-components/marsaude-sira-components-1.0.X.tgz
+
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+---
 
-### Publishing the Library
+## 🚀 Como Usar
 
-Once the project is built, you can publish your library by following these steps:
+### 1. Importar no Componente (Standalone)
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/sira-components
-   ```
+Importe os componentes diretamente no `imports` do seu componente Angular:
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+```typescript
+import { Component } from '@angular/core';
+import { AlertComponent, NavCardComponent } from '@marsaude/sira-components';
 
-## Running unit tests
+@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 {}
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+```
+
+### 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:
+
+```scss
+/* 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:**
 ```bash
-ng test
+# 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 ../../..
+
 ```
 
-## Running end-to-end tests
 
-For end-to-end (e2e) testing, run:
+2. **Faça o Build:**
+```bash
+ng build @marsaude/sira-components
+
+```
+
+
+3. **Publique:**
+```bash
+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](https://www.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:
 
 ```bash
-ng e2e
+npm config set //registry.npmjs.org/:_authToken=npm_seu_novo_token_aqui
+
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+Pronto! Você pode voltar a publicar normalmente.
 
-## Additional Resources
+```
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marsaude/sira-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "peerDependencies": {
     "@angular/common": "^21.1.0",
     "@angular/core": "^21.1.0"

package/styles/section.scss

@@ -4,6 +4,8 @@
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
+  background: var(--mar-surface-primary) ;
+  overflow: hidden;
 
   &--body {
     > .content-wrapper {