@cosmicdrift/kumiko-renderer-web 0.186.3 → 0.188.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.186.3",
+  "version": "0.188.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.186.3",
-    "@cosmicdrift/kumiko-headless": "0.186.3",
-    "@cosmicdrift/kumiko-renderer": "0.186.3",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.188.0",
+    "@cosmicdrift/kumiko-headless": "0.188.0",
+    "@cosmicdrift/kumiko-renderer": "0.188.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__/config-edit.test.tsx

@@ -38,6 +38,28 @@ const settingsScreen: ConfigEditScreenDefinition = {
   },
 };
 
+// A money-typed field is a legitimate FieldDefinition (screen.fields reuses
+// the entity field-shape, kumiko-framework#1923 render-field.tsx money case)
+// even though ConfigKeyType (write-helpers.ts) never carries "money" — the
+// server side of a config key is always a bare scalar.
+const moneySettingsScreen: ConfigEditScreenDefinition = {
+  id: "money-settings",
+  type: "configEdit",
+  scope: "tenant",
+  configKeys: { priceLimit: "demo:config:price-limit" },
+  fields: {
+    priceLimit: { type: "money" },
+    // @cast-boundary inline schema-author shape — FieldDefinition union too narrow
+  } as ConfigEditScreenDefinition["fields"],
+  layout: { sections: [{ title: "Basics", fields: ["priceLimit"] }] },
+};
+
+const moneySchema: FeatureSchema = {
+  featureName: "demo",
+  entities: {},
+  screens: [moneySettingsScreen],
+};
+
 const schema: FeatureSchema = {
   featureName: "demo",
   entities: {},
@@ -138,6 +160,50 @@ describe("KumikoScreen / configEdit", () => {
     });
   });
 
