@dowel-ui/react 0.1.0 → 0.2.0

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

@@ -1,128 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CreditCard, LogOut, Settings, User } from "lucide-react";
-import { useState } from "react";
-
-import { Button } from "@/components/button";
-
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "./dropdown-menu";
-
-/**
- * Annotated rather than inferred with `satisfies`. These components are direct
- * re-exports of Radix primitives, and inferring the meta type makes the emitted
- * declaration reference Radix-internal prop types that are not nameable from
- * this path (TS2883).
- */
-const meta: Meta<typeof DropdownMenu> = {
-  title: "Overlays/Dropdown Menu",
-  component: DropdownMenu,
-  parameters: { controls: { disable: true } },
-};
-
-export default meta;
-type Story = StoryObj<typeof DropdownMenu>;
-
-export const Default: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="start">
-        <DropdownMenuLabel>My account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <User />
-            Profile
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CreditCard />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Settings />
-            Settings
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem variant="destructive">
-          <LogOut />
-          Sign out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
-
-export const WithSubmenu: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Share</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-52" align="start">
-        <DropdownMenuItem>Copy link</DropdownMenuItem>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>Invite people</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>By email</DropdownMenuItem>
-            <DropdownMenuItem>By username</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>Create invite link</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem disabled>Publish to web</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
-
-export const Selectable: Story = {
-  render: function Selectable() {
-    const [showStatusBar, setShowStatusBar] = useState(true);
-    const [showPanel, setShowPanel] = useState(false);
-    const [position, setPosition] = useState("bottom");
-
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">View</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56" align="start">
-          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
-            Status bar
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
-            Activity panel
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>Panel position</DropdownMenuLabel>
-          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-};

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

@@ -1,321 +0,0 @@
-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/empty-state/empty-state.stories.tsx

@@ -1,70 +0,0 @@
-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>
-  ),
-};

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

@@ -1,97 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Button } from "../button";
-import {
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateDescription,
-  EmptyStateIcon,
-  EmptyStateTitle,
-} from "./empty-state";
-
-describe("EmptyState", () => {
-  it("renders its parts", () => {
-    render(
-      <EmptyState>
-        <EmptyStateIcon>
-          <svg />
-        </EmptyStateIcon>
-        <EmptyStateTitle>No projects yet</EmptyStateTitle>
-        <EmptyStateDescription>Create one to get started.</EmptyStateDescription>
-        <EmptyStateActions>
-          <Button>New project</Button>
-        </EmptyStateActions>
-      </EmptyState>,
-    );
-
-    expect(screen.getByText("No projects yet")).toBeInTheDocument();
-    expect(screen.getByText("Create one to get started.")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "New project" })).toBeInTheDocument();
-  });
-
-  it("hides the icon from assistive technology", () => {
-    const { container } = render(
-      <EmptyState>
-        <EmptyStateIcon>
-          <svg />
-        </EmptyStateIcon>
-        <EmptyStateTitle>Nothing here</EmptyStateTitle>
-      </EmptyState>,
-    );
-
-    expect(container.querySelector("[data-slot='empty-state-icon']")).toHaveAttribute(
-      "aria-hidden",
-      "true",
-    );
-  });
-
-  it.each([
-    ["sm", "py-8"],
-    ["md", "py-12"],
-    ["lg", "py-20"],
-  ] as const)("applies the %s size", (size, expectedClass) => {
-    const { container } = render(
-      <EmptyState size={size}>
-        <EmptyStateTitle>Nothing</EmptyStateTitle>
-      </EmptyState>,
-    );
-    expect(container.firstElementChild).toHaveClass(expectedClass);
-  });
-
-  it("can render a dashed border", () => {
-    const { container } = render(
-      <EmptyState bordered>
-        <EmptyStateTitle>Nothing</EmptyStateTitle>
-      </EmptyState>,
-    );
-    expect(container.firstElementChild).toHaveClass("border-dashed");
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    const { container } = render(
-      <EmptyState className="py-2">
-        <EmptyStateTitle>Nothing</EmptyStateTitle>
-      </EmptyState>,
-    );
-    expect(container.firstElementChild).toHaveClass("py-2");
-    expect(container.firstElementChild).not.toHaveClass("py-12");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <EmptyState bordered>
-        <EmptyStateIcon>
-          <svg />
-        </EmptyStateIcon>
-        <EmptyStateTitle>No results</EmptyStateTitle>
-        <EmptyStateDescription>Try a different search.</EmptyStateDescription>
-        <EmptyStateActions>
-          <Button variant="outline">Clear filters</Button>
-        </EmptyStateActions>
-      </EmptyState>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});