@cosmicdrift/kumiko-renderer-web 0.133.0 → 0.135.0

package/src/widgets/progress-list.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { ProgressBar } from "./progress-bar";
+
+export type ProgressListRow = {
+  readonly id: string;
+  readonly label: string;
+  readonly value: string;
+  readonly fraction: number;
+};
+
+/** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
+ *  Tilgungsfortschritt pro Kredit). */
+export function ProgressList({
+  rows,
+  emptyContent,
+  testId,
+}: {
+  readonly rows: readonly ProgressListRow[];
+  readonly emptyContent?: ReactNode;
+  readonly testId?: string;
+}): ReactNode {
+  if (rows.length === 0) {
+    return <div data-testid={testId}>{emptyContent}</div>;
+  }
+  return (
+    <ul data-testid={testId} className="flex max-h-64 flex-col gap-3 overflow-y-auto pr-1">
+      {rows.map((row) => (
+        <li key={row.id} className="flex flex-col gap-1">
+          <div className="flex items-baseline justify-between gap-2 text-sm">
+            <span className="font-medium">{row.label}</span>
+            <span className="tabular-nums text-muted-foreground">{row.value}</span>
+          </div>
+          <ProgressBar value={row.fraction} />
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/widgets/result-panel.tsx

@@ -0,0 +1,101 @@
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { DetailList } from "./detail-list";
+import { SectionCard } from "./section-card";
+
+/** Ergebnis-Sektion eines Rechners: SectionCard mit Empty-Zustand (Banner)
+ *  oder Kennzahl-Liste (DetailList) + optionalen Extras (Tabelle, Hinweise).
+ *  Ersetzt die handgebauten `<dl>`/Banner-Blöcke in Custom-Screens. */
+export function ResultPanel({
+  title,
+  subtitle,
+  empty,
+  emptyText,
+  rows,
+  children,
+  testId,
+}: {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly empty?: boolean;
+  readonly emptyText?: ReactNode;
+  readonly rows?: readonly {
+    readonly label: string;
+    readonly value: ReactNode;
+    readonly emphasize?: boolean;
+  }[];
+  readonly children?: ReactNode;
+  readonly testId?: string;
+}): ReactNode {
+  const { Banner } = usePrimitives();
+  return (
+    <SectionCard title={title} subtitle={subtitle} testId={testId}>
+      {empty === true ? (
+        <Banner variant="info" padded>
+          {emptyText}
+        </Banner>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {rows !== undefined && rows.length > 0 && <DetailList rows={rows} />}
+          {children}
+        </div>
+      )}
+    </SectionCard>
+  );
+}
+
+export interface ResultColumn<Row> {
+  readonly header: string;
+  readonly align?: "left" | "right";
+  readonly cell: (row: Row) => ReactNode;
+}
+
+/** Statische, prop-getriebene Ergebnistabelle für berechnete Zeilen (Tranchen,
+ *  Szenarien). Nimmt dem Screen die `<table>`+tabular-nums-Ketten ab.
+ *  ponytail: bewusst die minimale Read-only-Tabelle — für Sort/Pager/Facets
+ *  stattdessen usePrimitives().DataTable bzw. QueryTable nutzen. */
+export function ResultTable<Row>({
+  columns,
+  rows,
+  rowKey,
+  testId,
+}: {
+  readonly columns: readonly ResultColumn<Row>[];
+  readonly rows: readonly Row[];
+  readonly rowKey: (row: Row, index: number) => string;
+  readonly testId?: string;
+}): ReactNode {
+  return (
+    <div className="overflow-x-auto">
+      <table data-testid={testId} className="w-full text-sm">
+        <thead>
+          <tr className="border-b text-left text-muted-foreground">
+            {columns.map((col) => (
+              <th
+                key={col.header}
+                className={cn("py-1.5 font-medium", col.align === "right" && "text-right")}
+              >
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={rowKey(row, i)} className="border-b last:border-0">
+              {columns.map((col) => (
+                <td
+                  key={col.header}
+                  className={cn("py-1.5", col.align === "right" && "text-right tabular-nums")}
+                >
+                  {col.cell(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/widgets/use-draft.ts

@@ -0,0 +1,35 @@
+import { useCallback, useState } from "react";
+
+/** Formular-State für Rechner-Screens: ein Draft-Objekt + `patch` für
+ *  Teil-Updates + `field(name)` das die `{ id, name, value, onChange }`-Props
+ *  fertig für die Feld-Widgets (NumberField/MoneyField/PercentField) liefert.
+ *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper. */
+export function useDraft<T extends object>(
+  defaults: T,
+): {
+  readonly draft: T;
+  readonly patch: (changes: Partial<T>) => void;
+  readonly reset: () => void;
+  readonly field: <K extends keyof T>(
+    name: K,
+  ) => {
+    readonly id: string;
+    readonly name: string;
+    readonly value: T[K];
+    readonly onChange: (v: T[K]) => void;
+  };
+} {
+  const [draft, setDraft] = useState<T>(defaults);
+  const patch = useCallback((changes: Partial<T>) => setDraft((d) => ({ ...d, ...changes })), []);
+  const reset = useCallback(() => setDraft(defaults), [defaults]);
+  const field = useCallback(
+    <K extends keyof T>(name: K) => ({
+      id: String(name),
+      name: String(name),
+      value: draft[name],
+      onChange: (v: T[K]) => setDraft((d) => ({ ...d, [name]: v })),
+    }),
+    [draft],
+  );
+  return { draft, patch, reset, field };
+}

package/src/ui/card.tsx

@@ -1,93 +0,0 @@
-// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
-import * as React from "react"
-
-import { cn } from "../lib/cn"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

package/src/ui/collapsible.tsx

@@ -1,34 +0,0 @@
-// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
-"use client"
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/ui/dropdown-menu.tsx

@@ -1,258 +0,0 @@
-// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
-"use client"
-
-import * as React from "react"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
-
-import { cn } from "../lib/cn"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}