Biblioteca act-ui-core

act-ui-core es la biblioteca de componentes de interfaz de usuario fundamental para las aplicaciones de Activos. Proporciona un conjunto de componentes, servicios e interfaces reutilizables y estilizados con Tailwind CSS.

Para una visión general del monorepo y su arquitectura, consulta el README principal.

Arquitectura Interna

La biblioteca está estructurada de la siguiente manera dentro de libs/act-ui-core/src/lib:

• Componentes: Cada subdirectorio contiene un componente de Angular independiente y reutilizable (ej. button, modal, input).
• interfaces/: Define los modelos de datos y las estructuras de tipos que utilizan los componentes y servicios (ej. DropdownItem, ToastMessage).
• services/: Contiene servicios de Angular que proporcionan lógica compartida y gestión de estado para funcionalidades transversales como notificaciones y estados de carga.
• public-api.ts: Archivo de entrada que exporta todos los elementos públicos de la biblioteca, definiendo su API externa.
• styles.css: Contiene los estilos base de Tailwind CSS, incluyendo la definición de variables CSS para el tema de colores, que pueden ser sobreescritas por las aplicaciones consumidoras.

Componentes Destacados

A continuación, se describen algunos de los componentes clave y su funcionamiento.

Modal (<act-modal>)

El componente modal es una ventana de diálogo altamente personalizable que utiliza proyección de contenido (ng-content) para permitir la inserción de contenido dinámico.

Uso Básico:

<act-modal [(show)]="isModalVisible" title="Título del Modal">
  <!-- Contenido principal del modal -->
  <p>Este es el cuerpo del modal.</p>

  <!-- Contenido del footer (opcional) -->
  <div modal-footer>
    <button (click)="isModalVisible = false">Cerrar</button>
  </div>
</act-modal>

Proyección de Contenido:

• <ng-content></ng-content>: El ng-content principal se utiliza para proyectar el cuerpo del modal.
• <ng-content select="[modal-footer]"></ng-content>: Permite proyectar contenido específico en el pie de página del modal. Cualquier elemento con el atributo modal-footer será renderizado en esta sección.

Button (<act-button>)

El componente button es un botón personalizable que acepta varias entradas (inputs) para controlar su apariencia y comportamiento.

Uso Básico:

<act-button 
  label="Click Me"
  color="primary"
  rounded="lg"
  (onClick)="doSomething()">
</act-button>

Inputs de Estilo:

• color: Define el color del botón. Las opciones son: 'primary', 'secondary', 'neutral', 'info', 'success', 'warning', 'error', 'light', 'gray', 'black'.
• rounded: Controla el radio de los bordes. Las opciones son: 'sm', 'md', 'lg', 'xl', '2xl', 'full', 'none'.
• icon: Muestra un ícono junto a la etiqueta del botón.

Icon (<act-icon>)

El componente icon renderiza un ícono SVG desde un archivo de sprites. Este componente es fundamental para la consistencia visual en la aplicación.

Dependencia Clave: sprite.svg

Para que los íconos funcionen, la aplicación que consume la biblioteca debe tener un archivo sprite.svg en su carpeta public/icons. Este archivo actúa como una hoja de sprites para los íconos SVG.

Ejemplo de sprite.svg:

<!-- public/icons/sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="group" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="user" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

Uso del Componente:

Para mostrar un ícono, simplemente pasa el id del symbol al input icon.

<act-icon icon="group" size="lg"></act-icon>

Inputs:

• icon: El identificador del ícono en el archivo sprite.svg (ej. 'group').
• size: El tamaño del ícono. Opciones: 'sm', 'md', 'lg'.

Otros Componentes

• button: Botón estándar con diferentes variantes de estilo.
• calendar-timeline: Componente para visualizar eventos o tareas en una línea de tiempo.
• dropdown: Menú desplegable personalizable.
• input, checkbox, textarea: Controles de formulario básicos.
• toast-container: Contenedor para mostrar notificaciones (toasts) gestionadas por el ToastService.
• loading-card, loading-modal: Componentes para mostrar estados de carga.

Servicios

La biblioteca proporciona los siguientes servicios inyectables:

• LoadingService: Gestiona el estado de carga de la aplicación de forma centralizada. Permite mostrar u ocultar indicadores de carga desde cualquier parte del código.
• ToastService: Permite enviar notificaciones (toasts) que se mostrarán en el toast-container. Facilita la comunicación de éxito, error o información al usuario.

Interfaces

Se definen varias interfaces para asegurar la consistencia de los datos en toda la biblioteca:

• DropdownItem: Estructura para los elementos de un menú desplegable.
• MenuItem: Define un elemento de menú, típicamente para la barra de navegación.
• Notification: Modelo para una notificación.
• TimelineItem: Define un evento en el calendar-timeline.
• ToastMessage: Estructura para los mensajes de notificación.
• User: Modelo básico de datos de usuario.

Desarrollo y Contribución

Para contribuir o probar la biblioteca, sigue las directrices del README principal para compilar, servir la aplicación de demostración y generar nuevo código.