@lesterarte/sefin-ui 0.0.37 → 0.0.39

package/README.md

@@ -13,6 +13,7 @@ Una librería de sistema de diseño Angular completa basada en principios de Ato
 - **Componentes Type-Safe**: Soporte completo de TypeScript
 - **Testing Completo**: Tests unitarios con Jest
 - **Documentación Storybook**: Documentación visual de componentes con cambio de temas
+  - 📖 [Ver Storybook en línea](https://sefin.github.io/sefin-ui/)
 
 ## Estructura del Proyecto
 
@@ -67,16 +68,14 @@ npm install @lesterarte/sefin-ui
 En tu `styles.scss` o `angular.json`:
 
 ```scss
-@import '@lesterarte/sefin-ui/styles';
+@import "@lesterarte/sefin-ui/styles";
 ```
 
 O en `angular.json`:
 
 ```json
 {
-  "styles": [
-    "node_modules/@lesterarte/sefin-ui/styles/index.scss"
-  ]
+  "styles": ["node_modules/@lesterarte/sefin-ui/styles/index.scss"]
 }
 ```
 
@@ -85,21 +84,21 @@ O en `angular.json`:
 En tu `app.component.ts`:
 
 ```typescript
-import { Component, OnInit } from '@angular/core';
-import { ThemeLoader } from '@lesterarte/sefin-ui';
+import { Component, OnInit } from "@angular/core";
+import { ThemeLoader } from "@lesterarte/sefin-ui";
 
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   // ...
 })
 export class AppComponent implements OnInit {
   ngOnInit(): void {
     // Cargar tema brand (colores de Secretaría de Finanzas)
-    ThemeLoader.loadTheme('brand');
-    
+    ThemeLoader.loadTheme("brand");
+
     // O cargar tema light
     // ThemeLoader.loadTheme('light');
-    
+
     // O cargar tema dark
     // ThemeLoader.loadTheme('dark');
   }
@@ -111,25 +110,23 @@ export class AppComponent implements OnInit {
 Todos los componentes son standalone y se pueden importar directamente:
 
 ```typescript
-import { Component } from '@angular/core';
-import { ButtonComponent, CardComponent } from '@lesterarte/sefin-ui';
+import { Component } from "@angular/core";
+import { ButtonComponent, CardComponent } from "@lesterarte/sefin-ui";
 
 @Component({
-  selector: 'app-example',
+  selector: "app-example",
   standalone: true,
   imports: [ButtonComponent, CardComponent],
   template: `
     <sefin-card variant="elevated">
       <h2>Hola Mundo</h2>
-      <sefin-button variant="primary" (clicked)="handleClick()">
-        Haz Clic
-      </sefin-button>
+      <sefin-button variant="primary" (clicked)="handleClick()"> Haz Clic </sefin-button>
     </sefin-card>
   `,
 })
 export class ExampleComponent {
   handleClick() {
-    console.log('¡Botón clickeado!');
+    console.log("¡Botón clickeado!");
   }
 }
 ```
@@ -180,7 +177,7 @@ Todos los design tokens están disponibles como variables CSS:
 ### Usando Constantes TypeScript
 
 ```typescript
-import { COLOR_TOKENS, SPACING_TOKENS } from '@lesterarte/sefin-ui';
+import { COLOR_TOKENS, SPACING_TOKENS } from "@lesterarte/sefin-ui";
 
 const primaryColor = COLOR_TOKENS.brand.lightBlue;
 const mediumSpacing = SPACING_TOKENS.md;
@@ -197,18 +194,19 @@ const mediumSpacing = SPACING_TOKENS.md;
 ### Cambiar Temas
 
 ```typescript
-import { ThemeLoader } from '@lesterarte/sefin-ui';
+import { ThemeLoader } from "@lesterarte/sefin-ui";
 
 // Cambiar a tema brand
-ThemeLoader.loadTheme('brand');
+ThemeLoader.loadTheme("brand");
 
 // Cambiar a tema dark
-ThemeLoader.loadTheme('dark');
+ThemeLoader.loadTheme("dark");
 ```
 
 ## Tipografía
 
 La librería usa la fuente **Pluto** de Secretaría de Finanzas según las guías de marca:
+
 - **Pluto-Light** (300) - Para texto ligero
 - **Pluto-Regular** (400) - Para texto normal y body
 - **Pluto-Bold** (700) - Para títulos y encabezados
@@ -220,6 +218,7 @@ La librería define las declaraciones `@font-face` para Pluto, pero **debes prop
 #### Opción 1: Archivos locales (Recomendado)
 
 1. **Copia los archivos de fuente** a tu proyecto en la carpeta `src/assets/fonts/`:
+
    ```
    src/
    └── assets/
@@ -233,6 +232,7 @@ La librería define las declaraciones `@font-face` para Pluto, pero **debes prop
    ```
 
 2. **Configura Angular** para copiar los assets en `angular.json`:
+
    ```json
    {
      "assets": [
@@ -255,16 +255,16 @@ Si prefieres usar una fuente desde CDN o servidor externo, puedes sobrescribir l
 
 ```scss
 @font-face {
-  font-family: 'Pluto';
-  src: url('https://tu-cdn.com/fonts/Pluto-Regular.woff2') format('woff2');
+  font-family: "Pluto";
+  src: url("https://tu-cdn.com/fonts/Pluto-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Pluto';
-  src: url('https://tu-cdn.com/fonts/Pluto-Bold.woff2') format('woff2');
+  font-family: "Pluto";
+  src: url("https://tu-cdn.com/fonts/Pluto-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
@@ -274,6 +274,7 @@ Si prefieres usar una fuente desde CDN o servidor externo, puedes sobrescribir l
 #### Formatos de fuente soportados
 
 La librería busca los archivos en este orden de prioridad:
+
 1. `.woff2` (recomendado - mejor compresión)
 2. `.woff` (fallback)
 3. `.ttf` (fallback)
@@ -307,11 +308,26 @@ npm run storybook
 ```
 
 Esto iniciará Storybook en `http://localhost:6006` con:
+
 - Documentación de componentes
 - Playground interactivo de componentes
 - Cambio de temas
 - Testing de accesibilidad
 
+### Ver Storybook en Línea
+
+📖 **Documentación en vivo**: Puedes ver la documentación completa de Storybook en GitHub Pages:
+
+👉 **[Ver Storybook en GitHub Pages](https://sefin.github.io/sefin-ui/)**
+
+La documentación incluye:
+
+- Todos los componentes disponibles
+- Ejemplos interactivos
+- Guías de uso
+- Cambio de temas en tiempo real
+- Testing de accesibilidad
+
 ### Construir la Librería
 
 ```bash
@@ -361,6 +377,7 @@ Si ves un warning del linter de Angular que indica que un componente está siend
 #### ¿Por qué ocurre?
 
 Aunque el componente está correctamente exportado desde la librería, el linter de Angular no puede detectar su uso en templates HTML cuando se trata de:
+
 - Componentes standalone
 - Selectores personalizados (como `sefin-button`, `sefin-card`, etc.)