@cosmicdrift/kumiko-renderer 0.213.0 → 0.215.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.213.0",
+  "version": "0.215.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.213.0",
-    "@cosmicdrift/kumiko-headless": "0.213.0",
+    "@cosmicdrift/kumiko-framework": "0.215.0",
+    "@cosmicdrift/kumiko-headless": "0.215.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -25,7 +25,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "jsdom": "^29.1.1",
-    "@cosmicdrift/kumiko-locale-de": "0.213.0"
+    "@cosmicdrift/kumiko-locale-de": "0.215.0"
   },
   "repository": {
     "type": "git",

package/src/components/__tests__/render-field-enum-option.test.tsx

@@ -0,0 +1,99 @@
+// fw#2315: a projectionDetail field with `renderer: { format: "enumOption",
+// keyPrefix }` must resolve the raw enum value through useTranslation() —
+// the same key convention buildOptionLabels uses for entityList select
+// columns (`<feature>:entity:<entity>:field:<field>:option:<value>`), but
+// for the FieldRendererOutput (readOnly + declared FormatSpec) path.
+//
+// DoD-Test: rendering the SAME field under two locales must produce two
+// DIFFERENT labels — not just prove the format key exists.
+
+import { describe, expect, test } from "bun:test";
+import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import { render } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider, type TranslationsByLocale } from "../../i18n";
+import { type CorePrimitives, PrimitivesProvider, type TextProps } from "../../primitives";
+import { RenderField } from "../render-field";
+
+let captured: TextProps | undefined;
+const captureText: ComponentType<TextProps> = (props) => {
+  captured = props;
+  return null;
+};
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: noop,
+  Field: passChildren,
+  Input: noop,
+  DataTable: noop,
+  Form: noop,
+  Section: noop,
+  Card: noop,
+  Grid: noop,
+  GridCell: noop,
+  Text: captureText,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+const STATUS_KEY_PREFIX = "contact:entity:contact:field:status:option:";
+
+const STATUS_BUNDLES: TranslationsByLocale = {
+  de: { [`${STATUS_KEY_PREFIX}active`]: "Aktiv" },
+  en: { [`${STATUS_KEY_PREFIX}active`]: "Active" },
+};
+
+function statusField(value: unknown = "active"): EditFieldViewModel {
+  return {
+    field: "status",
+    label: "Status",
+    type: "text",
+    value,
+    visible: true,
+    readOnly: true,
+    required: false,
+    renderer: { format: "enumOption", keyPrefix: STATUS_KEY_PREFIX },
+  };
+}
+
+function renderUnderLocale(locale: string, field: EditFieldViewModel): void {
+  captured = undefined;
+  render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale })}
+      fallbackBundles={[STATUS_BUNDLES]}
+    >
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderField field={field} onChange={() => {}} />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe("RenderField — enumOption-FormatSpec (fw#2315)", () => {
+  test("dieselbe Maske unter zwei Locales rendert zwei verschiedene Beschriftungen", () => {
+    renderUnderLocale("de", statusField());
+    expect(captured?.children).toBe("Aktiv");
+
+    renderUnderLocale("en", statusField());
+    expect(captured?.children).toBe("Active");
+  });
+
+  test("unbekannter Options-Key fällt auf den Rohwert zurück, nicht auf den i18n-Key", () => {
+    renderUnderLocale("de", statusField("archived"));
+    expect(captured?.children).toBe("archived");
+  });
+
+  test("leerer Wert rendert leer", () => {
+    renderUnderLocale("de", statusField(null));
+    expect(captured?.children).toBe("");
+  });
+});

package/src/components/render-field.tsx

@@ -349,6 +349,7 @@ function FieldRendererOutput({
   readonly appLocale: string;
 }): ReactNode {
   const { Text } = usePrimitives();
+  const t = useTranslation();
   const componentName =
     !isFormatSpec(renderer) && typeof renderer === "object" && renderer !== null
       ? extensionSectionName(renderer)
@@ -363,7 +364,7 @@ function FieldRendererOutput({
     // further below in readOnlyDisplayText.
     return (
       <Text testId={`field-value-${field.field}`}>
-        {applyFormatSpec({ locale: appLocale, ...renderer }, field.value)}
+        {applyFormatSpec({ locale: appLocale, ...renderer }, field.value, t)}
       </Text>
     );
   }