@dowel-ui/react 0.1.0

package/src/components/dropdown-menu/dropdown-menu.test.tsx

@@ -0,0 +1,321 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Button } from "../button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+function Example({ onSelect }: { onSelect?: () => void } = {}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button>Actions</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onSelect={onSelect}>
+          Profile
+          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>Billing</DropdownMenuItem>
+        <DropdownMenuItem variant="destructive">Delete account</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+describe("DropdownMenu", () => {
+  it("is closed until the trigger is activated", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    expect(await screen.findByRole("menu")).toBeInTheDocument();
+  });
+
+  it("reports its state on the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    const trigger = screen.getByRole("button", { name: "Actions" });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+    });
+  });
+
+  it("opens from the keyboard and focuses the first item", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+
+    await waitFor(() => {
+      expect(screen.getByRole("menuitem", { name: /Profile/ })).toHaveFocus();
+    });
+  });
+
+  it("moves between items with the arrow keys, skipping disabled ones", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    await screen.findByRole("menu");
+
+    await user.keyboard("{ArrowDown}");
+    await waitFor(() => {
+      expect(screen.getByRole("menuitem", { name: /Profile/ })).toHaveFocus();
+    });
+
+    await user.keyboard("{ArrowDown}");
+    await waitFor(() => {
+      expect(screen.getByRole("menuitem", { name: "Delete account" })).toHaveFocus();
+    });
+  });
+
+  it("selects an item and closes", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    render(<Example onSelect={onSelect} />);
+
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    await user.click(await screen.findByRole("menuitem", { name: /Profile/ }));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+
+  it("does not select a disabled item", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    const billing = await screen.findByRole("menuitem", { name: "Billing" });
+
+    expect(billing).toHaveAttribute("data-disabled");
+    await user.click(billing);
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+  });
+
+  it("closes on Escape and restores focus to the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    const trigger = screen.getByRole("button", { name: "Actions" });
+    await user.click(trigger);
+    await screen.findByRole("menu");
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveFocus();
+    });
+  });
+
+  it("marks a destructive item for styling", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    const item = await screen.findByRole("menuitem", { name: "Delete account" });
+    expect(item).toHaveAttribute("data-variant", "destructive");
+    expect(item).toHaveClass("text-destructive");
+  });
+
+  it("hides the shortcut hint from assistive technology", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    await screen.findByRole("menu");
+
+    const shortcut = baseElement.querySelector("[data-slot='dropdown-menu-shortcut']");
+    expect(shortcut).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("toggles a checkbox item", async () => {
+    const user = userEvent.setup();
+
+    function WithCheckbox() {
+      const [checked, setChecked] = useState(false);
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger>View</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Status bar
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+
+    render(<WithCheckbox />);
+    await user.click(screen.getByText("View"));
+
+    const item = await screen.findByRole("menuitemcheckbox", { name: "Status bar" });
+    expect(item).toHaveAttribute("aria-checked", "false");
+
+    await user.click(item);
+    await user.click(screen.getByText("View"));
+    await waitFor(() => {
+      expect(screen.getByRole("menuitemcheckbox", { name: "Status bar" })).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+    });
+  });
+
+  it("selects a radio item", async () => {
+    const user = userEvent.setup();
+
+    function WithRadio() {
+      const [value, setValue] = useState("light");
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger>Theme</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
+              <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+
+    render(<WithRadio />);
+    await user.click(screen.getByText("Theme"));
+    expect(await screen.findByRole("menuitemradio", { name: "Light" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+
+    await user.click(screen.getByRole("menuitemradio", { name: "Dark" }));
+    await user.click(screen.getByText("Theme"));
+    await waitFor(() => {
+      expect(screen.getByRole("menuitemradio", { name: "Dark" })).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+    });
+  });
+
+  describe("submenus", () => {
+    function WithSubmenu() {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger>Share</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Copy link</DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Invite people</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>By email</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+
+    it("opens a submenu with the right arrow key", async () => {
+      const user = userEvent.setup();
+      render(<WithSubmenu />);
+
+      await user.click(screen.getByText("Share"));
+      await screen.findByRole("menu");
+
+      const subTrigger = screen.getByRole("menuitem", { name: "Invite people" });
+      expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+
+      subTrigger.focus();
+      await user.keyboard("{ArrowRight}");
+
+      await waitFor(() => {
+        expect(screen.getByRole("menuitem", { name: "By email" })).toBeInTheDocument();
+      });
+      expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+    });
+
+    it("closes a submenu with the left arrow key", async () => {
+      const user = userEvent.setup();
+      render(<WithSubmenu />);
+
+      await user.click(screen.getByText("Share"));
+      const subTrigger = await screen.findByRole("menuitem", { name: "Invite people" });
+
+      subTrigger.focus();
+      await user.keyboard("{ArrowRight}");
+      await screen.findByRole("menuitem", { name: "By email" });
+
+      await user.keyboard("{ArrowLeft}");
+      await waitFor(() => {
+        expect(screen.queryByRole("menuitem", { name: "By email" })).not.toBeInTheDocument();
+      });
+    });
+
+    it("has no accessibility violations with a submenu open", async () => {
+      const user = userEvent.setup();
+      const { baseElement } = render(<WithSubmenu />);
+
+      await user.click(screen.getByText("Share"));
+      const subTrigger = await screen.findByRole("menuitem", { name: "Invite people" });
+      subTrigger.focus();
+      await user.keyboard("{ArrowRight}");
+      await screen.findByRole("menuitem", { name: "By email" });
+
+      await expectNoA11yViolations(baseElement);
+    });
+  });
+
+  it("merges a consumer className on the content", async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent className="w-64">
+          <DropdownMenuItem>Item</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    await user.click(screen.getByText("Open"));
+    expect(await screen.findByRole("menu")).toHaveClass("w-64");
+  });
+
+  it("has no accessibility violations while open", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    await screen.findByRole("menu");
+
+    await expectNoA11yViolations(baseElement);
+  });
+});

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A menu of actions revealed from a trigger.
+ *
+ * Actions, not navigation and not form state: a menu item does something. For a
+ * list of links use a nav, and for a value the user picks from use Select
+ * (Phase 3) — the roles differ and assistive technology treats them differently.
+ */
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+/** Shared surface styling for the root menu and every submenu. */
+const menuSurface = cn(
+  "z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border",
+  "bg-popover p-1 text-popover-foreground shadow-lg outline-none",
+  "max-h-[var(--radix-dropdown-menu-content-available-height)]",
+  "origin-[var(--radix-dropdown-menu-content-transform-origin)]",
+  "data-[state=closed]:animate-float-out data-[state=open]:animate-float-in",
+);
+
+/** Shared item styling. Highlight follows data-highlighted, which the primitive
+ * drives from both pointer and keyboard, so the two never disagree. */
+const menuItem = cn(
+  "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
+  "transition-colors duration-[var(--duration-instant)]",
+  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+);
+
+export type DropdownMenuContentProps = ComponentPropsWithRef<
+  typeof DropdownMenuPrimitive.Content
+>;
+
+export function DropdownMenuContent({
+  className,
+  sideOffset = 6,
+  ...props
+}: DropdownMenuContentProps) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(menuSurface, className)}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+export interface DropdownMenuItemProps extends ComponentPropsWithRef<
+  typeof DropdownMenuPrimitive.Item
+> {
+  /** Styles the item as destructive. Pair with a label that says what is destroyed. */
+  variant?: "default" | "destructive";
+  /** Indents the item to align with items that have a leading indicator. */
+  inset?: boolean;
+}
+
+export function DropdownMenuItem({
+  className,
+  variant = "default",
+  inset,
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      className={cn(
+        menuItem,
+        inset && "pl-8",
+        variant === "destructive" &&
+          "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Tick shown by checkbox and radio items. Decorative: the state is already in
+ * aria-checked, so announcing it twice would be noise. */
+function ItemIndicator({ radio = false }: { radio?: boolean }) {
+  return (
+    <span className="pointer-events-none absolute left-2 grid size-4 place-items-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        {radio ? (
+          <span className="size-2 rounded-full bg-current" />
+        ) : (
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
+            <path
+              d="m5 13 4 4L19 7"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+  );
+}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(menuItem, "pl-8", className)}
+      {...props}
+    >
+      <ItemIndicator />
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(menuItem, "pl-8", className)}
+      {...props}
+    >
+      <ItemIndicator radio />
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+export interface DropdownMenuLabelProps extends ComponentPropsWithRef<
+  typeof DropdownMenuPrimitive.Label
+> {
+  inset?: boolean;
+}
+
+export function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it
+ * for real at the application level. */
+export function DropdownMenuShortcut({ className, ...props }: ComponentPropsWithRef<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      aria-hidden="true"
+      className={cn("ml-auto text-2xs tracking-wide text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export interface DropdownMenuSubTriggerProps extends ComponentPropsWithRef<
+  typeof DropdownMenuPrimitive.SubTrigger
+> {
+  inset?: boolean;
+}
+
+export function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(menuItem, "data-[state=open]:bg-accent", inset && "pl-8", className)}
+      {...props}
+    >
+      {children}
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="ml-auto size-3.5">
+        <path
+          d="m9 18 6-6-6-6"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+export function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        data-slot="dropdown-menu-sub-content"
+        className={cn(menuSurface, className)}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1,21 @@
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuLabelProps,
+  type DropdownMenuSubTriggerProps,
+} from "./dropdown-menu";

package/src/components/dropdown-menu/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "dropdown-menu",
+  title: "Dropdown Menu",
+  description: "A menu of actions revealed from a trigger, with submenus and selectable items.",
+  category: "overlay",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["dropdown-menu.tsx"],
+  a11y:
+    "Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes " +
+    "and restores focus, Right/Left open and close submenus. Highlight is driven by " +
+    "data-highlighted so pointer and keyboard focus never diverge. Use it for actions — links " +
+    "belong in a nav, and value selection belongs in Select.",
+});

package/src/components/empty-state/empty-state.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FolderPlus, Search } from "lucide-react";
+
+import { Button } from "@/components/button";
+
+import {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateDescription,
+  EmptyStateIcon,
+  EmptyStateTitle,
+} from "./empty-state";
+
+const meta = {
+  title: "Feedback/Empty State",
+  component: EmptyState,
+  args: { size: "md", bordered: true },
+  argTypes: {
+    size: { control: "inline-radio", options: ["sm", "md", "lg"] },
+    bordered: { control: "boolean" },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Nothing created yet: this is where a call to action belongs. */
+export const NothingYet: Story = {
+  render: (args) => (
+    <EmptyState className="w-96" {...args}>
+      <EmptyStateIcon>
+        <FolderPlus />
+      </EmptyStateIcon>
+      <EmptyStateTitle>No projects yet</EmptyStateTitle>
+      <EmptyStateDescription>
+        Projects group your deployments and environments. Create one to get started.
+      </EmptyStateDescription>
+      <EmptyStateActions>
+        <Button>New project</Button>
+        <Button variant="outline">Import from Git</Button>
+      </EmptyStateActions>
+    </EmptyState>
+  ),
+};
+
+/** Nothing matched a search: a different message, and a different next step. */
+export const NoResults: Story = {
+  render: (args) => (
+    <EmptyState className="w-96" {...args}>
+      <EmptyStateIcon>
+        <Search />
+      </EmptyStateIcon>
+      <EmptyStateTitle>No results for “analytics”</EmptyStateTitle>
+      <EmptyStateDescription>
+        Check the spelling, or try a broader search term.
+      </EmptyStateDescription>
+      <EmptyStateActions>
+        <Button variant="outline">Clear filters</Button>
+      </EmptyStateActions>
+    </EmptyState>
+  ),
+};
+
+export const Minimal: Story = {
+  render: (args) => (
+    <EmptyState className="w-96" {...args}>
+      <EmptyStateTitle>Nothing here</EmptyStateTitle>
+    </EmptyState>
+  ),
+};