+  // kumiko-framework#1923: RenderField's money case now always emits the
+  // entityEdit `{amount, currency}` payload shape. A config key's server
+  // value is always a bare scalar (ConfigKeyType has no "money" variant) —
+  // customSubmit must unwrap back to `.amount` before dispatching, or the
+  // batch's config:write:set value fails its `string | number | boolean`
+  // schema entirely (regression guard for that unwrap).
+  test("money field submit unwraps {amount, currency} back to a bare number", async () => {
+    const batchSpy = mock(async (_commands: ReadonlyArray<{ type: string; payload: unknown }>) => ({
+      isSuccess: true as const,
+      results: [],
+    }));
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { "demo:config:price-limit": { value: 12.99, scope: "tenant" } },
+      })) as unknown as Dispatcher["query"],
+      batch: batchSpy as unknown as Dispatcher["batch"],
+    });
+
+    const user = userEvent.setup();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={moneySchema} qn="demo:screen:money-settings" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const priceInput = screen.getByTestId("field-priceLimit").querySelector("input");
+    if (!priceInput) throw new Error("expected priceLimit input");
+
+    await user.clear(priceInput);
+    await user.type(priceInput, "15.00");
+    await user.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(batchSpy).toHaveBeenCalled());
+    const commands = batchSpy.mock.calls[0]?.[0];
+    if (!commands) throw new Error("batchSpy not called");
+    expect(commands).toHaveLength(1);
+    expect(commands[0]).toEqual({
+      type: "config:write:set",
+      payload: { key: "demo:config:price-limit", value: 15, scope: "tenant" },
+    });
+  });
+
   test("save-button disabled after successful submit (rebase fired)", async () => {
     const dispatcher: Dispatcher = createMockDispatcher({
       query: (async () => ({

package/src/__tests__/primitives.test.tsx

@@ -8,7 +8,9 @@
 // abhängen werden.
 
 import { describe, expect, mock, test } from "bun:test";
+import { type ColumnRendererProps, ColumnRenderersProvider } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
 import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen } from "./test-utils";
@@ -876,6 +878,125 @@ describe("DataTable", () => {
       expect(onRowClick).not.toHaveBeenCalled();
     });
   });
+
+  describe("highlighted column", () => {
+    const cols = [
+      { field: "name", label: "Name", type: "string", sortable: false },
+      { field: "y2026", label: "2026", type: "number", sortable: false, highlighted: true },
+    ] as const;
+    const oneRow = [{ id: "r1", values: { name: "Alice", y2026: 42 } }];
+
+    test("marks header + cell of the highlighted column, leaves others alone", () => {
+      render(<DataTable columns={cols} rows={oneRow} />);
+      expect(screen.getByTestId("column-y2026").getAttribute("data-highlighted")).toBe("true");
+      expect(screen.getByTestId("column-name").getAttribute("data-highlighted")).toBeNull();
+      expect(screen.getByTestId("cell-r1-y2026").getAttribute("data-highlighted")).toBe("true");
+      expect(screen.getByTestId("cell-r1-name").getAttribute("data-highlighted")).toBeNull();
+    });
+  });
+
+  describe("testId overrides", () => {
+    const cols = [{ field: "name", label: "Name", type: "string", sortable: false }] as const;
+    const oneRow = [{ id: "r1", values: { name: "Alice" } }];
+
+    test("getRowTestId/getCellTestId override the row-<id>/cell-<id>-<field> defaults", () => {
+      render(
+        <DataTable
+          columns={cols}
+          rows={oneRow}
+          getRowTestId={(row) => `own-row-${row.id}`}
+          getCellTestId={(row, field) => `own-cell-${row.id}-${field}`}
+        />,
+      );
+      expect(screen.getByTestId("own-row-r1")).not.toBeNull();
+      expect(screen.getByTestId("own-cell-r1-name")).not.toBeNull();
+      expect(screen.queryByTestId("row-r1")).toBeNull();
+    });
+
+    test("without overrides, defaults stay row-<id>/cell-<id>-<field>", () => {
+      render(<DataTable columns={cols} rows={oneRow} />);
+      expect(screen.getByTestId("row-r1")).not.toBeNull();
+      expect(screen.getByTestId("cell-r1-name")).not.toBeNull();
+    });
+  });
+
+  describe("onCellChange (editable cell)", () => {
+    function EditableSwatch({ value, column, onChange }: ColumnRendererProps): ReactNode {
+      return (
+        <input
+          data-testid={`edit-${column.field}`}
+          value={String(value)}
+          onChange={(e) => onChange?.(e.target.value)}
+        />
+      );
+    }
+
+    test("column-renderer receives onChange bound to (rowId, field, value) when onCellChange is set", () => {
+      const onCellChange = mock();
+      const cols = [
+        {
+          field: "name",
+          label: "Name",
+          type: "string",
+          sortable: false,
+          renderer: { react: { __component: "EditableSwatch" } },
+        },
+      ] as const;
+      render(
+        <ColumnRenderersProvider value={{ EditableSwatch }}>
+          <DataTable
+            columns={cols}
+            rows={[{ id: "r1", values: { name: "Alice" } }]}
+            onCellChange={onCellChange}
+          />
+        </ColumnRenderersProvider>,
+      );
+      fireEvent.change(screen.getByTestId("edit-name"), { target: { value: "Bob" } });
+      expect(onCellChange).toHaveBeenCalledWith("r1", "name", "Bob");
+    });
+
+    test("without onCellChange, the component renderer gets no onChange (read-only)", () => {
+      const cols = [
+        {
+          field: "name",
+          label: "Name",
+          type: "string",
+          sortable: false,
+          renderer: { react: { __component: "EditableSwatch" } },
+        },
+      ] as const;
+      render(
+        <ColumnRenderersProvider value={{ EditableSwatch }}>
+          <DataTable columns={cols} rows={[{ id: "r1", values: { name: "Alice" } }]} />
+        </ColumnRenderersProvider>,
+      );
+      // onChange is undefined → EditableSwatch's onChange?.(...) is a no-op;
+      // rendering itself must still succeed (no crash) with a stable value.
+      expect((screen.getByTestId("edit-name") as HTMLInputElement).value).toBe("Alice");
+    });
+
+    test("format-spec renderer ignores onCellChange — no crash, plain formatted text", () => {
+      const onCellChange = mock();
+      const cols = [
+        {
+          field: "amount",
+          label: "Amount",
+          type: "number",
+          sortable: false,
+          renderer: { format: "currency", symbol: "€" },
+        },
+      ] as const;
+      render(
+        <DataTable
+          columns={cols}
+          rows={[{ id: "r1", values: { amount: 42 } }]}
+          onCellChange={onCellChange}
+        />,
+      );
+      expect(screen.getByTestId("cell-r1-amount").textContent).toBe("42 €");
+      expect(onCellChange).not.toHaveBeenCalled();
+    });
+  });
 });
 
 describe("Form", () => {