@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.18

package/src/lib/views/kanban-view/kanban-view.ts

@@ -1,327 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  inject,
-  signal,
-} from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
-
-import type {
-  KanbanViewConfig,
-  ResourceSchema,
-  SelectionBinding,
-} from '../../core/models/schema.model';
-import { ErrorMapperService } from '../../core/services/error-mapper.service';
-import { DataSourceService, type SourceRow } from '../../core/services/data-source.service';
-import type { SelectionEmitter } from '../composer/view-context';
-import { getSchema } from '../../core/registry/schema-catalog';
-import { Button } from '../../shared/components/button/button';
-import { EmptyState } from '../../shared/components/empty-state/empty-state';
-import { Skeleton } from '../../shared/components/skeleton/skeleton';
-import {
-  cardSubtitle,
-  cardTitle,
-  mapKanbanRows,
-  type KanbanColumnBucket,
-  type KanbanMapping,
-} from './kanban-model';
-
-/**
- * Narrowing helper: `UiViewBase` keeps `type: string` open, so comparing
- * `view.type === 'kanban'` alone does not remove the base member from the
- * union. Requiring `config` in the value is what actually proves the view is
- * a `UiViewKanban` at runtime.
- */
-function kanbanConfigOf(view: unknown): KanbanViewConfig | undefined {
-  if (!view || typeof view !== 'object') return undefined;
-  const candidate = view as { type?: unknown; config?: unknown };
-  return candidate.type === 'kanban' && candidate.config !== undefined
-    ? (candidate.config as KanbanViewConfig)
-    : undefined;
-}
-
-type Status = 'loading' | 'ready' | 'error';
-
-/** Label of the bucket for rows without a group value (Spanish UI copy). */
-const UNKNOWN_LABEL = 'Sin valor';
-
-/**
- * Synthetic `value` of that bucket: a real group value can never collide
- * with it (a declared `value` is non-empty and the grouping never produces
- * this literal), so `@for` tracking stays unique.
- */
-const UNKNOWN_VALUE = '__sin_valor__';
-
-/**
- * Generic kanban view (R9.8.4): rows of the declared
- * `KanbanViewConfig.source` (or the resource's own listing) grouped by
- * `groupField` into the declared columns, client-side.
- *
- * Data flow: ONE fetcher (`DataSourceService.rows`) — there is no dynamic
- * context here, so `ctx` is `undefined`; the 30 s cache of the service is
- * what keeps repeated visits free.
- *
- * Read-only by design (R9.8.1): no drag-and-drop, no move buttons, no
- * mutation path at all. Colour never carries meaning alone — every count is
- * text — and an empty column is a visible «Sin tarjetas», never a gap.
- */
-@Component({
-  selector: 'app-kanban-view',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Button, EmptyState, Skeleton],
-  template: `
-    @if (config(); as cfg) {
-      <section class="space-y-4" aria-label="Tablero" [attr.aria-busy]="status() === 'loading'">
-        <header class="flex flex-wrap items-center justify-between gap-3">
-          <h2 class="font-display text-xl font-semibold">Tablero</h2>
-          <p class="text-sm text-neutral">
-            Agrupado por <code>{{ cfg.groupField }}</code>
-          </p>
-        </header>
-
-        @switch (status()) {
-          @case ('loading') {
-            <app-skeleton [lines]="6" [height]="32" />
-          }
-          @case ('error') {
-            <app-empty-state title="No se pudo cargar el tablero" [message]="errorMessage()">
-              <button app-button variant="outline" type="button" (click)="retry()">
-                Reintentar
-              </button>
-            </app-empty-state>
-          }
-          @case ('ready') {
-            <div class="flex gap-3 overflow-x-auto pb-2">
-              @for (column of columns(); track column.value) {
-                <section
-                  class="flex w-64 shrink-0 flex-col gap-3 rounded-xl border border-neutral/20 bg-surface p-3"
-                  [attr.data-column]="column.value"
-                  [attr.aria-label]="columnAria(column)"
-                >
-                  <header class="flex items-center justify-between gap-2">
-                    <h3 class="text-sm font-semibold">{{ column.label }}</h3>
-                    <span class="rounded-full bg-neutral/10 px-2 py-0.5 text-xs text-neutral">
-                      {{ column.rows.length }}<span class="sr-only"> tarjetas</span>
-                    </span>
-                  </header>
-                  @if (column.rows.length === 0) {
-                    <p class="text-sm text-neutral">Sin tarjetas</p>
-                  } @else {
-                    <ul class="flex flex-col gap-2">
-                      @for (row of column.rows; track $index) {
-                        <li
-                          class="rounded-lg border border-neutral/15 p-2"
-                          [attr.tabindex]="seleccionable() ? '0' : null"
-                          [attr.role]="seleccionable() ? 'button' : null"
-                          [class.cursor-pointer]="seleccionable()"
-                          [class.ring-2]="esSeleccionada(row)"
-                          [attr.data-selectable]="seleccionable() ? 'true' : null"
-                          (click)="seleccionar(row)"
-                          (keydown.enter)="activar($event, row)"
-                          (keydown.space)="activar($event, row)"
-                        >
-                          <p class="text-sm font-medium">{{ cardTitleOf(row) }}</p>
-                          @if (cardSubtitleOf(row); as subtitle) {
-                            <p class="mt-0.5 text-xs text-neutral">{{ subtitle }}</p>
-                          }
-                        </li>
-                      }
-                    </ul>
-                  }
-                </section>
-              }
-            </div>
-          }
-        }
-      </section>
-    } @else {
-      <app-empty-state
-        title="Configuración inválida"
-        message="Esta vista no declara una configuración de kanban válida."
-      />
-    }
-  `,
-})
-export class KanbanView {
-  private readonly route = inject(ActivatedRoute);
-  // The shell mounts views via `loadComponent` (no input bindings), so the
-  // schema is resolved from route data exactly like CalendarView does.
-  private readonly routeData = toSignal(this.route.data, { requireSync: true });
-  private readonly dataSource = inject(DataSourceService);
-  private readonly errorMapper = inject(ErrorMapperService);
-
-  /**
-   * Resource schema for this view. The shell mounts views via
-   * `loadComponent` (no input bindings), so the schema is resolved from
-   * route data: either an explicit `schema` object (fixtures), or a
-   * `resourceId` looked up in the registry (the production route shape).
-   */
-  readonly schema = computed<ResourceSchema | undefined>(() => {
-    const data = this.routeData();
-    const explicit = data['schema'];
-    if (explicit !== undefined) return explicit as ResourceSchema;
-    const resourceId = data['resourceId'];
-    return typeof resourceId === 'string' ? getSchema(resourceId) : undefined;
-  });
-
-  /**
-   * Config resolved from `schema.uiViews[<route uiView>]`; `undefined` when
-   * the route does not name a kanban view with a usable config — the
-   * template then renders the invalid-config empty state and NOTHING is
-   * fetched (the effect below bails out on `undefined`).
-   */
-  readonly config = computed<KanbanViewConfig | undefined>(() => {
-    const schema = this.schema();
-    const viewName = this.routeData()['uiView'];
-    if (schema === undefined || typeof viewName !== 'string') return undefined;
-    const cfg = kanbanConfigOf(schema.uiViews?.[viewName]);
-    if (cfg === undefined) return undefined;
-    // Usable = the two references the board cannot render without: a
-    // non-empty `groupField` and at least one column with a non-empty value.
-    const usable =
-      typeof cfg.groupField === 'string' &&
-      cfg.groupField !== '' &&
-      Array.isArray(cfg.columns) &&
-      cfg.columns.length > 0 &&
-      cfg.columns.every((column) => typeof column?.value === 'string' && column.value !== '');
-    return usable ? cfg : undefined;
-  });
-
-  readonly status = signal<Status>('loading');
-  readonly rows = signal<SourceRow[]>([]);
-  readonly errorMessage = signal('');
-  /** Clave seleccionada localmente cuando el binding declara `mode:'inline'`. */
-  readonly seleccionada = signal<string | null>(null);
-
-  /** Guards against a slow response overwriting a newer load's rows. */
-  private loadEpoch = 0;
-
-  constructor() {
-    effect(() => {
-      const cfg = this.config();
-      if (cfg === undefined) return;
-      void this.load(cfg);
-    });
-  }
-
-  /** Rows grouped onto columns + the visible `unknown` bucket (pure model). */
-  readonly mapping = computed<KanbanMapping>(() => {
-    const cfg = this.config();
-    const schema = this.schema();
-    if (cfg === undefined || schema === undefined) return { columns: [], unknown: [] };
-    return mapKanbanRows(this.rows(), cfg);
-  });
-
-  /**
-   * Columns to paint: the model's buckets plus the `unknown` bucket at the
-   * END — but only when it actually has rows, otherwise the board would show
-   * an empty column nobody declared.
-   */
-  readonly columns = computed<readonly KanbanColumnBucket[]>(() => {
-    const { columns, unknown } = this.mapping();
-    if (unknown.length === 0) return columns;
-    return [...columns, { value: UNKNOWN_VALUE, label: UNKNOWN_LABEL, rows: unknown }];
-  });
-
-  retry(): void {
-    const cfg = this.config();
-    if (cfg !== undefined) void this.load(cfg);
-  }
-
-  /** Clave estable de la fila (mismo campo que el resto del motor). */
-  private keyOf(row: SourceRow): string {
-    const schema = this.schema();
-    const key = schema ? row[schema.keyField] : undefined;
-    return key === undefined || key === null ? '' : String(key);
-  }
-
-  /** Binding `select` declarado por la vista (R9.9.4 · decision table). */
-  private binding(): SelectionBinding | undefined {
-    return this.routeData()['select'] as SelectionBinding | undefined;
-  }
-
-  /**
-   * Clic de tarjeta. Sin declaración ⇒ inerte (el tablero no navegaba);
-   * con declaración ⇒ sólo el contrato declarado corre: `route` emite al
-   * dispatcher, `inline` selecciona en local, `none` es no-op explícito.
-   */
-  /**
-   * R9.8.7 — la misma selección que el clic, operable con teclado (Enter y
-   * Space sobre la tarjeta focusable). Sólo tiene sentido con `select`
-   * declarado: sin binding la tarjeta no es focusable y esto nunca corre.
-   */
-  activar(event: Event, row: SourceRow): void {
-    if (!this.seleccionable()) return;
-    event.preventDefault(); // Space no debe desplazar la página
-    this.seleccionar(row);
-  }
-
-  seleccionar(row: SourceRow): void {
-    const binding = this.binding();
-    if (binding === undefined) return;
-    if (binding.mode === 'inline') {
-      this.seleccionada.set(this.keyOf(row));
-      return;
-    }
-    if (binding.mode === 'none') return;
-    const schema = this.schema();
-    const emit = this.routeData()['emit'] as SelectionEmitter | undefined;
-    emit?.({
-      resource: schema?.id ?? String(this.routeData()['resourceId'] ?? ''),
-      key: this.keyOf(row),
-      action: binding.on,
-    });
-  }
-
-  /** El DOM declara clicable sólo si hay contrato que responder. */
-  seleccionable(): boolean {
-    const binding = this.binding();
-    return binding !== undefined && binding.mode !== 'none';
-  }
-
-  esSeleccionada(row: SourceRow): boolean {
-    return this.seleccionable() && this.seleccionada() === this.keyOf(row);
-  }
-
-  /** «Por hacer: 2 tarjetas» — the count is text, never colour alone. */
-  columnAria(column: KanbanColumnBucket): string {
-    const count = column.rows.length;
-    return `${column.label}: ${count} ${count === 1 ? 'tarjeta' : 'tarjetas'}`;
-  }
-
-  cardTitleOf(row: SourceRow): string {
-    const cfg = this.config();
-    const schema = this.schema();
-    if (cfg === undefined || schema === undefined) return '';
-    return cardTitle(row, cfg, schema);
-  }
-
-  cardSubtitleOf(row: SourceRow): string {
-    const cfg = this.config();
-    const schema = this.schema();
-    if (cfg === undefined || schema === undefined) return '';
-    return cardSubtitle(row, cfg, schema);
-  }
-
-  private async load(cfg: KanbanViewConfig): Promise<void> {
-    const schema = this.schema();
-    if (schema === undefined) return;
-    const epoch = ++this.loadEpoch;
-    this.status.set('loading');
-    const source = cfg.source ?? { resource: schema.id };
-    try {
-      const rows = await this.dataSource.rows(source, undefined);
-      if (epoch !== this.loadEpoch) return;
-      this.rows.set(rows);
-      this.errorMessage.set('');
-      this.status.set('ready');
-    } catch (error) {
-      if (epoch !== this.loadEpoch) return;
-      this.errorMessage.set(this.errorMapper.map(error).general ?? 'No se pudo cargar el tablero.');
-      this.status.set('error');
-    }
-  }
-}

