4byteSharedLib

Librería de componentes UI desarrollada con Angular, PrimeNG y Storybook.

Descripción

4Byte Shared Lib es una librería de componentes reutilizables desarrollada sobre Angular y PrimeNG. Su objetivo es centralizar componentes, estilos y temas para facilitar el desarrollo de aplicaciones con una apariencia consistente.

Actualmente la librería incluye:

• Componentes reutilizables.
• Integración con PrimeNG.
• Sistema de temas personalizados.
• Documentación interactiva mediante Storybook.

Tecnologías

• Angular 21
• PrimeNG 21.1.9
• PrimeUIX Themes
• Storybook 10
• TypeScript

Requisitos

Antes de utilizar Empresa UI asegúrate de contar con el siguiente entorno:

| Herramienta | Versión | |-------------|----------| | Node.js | 22.12.0 o superior | | npm | 10 o superior | | Angular CLI | 21 | | Angular | 21 |

Puedes verificar las versiones instaladas ejecutando:

node -v
npm -v
ng version

Instalación

1. Clonar el repositorio

git clone <url-del-repositorio>

2. Ingresar al proyecto

cd 4vyte-shared-lib

3. Instalar dependencias

npm install

Configuración

La librería utiliza un proveedor para registrar la configuración global.

Ejemplo:

provideEmpresaUI({
    theme: 'crm'
});

Temas disponibles actualmente:

• CRM Theme (crm)

Scripts disponibles

Ejecutar Storybook

ng run storybook-host:storybook

Ejecutar la aplicación Demo

ng serve demo

Compilar la librería

ng build shared-ui

Arquitectura del proyecto

4byte-shared-lib
│
├── .storybook
│
├── projects
│   └── demo
│
├── shared-ui
│   ├── components
│   ├── themes
│   ├── config
│   └── providers
│
└── dist

Componentes UI

Los componentes disponibles se encuentran documentados en Storybook.

Ejemplos:

• ByteCalendar
• ByteSelect
• ByteInput

Theming y estilos

4Byte Shared Lib permite cambiar el tema global mediante provideEmpresaUI().

Ejemplo:

provideEmpresaUI({
    theme: 'crm'
});

Accesibilidad

Los componentes están desarrollados sobre PrimeNG, aprovechando sus capacidades de accesibilidad y navegación mediante teclado.

Se recomienda validar la accesibilidad de cada componente incorporado a la librería.

Testing

Para ejecutar las pruebas:

ng test

Storybook puede utilizarse para validar visualmente el comportamiento de los componentes.

Convenciones de desarrollo

• Utilizar componentes Standalone.
• Mantener tipado estricto de TypeScript.
• Documentar cada componente mediante Storybook.
• Mantener la estructura de carpetas definida por la librería.
• Agregar nuevas funcionalidades mediante Pull Request.

Contribución

1. Crear una rama a partir de develop.
2. Implementar los cambios.
3. Ejecutar pruebas y validar Storybook.
4. Crear un Merge Request para revisión.

Desarrollo local

Como projects/demo no está versionado en el repositorio, cada desarrollador debe generarlo localmente para poder probar la librería antes de publicarla.

1. Instalar dependencias

npm install

2. Crear el proyecto demo

Si projects/demo no existe en tu copia local, créalo con el schematic de Angular (esto respeta la config ya definida en angular.json):

ng generate application demo --directory=projects/demo --routing=false --style=css

Si angular.json ya define el proyecto demo pero la carpeta física no existe, este comando la generará. Si ya tienes la carpeta (por ejemplo porque otro compañero te la pasó), puedes omitir este paso.

3. Compilar la librería

ng build shared-ui

Esto genera el output compilado en dist/shared-ui.

4. Enlazar la librería compilada globalmente

Entra a la carpeta del build y crea el link global de npm:

cd dist/shared-ui
npm link
cd ../..

5. Consumir el link desde el proyecto demo

Vuelve a la raíz del workspace y enlaza el paquete dentro del proyecto demo:

npm link nombre-del-paquete

nombre-del-paquete debe coincidir exactamente con el campo "name" de dist/shared-ui/package.json (generado por ng-packagr a partir de tu package.json raíz o de ng-package.json).

6. Levantar el proyecto demo

ng serve demo

Ahora projects/demo consume la librería como si fuera una dependencia real de node_modules, apuntando al build de dist/shared-ui.

🔁 Al modificar la librería

Angular CLI no recompila automáticamente al usar npm link de esta forma. Cada vez que cambies algo en src/lib, debes:

ng build shared-ui

Para evitar hacerlo manualmente en cada cambio, puedes usar el modo watch:

ng build shared-ui --watch

Y en otra terminal, en paralelo:

ng serve demo

Así, cada cambio en la librería regenera dist/shared-ui y el demo recarga automáticamente (siempre que Angular detecte el cambio del symlink; si no recarga solo, reinicia ng serve demo).

🧹 Deshacer el link (opcional)

Si necesitas volver a instalar la dependencia real desde el registro (o limpiar el entorno):

npm unlink nombre-del-paquete
npm install