@robomous/ui-core 0.1.0 → 0.2.0

package/src/{primitives/primitives.test.tsx → components/components.test.tsx}

@@ -1,20 +1,16 @@
 /**
- * The component harness, proved on the primitives that carry a decision.
+ * The component harness, proved on the components that carry a decision.
  *
- * Not a snapshot of every class string — that would pin the design system to
- * whatever it happened to be on the day. What is asserted here is the handful of behaviours a screen
- * would silently lose: the merge that makes `className` a real override — and the
- * two geometry overrides that ride on it, `inlineLink` and `menuSurface`, whose
- * whole job is to beat a canonical utility — the `asChild` that keeps a link a
- * link, and the role an error is announced with.
+ * Deliberately not an echo of every class string: pinning the design system to
+ * whatever it looked like on the day is the mistake this repository just spent
+ * a restructure undoing, and a restyle is coming. What is asserted here is the
+ * handful of behaviours a screen would silently lose — the merge that makes
+ * `className` a real override, the `asChild` that keeps a link a link, the role
+ * an error is announced with, and the value a `Progress` reports without being
+ * asked.
  *
- * The button no longer defaults `type`, so nothing here stops a "Cancel"
- * submitting a form; that is a call-site property now, and
- * `tests/scripts/form_buttons.test.mjs` is what holds it.
- *
- * This file is also the reason the jsdom harness exists at all: standing the
- * environment up once here is cheaper than the first screen that needs it doing so
- * under deadline.
+ * The button does not default `type`, so nothing here stops a "Cancel"
+ * submitting a form; that is a call-site property, gated in the consumer.
  */
 
 import { render, screen } from "@testing-library/react";
@@ -22,10 +18,6 @@ import userEvent from "@testing-library/user-event";
 import type { JSX } from "react";
 import { describe, expect, it } from "vitest";
 
-import { inlineLink } from "../lib/button";
-import { menuSurface } from "../lib/menu";
-import { progressAria } from "../lib/progress";
-import { twoLineTrigger } from "../lib/select";
 import { Alert, AlertDescription, AlertTitle } from "./alert";
 import { Badge } from "./badge";
 import { Button } from "./button";
@@ -41,13 +33,7 @@ import { Progress } from "./progress";
 import { FieldError } from "./field";
 import { Input } from "./input";
 import { Label } from "./label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "./table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
