🎨 @enelar-esp/ui

Biblioteca oficial de componentes UI, plantillas y sistemas corporativos de diseño para Enelar S.A.S. Esta librería provee una suite completa de componentes interactivos, accesibles y consistentes bajo los lineamientos corporativos.

Todos los componentes son Standalone y compatibles con Angular 17+ (Angular 21 recomendado).

✨ Características Clave

• Diseño Atómico (Atomic Design): Estructura jerárquica clara que divide la interfaz en Átomos, Moléculas, Organismos y Páginas.
• Design Tokens Core: Variables semánticas HSL de color, tipografía, espaciado y bordes regulados de forma centralizada.
• Agnóstico a utilidades CSS (Zero-Tailwind Dependency): Compilado usando Vanilla CSS puro. El proyecto que instala esta librería no requiere Tailwind CSS para que los componentes se rendericen y funcionen correctamente.
• Soporte de Temas (Claro / Oscuro): Inyección de temas semánticos nativos y reactivos controlados por CSS custom properties.
• Páginas Dinámicas y Componentes Complejos: Contiene asistentes avanzados como DynamicForm (formularios reactivos basados en esquemas JSON), DynamicTable (ordenación y paginación reactiva) y DynamicCrud (operaciones CRUD completas listas para conectar a APIs).

🚀 Instalación y Configuración

1. Instalar la librería vía NPM

Ejecuta el siguiente comando en la raíz de tu proyecto Angular:

npm install @enelar-esp/ui

2. Configurar los Estilos Globales

Para inyectar los Design Tokens, la tipografía corporativa y el soporte de temas claro/oscuro en tu aplicación, importa la hoja de estilos en tu archivo global styles.scss:

/* En tu styles.scss */
@import "@enelar-esp/ui/src/lib/themes/_theme.scss";

O si utilizas la configuración de tu archivo angular.json:

"styles": [
  "src/styles.scss",
  "node_modules/@enelar-esp/ui/src/lib/themes/_theme.scss"
]

3. Integración con Tailwind CSS (Opcional)

Si tu proyecto destino utiliza Tailwind CSS y deseas consumir componentes avanzados (como DynamicForm, LoginPanel o DashboardPage), debes indicarle a Tailwind que escanee los archivos compilados de la librería agregando la ruta del paquete al arreglo content de tu archivo tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/@enelar-esp/ui/**/*.{html,ts,mjs}" // <-- Agregar esta línea
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

💻 Ejemplo de Uso de Componentes

Dado que todos los componentes de @enelar-esp/ui son Standalone, debes importarlos individualmente en el componente donde los vayas a usar:

Código de Componente (app.component.ts)

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  EnlButtonComponent, 
  EnlBadgeComponent, 
  EnlSkeletonComponent 
} from '@enelar-esp/ui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule, 
    EnlButtonComponent, 
    EnlBadgeComponent, 
    EnlSkeletonComponent
  ],
  templateUrl: './app.component.html'
})
export class AppComponent {
  isLoading = false;
  
  ejecutarAccion() {
    this.isLoading = true;
    setTimeout(() => this.isLoading = false, 2000);
  }
}

Código de Plantilla (app.component.html)

<div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
  <!-- Botón Modular -->
  <enl-button 
    variant="primary" 
    size="md" 
    [loading]="isLoading" 
    (click)="ejecutarAccion()">
    Guardar Cambios
  </enl-button>

  <!-- Distintivo/Badge Corporativo -->
  <enl-badge variant="success" size="md">
    Servicio Activo
  </enl-badge>

  <!-- Marcadores de Carga (Skeletons) -->
  @if (isLoading) {
    <div style="display: flex; flex-direction: column; gap: 8px;">
      <enl-skeleton shape="line" width="60%" height="16px"></enl-skeleton>
      <enl-skeleton shape="rectangle" width="100%" height="40px"></enl-skeleton>
    </div>
  }
</div>

🛠️ Catálogo de Componentes Disponibles

🧬 Átomos (Atoms)

• enl-typography: Control de jerarquías de texto tipográfico.
• enl-button: Botón interactivo con variantes primary, secondary, success, warning, error, ghost y estados de carga.
• enl-spinner: Indicador circular de carga.
• enl-avatar: Círculo de representación de perfil mediante iniciales o imagen.
• enl-badge: Etiquetas de estados semánticos.
• enl-input, enl-input-number, enl-input-otp, enl-textarea: Inputs para captura de datos tipados y numéricos.
• enl-checkbox, enl-radio, enl-toggle-switch: Selectores de estado binarios y múltiples.
• enl-skeleton: Bloques shimmer animados para simular estados de carga inicial de componentes.

🧪 Moléculas (Molecules)

• enl-form-field: Envoltura estructural con etiquetas de campo y control de errores integrados.
• enl-search-input: Barra de búsqueda reactiva con limpieza y debounce.
• enl-date-picker: Calendario modal para selección de fechas de alta precisión.
• enl-icon-field: Campos de entrada enriquecidos con prefijos/sufijos de iconos interactivos.
• enl-multi-select: Selector dropdown multiselección con filtrado inteligente.
• enl-page-header: Cabecera de página con títulos dinámicos y descripciones semánticas.
• enl-stat-card: Tarjeta compacta para métricas clave de sistema y reportes.
• enl-skeleton-card: Tarjeta estructurada con shimmer animado prefabricado para perfiles u objetos.

🏢 Organismos (Organisms)

• enl-navbar: Barra superior global de navegación del sistema.
• enl-sidebar: Barra de navegación colapsable y responsiva con perfiles embebidos.
• enl-dynamic-form: Generador reactivo de formularios completos mediante esquemas de configuración JSON.
• enl-dynamic-table: Tabla inteligente con ordenamiento, templates por columna y paginación.
• enl-dynamic-crud: Tablero de administración de recursos dinámico con búsqueda, creación, edición y eliminación de datos automática.
• enl-confirm-dialog: Diálogo modal de confirmación crítica de flujos.
• enl-toast-container / EnlToastService: Notificaciones toast de estados semánticos no bloqueantes.

📖 Licencia

Uso exclusivo y propietario de Enelar S.A.S. Prohibida su distribución no autorizada.