@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/containers/data-grid/data-grid.samples.d.ts

@@ -0,0 +1,81 @@
+import { type Producto, type Venta } from "./data-grid.fixtures.js";
+import type { DataSource } from "./data-source.js";
+import type { DataGridColumn } from "./types.js";
+export interface ServicioCatalogo {
+    id: string;
+    nombre: string;
+    categoria: string;
+    duracion: number;
+    precio: number;
+    activo: boolean;
+    creado: Date;
+    estado: "Disponible" | "Pausado" | "Descontinuado";
+    popularidad: number;
+}
+export declare const catalogo: ServicioCatalogo[];
+export declare const catalogoColumns: DataGridColumn<ServicioCatalogo>[];
+export declare const inventarioConErrores: Producto[];
+export declare const productoValidatedColumns: DataGridColumn<Producto>[];
+export declare const ventas240: Venta[];
+export declare const ventaGroupedColumns: DataGridColumn<Venta>[];
+/** Sales columns with the set filter on the text-like ones. */
+export declare const ventaSetColumns: DataGridColumn<Venta>[];
+export interface Turno {
+    id: string;
+    cliente: string;
+    servicio: string;
+    barbero: string;
+    minutos: number;
+}
+export declare const turnos: Turno[];
+export declare const turnoColumns: DataGridColumn<Turno>[];
+export interface NodoVentas {
+    id: string;
+    parentId: string | null;
+    nombre: string;
+    tipo: "Sede" | "Barbero" | "Servicio";
+    citas: number | null;
+    ventas: number | null;
+}
+export declare const arbolVentas: NodoVentas[];
+export declare const arbolColumns: DataGridColumn<NodoVentas>[];
+export interface ClienteResumen {
+    id: string;
+    cliente: string;
+    telefono: string;
+    nivel: "Nuevo" | "Frecuente" | "VIP";
+    visitas: number;
+    gastado: number;
+    ultima: Date;
+}
+export interface Visita {
+    id: string;
+    fecha: Date;
+    servicio: string;
+    barbero: string;
+    total: number;
+}
+export declare const visitasPorCliente: Map<string, Visita[]>;
+export declare const clientesResumen: ClienteResumen[];
+export declare const clienteColumns: DataGridColumn<ClienteResumen>[];
+export declare const visitaColumns: DataGridColumn<Visita>[];
+export interface ServerLogEntry {
+    id: number;
+    startRow: number;
+    endRow: number;
+    sort: string;
+    filters: string;
+    search: string;
+}
+/**
+ * A data source that answers from `rows` after a delay, applying the request's sort, filters and
+ * search with the same pure model the grid uses locally. `fail()` returns true while errors are
+ * being simulated.
+ */
+export declare function createFakeServer<T>(rows: readonly T[], columns: readonly DataGridColumn<T>[], options?: {
+    latency?: number;
+    blockSize?: number;
+    onRequest?: (entry: ServerLogEntry) => void;
+    fail?: () => boolean;
+}): DataSource<T>;
+export declare const citas5k: import("./data-grid.fixtures.js").Cita[];

package/dist/containers/data-grid/data-grid.samples.js