package/src/lib/widgets/bar-chart/bar-chart.descriptor.ts

@@ -1,17 +0,0 @@
-import type { BarChartWidget } from '../../core/models/schema.model';
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-import { toSeries } from '../series';
-
-/** Descriptor del widget `bar-chart` (R3.6). */
-export const descriptor: RenderDescriptor = {
-  kind: 'widget',
-  type: 'bar-chart',
-  since: '1.0',
-  load: () => import('./bar-chart').then((module) => module.BarChart),
-  surfaces: ['display'],
-  inputs: (config, extras) => {
-    const cfg = config as BarChartWidget;
-    return { label: cfg.label, data: toSeries(extras.data), unit: cfg.unit ?? '' };
-  },
-};

package/src/lib/widgets/bar-chart/bar-chart.spec.ts

@@ -1,66 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BarChart, type BarDatum } from './bar-chart';
-
-const DATA: BarDatum[] = [
-  { label: 'Lun', value: 3 },
-  { label: 'Mar', value: 5 },
-  { label: 'Mié', value: 1 },
-];
-
-describe('BarChart', () => {
-  let fixture: ComponentFixture<BarChart>;
-
-  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
-  const bars = (): HTMLElement[] => [...root().querySelectorAll<HTMLElement>('[role="img"] > div')];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({ imports: [BarChart] }).compileComponents();
-    fixture = TestBed.createComponent(BarChart);
-    fixture.componentRef.setInput('label', 'Entregas');
-  });
-
-  it('renderiza N barras con el resumen en aria-label', () => {
-    fixture.componentRef.setInput('data', DATA);
-    fixture.detectChanges();
-
-    expect(bars().length).toBe(3);
-    expect(root().textContent).toContain('Entregas');
-    expect(root().textContent).toContain('Lun');
-
-    const chart = root().querySelector('[role="img"]');
-    expect(chart?.getAttribute('aria-label')).toContain('3 categorías');
-    expect(chart?.getAttribute('aria-label')).toContain('Mayor: Mar con 5');
-  });
-
-  it('data vacía ⇒ «Sin datos» y sin grilla accesible', () => {
-    fixture.componentRef.setInput('data', []);
-    fixture.detectChanges();
-
-    expect(root().querySelector('[data-testid="empty"]')?.textContent).toContain('Sin datos');
-    expect(root().querySelector('[role="img"]')).toBeNull();
-    expect(bars().length).toBe(0);
-  });
-
-  it('el unit se añade a las cifras del resumen', () => {
-    fixture.componentRef.setInput('data', DATA);
-    fixture.componentRef.setInput('unit', ' u.');
-    fixture.detectChanges();
-
-    expect(root().querySelector('[role="img"]')?.getAttribute('aria-label')).toContain('con 5 u.');
-  });
-
-  it('con todos los valores en 0 no divide entre cero', () => {
-    fixture.componentRef.setInput('data', [
-      { label: 'A', value: 0 },
-      { label: 'B', value: 0 },
-    ]);
-    fixture.detectChanges();
-
-    expect(bars().length).toBe(2);
-    const heights = bars().map(
-      (bar) => bar.querySelector<HTMLElement>('div[style*="height"]')?.style.height,
-    );
-    expect(heights).toEqual(['0%', '0%']);
-  });
-});

