hunter-hook-ui

🚀 Hunter Hook UI Library

📖 Descripción

Hunter Hook UI Library es una librería de componentes en Angular diseñada exclusivamente para las aplicaciones del ecosistema Hunter Hook. Su propósito es estandarizar la interfaz de usuario, garantizando coherencia visual, reutilización de elementos UI y optimización en el desarrollo.

Esta librería sigue la metodología Atomic Design, lo que permite una estructura modular escalable y organizada. Además, integra una paleta de colores reutilizable, una tipografía global (DM Sans), y un conjunto de íconos SVG predefinidos, asegurando una identidad visual unificada.

Esta librería es de uso interno, por lo que no está disponible para el público ni para proyectos fuera del ecosistema Hunter Hook.

🌟 Beneficios

✅ Estandarización Visual → Garantiza una interfaz UI homogénea en todas las aplicaciones de Hunter Hook.
✅ Atomic Design → Organización en atoms/, molecules/ y organisms/ para facilitar la reutilización y escalabilidad.
✅ Paleta de Colores Consistente → Diseño uniforme con colores predefinidos.
✅ Tipografía Unificada (DM Sans) → Permite coherencia tipográfica en toda la aplicación.
✅ Íconos SVG Predefinidos → Centralización de íconos en assets/icons/ para mayor accesibilidad y reutilización.
✅ Optimización de Estilos → Todos los estilos están centralizados en styles/ para facilitar la gestión y personalización.
✅ Integración Modular → Posibilidad de importar únicamente los componentes necesarios.
✅ Compatibilidad con Temas → Admite personalización mediante la redefinición de variables CSS.
✅ Facilidad de Mantenimiento → Estructura clara que simplifica la actualización de componentes.

📂 Estructura de la Librería

hunter-hook-ui/
│── components/               # Componentes organizados según Atomic Design
│   ├── atoms/                # Componentes UI básicos
│   │   ├── inputs/           # Grupo de inputs
│   │   │   ├── input-checkbox/
│   │   │   ├── input-radio/
│   │   │   ├── input-text/
│   │   │   ├── input-select/
│   │   │   ├── input-date/
│   │   │   ├── input-drag-and-drop/
│   │   ├── button/
│   │   ├── icon/
│   │   ├── chip/
│   │   ├── tag/
│   │   ├── indication/
│   │   ├── modal/
│   │   ├── paragraph/
│   │   ├── title/
│   ├── molecules/            # Combinaciones de átomos formando elementos más complejos
│   │   ├── paginator/
│   │   ├── notification/
│   │   ├── toast/
│   │   ├── list-item/
│   │   ├── list-item-selected/
│   ├── organisms/            # Componentes grandes con múltiples moléculas
│   │   ├── stats-card/        # Tarjeta de estadísticas con icono y valores
│   │   ├── data-table/        # Tabla de datos genérica
│── styles/                   # Estilos centralizados
│   ├── _colors.scss          # Definición de la paleta de colores global
│   ├── _typography.scss      # Configuración de la tipografía global (DM Sans)
│   ├── _variables.scss       # Variables reutilizables para colores, fuentes, etc.
│   ├── main.scss             # Archivo principal que importa todos los estilos
│── assets/                   # Recursos estáticos de la librería
│   ├── icons/                # Íconos SVG reutilizables en la UI
│   ├── fonts/                # Archivos TTF de la tipografía utilizada

🎨 Uso de Estilos

Para que los estilos predefinidos de la librería estén disponibles en tu proyecto, debes añadirlos a la sección styles dentro del archivo angular.json, como se muestra a continuación:

"node_modules/hunter-hook-ui/styles/main.scss"

Esto garantiza que los estilos globales, como la tipografía, paleta de colores y demás configuraciones específicas, se apliquen en tu aplicación Angular.

🖼️ Uso de Íconos

Para utilizar los íconos en tu proyecto Angular, es necesario configurar la sección de assets dentro del archivo angular.json para que incluyan los recursos de la librería. A continuación, se muestra el fragmento que debes agregar:

{
  "glob": "**/*",
  "input": "node_modules/hunter-hook-ui/assets",
  "output": "assets"
}

Este ajuste asegura que los íconos y demás recursos estáticos de la librería Hunter Hook UI estén correctamente disponibles dentro de los activos de tu aplicación.

🛠 Licencia

📜 Uso Exclusivo para Hunter Hook - Esta librería es de uso interno y exclusivo para los proyectos de Hunter Hook. No está permitida su distribución, modificación o uso fuera del ecosistema de Hunter Hook.