Tasks

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

Plan de ejecución: @libs-core/ui-framework

Tareas para implementar sistema de componentes UI MÍNIMOS y SIMPLES con trazabilidad a requerimientos.

Convenciones y alcance del plan

Implementación de 4 componentes standalone Angular 20 EXTREMADAMENTE SIMPLES con testing ≥80% y dependencias mínimas.

Desglose de trabajo (WBS)

Épica: Setup y Base de UI Framework

T-001: Configuración inicial de librería

Descripción: Crear estructura base de la librería con configuración Nx, TypeScript y testing setup.

Cobertura: Infraestructura para US-001, US-002, US-003, US-004 y R-009, R-010, R-011

Dependencias: Ninguna

DoD VERIFICABLE:

✅ Librería generada: npx nx g @nx/angular:lib ui-framework --directory=libs/core --standalone
✅ Build exitoso: npx nx build ui-framework
✅ Configuración TypeScript strict: npx nx lint ui-framework sin errores
✅ Testing setup: npx nx test ui-framework ejecuta sin errores
✅ Barrel exports configurados en src/index.ts

Estimación: S | Responsable: Desarrollador Frontend

T-002: Interfaces básicas

Descripción: Implementar interfaces TypeScript MÍNIMAS según contratos simplificados del diseño.

Cobertura: Interfaces básicas para US-001 (TableColumn, TableConfig), US-004 (ChartData, ChartConfig)

Dependencias: T-001

DoD VERIFICABLE:

✅ Interfaces básicas implementadas: TableColumn, TableConfig, ChartData, ChartConfig
✅ Sin dependencias externas - tipos simples únicamente
✅ Exportación en barrel: verificar import { TableColumn } from '@libs-core/ui-framework'
✅ TypeScript compliance: npx nx build ui-framework sin errores TypeScript
✅ Tests unitarios básicos: ≥80% cobertura npx nx test ui-framework --coverage

Estimación: XS | Responsable: Desarrollador Frontend

Épica: Componentes de Datos

T-003: GgsTableComponent básico

Descripción: Desarrollar componente de tabla standalone SIMPLE con HTML básico.

Cobertura: US-001, AC-001, AC-002, AC-003, AC-004, R-001, R-002, R-007, R-008

Dependencias: T-002, @gograb-space/utilities (solo ArrayUtils básico)

DoD VERIFICABLE:

✅ Componente standalone básico implementado
✅ Configuración de columnas simple: key y label únicamente
✅ Sorting básico de una columna usando ArrayUtils.sortBy()
✅ Paginación: botones anterior/siguiente únicamente
✅ Eventos Angular básicos: (rowClick), (sortClick), (pageClick)
✅ Tests unitarios: ≥80% cobertura npx nx test ui-framework --testNamePattern="GgsTableComponent"
✅ Test básico: tabla con 20 items funciona
✅ Build sin errores: npx nx build ui-framework

Estimación: M | Responsable: Desarrollador Frontend

T-004: GgsSimpleChartComponent básico

Descripción: Desarrollar componente de gráfico BÁSICO usando Canvas para barras simples únicamente.

Cobertura: US-004, AC-012, AC-013, AC-014, R-006

Dependencias: T-002

DoD VERIFICABLE:

✅ Componente standalone con Canvas básico
✅ Solo gráfico de barras implementado (sin líneas)
✅ Datos estáticos: sin cambios reactivos complejos
✅ Canvas API simple: sin animaciones ni optimizaciones
✅ Tamaño fijo: width y height configurables únicamente
✅ Tests unitarios: ≥80% cobertura npx nx test ui-framework --testNamePattern="GgsSimpleChartComponent"
✅ Test básico: renderiza barras con 5-10 datos
✅ Sin dependencias externas: verificado en package.json

Estimación: M | Responsable: Desarrollador Frontend

Épica: Componentes de Formulario

T-005: Form Components básicos

Descripción: Implementar GgsInputComponent, GgsButtonComponent, GgsSelectComponent SIMPLES para operaciones básicas.

Cobertura: US-002, AC-005, AC-006, AC-007, AC-008, R-003, R-004

