@cosmicdrift/kumiko-renderer-web 0.136.0 → 0.137.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.136.0",
+  "version": "0.137.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.136.0",
-    "@cosmicdrift/kumiko-headless": "0.136.0",
-    "@cosmicdrift/kumiko-renderer": "0.136.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.137.0",
+    "@cosmicdrift/kumiko-headless": "0.137.0",
+    "@cosmicdrift/kumiko-renderer": "0.137.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__/dashboard-screen.test.tsx

@@ -110,6 +110,8 @@ const richScreen: DashboardScreenDefinition = {
       deltaField: "delta",
       deltaDirectionField: "deltaDirection",
       deltaToneField: "deltaTone",
+      icon: { react: { __component: "rich-dashboard-kpi-icon" } },
+      accentColor: "#123456",
     },
     {
       kind: "stat-group",
@@ -282,6 +284,50 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     expect(screen.getByText("↓23 %")).toBeTruthy();
   });
 
+  test("stat-Panel: registriertes Icon rendert, unregistriertes rendert nichts (kein Crash)", async () => {
+    function KpiIcon(): ReactNode {
+      return <svg data-testid="kpi-icon" />;
+    }
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:kpi") {
+          return { isSuccess: true, data: { value: "92.753 €" } };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ "rich-dashboard-kpi-icon": KpiIcon }}>
+          <DashboardBodyProvider value={WebDashboardBody}>
+            <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+          </DashboardBodyProvider>
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByTestId("kpi-icon")).toBeTruthy());
+  });
+
+  test("stat-Panel: unregistriertes Icon rendert nichts, wirft nicht", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:kpi") {
+          return { isSuccess: true, data: { value: "92.753 €" } };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
+    expect(screen.queryByTestId("kpi-icon")).toBeNull();
+  });
+
   test("stat-Panel: fehlende deltaDirection unterdrückt den Chip (kein Crash)", async () => {
     const dispatcher = createMockDispatcher({
       query: (async (type: string) => {

package/src/app/dashboard-body.tsx

@@ -10,6 +10,9 @@
 //                   deltaField/deltaDirectionField(+deltaToneField) sind
 //                   optional — nur wenn BEIDE Felder gesetzt sind UND geliefert
 //                   werden, zeigt die Kachel einen Delta-Chip ("↓ 23 %").
+//                   icon/accentColor sind statisch am Panel (keine Query-
+//                   Felder) — icon über extensionSectionComponents wie bei
+//                   custom-Panels, accentColor ein roher CSS-Farbwert.
 //   stat-group    → mehrere stat-Panels unter einem Sektions-Titel, jedes
 //                   Kind bleibt eine eigenständige Query.
 //   chart         → { points: { atMs, value | null }[], windowStartMs,
@@ -58,13 +61,41 @@ const STAT_TONES: ReadonlySet<string> = new Set(["default", "positive", "warn"])
 const WIDE_PANEL = "sm:col-span-2 lg:col-span-4";
 const HALF_PANEL = "sm:col-span-2 lg:col-span-2";
 
+function StatPanelIcon({
+  panel,
+  screenId,
+  filterParams,
+}: {
+  readonly panel: DashboardStatPanel;
+  readonly screenId: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const name = panel.icon !== undefined ? extensionSectionName(panel.icon) : undefined;
+  const Icon = useExtensionSectionComponent(name);
+  useEffect(() => {
+    if (panel.icon !== undefined && name !== undefined && Icon === undefined) {
+      // biome-ignore lint/suspicious/noConsole: dev-warning für Setup-Fehler
+      console.warn(
+        `[kumiko] Dashboard stat-panel "${panel.id}" on screen "${screenId}" references icon ` +
+          `"${name}", which is not registered in clientFeatures.extensionSectionComponents.`,
+      );
+    }
+  }, [panel.icon, panel.id, name, Icon, screenId]);
+  if (Icon === undefined) return null;
+  return (
+    <Icon entityName={screenId} entityId={null} screenId={screenId} filterParams={filterParams} />
+  );
+}
+
 function StatPanelBody({
   panel,
   label,
+  screenId,
   filterParams,
 }: {
   readonly panel: DashboardStatPanel;
   readonly label: string;
+  readonly screenId: string;
   readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const { data, error, loading, refetch } = useQuery<Readonly<Record<string, unknown>>>(
@@ -82,9 +113,15 @@ function StatPanelBody({
   const delta = readDelta(panel, record);
   return (
     <StatCard
+      icon={
+        panel.icon !== undefined ? (
+          <StatPanelIcon panel={panel} screenId={screenId} filterParams={filterParams} />
+        ) : undefined
+      }
       label={label}
       value={String(record[panel.valueField] ?? "—")}
       tone={tone}
+      accentColor={panel.accentColor}
       {...(sub !== undefined && sub !== null && { sub: String(sub) })}
       {...(delta !== undefined && { delta })}
       testId={`dashboard-panel-${panel.id}`}
@@ -110,10 +147,12 @@ function readDelta(
 function StatGroupPanelBody({
   panel,
   label,
+  screenId,
   filterParams,
 }: {
   readonly panel: DashboardStatGroupPanel;
   readonly label: string;
+  readonly screenId: string;
   readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const t = useTranslation();
@@ -125,6 +164,7 @@ function StatGroupPanelBody({
             key={stat.id}
             panel={stat}
             label={t(stat.label)}
+            screenId={screenId}
             filterParams={filterParams}
           />
         ))}
@@ -365,9 +405,18 @@ function PanelBody({
   readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   if (panel.kind === "stat")
-    return <StatPanelBody panel={panel} label={label} filterParams={filterParams} />;
+    return (
+      <StatPanelBody panel={panel} label={label} screenId={screenId} filterParams={filterParams} />
+    );
   if (panel.kind === "stat-group") {
-    return <StatGroupPanelBody panel={panel} label={label} filterParams={filterParams} />;
+    return (
+      <StatGroupPanelBody
+        panel={panel}
+        label={label}
+        screenId={screenId}
+        filterParams={filterParams}
+      />
+    );
   }
   if (panel.kind === "chart")
     return <ChartPanelBody panel={panel} label={label} filterParams={filterParams} />;

package/src/widgets/__tests__/form-kit.test.tsx

@@ -38,14 +38,16 @@ describe("NumberField", () => {
     expect(onChange).toHaveBeenCalledWith(undefined);
   });
 
-  test("MoneyField/PercentField zeigen ihre Einheit", () => {
+  test("MoneyField/PercentField rendern als beschriftetes Zahlenfeld ohne Einheit-Badge", () => {
     const noop = (): void => {};
     const { rerender } = render(
-      <MoneyField label="Betrag" id="b" name="b" value={1} onChange={noop} />,
+      <MoneyField label="Betrag (€)" id="b" name="b" value={1} onChange={noop} />,
     );
-    expect(screen.getByText("€")).toBeTruthy();
-    rerender(<PercentField label="Zins" id="z" name="z" value={1} onChange={noop} />);
-    expect(screen.getByText("%")).toBeTruthy();
+    expect(screen.getByText("Betrag (€)")).toBeTruthy();
+    expect(screen.getByRole("spinbutton")).toBeTruthy();
+    expect(screen.queryByText("€")).toBeNull(); // Einheit lebt im Label, kein separates Badge
+    rerender(<PercentField label="Zins (%)" id="z" name="z" value={1} onChange={noop} />);
+    expect(screen.queryByText("%")).toBeNull();
   });
 });
 

package/src/widgets/form-fields.tsx

@@ -9,14 +9,13 @@ export interface NumberFieldProps {
   readonly onChange: (v: number | undefined) => void;
   readonly required?: boolean;
   readonly disabled?: boolean;
-  /** Einheit rechts neben dem Label (z.B. "€", "%"). */
-  readonly unit?: string;
   readonly testId?: string;
 }
 
 /** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
  *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
- *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt. */
+ *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
+ *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
 export function NumberField({
   label,
   id,
@@ -25,22 +24,11 @@ export function NumberField({
   onChange,
   required,
   disabled,
-  unit,
   testId,
 }: NumberFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field
-      id={id}
-      label={label}
-      required={required}
-      labelAppendix={
-        unit !== undefined ? (
-          <span className="text-xs text-muted-foreground">{unit}</span>
-        ) : undefined
-      }
-      testId={testId}
-    >
+    <Field id={id} label={label} required={required} testId={testId}>
       <Input
         kind="number"
         id={id}
@@ -54,13 +42,13 @@ export function NumberField({
   );
 }
 
-/** Euro-Betrag in ganzen Einheiten (kein Cent-Integer wie Input kind:"money").
- *  Preset über NumberField mit "€"-Einheit. */
-export function MoneyField(props: Omit<NumberFieldProps, "unit">): ReactNode {
-  return <NumberField {...props} unit="€" />;
+// MoneyField/PercentField markieren die Feld-Absicht am Call-Site (lesbarer als
+// NumberField überall) und sind der Ort, an dem später geld-/prozent-spezifische
+// Formatierung andocken kann. Aktuell rendern sie identisch zu NumberField.
+export function MoneyField(props: NumberFieldProps): ReactNode {
+  return <NumberField {...props} />;
 }
 
-/** Prozentwert (Zins, Tilgung, Rendite). Preset über NumberField mit "%". */
-export function PercentField(props: Omit<NumberFieldProps, "unit">): ReactNode {
-  return <NumberField {...props} unit="%" />;
+export function PercentField(props: NumberFieldProps): ReactNode {
+  return <NumberField {...props} />;
 }