@libs-core/ui-framework

Descripción

Sistema de componentes UI mínimo para soportar los módulos de prueba: user-management, product-catalog y analytics. Diseñado específicamente para testing y proof-of-concept.

Componentes Esenciales

1. Table Component (ggs-table)

• Tabla básica con columnas configurables
• Soporte para ordenamiento simple
• Paginación básica
• Uso: Listas de usuarios, catálogo de productos, datos de analytics

2. Form Components

• Input Field (ggs-input): Input básico con validación
• Button (ggs-button): Botón estándar para acciones CRUD
• Select (ggs-select): Dropdown para filtros y selecciones
• Uso: Formularios CRUD de usuarios y productos

3. Card Component (ggs-card)

• Contenedor básico con header/body/footer opcional
• Uso: Mostrar información de usuarios, productos, métricas de analytics

4. Chart Component (ggs-simple-chart)

• Gráfico básico (barras/líneas) usando Canvas
• Uso: Visualizaciones simples para el módulo de analytics

Características

• Standalone Components: Angular 20 compatible
• OnPush Strategy: Optimización de rendimiento
• Minimal Styling: Estilos básicos usando SCSS
• TypeScript: Tipado estricto
• Testing Ready: Preparado para pruebas unitarias

Dependencias

• Solo dependencias de Angular core
• Sin librerías externas de UI (Material, PrimeNG, etc.)
• Canvas API nativo para gráficos simples

Instalación

# Generar la librería
npx nx g @nx/angular:lib ui-framework --directory=libs/core --standalone

# Instalar en un módulo
npm install @libs-core/ui-framework

Uso

// En tu componente
import { GgsTableComponent, GgsButtonComponent } from '@libs-core/ui-framework';

@Component({
  imports: [GgsTableComponent, GgsButtonComponent],
  // ...
})

Esta implementación mínima cubrirá las necesidades básicas de los tres módulos sin agregar complejidad innecesaria.