@@ -0,0 +1,345 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  BARBEROS,
+  CLIENTES,
+  citas10k,
+  inventario,
+  makeVentas,
+  productoColumns,
+  SEDES,
+  SERVICIOS,
+  seeded,
+  ventaColumns
+} from "./data-grid.fixtures.js";
+import { filterRows, sortRows } from "./model.js";
+const catalogo = SERVICIOS.map((servicio, index) => {
+  const random = seeded(500 + index);
+  return {
+    id: `S-${String(index + 1).padStart(2, "0")}`,
+    nombre: servicio.name,
+    categoria: index % 3 === 0 ? "Cabello" : index % 3 === 1 ? "Barba" : "Combo",
+    duracion: servicio.minutes,
+    precio: servicio.price,
+    activo: index !== 4,
+    creado: new Date(2025, index, 4 + index),
+    estado: index === 4 ? "Pausado" : index === 6 ? "Descontinuado" : "Disponible",
+    popularidad: Math.round(35 + random() * 65)
+  };
+});
+const catalogoColumns = [
+  { id: "id", header: "C\xF3digo", accessor: "id", type: "text", width: 96 },
+  { id: "nombre", header: "Servicio", accessor: "nombre", type: "text", width: 200 },
+  {
+    id: "duracion",
+    header: "Duraci\xF3n",
+    accessor: "duracion",
+    type: "number",
+    width: 112,
+    format: (v) => typeof v === "number" ? `${v} min` : ""
+  },
+  {
+    id: "precio",
+    header: "Precio",
+    accessor: "precio",
+    type: "currency",
+    width: 112,
+    aggregate: "avg"
+  },
+  { id: "creado", header: "Creado", accessor: "creado", type: "date", width: 130 },
+  { id: "activo", header: "Activo", accessor: "activo", type: "boolean", width: 104 },
+  {
+    id: "estado",
+    header: "Estado",
+    accessor: "estado",
+    type: "status",
+    width: 148,
+    statusTones: { Disponible: "success", Pausado: "warning", Descontinuado: "neutral" }
+  },
+  {
+    id: "popularidad",
+    header: "Popularidad",
+    accessor: "popularidad",
+    type: "number",
+    width: 168,
+    align: "start",
+    cell: ({ value }) => {
+      const percent = typeof value === "number" ? value : 0;
+      return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-1.5 flex-1 overflow-hidden rounded-pill bg-surface-2", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block h-full rounded-pill bg-accent",
+            style: { width: `${percent}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("span", { className: "w-8 text-right text-[12px] text-ink-2 tabular-nums", children: [
+          percent,
+          "%"
+        ] })
+      ] });
+    }
+  }
+];
+const inventarioConErrores = inventario.map(
+  (producto, index) => index === 2 ? { ...producto, stock: -3 } : index === 5 ? { ...producto, precio: producto.costo - 2 } : producto
+);
+const productoValidatedColumns = productoColumns.map(
+  (column) => {
+    switch (column.id) {
+      case "producto":
+        return {
+          ...column,
+          validate: (value) => {
+            const text = String(value ?? "").trim();
+            if (text === "") return "El nombre es obligatorio.";
+            return text.length > 32 ? "M\xE1ximo 32 caracteres." : null;
+          }
+        };
+      case "stock":
+        return {
+          ...column,
+          validate: (value) => {
+            if (typeof value !== "number") return "Ingresa un n\xFAmero.";
+            if (!Number.isInteger(value)) return "El stock debe ser un n\xFAmero entero.";
+            if (value < 0) return "El stock no puede ser negativo.";
+            return value > 500 ? "El almac\xE9n admite hasta 500 unidades." : null;
+          }
+        };
+      case "costo":
+        return {
+          ...column,
+          validate: (value) => typeof value === "number" && value <= 0 ? "El costo debe ser mayor que S/ 0." : null
+        };
+      case "precio":
+        return {
+          ...column,
+          validate: (value, row) => typeof value === "number" && value < row.costo ? `El precio no puede ser menor al costo (S/ ${row.costo}).` : null
+        };
+      default:
+        return column;
+    }
+  }
+);
+const ventas240 = makeVentas(240);
+const groupOf = {
+  fecha: "Atenci\xF3n",
+  cliente: "Atenci\xF3n",
+  barbero: "Atenci\xF3n",
+  servicio: ["Cobro", "Servicio"],
+  metodo: ["Cobro", "Pago"],
+  total: ["Cobro", "Pago"],
+  propina: ["Cobro", "Pago"]
+};
+const ventaGroupedColumns = ventaColumns.map((column) => ({
+  ...column,
+  group: groupOf[column.id]
+}));
+const ventaSetColumns = ventaColumns.map(
+  (column) => ["cliente", "barbero", "servicio", "metodo"].includes(column.id) ? { ...column, filter: "set" } : column
+);
+const turnos = CLIENTES.slice(0, 9).map((cliente, index) => {
+  const servicio = SERVICIOS[index % SERVICIOS.length] ?? SERVICIOS[0];
+  return {
+    id: `T-${index + 1}`,
+    cliente,
+    servicio: servicio?.name ?? "",
+    barbero: BARBEROS[index % BARBEROS.length] ?? "",
+    minutos: servicio?.minutes ?? 30
+  };
+});
+const turnoColumns = [
+  { id: "cliente", header: "Cliente", accessor: "cliente", width: 200, sortable: false },
+  { id: "servicio", header: "Servicio", accessor: "servicio", width: 180, sortable: false },
+  { id: "barbero", header: "Barbero", accessor: "barbero", width: 120, sortable: false },
+  {
+    id: "minutos",
+    header: "Duraci\xF3n",
+    accessor: "minutos",
+    type: "number",
+    width: 112,
+    sortable: false,
+    format: (v) => typeof v === "number" ? `${v} min` : ""
+  }
+];
+const arbolVentas = (() => {
+  const nodes = [];
+  const random = seeded(77);
+  SEDES.slice(0, 3).forEach((sede, s) => {
+    const sedeId = `sede-${s}`;
+    nodes.push({
+      id: sedeId,
+      parentId: null,
+      nombre: sede,
+      tipo: "Sede",
+      citas: null,
+      ventas: null
+    });
+    BARBEROS.slice(s, s + 3).forEach((barbero, b) => {
+      const barberoId = `${sedeId}-b${b}`;
+      nodes.push({
+        id: barberoId,
+        parentId: sedeId,
+        nombre: barbero,
+        tipo: "Barbero",
+        citas: null,
+        ventas: null
+      });
+      SERVICIOS.slice(b, b + 3).forEach((servicio, v) => {
+        const citas = 8 + Math.floor(random() * 30);
+        nodes.push({
+          id: `${barberoId}-s${v}`,
+          parentId: barberoId,
+          nombre: servicio.name,
+          tipo: "Servicio",
+          citas,
+          ventas: citas * servicio.price
+        });
+      });
+    });
+  });
+  return nodes;
+})();
+const arbolColumns = [
+  {
+    id: "nombre",
+    header: "Sede / barbero / servicio",
+    accessor: "nombre",
+    width: 280,
+    filter: "text"
+  },
+  { id: "tipo", header: "Nivel", accessor: "tipo", width: 120, filter: "select" },
+  { id: "citas", header: "Citas", accessor: "citas", type: "number", width: 110, aggregate: "sum" },
+  {
+    id: "ventas",
+    header: "Ventas",
+    accessor: "ventas",
+    type: "currency",
+    width: 140,
+    aggregate: "sum"
+  }
+];
+const visitasPorCliente = /* @__PURE__ */ new Map();
+const clientesResumen = CLIENTES.slice(0, 12).map((cliente, index) => {
+  const random = seeded(900 + index);
+  const count = 2 + Math.floor(random() * 6);
+  const visitas = Array.from({ length: count }, (_, visit) => {
+    const servicio = SERVICIOS[Math.floor(random() * SERVICIOS.length)] ?? SERVICIOS[0];
+    return {
+      id: `C${index}-${visit}`,
+      fecha: new Date(2026, 9 - Math.floor(visit / 2), 28 - visit * 3),
+      servicio: servicio?.name ?? "",
+      barbero: BARBEROS[Math.floor(random() * BARBEROS.length)] ?? "",
+      total: servicio?.price ?? 0
+    };
+  });
+  const id = `CL-${String(index + 1).padStart(3, "0")}`;
+  visitasPorCliente.set(id, visitas);
+  return {
+    id,
+    cliente,
+    telefono: `9${String(Math.floor(random() * 1e8)).padStart(8, "0")}`,
+    nivel: count > 5 ? "VIP" : count > 3 ? "Frecuente" : "Nuevo",
+    visitas: count,
+    gastado: visitas.reduce((sum, visita) => sum + visita.total, 0),
+    ultima: visitas[0]?.fecha ?? new Date(2026, 9, 1)
+  };
+});
+const clienteColumns = [
+  { id: "cliente", header: "Cliente", accessor: "cliente", width: 200 },
+  { id: "telefono", header: "Tel\xE9fono", accessor: "telefono", width: 128 },
+  {
+    id: "nivel",
+    header: "Nivel",
+    accessor: "nivel",
+    type: "status",
+    width: 128,
+    statusTones: { Nuevo: "neutral", Frecuente: "accent", VIP: "success" }
+  },
+  {
+    id: "visitas",
+    header: "Visitas",
+    accessor: "visitas",
+    type: "number",
+    width: 100,
+    aggregate: "sum"
+  },
+  {
+    id: "gastado",
+    header: "Gastado",
+    accessor: "gastado",
+    type: "currency",
+    width: 124,
+    aggregate: "sum"
+  },
+  { id: "ultima", header: "\xDAltima visita", accessor: "ultima", type: "date", width: 140 }
+];
+const visitaColumns = [
+  { id: "fecha", header: "Fecha", accessor: "fecha", type: "date", width: 130 },
+  { id: "servicio", header: "Servicio", accessor: "servicio", width: 190 },
+  { id: "barbero", header: "Barbero", accessor: "barbero", width: 120 },
+  {
+    id: "total",
+    header: "Total",
+    accessor: "total",
+    type: "currency",
+    width: 110,
+    aggregate: "sum"
+  }
+];
+function createFakeServer(rows, columns, options = {}) {
+  const { latency = 500, blockSize, onRequest, fail } = options;
+  let counter = 0;
+  return {
+    blockSize,
+    getRows(request, { signal }) {
+      counter += 1;
+      const id = counter;
+      return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+          onRequest?.({
+            id,
+            startRow: request.startRow,
+            endRow: request.endRow,
+            sort: request.sort.map((rule) => `${rule.id} ${rule.direction}`).join(", ") || "\u2014",
+            filters: Object.keys(request.filters).join(", ") || "\u2014",
+            search: request.search || "\u2014"
+          });
+          if (fail?.()) {
+            reject(new Error("offline"));
+            return;
+          }
+          const sorted = sortRows(
+            filterRows(rows, columns, request.filters, request.search),
+            columns,
+            request.sort
+          );
+          resolve({ rows: sorted.slice(request.startRow, request.endRow), total: sorted.length });
+        }, latency);
+        signal.addEventListener("abort", () => {
+          clearTimeout(timer);
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+      });
+    }
+  };
+}
+const citas5k = citas10k.slice(0, 5e3);
+export {
+  arbolColumns,
+  arbolVentas,
+  catalogo,
+  catalogoColumns,
+  citas5k,
+  clienteColumns,
+  clientesResumen,
+  createFakeServer,
+  inventarioConErrores,
+  productoValidatedColumns,
+  turnoColumns,
+  turnos,
+  ventaGroupedColumns,
+  ventaSetColumns,
+  ventas240,
+  visitaColumns,
+  visitasPorCliente
+};

package/dist/containers/data-grid/data-source.d.ts

@@ -0,0 +1,56 @@
+import type { Filters, SortRule } from "./types.js";
+export interface DataSourceRequest {
+    /** First row index, inclusive. */
+    startRow: number;
+    /** One past the last row index. */
+    endRow: number;
+    sort: SortRule[];
+    filters: Filters;
+    /** Quick search text. */
+    search: string;
+}
+export interface DataSourceResult<T> {
+    rows: readonly T[];
+    /** Row count of the whole (sorted, filtered) result set. */
+    total: number;
+}
+export interface DataSource<T> {
+    /** Resolves the rows of `[startRow, endRow)`; sort, filters and search are applied by the server. */
+    getRows(request: DataSourceRequest, options: {
+        signal: AbortSignal;
+    }): Promise<DataSourceResult<T>>;
+    /** Rows per request in infinite mode (`pageSize` is used in paginated mode). 50 by default. */
+    blockSize?: number;
+}
+export type BlockStatus = "idle" | "loading" | "loaded" | "error";
+/**
+ * Fixed-size blocks of rows fetched on demand. Loaded blocks beyond `maxBlocks` are evicted least
+ * recently used first, never the ones in the range being shown.
+ */
+export declare class BlockCache<T> {
+    readonly blockSize: number;
+    readonly maxBlocks: number;
+    total: number | null;
+    private readonly blocks;
+    constructor(blockSize: number, maxBlocks?: number);
+    blockOf(index: number): number;
+    /** Block numbers that cover `[start, end)`, clamped to the known total. */
+    blocksFor(start: number, end: number): number[];
+    status(block: number): BlockStatus;
+    getRow(index: number): T | undefined;
+    /** Blocks of the range that nobody has asked for yet (errors are only retried explicitly). */
+    missing(start: number, end: number): number[];
+    markLoading(block: number): void;
+    markError(block: number): void;
+    /** Clears error blocks of the range so `missing` offers them again. */
+    retry(start: number, end: number): void;
+    hasError(start: number, end: number): boolean;
+    isLoading(start: number, end: number): boolean;
+    /** Stores a response, learns the total and evicts old blocks outside `keep`. */
+    setBlock(block: number, rows: readonly T[], total: number, keep?: readonly number[]): void;
+    /** Marks blocks as recently used. */
+    touch(blocks: readonly number[]): void;
+    loadedBlocks(): number[];
+    clear(): void;
+    private evict;
+}

package/dist/containers/data-grid/data-source.js

@@ -0,0 +1,90 @@
+class BlockCache {
+  blockSize;
+  maxBlocks;
+  total = null;
+  blocks = /* @__PURE__ */ new Map();
+  constructor(blockSize, maxBlocks = 20) {
+    this.blockSize = Math.max(1, Math.floor(blockSize));
+    this.maxBlocks = Math.max(1, Math.floor(maxBlocks));
+  }
+  blockOf(index) {
+    return Math.floor(index / this.blockSize);
+  }
+  /** Block numbers that cover `[start, end)`, clamped to the known total. */
+  blocksFor(start, end) {
+    const last = this.total === null ? end : Math.min(end, this.total);
+    if (last <= start) return [];
+    const out = [];
+    for (let block = this.blockOf(start); block <= this.blockOf(last - 1); block += 1) {
+      out.push(block);
+    }
+    return out;
+  }
+  status(block) {
+    return this.blocks.get(block)?.status ?? "idle";
+  }
+  getRow(index) {
+    const block = this.blocks.get(this.blockOf(index));
+    if (block?.status !== "loaded") return void 0;
+    return block.rows[index - this.blockOf(index) * this.blockSize];
+  }
+  /** Blocks of the range that nobody has asked for yet (errors are only retried explicitly). */
+  missing(start, end) {
+    return this.blocksFor(start, end).filter((block) => this.status(block) === "idle");
+  }
+  markLoading(block) {
+    this.blocks.set(block, { status: "loading", rows: [] });
+  }
+  markError(block) {
+    this.blocks.set(block, { status: "error", rows: [] });
+  }
+  /** Clears error blocks of the range so `missing` offers them again. */
+  retry(start, end) {
+    for (const block of this.blocksFor(start, end)) {
+      if (this.status(block) === "error") this.blocks.delete(block);
+    }
+  }
+  hasError(start, end) {
+    return this.blocksFor(start, end).some((block) => this.status(block) === "error");
+  }
+  isLoading(start, end) {
+    return this.blocksFor(start, end).some((block) => this.status(block) === "loading");
+  }
+  /** Stores a response, learns the total and evicts old blocks outside `keep`. */
+  setBlock(block, rows, total, keep = []) {
+    this.total = total;
+    this.blocks.delete(block);
+    this.blocks.set(block, { status: "loaded", rows });
+    this.evict(/* @__PURE__ */ new Set([...keep, block]));
+  }
+  /** Marks blocks as recently used. */
+  touch(blocks) {
+    for (const block of blocks) {
+      const entry = this.blocks.get(block);
+      if (entry?.status === "loaded") {
+        this.blocks.delete(block);
+        this.blocks.set(block, entry);
+      }
+    }
+  }
+  loadedBlocks() {
+    return [...this.blocks.entries()].filter(([, b]) => b.status === "loaded").map(([n]) => n);
+  }
+  clear() {
+    this.blocks.clear();
+    this.total = null;
+  }
+  evict(keep) {
+    const loaded = this.loadedBlocks();
+    let excess = loaded.length - this.maxBlocks;
+    for (const block of loaded) {
+      if (excess <= 0) break;
+      if (keep.has(block)) continue;
+      this.blocks.delete(block);
+      excess -= 1;
+    }
+  }
+}
+export {
+  BlockCache
+};

package/dist/containers/data-grid/fill-series.d.ts

@@ -0,0 +1,97 @@
+import type { CellValue } from "./types.js";
+export interface FillBounds {
+    r0: number;
+    r1: number;
+    c0: number;
+    c1: number;
+}
+export type HandleDirection = "down" | "right" | "up" | "left";
+export interface HandleExtent {
+    direction: HandleDirection;
+    /** The range once the fill is applied. */
+    bounds: FillBounds;
+}
+/** Whether a direction counts backwards (up and left continue the series in reverse). */
+export declare const isBackward: (direction: HandleDirection) => direction is "left" | "up";
+/**
+ * Range a drag of the handle to cell `to` extends to, or null when the pointer is still inside the
+ * range. The axis with the larger overshoot (in cells) wins, so a drag stays a straight fill; the
+ * pointer above or left of the range fills up or left. `minR` / `minC` default to 0.
+ */
+export declare function handleExtent(base: FillBounds, to: {
+    r: number;
+    c: number;
+}, limits: {
+    maxR: number;
+    maxC: number;
+    minR?: number;
+    minC?: number;
+}): HandleExtent | null;
+/**
+ * Scroll step (pixels per frame) for a pointer at `pos` along an axis whose viewport spans
+ * `lo..hi`: zero in the middle, ramping up inside `zone` pixels of an edge and capped at `max`
+ * (also beyond the edge). Negative scrolls towards the start.
+ */
+export declare function edgeScrollStep(pos: number, lo: number, hi: number, zone?: number, max?: number): number;
+export interface FillLane {
+    /** Cells of the original range this lane reads, in order (a column going down, a row going right). */
+    source: Array<{
+        r: number;
+        c: number;
+    }>;
+    /** Cells it writes, nearest first. */
+    targets: Array<{
+        r: number;
+        c: number;
+    }>;
+}
+/**
+ * One lane per column (fill down or up) or row (fill right or left) of the original range. The
+ * source keeps reading order; targets run away from the range, nearest first.
+ */
+export declare function fillLanes(base: FillBounds, extent: HandleExtent): FillLane[];
+/** A filled value: either computed (series) or a copy of the source cell at `from` (index in the lane). */
+export type FillResult = {
+    value: CellValue;
+} | {
+    from: number;
+};
+/** The date `months` months after `date`, keeping the day of the month (clamped to the month's end). */
+export declare function addMonths(date: Date, months: number, endOfMonth?: boolean): Date;
+export declare function addDays(date: Date, days: number): Date;
+/**
+ * How a run of dates picks its step: "auto" reads months when they share the day of the month and
+ * days otherwise; "day" always counts days; "month" always counts whole months.
+ */
+export type DateStepMode = "auto" | "day" | "month";
+export type DateStep = {
+    unit: "days";
+    amount: number;
+}
+/** `endOfMonth`: the dates are month ends (31 Jan, 28 Feb), so results stay month ends. */
+ | {
+    unit: "months";
+    amount: number;
+    endOfMonth: boolean;
+};
+/**
+ * Step of a run of dates: a whole number of months when they share the day of the month (monthly
+ * and yearly series, e.g. the 1st of every month), otherwise a constant number of days (daily,
+ * weekly). Null when the dates do not follow one step.
+ */
+export declare function dateStep(dates: readonly Date[], mode?: DateStepMode): DateStep | null;
+/** Plain copy: the lane repeats from its first cell. */
+export declare const copyFill: (count: number, length: number, backward?: boolean) => FillResult[];
+export interface SeriesOptions {
+    /** Continue before the first cell (fill up or left): the run is read from its last cell backwards. */
+    backward?: boolean;
+    dateStep?: DateStepMode;
+    /** Step of a lone text counter; set internally so "Silla 3" going backwards gives "Silla 2". */
+    loneStep?: number;
+}
+/**
+ * The `count` values that continue `source` (a column read top to bottom, or a row left to right).
+ * Series are detected from the whole source; a lone number, date or word is copied, except text
+ * that ends in a number, which counts up. Formulas are always copied (the caller shifts them).
+ */
+export declare function seriesFill(source: readonly CellValue[], count: number, options?: SeriesOptions): FillResult[];