Hub-UI es el ecosistema de bibliotecas Angular que llevo desarrollando desde 2020. Nació de necesidades reales en proyectos profesionales: en lugar de depender de frameworks monolíticos o reescribir la misma lógica una y otra vez, decidí crear componentes independientes, ligeros y listos para producción.
Sistema de modales independiente de cualquier framework CSS. Gestiona ciclo de vida, accesibilidad (traps de foco, ARIA) y es totalmente personalizable mediante plantillas.
Componente de pasos para flujos tipo wizard. Soporta navegación lineal y no lineal, validación por paso y personalización completa del diseño.
Contenedor de paneles de contenido con cuatro visualizaciones: pestañas, píldoras, acordeón y tarjetas. Cabecera y pie personalizables, routing y navegación por teclado.
Botones, FAB, Speed Dial y directiva de menú desplegable para Angular, con las mismas variantes y estados que el resto del sistema.
Insignias semánticas, píldoras de estado y etiquetas de filtro eliminables para Angular.
Placeholders animados para estados de carga. Replican la estructura visual del contenido que se está cargando, mejorando la percepción de rendimiento.
Avatares con fallback automático: si la imagen no carga, recurre a iniciales, Gravatar u otras fuentes. Múltiples formas y tamaños.
Pad de firma digital. Captura firmas manuscritas en canvas, exporta como imagen y valida la firma. Útil en flujos contractuales y formularios legales.
Sistema de navegación flexible para menús, sidebars y barras de navegación. Desacoplado de la configuración de rutas de Angular.
Migas de pan dinámicas generadas automáticamente desde la configuración de rutas. Soporta i18n y lectura RTL.
Tablas y listas con paginación integrada en cliente y servidor. Encabezados, celdas y filtros completamente personalizables.
Tablero Kanban con drag & drop nativo. Permite mover tarjetas entre columnas, reordenar y personalizar completamente el diseño.
Directiva para listas ordenables con drag & drop. Basada en SortableJS, con soporte para FormArray, animaciones y eventos tipados.
Notificaciones toast independientes para Angular, con tipos semánticos, posicionamiento y cierre automático configurable.
Indicador de carga personalizable: bloque en línea, overlay de contenedor o pantalla completa, con variantes solo CSS, imagen de marca y un servicio programático.
Visualizaciones de valor de solo lectura: barra de progreso, medidor y anillo (gauge), para Angular 21+.
Pipes, directivas y servicios transversales compartidos por todo el ecosistema. Utilidades de DOM, helpers reactivos y funciones de formato.
Componente y directiva de iconos agnósticos del set: Font Awesome, Bootstrap Icons, Material Symbols, Solar o SVG propios, todos con la misma API.
Tokens de diseño del ecosistema: variables CSS primitivas y semánticas con modo claro/oscuro y 8 temas incluidos. Se integra en cualquier framework, solo con CSS o SCSS.
