@4byte/shared-lib 0.0.1

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,284 @@
+# 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:
+
+```bash
+node -v
+npm -v
+ng version
+```
+
+---
+
+# Instalación
+
+### 1. Clonar el repositorio
+
+```bash
+git clone <url-del-repositorio>
+```
+
+### 2. Ingresar al proyecto
+
+```bash
+cd 4vyte-shared-lib
+```
+
+### 3. Instalar dependencias
+
+```bash
+npm install
+```
+
+---
+
+# Configuración
+
+La librería utiliza un proveedor para registrar la configuración global.
+
+Ejemplo:
+
+```ts
+provideEmpresaUI({
+    theme: 'crm'
+});
+```
+
+Temas disponibles actualmente:
+
+- CRM Theme (crm)
+
+---
+
+# Scripts disponibles
+
+## Ejecutar Storybook
+
+```bash
+ng run storybook-host:storybook
+```
+
+## Ejecutar la aplicación Demo
+
+```bash
+ng serve demo
+```
+
+## Compilar la librería
+
+```bash
+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:
+
+```ts
+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:
+
+```bash
+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
+
+```bash
+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`):
+
+```bash
+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
+
+```bash
+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:
+
+```bash
+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`:
+
+```bash
+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
+
+```bash
+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:
+
+```bash
+ng build shared-ui
+```
+
+Para evitar hacerlo manualmente en cada cambio, puedes usar el modo *watch*:
+
+```bash
+ng build shared-ui --watch
+```
+
+Y en otra terminal, en paralelo:
+
+```bash
+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):
+
+```bash
+npm unlink nombre-del-paquete
+npm install
+```

package/angular.json

@@ -0,0 +1,211 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "shared-ui": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "src",
+      "prefix": "shared",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "tsconfig.spec.json"
+          }
+        }
+      }
+    },
+    "demo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/demo",
+      "sourceRoot": "projects/demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/demo/src/main.ts",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/demo/public"
+              }
+            ],
+            "styles": ["projects/demo/src/styles.css"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    },
+    "storybook-host": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:component": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "projects/storybook-host",
+      "sourceRoot": "projects/storybook-host/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/storybook-host/src/main.ts",
+            "tsConfig": "projects/storybook-host/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/storybook-host/public"
+              }
+            ],
+            "styles": ["projects/storybook-host/src/styles.css"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "storybook-host:build:production"
+            },
+            "development": {
+              "buildTarget": "storybook-host:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": "projects/storybook-host/.storybook",
+            "browserTarget": "storybook-host:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "projects/storybook-host"
+            ],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": "projects/storybook-host/.storybook",
+            "browserTarget": "storybook-host:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "projects/storybook-host"
+            ],
+            "outputDir": "dist/storybook/storybook-host"
+          }
+        }
+      }
+    }
+  }
+}

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist/shared-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "primeng",
+    "@primeuix/themes"
+  ]
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@4byte/shared-lib",
+  "version": "0.0.1",
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "packageManager": "npm@10.9.3",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@angular/platform-browser-dynamic": "^21.2.21",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "@primeuix/themes": "^3.0.0",
+    "primeng": "^21.1.9",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^21.2.22",
+    "@angular/build": "^21.2.21",
+    "@angular/cli": "^21.2.21",
+    "@angular/compiler": "^21.2.0",
+    "@angular/compiler-cli": "^21.2.0",
+    "@storybook/angular": "^10.5.10",
+    "jsdom": "^28.0.0",
+    "ng-packagr": "^21.2.0",
+    "prettier": "^3.8.1",
+    "storybook": "^10.5.10",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8",
+    "@types/node": "^20",
+    "@angular-devkit/architect": "latest",
+    "@angular-devkit/core": "latest",
+    "@compodoc/compodoc": "latest",
+    "@storybook/addon-docs": "^10.5.10"
+  }
+}

package/projects/storybook-host/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: [
+    '../../../src/lib/**/*.stories.ts',
+    '../../../src/lib/**/*.stories.mdx',
+    './tutorial/*.mdx'
+  ],
+
+  addons: [
+    '@storybook/addon-docs',
+  ],
+
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+};
+
+export default config;