@cosmicdrift/kumiko-renderer-web 0.136.1 → 0.137.0

package/package.json

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