package/src/lib/widgets/bar-chart/bar-chart.ts

@@ -1,76 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-export interface BarDatum {
-  label: string;
-  value: number;
-}
-
-/**
- * Barras por categoría, sin librería: se dibujan con CSS y un `@for` de
- * Angular (~1 K gz frente a los 61,4 K de Chart.js — viabilidad B2.1).
- *
- * Accesibilidad (plan 3.2): la grilla es `role="img"` con un `aria-label`
- * que resume los datos, de modo que un lector de pantalla no recorra cada
- * barra suelta sino que escuche «8 categorías. Mayor: …».
- */
-@Component({
-  selector: 'app-bar-chart',
-  template: `
-    <div class="rounded-lg border border-neutral/20 bg-surface p-4">
-      <p class="mb-3 text-sm text-neutral">{{ label() }}</p>
-
-      @if (data().length === 0) {
-        <p class="text-sm text-neutral/60" data-testid="empty">Sin datos.</p>
-      } @else {
-        <div role="img" [attr.aria-label]="summary()" class="flex h-32 items-end gap-2">
-          @for (row of data(); track row.label) {
-            <div class="flex min-w-0 flex-1 flex-col items-center justify-end gap-1">
-              <span class="text-xs tabular-nums text-neutral"> {{ row.value }}{{ unit() }} </span>
-              <div class="w-full rounded-t bg-primary" [style.height.%]="height(row.value)"></div>
-              <span class="w-full truncate text-center text-xs text-neutral">{{ row.label }}</span>
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `,
-})
-export class BarChart {
-  /** Título del gráfico. */
-  readonly label = input.required<string>();
-  /** Series a dibujar; vacío ⇒ estado «Sin datos». */
-  readonly data = input<BarDatum[]>([]);
-  /** Sufijo de las cifras del eje («unidades», «S/»). */
-  readonly unit = input('');
-
-  private readonly max = computed(() => Math.max(0, ...this.data().map((row) => row.value)));
-
-  /**
-   * Altura relativa de una barra. `max = 0` ⇒ 0 % (nada de división por
-   * cero); un valor de 0 se queda en 0, y los demás bajan a un 2 % mínimo
-   * para que la barra siga siendo visible.
-   */
-  protected height(value: number): number {
-    if (value === 0) {
-      return 0;
-    }
-    const max = this.max();
-    if (max === 0) {
-      return 0;
-    }
-    return Math.max(2, (value / max) * 100);
-  }
-
-  protected readonly summary = computed(() => {
-    const rows = this.data();
-    if (rows.length === 0) {
-      return 'Sin datos.';
-    }
-    const top = rows.reduce((best, row) => (row.value > best.value ? row : best), rows[0]);
-    const unit = this.unit();
-    return (
-      `${rows.length} categorías. Mayor: ${top.label} con ${top.value}${unit}. ` +
-      `Menor: ${rows.reduce((low, row) => (row.value < low.value ? row : low), rows[0]).label}.`
-    );
-  });
-}

