@lesterarte/sefin-ui 0.0.1

package/README.md

@@ -0,0 +1,296 @@
+# @sefin/sefin-ui
+
+Una librería de sistema de diseño Angular completa basada en principios de Atomic Design y design tokens de la Secretaría de Finanzas.
+
+## Resumen
+
+`@sefin/sefin-ui` es una librería UI Angular lista para producción diseñada para aplicaciones empresariales a gran escala. Proporciona:
+
+- **Design Tokens**: Variables CSS y constantes TypeScript para temas consistentes
+- **Estructura Atomic Design**: Componentes organizados (atoms, molecules, organisms)
+- **Múltiples Temas**: Temas light, dark y brand (colores de Secretaría de Finanzas)
+- **Integración con Angular Material**: Tema Material personalizado basado en design tokens
+- **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
+
+## Estructura del Proyecto
+
+```
+sefin-ui/
+├── src/
+│   ├── atoms/          # Bloques básicos (Button, Icon, Input)
+│   ├── molecules/      # Componentes compuestos (FormField, Dropdown, Card)
+│   ├── organisms/      # Bloques UI complejos (Header, LoginForm, Toolbar)
+│   ├── tokens/         # Design tokens (colors, spacing, typography, etc.)
+│   ├── themes/         # Configuraciones de temas (light, dark, brand)
+│   ├── utils/          # Utilidades (ThemeLoader)
+│   ├── shared/         # Tipos e interfaces compartidos
+│   ├── styles/         # Estilos globales y resets
+│   └── public-api.ts   # Exportaciones de la API pública
+├── .storybook/         # Configuración de Storybook
+├── ng-package.json     # Configuración de build
+└── package.json        # Configuración del paquete
+```
+
+## Instalación
+
+### Construir la Librería
+
+```bash
+npm run build
+```
+
+Esto creará el paquete distribuible en `dist/`.
+
+### Publicar en NPM
+
+1. Actualiza la versión en `package.json`
+2. Construye la librería: `npm run build`
+3. Navega a dist: `cd dist`
+4. Publica: `npm publish --access public`
+
+### Instalar en Tu Aplicación
+
+```bash
+npm install @sefin/sefin-ui
+```
+
+## Uso
+
+> 📖 **Guía Completa**: Para una guía detallada de cómo usar la librería, consulta [GUIA_CONSUMO.md](./GUIA_CONSUMO.md)
+
+### Inicio Rápido
+
+### 1. Importar Estilos
+
+En tu `styles.scss` o `angular.json`:
+
+```scss
+@import '@sefin/sefin-ui/styles';
+```
+
+O en `angular.json`:
+
+```json
+{
+  "styles": [
+    "node_modules/@sefin/sefin-ui/styles/index.scss"
+  ]
+}
+```
+
+### 2. Cargar Tema
+
+En tu `app.component.ts`:
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { ThemeLoader } from '@sefin/sefin-ui';
+
+@Component({
+  selector: 'app-root',
+  // ...
+})
+export class AppComponent implements OnInit {
+  ngOnInit(): void {
+    // Cargar tema brand (colores de Secretaría de Finanzas)
+    ThemeLoader.loadTheme('brand');
+    
+    // O cargar tema light
+    // ThemeLoader.loadTheme('light');
+    
+    // O cargar tema dark
+    // ThemeLoader.loadTheme('dark');
+  }
+}
+```
+
+### 3. Usar Componentes
+
+Todos los componentes son standalone y se pueden importar directamente:
+
+```typescript
+import { Component } from '@angular/core';
+import { ButtonComponent, CardComponent } from '@sefin/sefin-ui';
+
+@Component({
+  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-card>
+  `,
+})
+export class ExampleComponent {
+  handleClick() {
+    console.log('¡Botón clickeado!');
+  }
+}
+```
+
+## Componentes Disponibles
+
+### Atoms
+
+- **Button**: `sefin-button` - Múltiples variantes (primary, secondary, outline, ghost, danger) y tamaños
+- **Icon**: `sefin-icon` - Componente contenedor de iconos
+- **Input**: `sefin-input` - Input de formulario con soporte ControlValueAccessor
+
+### Molecules
+
+- **FormField**: `sefin-form-field` - Campo de formulario completo con label, input, hint y error
+- **Dropdown**: `sefin-dropdown` - Componente de selección dropdown
+- **Card**: `sefin-card` - Contenedor de tarjeta con variantes (default, elevated, outlined)
+
+### Organisms
+
+- **Header**: `sefin-header` - Encabezado de aplicación con logo, título y menú de usuario
+- **LoginForm**: `sefin-login-form` - Componente de formulario de login completo
+- **Toolbar**: `sefin-toolbar` - Barra de herramientas con título y botones de acción
+
+## Design Tokens
+
+### Paleta de Colores - Secretaría de Finanzas
+
+- **Dark Gray**: `#383838`
+- **Light Gray**: `#cecece`
+- **Light Blue**: `#55C3D8`
+- **White**: `#ffffff`
+
+### Usando Variables CSS
+
+Todos los design tokens están disponibles como variables CSS:
+
+```scss
+.mi-componente {
+  color: var(--sefin-color-primary);
+  padding: var(--sefin-spacing-md);
+  border-radius: var(--sefin-radius-md);
+  font-size: var(--sefin-font-size-base);
+  box-shadow: var(--sefin-shadow-md);
+}
+```
+
+### Usando Constantes TypeScript
+
+```typescript
+import { COLOR_TOKENS, SPACING_TOKENS } from '@sefin/sefin-ui';
+
+const primaryColor = COLOR_TOKENS.brand.lightBlue;
+const mediumSpacing = SPACING_TOKENS.md;
+```
+
+## Temas
+
+### Temas Disponibles
+
+- **brand**: Tema con colores exactos de Secretaría de Finanzas (por defecto)
+- **light**: Tema claro
+- **dark**: Tema oscuro
+
+### Cambiar Temas
+
+```typescript
+import { ThemeLoader } from '@sefin/sefin-ui';
+
+// Cambiar a tema brand
+ThemeLoader.loadTheme('brand');
+
+// Cambiar a tema dark
+ThemeLoader.loadTheme('dark');
+```
+
+## Tipografía
+
+La librería usa la fuente **Pluto** de Secretaría de Finanzas:
+- **Pluto-Light** (300)
+- **Pluto-Regular** (400)
+- **Pluto-Bold** (700)
+
+Nota: Debes incluir los archivos de fuente Pluto en tu proyecto.
+
+## Desarrollo
+
+### Ejecutar Tests
+
+```bash
+npm test
+```
+
+### Ejecutar Tests en Modo Watch
+
+```bash
+npm run test:watch
+```
+
+### Generar Reporte de Cobertura
+
+```bash
+npm run test:coverage
+```
+
+### Ejecutar Storybook
+
+```bash
+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
+
+### Construir la Librería
+
+```bash
+npm run build
+```
+
+## Versionado
+
+Este proyecto sigue [Semantic Versioning](https://semver.org/):
+
+- **MAJOR**: Cambios que rompen compatibilidad
+- **MINOR**: Nuevas características (compatibles hacia atrás)
+- **PATCH**: Correcciones de bugs (compatibles hacia atrás)
+
+## Flujo de Publicación
+
+1. Actualiza la versión en `package.json`
+2. Actualiza CHANGELOG.md
+3. Construye la librería: `npm run build`
+4. Prueba el build localmente
+5. Publica: `cd dist && npm publish --access public`
+
+## Mejores Prácticas
+
+### Para Mantenedores de la Librería
+
+1. **Siempre prueba antes de publicar**: Ejecuta tests y Storybook
+2. **Actualiza documentación**: Mantén README y stories de Storybook actualizados
+3. **Sigue Atomic Design**: Mantén los componentes organizados por jerarquía
+4. **Usa design tokens**: Nunca hardcodees colores, spacing, etc.
+5. **Escribe tests**: Mantén alta cobertura de tests
+
+### Para Consumidores
+
+1. **Importa solo lo que necesites**: Usa imports amigables con tree-shaking
+2. **Carga el tema temprano**: Inicializa el tema en AppComponent
+3. **Usa variables CSS**: Prefiere variables CSS sobre constantes TypeScript en estilos
+4. **Sigue las APIs de componentes**: Usa los componentes como están documentados
+5. **Extiende, no modifiques**: Crea componentes wrapper para personalización
+
+## Soporte
+
+Para problemas, preguntas o contribuciones, por favor abre un issue en el repositorio.
+
+## Licencia
+
+MIT

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@lesterarte/sefin-ui",
+  "version": "0.0.1",
+  "description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
+  "keywords": [
+    "angular",
+    "design-system",
+    "ui-library",
+    "components",
+    "atomic-design",
+    "design-tokens"
+  ],
+  "author": "Sefin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sefin/sefin-ui.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/animations": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "main": "./dist/sefin-ui/fesm2022/sefin-ui.mjs",
+  "module": "fesm2022/lesterarte-sefin-ui.mjs",
+  "es2022": "./dist/sefin-ui/fesm2022/sefin-ui.mjs",
+  "esm2022": "./dist/sefin-ui/esm2022/sefin-ui.mjs",
+  "fesm2022": "./dist/sefin-ui/fesm2022/sefin-ui.mjs",
+  "typings": "types/lesterarte-sefin-ui.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/lesterarte-sefin-ui.d.ts",
+      "esm2022": "./dist/sefin-ui/esm2022/sefin-ui.mjs",
+      "es2022": "./dist/sefin-ui/fesm2022/sefin-ui.mjs",
+      "default": "./fesm2022/lesterarte-sefin-ui.mjs"
+    },
+    "./styles": {
+      "default": "./dist/sefin-ui/styles.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "files": [
+    "dist/sefin-ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}