@cosmicdrift/kumiko-renderer-web 0.34.1 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.34.1",
+  "version": "0.35.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>",

package/src/__tests__/kumiko-screen.test.tsx

@@ -197,20 +197,31 @@ describe("KumikoScreen", () => {
     const TaskCustomFields = ({
       entityName,
       entityId,
+      initialValues,
     }: {
       entityName: string;
       entityId: string | null;
+      initialValues?: Readonly<Record<string, unknown>>;
     }) => (
       <div data-testid="task-custom-fields">
-        {entityName}:{entityId ?? "(create)"}
+        {entityName}:{entityId ?? "(create)"}:{String(initialValues?.["vendor"] ?? "(no-value)")}
       </div>
     );
     const dispatcher = makeDispatcher({
-      // detail liefert die row MIT id — aber der Update-Form filtert id aus
-      // den Form-values; die Section darf trotzdem nicht in create-mode fallen.
+      // detail liefert die row MIT id + customFields-jsonb. Update-Form
+      // filtert id aus den Form-values (Section darf nicht create-mode
+      // sein) UND die Section muss den gespeicherten customFields-Bestand
+      // bekommen (sonst write-only → Read-Back leer).
       query: (async () => ({
         isSuccess: true,
-        data: { id: "task-1", version: 7, title: "loaded", count: 0, done: false },
+        data: {
+          id: "task-1",
+          version: 7,
+          title: "loaded",
+          count: 0,
+          done: false,
+          customFields: { vendor: "Hetzner" },
+        },
       })) as unknown as Dispatcher["query"],
     });
 
@@ -224,8 +235,9 @@ describe("KumikoScreen", () => {
 
     await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
     const section = screen.getByTestId("task-custom-fields");
-    // Der Anker: echte route-id, NICHT "(create)". Vor dem Fix: "task:(create)".
-    expect(section.textContent).toBe("task:task-1");
+    // Anker: (1) echte route-id statt "(create)" [create-mode-Bug],
+    //        (2) gespeicherter customFields-Wert statt "(no-value)" [write-only-Bug].
+    expect(section.textContent).toBe("task:task-1:Hetzner");
   });
 
   test("entityList onRowClick → Callback feuert mit Row-Viewmodel", async () => {

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

@@ -4,7 +4,12 @@
 // money-input seine Pure-Logik exportiert). Kein DOM.
 
 import { describe, expect, test } from "bun:test";
-import { computeVisiblePages, defaultCellRender, isComponentRendererRef } from "../index";
+import {
+  applyFormatSpec,
+  computeVisiblePages,
+  defaultCellRender,
+  isComponentRendererRef,
+} from "../index";
 
 describe("computeVisiblePages", () => {
   test("<= 7 Seiten: alle Seiten, keine Ellipsis", () => {
@@ -55,6 +60,52 @@ 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", () => {
+    expect(applyFormatSpec({ format: "custom-app-format" }, 42)).toBe("42");
+    expect(applyFormatSpec({ format: "custom-app-format" }, "hello")).toBe("hello");
+  });
+});
+
 describe("defaultCellRender", () => {
   test("null/undefined/leerer String → leerer String", () => {
     expect(defaultCellRender(null, "text")).toBe("");

package/src/primitives/index.tsx

@@ -1056,8 +1056,40 @@ export function isComponentRendererRef(renderer: unknown): { readonly name: stri
   return { name: component };
 }
 
+// Applies a FormatSpec ({ format: "timestamp" } etc.) to a value.
+// Handles all built-in FieldFormatRegistry keys; unknown app-specific keys
+// fall back to String(value). Exported for unit tests.
+export function applyFormatSpec(
+  spec: { format: string } & Record<string, unknown>,
+  value: unknown,
+): string {
+  if (value === null || value === undefined || value === "") return "";
+  switch (spec.format) {
+    case "timestamp":
+    case "date":
+      return formatDateCell(value, spec.format);
+    case "boolean": {
+      if (value === true) return (spec["trueLabel"] as string | undefined) ?? "✓";
+      if (value === false) return (spec["falseLabel"] as string | undefined) ?? "";
+      return "";
+    }
+    case "currency": {
+      const sym = (spec["symbol"] as string | undefined) ?? "";
+      return sym.length > 0 ? `${value} ${sym}` : String(value);
+    }
+    case "priority": {
+      const emptyLabel = (spec["emptyLabel"] as string | undefined) ?? "—";
+      const prefix = (spec["prefix"] as string | undefined) ?? "";
+      if (value === 0 || value === undefined || value === null) return emptyLabel;
+      return `${prefix}${value}`;
+    }
+    default:
+      return typeof value === "string" ? value : String(value);
+  }
+}
+
 // 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
@@ -1135,14 +1167,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 +1185,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 +1196,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).