@@ -59,14 +45,14 @@ describe("Button", () => {
   });
 
   it("lets a caller override a conflicting utility rather than emitting both", () => {
-    // Without `tailwind-merge` both `px-4` and `px-6` survive and which one wins is
+    // Without `tailwind-merge` both `px-2.5` and `px-6` survive and which one wins is
     // decided by the order Tailwind wrote them into the stylesheet — a rule nobody
     // can see from the call site. This is what makes `className` an extension
     // point rather than a suggestion.
     render(<Button className="px-6">Wide</Button>);
     const className = screen.getByRole("button", { name: "Wide" }).className;
     expect(className).toContain("px-6");
-    expect(className).not.toContain("px-4");
+    expect(className).not.toContain("px-2.5");
   });
 
   it("renders the child element with asChild, so a link stays a link", () => {
@@ -95,21 +81,31 @@ describe("Button", () => {
     expect(classes).not.toMatch(/(^|\s)underline(\s|$)/);
   });
 
-  it("hands back the height and padding a link button in prose cannot keep", () => {
+  it("lets a caller's className outrank the inline size", () => {
     render(
-      <Button variant="link" className={inlineLink}>
+      <Button variant="link" size="inline" className="h-8">
         More
       </Button>,
     );
 
-    // `Button` merges `className` over `buttonVariants` with tailwind-merge, so
-    // this is the merge itself: canonical's `h-8 px-2.5` is gone from the
-    // rendered attribute rather than merely outranked by a later rule.
+    // `h-auto` and `h-8` are the same utility group, so tailwind-merge has to
+    // drop the one the variant supplied. Without the merge both survive and
+    // which wins is decided by stylesheet order — a rule the call site cannot see.
     const classes = screen.getByRole("button").className.split(" ");
-    expect(classes).toContain("h-auto");
-    expect(classes).toContain("p-0");
-    expect(classes).not.toContain("h-8");
-    expect(classes).not.toContain("px-2.5");
+    expect(classes).toContain("h-8");
+    expect(classes).not.toContain("h-auto");
+  });
+
+  it("has an inline size that keeps a link button inside a sentence", () => {
+    render(
+      <Button variant="link" size="inline">
+        Read the docs
+      </Button>,
+    );
+    const button = screen.getByRole("button", { name: "Read the docs" });
+    expect(button.getAttribute("data-size")).toBe("inline");
+    expect(button.className).toContain("h-auto");
+    expect(button.className).toContain("p-0");
   });
 });
 
@@ -132,13 +128,16 @@ describe("Alert and Badge", () => {
     expect(screen.getByText("done").getAttribute("data-slot")).toBe("badge");
   });
 
-  it.each(["success", "warning", "info", "quiet"] as const)("%s is a Badge variant keyed on data", (variant) => {
-    render(<Badge variant={variant}>x</Badge>);
-    const el = screen.getByText("x");
-    expect(el.getAttribute("data-variant")).toBe(variant);
-    expect(el.className).toContain("border-transparent");
-    expect(el.className).not.toMatch(/border-(emerald|amber|sky)/);
-  });
+  it.each(["success", "warning", "info", "quiet"] as const)(
+    "%s is a Badge variant keyed on data",
+    (variant) => {
+      render(<Badge variant={variant}>x</Badge>);
+      const el = screen.getByText("x");
+      expect(el.getAttribute("data-variant")).toBe(variant);
+      expect(el.className).toContain("border-transparent");
+      expect(el.className).not.toMatch(/border-(emerald|amber|sky)/);
+    },
+  );
 });
 
 describe("fields", () => {
@@ -159,9 +158,10 @@ describe("fields", () => {
 });
 
 /**
- * The two-line option — composed at the call site rather than a primitive prop,
- * which is why what is asserted here is the trigger's own behaviour and not a
- * layout this file would otherwise have to keep in step with a call site.
+ * The two-line option — a `multiline` prop on the trigger itself rather than a
+ * class string composed at the call site, which is why what is asserted here
+ * is the trigger's own behaviour and not a layout this file would otherwise
+ * have to keep in step with a call site.
  *
  * The claim worth a test is the one that is easy to lose: the trigger shows the
  * *same* two lines the list does, because Radix renders the selected item's own
@@ -172,7 +172,7 @@ describe("Select", () => {
   function pickOne(): JSX.Element {
     return (
       <Select defaultValue="a">
-        <SelectTrigger data-testid="model" className={twoLineTrigger}>
+        <SelectTrigger data-testid="model" multiline>
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -202,15 +202,16 @@ describe("Select", () => {
 
   it("grows rather than clipping, and leaves a one-line option where it was", () => {
     render(pickOne());
-    // `h-8` would fix the height and squash the second line; `min-h-8` keeps the
-    // one-line control on Nova's contract height and lets a two-line one grow.
+    // `h-8` would fix the height and squash the second line; `min-h-8` keeps a
+    // one-line control at the trigger's usual height and lets a two-line one grow.
     const trigger = screen.getByTestId("model");
     expect(trigger.className).toContain("min-h-8");
     // Nothing truncates: half a model id is not a model id.
     expect(trigger.className).not.toContain("truncate");
-    // `twoLineTrigger` names canonical's own modifier chains, so `cn`'s merge
-    // replaces the fixed height and the value clamp rather than stacking beside
-    // them — a real check of the merge at render, not an echo of the constant.
+    // `multiline` is a prop, not a class string arriving from outside, so it
+    // does not need to outrank anything — but `cn`'s merge still has to replace
+    // the fixed height and the value clamp rather than stack beside them, which
+    // is what this checks at render, not an echo of the prop's own classes.
     expect(trigger.className).toContain("data-[size=default]:h-auto");
     expect(trigger.className).toContain("line-clamp-none");
     expect(trigger.className).not.toContain("data-[size=default]:h-8");
@@ -226,6 +227,21 @@ describe("Select", () => {
     expect(className).toContain("w-full");
     expect(className).toContain("min-w-(--radix-select-trigger-width)");
   });
+
+  it("grows and stops clamping its value when multiline", () => {
+    render(
+      <Select>
+        <SelectTrigger multiline aria-label="Export target">
+          <SelectValue placeholder="Pick one" />
+        </SelectTrigger>
+      </Select>,
+    );
+    const trigger = screen.getByRole("combobox", { name: "Export target" });
+    expect(trigger.className).toContain("data-[size=default]:h-auto");
+    expect(trigger.className).not.toContain("data-[size=default]:h-8");
+    expect(trigger.className).toContain("line-clamp-none");
+    expect(trigger.className).not.toContain("line-clamp-1");
+  });
 });
 
 describe("Card and Table", () => {
@@ -323,18 +339,15 @@ describe("Tabs", () => {
 });
 
 describe("Progress", () => {
-  it("reports its value to assistive technology, not only as a width", () => {
-    // Canonical `Progress` reads `value` only to size the indicator and never
-    // forwards it to Radix's `Root`, so `progressAria` says it again — every
-    // caller in the product spreads it beside `value` for exactly this reason.
-    render(<Progress value={42} {...progressAria(42)} aria-label="Ingest" />);
-    expect(screen.getByRole("progressbar", { name: "Ingest" }).getAttribute("aria-valuenow")).toBe(
-      "42",
-    );
+  it("reports its value to assistive technology without help from the caller", () => {
+    render(<Progress value={42} aria-label="Ingest" />);
+    const bar = screen.getByRole("progressbar", { name: "Ingest" });
+    expect(bar.getAttribute("aria-valuenow")).toBe("42");
+    expect(bar.getAttribute("data-state")).not.toBe("indeterminate");
   });
 
   it("fills with the functional colour, and carries the data-slot a caller can restyle from", () => {
-    // Canonical `Progress` has no `variant` prop and no notion of status — a
+    // `Progress` has no `variant` prop and no notion of status — a
     // batch's completion is an amount, not a polarity, so the indicator is
     // always `bg-primary`. A caller who needs to reach it targets the
     // `data-slot` it renders with, from its own `className` on `Root`.
@@ -402,7 +415,16 @@ describe("Dialog", () => {
 
 describe("sheet", () => {
   it("renders a dialog with its title and description wired by Radix", async () => {
-    render(<Sheet open><SheetContent><SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Narrow the list</SheetDescription></SheetHeader></SheetContent></Sheet>);
+    render(
+      <Sheet open>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Filters</SheetTitle>
+            <SheetDescription>Narrow the list</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
     const dialog = await screen.findByRole("dialog");
     expect(dialog.getAttribute("data-slot")).toBe("sheet-content");
     expect(dialog.getAttribute("data-side")).toBe("right");
@@ -418,23 +440,38 @@ describe("DropdownMenu", () => {
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="icon" aria-label="Actions" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent className={menuSurface}>
+        <DropdownMenuContent>
           <DropdownMenuItem>Check integrity of this connection</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>,
     );
     await user.click(screen.getByRole("button", { name: "Actions" }));
     const classes = (await screen.findByRole("menu")).className.split(" ");
-    // Canonical pins the surface to the trigger with
-    // `w-(--radix-dropdown-menu-trigger-width)`, which behind this icon-sized
-    // button is the 128px floor — long items wrap. `menuSurface` is in the same
-    // utility group, so tailwind-merge drops canonical's at render and the
-    // rendered class list is the assertion: this is the merge, not a hope about
-    // cascade order.
+    // The default sizes to items, not to the trigger: behind this icon-sized
+    // button, pinning to the trigger width would be a 128px ceiling that wraps
+    // every longer item. `min-w-32` is what is asserted below, surviving as
+    // the floor it was meant to be.
     expect(classes).toContain("w-auto");
     expect(classes).not.toContain("w-(--radix-dropdown-menu-trigger-width)");
     // The floor is a different group and survives, which is what keeps a
     // one-word menu from collapsing to its widest item.
     expect(classes).toContain("min-w-32");
   });
+
+  it("sizes to its items and leaves on the frame it is dismissed", async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Duplicate this model</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    const menu = await screen.findByRole("menu");
+    expect(menu.className).toContain("w-auto");
+    expect(menu.className).not.toContain("--radix-dropdown-menu-trigger-width");
+    expect(menu.className).not.toContain("data-closed:animate-out");
+  });
 });

package/src/{primitives → components}/dialog.tsx

@@ -1,32 +1,24 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 
-import { cn } from "../lib/cn.js"
-import { Button } from "./button.js"
-import { XIcon } from "lucide-react"
+import { cn } from "cn";
+import { Button } from "./button.js";
+import { XIcon } from "lucide-react";
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -38,11 +30,11 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -51,7 +43,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal>
@@ -60,37 +52,28 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
+          className,
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close data-slot="dialog-close" asChild>
-            <Button
-              variant="ghost"
-              className="absolute top-2 right-2"
-              size="icon-sm"
-            >
-              <XIcon
-              />
+            <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+              <XIcon />
               <span className="sr-only">Close</span>
             </Button>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
+    <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
+  );
 }
 
 function DialogFooter({
@@ -99,14 +82,14 @@ function DialogFooter({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
         "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     >
@@ -117,23 +100,17 @@ function DialogFooter({
         </DialogPrimitive.Close>
       )}
     </div>
-  )
+  );
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "font-heading text-base leading-none font-medium",
-        className
-      )}
+      className={cn("font-heading text-base leading-none font-medium", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -145,11 +122,11 @@ function DialogDescription({
       data-slot="dialog-description"
       className={cn(
         "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -163,4 +140,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};