@cosmicdrift/kumiko-renderer-web 0.34.2 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.34.2",
+  "version": "0.36.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.21.0",
-    "@cosmicdrift/kumiko-headless": "0.21.0",
-    "@cosmicdrift/kumiko-renderer": "0.21.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.35.0",
+    "@cosmicdrift/kumiko-headless": "0.35.0",
+    "@cosmicdrift/kumiko-renderer": "0.35.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/render-list-column-renderer.test.tsx

@@ -57,20 +57,20 @@ describe("RenderList — column-renderer registry", () => {
     warnSpy.mockRestore();
   });
 
-  test("function-renderer pfad bleibt unverändert (Bestand)", () => {
-    const screenWithFn: EntityListScreenDefinition = {
+  test("FormatSpec-renderer: currency formatiert Wert + Symbol", () => {
+    const screenWithFmt: EntityListScreenDefinition = {
       ...baseScreen,
-      columns: ["title", { field: "color", renderer: (v) => `[${String(v)}]` }],
+      columns: ["title", { field: "color", renderer: { format: "currency", symbol: "€" } }],
     };
     render(
       <RenderList
-        screen={screenWithFn}
+        screen={screenWithFmt}
         entity={taskEntity}
-        rows={[{ id: "r1", title: "Alpha", color: "#fff" }]}
+        rows={[{ id: "r1", title: "Alpha", color: "42" }]}
         featureName="tasks"
       />,
     );
-    expect(screen.getByTestId("cell-r1-color").textContent).toBe("[#fff]");
+    expect(screen.getByTestId("cell-r1-color").textContent).toBe("42 €");
   });
 
   test("__component-renderer mit Provider → Component wird gemountet, value+row+column kommen an", () => {

package/src/__tests__/render-list.test.tsx

@@ -23,7 +23,7 @@ const listScreen: EntityListScreenDefinition = {
     "title",
     "status",
     "isUrgent",
-    { field: "priority", renderer: (v: unknown) => `P${v}` },
+    { field: "priority", renderer: { format: "priority" as const, prefix: "P" } },
   ],
 };
 

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -3,8 +3,13 @@
 // Reine Funktionen aus primitives/index.tsx (exportiert für Test, wie
 // money-input seine Pure-Logik exportiert). Kein DOM.
 
-import { describe, expect, test } from "bun:test";
-import { computeVisiblePages, defaultCellRender, isComponentRendererRef } from "../index";
+import { describe, expect, spyOn, test } from "bun:test";
+import {
+  applyFormatSpec,
+  computeVisiblePages,
+  defaultCellRender,
+  isComponentRendererRef,
+} from "../index";
 
 describe("computeVisiblePages", () => {
   test("<= 7 Seiten: alle Seiten, keine Ellipsis", () => {
@@ -55,6 +60,56 @@ describe("isComponentRendererRef", () => {
   });
 });
 
+describe("applyFormatSpec", () => {
+  test("null/undefined/leer → leerer String (alle Formate)", () => {
+    expect(applyFormatSpec({ format: "boolean" }, null)).toBe("");
+    expect(applyFormatSpec({ format: "currency", symbol: "€" }, undefined)).toBe("");
+    expect(applyFormatSpec({ format: "priority" }, "")).toBe("");
+  });
+
+  test("boolean: true → ✓, false → leer (defaults)", () => {
+    expect(applyFormatSpec({ format: "boolean" }, true)).toBe("✓");
+    expect(applyFormatSpec({ format: "boolean" }, false)).toBe("");
+  });
+
+  test("boolean: benutzerdefinierte Labels", () => {
+    expect(
+      applyFormatSpec({ format: "boolean", trueLabel: "Public", falseLabel: "Hidden" }, true),
+    ).toBe("Public");
+    expect(
+      applyFormatSpec({ format: "boolean", trueLabel: "Public", falseLabel: "Hidden" }, false),
+    ).toBe("Hidden");
+  });
+
+  test("currency: value + Leerzeichen + symbol", () => {
+    expect(applyFormatSpec({ format: "currency", symbol: "€" }, 42)).toBe("42 €");
+    expect(applyFormatSpec({ format: "currency", symbol: "$" }, "99.90")).toBe("99.90 $");
+  });
+
+  test("currency: kein symbol → reiner Wert", () => {
+    expect(applyFormatSpec({ format: "currency" }, 42)).toBe("42");
+  });
+
+  test("priority: 0 → Standard-Dash, Zahl → prefix+value", () => {
+    expect(applyFormatSpec({ format: "priority", prefix: "P" }, 0)).toBe("—");
+    expect(applyFormatSpec({ format: "priority", prefix: "P" }, 3)).toBe("P3");
+  });
+
+  test("priority: benutzerdefinierter emptyLabel + kein prefix", () => {
+    expect(applyFormatSpec({ format: "priority", emptyLabel: "none" }, 0)).toBe("none");
+    expect(applyFormatSpec({ format: "priority" }, 5)).toBe("5");
+  });
+
+  test("unbekanntes format → String(value) fallback + dev-warning", () => {
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    expect(applyFormatSpec({ format: "custom-app-format" }, 42)).toBe("42");
+    expect(applyFormatSpec({ format: "custom-app-format" }, "hello")).toBe("hello");
+    expect(warn).toHaveBeenCalledTimes(2);
+    expect(warn.mock.calls[0]?.[0]).toContain("custom-app-format");
+    warn.mockRestore();
+  });
+});
+
 describe("defaultCellRender", () => {
   test("null/undefined/leerer String → leerer String", () => {
     expect(defaultCellRender(null, "text")).toBe("");

package/src/primitives/index.tsx

@@ -9,6 +9,7 @@
 // Dropdown etc. kommen später).
 
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
+import { applyFormatSpec } from "@cosmicdrift/kumiko-headless";
 import type {
   DataTableRowAction,
   DataTableSort,
@@ -1056,8 +1057,11 @@ export function isComponentRendererRef(renderer: unknown): { readonly name: stri
   return { name: component };
 }
 
+// applyFormatSpec re-exported from headless (platform-agnostic).
+export { applyFormatSpec };
+
 // Type-spezifische Default-Cell-Renderer. Author kann pro Spalte einen
-// expliziten renderer setzen (Function oder PlatformComponent); ohne
+// expliziten renderer setzen (FormatSpec oder PlatformComponent); ohne
 // expliziten renderer fällt DataTableCell hier durch.
 //
 //   - boolean → ✓ / leer
@@ -1071,7 +1075,7 @@ export function defaultCellRender(
 ): string {
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
-  if (type === "timestamp" || type === "date") return formatDateCell(value, type);
+  if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
   if (type === "select") {
     const raw = String(value);
     // Translated Label aus dem ViewModel-Builder (Convention-Key
@@ -1085,29 +1089,6 @@ export function defaultCellRender(
   return typeof value === "string" ? value : String(value);
 }
 
-function formatDateCell(value: unknown, type: string): string {
-  // Server liefert ISO-String oder Temporal.Instant.toJSON() (gleicher
-  // ISO-shape). Für `type:"date"` zeigen wir nur das Datum, für
-  // `type:"timestamp"` Datum + Uhrzeit. Locale-Default = Browser.
-  try {
-    const raw = typeof value === "string" ? value : String(value);
-    const date = new Date(raw);
-    if (Number.isNaN(date.getTime())) return raw;
-    if (type === "date") {
-      return date.toLocaleDateString();
-    }
-    return date.toLocaleString(undefined, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  } catch {
-    return String(value);
-  }
-}
-
 function humanizeSlug(slug: string): string {
   // "degraded-performance" → "Degraded performance"
   if (slug.length === 0) return slug;
@@ -1135,14 +1116,14 @@ type DataTableCellProps = {
 };
 
 // Cell-Renderer als Component (statt reiner Funktion) damit der
-// useColumnRenderer-Hook aus dem Provider lesen kann. Die drei Pfade
-// sind:
-//   1. Funktion → ruft fn(value) auf, returnt String. Bestand-Pfad,
-//      bleibt unverändert für alle bestehenden Schemas.
-//   2. PlatformComponent (`{ react: { __component: "X" } }`) → schaut
+// useColumnRenderer-Hook aus dem Provider lesen kann. Die vier Pfade:
+//   1. FormatSpec (`{ format: "timestamp" }` etc.) → applyFormatSpec.
+//   2. RuntimeRenderer (Funktion) → direkter Aufruf. Nur für render-list-
+//      interne Reference-Lookup-Closures — niemals aus dem serialisierten Schema.
+//   3. PlatformComponent (`{ react: { __component: "X" } }`) → schaut
 //      "X" über useColumnRenderer auf und rendert `<X value row column/>`.
 //      Nicht registriert → einmalige Warnung + Default-Fallback.
-//   3. Sonst → defaultCellRender (Type-basierter String-Renderer).
+//   4. Sonst → defaultCellRender (Type-basierter String-Renderer).
 function DataTableCell({
   value,
   row,
@@ -1153,9 +1134,10 @@ function DataTableCell({
 }: DataTableCellProps): ReactNode {
   const componentRef = isComponentRendererRef(renderer);
   const ResolvedComponent = useColumnRenderer(componentRef?.name);
+  if (typeof renderer === "object" && renderer !== null && "format" in renderer) {
+    return applyFormatSpec(renderer as { format: string } & Record<string, unknown>, value);
+  }
   if (typeof renderer === "function") {
-    // 2. Argument: ganze Row als read-only — function-Renderer können
-    // context-aware sein (Tier 2.7e-Eagerload nutzt das für _refs).
     const fn = renderer as (v: unknown, r?: Readonly<Record<string, unknown>>) => string;
     return fn(value, row);
   }
@@ -1163,7 +1145,7 @@ function DataTableCell({
     if (ResolvedComponent !== undefined) {
       return <ResolvedComponent value={value} row={row} column={{ field }} />;
     }
-    // Renderer im Schema referenziert, aber client-side keine Map-Eintrag —
+    // Renderer im Schema referenziert, aber client-side kein Map-Eintrag —
     // typischer Fall: clientFeatures.columnRenderers vergessen oder
     // Tippfehler im __component-Key. Warnen statt crashen, damit ein
     // Schema-Boot trotzdem funktioniert (Default-Type-Renderer übernimmt).