@cosmicdrift/kumiko-renderer-web 0.140.0 → 0.142.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.140.0",
+  "version": "0.142.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.140.0",
-    "@cosmicdrift/kumiko-headless": "0.140.0",
-    "@cosmicdrift/kumiko-renderer": "0.140.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.142.0",
+    "@cosmicdrift/kumiko-headless": "0.142.0",
+    "@cosmicdrift/kumiko-renderer": "0.142.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/primitives/__tests__/input-testid.test.tsx

@@ -0,0 +1,45 @@
+// #950 — Input forwardet testId (→ data-testid) + readOnly ans echte <input>,
+// damit App-Tests getByTestId(...) + .readOnly/.disabled assertieren können.
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { Input } = defaultPrimitives;
+const noop = () => {};
+
+describe("DefaultInput testId/readOnly forwarding (#950)", () => {
+  test("text: testId → data-testid, readOnly durchgereicht", () => {
+    render(
+      <Input
+        kind="text"
+        id="subdomain"
+        name="subdomain"
+        value="acme"
+        onChange={noop}
+        testId="url-settings-subdomain"
+        readOnly
+      />,
+    );
+    const input = screen.getByTestId("url-settings-subdomain");
+    expect(input.tagName).toBe("INPUT");
+    expect((input as HTMLInputElement).readOnly).toBe(true);
+  });
+
+  test("readOnly default false (nicht gesetzt = editierbar)", () => {
+    render(<Input kind="text" id="x" name="x" value="" onChange={noop} testId="plain" />);
+    expect((screen.getByTestId("plain") as HTMLInputElement).readOnly).toBe(false);
+  });
+
+  test("email/password/number: testId erreicht das Element", () => {
+    render(
+      <>
+        <Input kind="email" id="e" name="e" value="" onChange={noop} testId="tid-email" />
+        <Input kind="password" id="p" name="p" value="" onChange={noop} testId="tid-pw" />
+        <Input kind="number" id="n" name="n" value={1} onChange={noop} testId="tid-num" />
+      </>,
+    );
+    for (const tid of ["tid-email", "tid-pw", "tid-num"]) {
+      expect(screen.getByTestId(tid).tagName).toBe("INPUT");
+    }
+  });
+});

package/src/primitives/index.tsx

@@ -125,14 +125,14 @@ function DefaultButton({
   variant = "primary",
   size = "md",
   ariaLabel,
-  fullWidth,
+  width = "auto",
   children,
   testId,
 }: ButtonProps): ReactNode {
   // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
-  // gepolsterte Fläche; fullWidth streckt CTA-Buttons in Karten/Panels.
+  // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
   const className =
-    [variant === "link" ? "h-auto px-0 py-0" : "", fullWidth === true ? "w-full" : ""]
+    [variant === "link" ? "h-auto px-0 py-0" : "", width === "full" ? "w-full" : ""]
       .filter(Boolean)
       .join(" ") || undefined;
   return (
@@ -267,6 +267,8 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="text"
           {...common}
+          data-testid={props.testId}
+          readOnly={props.readOnly}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
@@ -278,6 +280,7 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="email"
           {...common}
+          data-testid={props.testId}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
@@ -289,6 +292,7 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="password"
           {...common}
+          data-testid={props.testId}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           autoComplete={props.autoComplete ?? "current-password"}
@@ -299,6 +303,7 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="number"
           {...common}
+          data-testid={props.testId}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => {
             const v = e.target.value;

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

@@ -246,11 +246,11 @@ describe("Button size", () => {
     expect(screen.getByRole("button", { name: "Entfernen" })).toBeTruthy();
   });
 
-  test("fullWidth streckt den Button (w-full)", () => {
+  test('width="full" streckt den Button (w-full)', () => {
     function WideBtn(): ReactNode {
       const { Button } = usePrimitives();
       return (
-        <Button fullWidth onClick={() => {}}>
+        <Button width="full" onClick={() => {}}>
           Upgrade
         </Button>
       );

package/src/widgets/result-panel.tsx

@@ -63,15 +63,17 @@ export function ResultTable<Row>({
   rows,
   rowKey,
   testId,
+  className,
 }: {
   readonly columns: readonly ResultColumn<Row>[];
   readonly rows: readonly Row[];
   readonly rowKey: (row: Row, index: number) => string;
   readonly testId?: string;
+  readonly className?: string;
 }): ReactNode {
   return (
     <div className="overflow-x-auto">
-      <table data-testid={testId} className="w-full text-sm">
+      <table data-testid={testId} className={cn("w-full text-sm", className)}>
         <thead>
           <tr className="border-b text-left text-muted-foreground">
             {columns.map((col) => (
@@ -120,6 +122,7 @@ export function ComparisonTable<Col>({
   metrics,
   metricLabel,
   testId,
+  className,
 }: {
   readonly columns: readonly Col[];
   readonly columnHeader: (col: Col, index: number) => string;
@@ -127,10 +130,11 @@ export function ComparisonTable<Col>({
   readonly metrics: readonly ComparisonMetric<Col>[];
   readonly metricLabel: string;
   readonly testId?: string;
+  readonly className?: string;
 }): ReactNode {
   return (
     <div className="overflow-x-auto">
-      <table data-testid={testId} className="w-full min-w-[24rem] text-sm">
+      <table data-testid={testId} className={cn("w-full min-w-[24rem] text-sm", className)}>
         <thead>
           <tr className="border-b text-left text-muted-foreground">
             <th className="py-1.5 font-medium">{metricLabel}</th>