@ilumno-web/components

ilu-components

ilu-components es una librería de componentes reutilizables para Angular 19, diseñada para integrarse con proyectos que usan Tailwind CSS, aunque también incluye su propia hoja de estilos.

Instalación

Construcción de la librería y publicación local

Para generar el paquete y probarlo en otro proyecto:

Ejecutamos el siguiente comando

npm run build:lib

esto nos generara un empaquetado local con yalc.

Publicacion de la librería en npm

Para publicar el paquete:

Ejecutamos el siguiente comando

npm run publish:lib

este comando viene predefinido con el flag de --tag alpha

esto es lo que usaremos para establecer un tag del estado de la libreria.

principalmente mientras se definen conceptos y se desarrolla la libreria iniciaremos con una version alpha

luego pasaremos a una version beta y por ultimo antes de publicar las versiones estables usaremos la version rc [Release Candidate].

Instalación libreria de forma local

En el proyecto donde deseas usar la librería, instala el paquete generado:

yalc add ilu-components@[VERSION]

Importación de estilos

Los estilos propios de la librería deben ser importados manualmente en el styles.scss del proyecto destino:

@import 'node_modules/ilu-components/styles.scss';

"styles": [
  "node_modules/ilu-components/styles.css"
]

Si el proyecto usa Tailwind CSS o clases personalizadas, la librería heredará las clases definidas en la aplicación.

Uso en un proyecto

Ejemplo de importación de un componente en un módulo:

import { IluButtonComponent } from 'ilu-components';

Creación de nuevos componentes

Convención de nombres y estructura

Cada nuevo componente debe seguir esta estructura dentro de projects/ilu-components/src/lib/:

  [nombre-del-componente]/
    ├── [nombre-del-componente].component.ts
    ├── [nombre-del-componente].component.scss
    ├── [nombre-del-componente].interface.ts  (si aplica)
    ├── [nombre-del-componente].service.ts  (si aplica)
    ├── index.ts  (para exportaciones)

Comandos para generar nuevos componentes

ng generate component lib/[nombre-del-componente] --project=ilu-components --standalone --export

Contribuciones y mantenimiento

Para contribuir a la librería, sigue la convención de nombres y asegúrate de que los estilos sean compatibles con Tailwind CSS y los estilos nativos de la librería.

Para contribuir con nuevos componentes o mejoras:

1. Sigue la estructura definida en la librería.

2. Asegura compatibilidad con los estilos y herencia de clases.

3. Documenta el nuevo componente en ilu-demo. Más detalles en el README de ilu-demo.

Para probar cambios localmente, puedes usar:

ng serve ilu-demo

Así, la aplicación de demostración ilu-demo reflejará los cambios en la librería.