@bago/ui-components

Biblioteca de componentes UI reutilizables para proyectos Angular 20+ con estilos encapsulados y componentes standalone.

🚀 Instalación

Opción 1: Desde npm (cuando esté publicado)

pnpm add @bagoec/ui-components
# o con npm:
npm install @bagoec/ui-components

Opción 2: Desarrollo local (link simbólico)

# En el directorio de la biblioteca
cd bago-ui-components
pnpm install
pnpm run build
pnpm link --global

# En tu proyecto Angular
pnpm link --global @bagoec/ui-components

Opción 3: Instalación desde ruta local

# En tu proyecto Angular
pnpm add ../bago-ui-components
# o con npm:
npm install ../bago-ui-components

📦 Dependencias Peer

Asegúrate de tener estas dependencias en tu proyecto:

{
  "@angular/common": "^20.0.0",
  "@angular/core": "^20.0.0",
  "@angular/material": "^20.0.0",
  "@angular/router": "^20.0.0",
  "xng-breadcrumb": "^14.0.0",
  "rxjs": "^7.0.0"
}

🎯 Uso

Breadcrumb Component

// app.component.ts
import { BreadcrumbComponent } from '@bago/ui-components';

@Component({
  imports: [BreadcrumbComponent],
  // ...
})
export class AppComponent {}

<!-- app.component.html -->
<bago-breadcrumb separator="/" [autoGenerate]="false"></bago-breadcrumb>

Configurar rutas con iconos:

// app-routing.module.ts
{
  path: 'home',
  data: {
    breadcrumb: {
      label: 'Inicio',
      info: 'home' // Nombre del icono de Material Icons
    }
  }
}

Sidebar Component

import { SidebarComponent } from '@bago/ui-components';

@Component({
  imports: [SidebarComponent],
})
export class AppComponent {
  showSidebar = false;
}

<bago-sidebar [showSidebar]="showSidebar">
  <!-- Contenido del sidebar -->
</bago-sidebar>

🔨 Desarrollo

Comandos disponibles

# Instalar dependencias
pnpm install

# Build de desarrollo
pnpm run build

# Build de producción
pnpm run build:prod

# Ejecutar tests
pnpm test

# Linting
pnpm run lint

# Iniciar Storybook (corre en http://localhost:6006, no usa el puerto de Angular 4200)
pnpm run storybook

# Build Storybook estático
pnpm run build-storybook

📤 Publicación en npm

Paso 1: Configurar npm

# Login en npm
pnpm login
# o con npm:
npm login

# Verificar usuario
pnpm whoami
# o con npm:
npm whoami

Paso 2: Build de producción

pnpm run build:prod

Paso 3: Versionado

# Patch (1.0.0 -> 1.0.1)
pnpm run version:patch

# Minor (1.0.0 -> 1.1.0)
pnpm run version:minor

# Major (1.0.0 -> 2.0.0)
pnpm run version:major

Paso 4: Publicar

# Publicación normal
pnpm run publish:npm

# Publicación como beta
pnpm run publish:npm:beta

# Publicación local (crea .tgz para testing)
pnpm run publish:local

Paso 5: Verificar publicación

pnpm view @bago/ui-components
# o con npm:
npm view @bago/ui-components

🧪 Testing local antes de publicar

Método 1: pnpm pack

# En bago-ui-components
pnpm run build:prod
pnpm pack

# Esto crea: bago-ui-components-1.0.0.tgz

# En tu proyecto de prueba
pnpm add ../bago-ui-components/bago-ui-components-1.0.0.tgz
# o con npm:
npm install ../bago-ui-components/bago-ui-components-1.0.0.tgz

Método 2: pnpm link

# En bago-ui-components
pnpm run build:prod
pnpm link --global

# En tu proyecto de prueba
pnpm link --global @bago/ui-components

📝 Estructura

bago-ui-components/
├── projects/
│   └── bago-ui-components/
│       └── src/
│           └── lib/
│               └── components/
│                   ├── breadcrumb/
│                   └── sidebar/
├── dist/                      # Build output
├── angular.json
├── package.json
└── tsconfig.json

🎨 Características

• ✅ Componentes standalone (Angular 20+)
• ✅ Estilos encapsulados (no afectan/ni son afectados por estilos globales)
• ✅ TypeScript estricto
• ✅ Compatible con Material Icons
• ✅ Zero dependencies (solo peer dependencies)

🔒 Aislamiento de Estilos

Todos los componentes usan ViewEncapsulation.Emulated, lo que significa:

• ✅ Los estilos del componente NO afectan otros componentes
• ✅ Los estilos globales NO afectan los componentes (excepto si usas ::ng-deep)
• ✅ Cada componente tiene su propio scope de CSS

📄 Licencia

MIT

👥 Contribuir

1. Fork el repositorio
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request