Dependencias: T-002

DoD VERIFICABLE:

✅ GgsInputComponent: input HTML básico con validación required únicamente
✅ GgsButtonComponent: button HTML básico sin estados complejos
✅ GgsSelectComponent: select HTML básico sin filtrado
✅ Reactive forms integration: FormControl binding básico
✅ Eventos Angular básicos: (click), (valueChange)
✅ Tests unitarios cada componente: ≥80% cobertura individual
✅ Test básico: formulario simple funciona
✅ HTML semántico básico: labels asociados

Estimación: M | Responsable: Desarrollador Frontend

Épica: Componentes de Layout

T-006: GgsCardComponent simple

Descripción: Desarrollar componente contenedor SIMPLE como div con header y body únicamente.

Cobertura: US-003, AC-009, AC-010, AC-011, R-005

Dependencias: T-002

DoD VERIFICABLE:

✅ Componente standalone con header y body únicamente (sin footer)
✅ SCSS styling: estilos fijos mínimos
✅ Layout fijo: sin responsive design
✅ Content projection: <ng-content> para header y body
✅ Tests unitarios: ≥80% cobertura npx nx test ui-framework --testNamePattern="GgsCardComponent"
✅ Estructura HTML básica semántica

Estimación: S | Responsable: Desarrollador Frontend

Épica: Integración y Testing

T-007: Integración básica final

Descripción: Validación básica de componentes funcionando juntos con dependencias mínimas.

Cobertura: R-013, R-014, validación básica de componentes

Dependencias: T-003, T-004, T-005, T-006

DoD VERIFICABLE:

✅ Dependencies mínimas verificadas: solo @gograb-space/utilities (ArrayUtils) si necesario
✅ Logging básico: solo errores críticos con @libs-core/log-system
✅ Integration test básico: todos los componentes renderizan sin errores
✅ Error scenarios test: 2-3 casos error básicos por componente
✅ Build verification: npx nx build ui-framework exitoso
✅ No circular dependencies: verificación con Nx dependency graph

Estimación: S | Responsable: Desarrollador Frontend

T-008: Documentation básica y exports

Descripción: Finalizar exports básicos y documentación mínima de componentes.

Cobertura: Facilitar consumo básico para módulos user-management, product-catalog, analytics

Dependencias: T-007

DoD VERIFICABLE:

✅ Barrel exports básicos: componentes + tipos únicamente
✅ JSDoc comments básicos: interfaces y componentes principales
✅ README.md actualizado con ejemplos básicos de uso
✅ Build production: npx nx build ui-framework --configuration=production
✅ Package exports: verificar importación básica funciona
✅ Bundle size: ≤50KB sin dependencias complejas
✅ Tree-shaking verification: imports individuales funcionan

Estimación: XS | Responsable: Desarrollador Frontend

Secuenciación y hitos

Milestone 1: Foundation Básica (T-001, T-002)

Criterio VERIFICABLE: npx nx build ui-framework && npx nx test ui-framework exitosos con interfaces básicas

Milestone 2: Componentes Simples (T-003, T-004, T-005, T-006)

Criterio VERIFICABLE: Todos los componentes renderizando + tests ≥80% coverage básico

Milestone 3: Librería Lista (T-007, T-008)

Criterio VERIFICABLE: Librería consumible por otros módulos con funcionalidad básica

Quality gates automatizables

# Build verification básico
npx nx build ui-framework --configuration=production

# Testing gate básico
npx nx test ui-framework --coverage --threshold=80

# Linting gate
npx nx lint ui-framework

# Type checking básico
npx nx run ui-framework:type-check

# Bundle analysis básico
npx nx run ui-framework:analyze

Riesgos operativos

Riesgo: Canvas rendering complejidad Mitigación: Solo barras básicas, sin optimizaciones complejas
Riesgo: Componentes demasiado simples Mitigación: Enfoque en testing/proof-of-concept únicamente
Riesgo: Dependencias mínimas insuficientes Mitigación: Agregar funcionalidad solo si es estrictamente necesario