package/src/lib/widgets/chart-line/chart-line.descriptor.ts

@@ -1,17 +0,0 @@
-import type { ChartLineWidget } from '../../core/models/schema.model';
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-import { toSeries } from '../series';
-
-/** Descriptor del widget `chart-line` (R3.6). */
-export const descriptor: RenderDescriptor = {
-  kind: 'widget',
-  type: 'chart-line',
-  since: '1.0',
-  load: () => import('./chart-line').then((module) => module.ChartLine),
-  surfaces: ['display'],
-  inputs: (config, extras) => {
-    const cfg = config as ChartLineWidget;
-    return { label: cfg.label, data: toSeries(extras.data), unit: cfg.unit ?? '' };
-  },
-};

package/src/lib/widgets/chart-line/chart-line.spec.ts

@@ -1,113 +0,0 @@
-import {
-  DeferBlockBehavior,
-  DeferBlockState,
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
-
-import { ChartLine } from './chart-line';
-
-/**
- * jsdom no implementa el lienzo 2D: `getContext('2d')` devuelve `null` y
- * Chart.js revienta al primer trazo. Se stubbea por `beforeAll` para poder
- * montar el componente de verdad y se restaura en `afterAll`.
- */
-const canvasStub = { width: 300, height: 150 } as HTMLCanvasElement;
-
-const ctxStub = new Proxy({} as unknown as CanvasRenderingContext2D, {
-  get(_target, prop) {
-    if (prop === 'canvas') {
-      return canvasStub;
-    }
-    if (prop === 'measureText') {
-      return () => ({ width: 10 });
-    }
-    if (prop === 'createLinearGradient') {
-      return () => ({ addColorStop: () => undefined });
-    }
-    return () => undefined;
-  },
-  set() {
-    return true;
-  },
-});
-
-describe('ChartLine', () => {
-  let fixture: ComponentFixture<ChartLine>;
-
-  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
-  const originalGetContext = HTMLCanvasElement.prototype.getContext;
-
-  /**
-   * `on viewport` necesita `IntersectionObserver`, que jsdom no implementa:
-   * con `Manual` el bloque no evalúa su condición y lo pintamos a mano.
-   */
-  const pintarDefer = async (estado: DeferBlockState): Promise<void> => {
-    const blocks = await fixture.getDeferBlocks();
-    await blocks[0].render(estado);
-    fixture.detectChanges();
-  };
-
-  beforeAll(() => {
-    HTMLCanvasElement.prototype.getContext = (() =>
-      ctxStub) as unknown as typeof originalGetContext;
-  });
-
-  afterAll(() => {
-    HTMLCanvasElement.prototype.getContext = originalGetContext;
-  });
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ChartLine],
-      deferBlockBehavior: DeferBlockBehavior.Manual,
-    }).compileComponents();
-    fixture = TestBed.createComponent(ChartLine);
-  });
-
-  it('sin datos muestra el estado vacío y no toca el lienzo', async () => {
-    fixture.componentRef.setInput('label', 'Entregas por día');
-    fixture.componentRef.setInput('data', []);
-    fixture.detectChanges();
-
-    expect(root().querySelector('[data-testid="empty"]')?.textContent?.trim()).toBe('Sin datos.');
-    expect(root().querySelector('canvas')).toBeNull();
-    // Sin datos no hay bloque que diferir: sólo existe el estado vacío.
-    expect(await fixture.getDeferBlocks()).toHaveLength(0);
-  });
-
-  it('en placeholder dibuja la miniatura SVG y no monta el lienzo', async () => {
-    fixture.componentRef.setInput('label', 'Entregas por día');
-    fixture.componentRef.setInput('data', [
-      { label: 'Lun', value: 2 },
-      { label: 'Mar', value: 5 },
-    ]);
-    fixture.detectChanges();
-
-    await pintarDefer(DeferBlockState.Placeholder);
-
-    expect(root().querySelector('canvas')).toBeNull();
-    expect(root().querySelector('[role="img"]')).toBeNull();
-    expect(root().querySelector('polyline')?.getAttribute('points')?.split(' ')).toHaveLength(2);
-    expect(root().textContent).toContain('Entregas por día');
-  });
-
-  it('completado el defer dibuja el lienzo y resume la serie en el aria-label', async () => {
-    fixture.componentRef.setInput('label', 'Entregas por día');
-    fixture.componentRef.setInput('unit', ' u.');
-    fixture.componentRef.setInput('data', [
-      { label: 'Lun', value: 2 },
-      { label: 'Mar', value: 5 },
-    ]);
-    fixture.detectChanges();
-
-    await pintarDefer(DeferBlockState.Complete);
-
-    const chart = root().querySelector('[role="img"]');
-    expect(root().querySelector('canvas')).not.toBeNull();
-    expect(chart?.getAttribute('aria-label')).toBe(
-      'Serie de 2 puntos, de Lun (2 u.) a Mar (5 u.): sube.',
-    );
-    expect(root().textContent).toContain('Entregas por día');
-  });
-});