@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/tabs/tabs.test.tsx

@@ -1,148 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Tabs, TabsContent, TabsList, TabsTrigger, type TabsListProps } from "./tabs";
-
-function Example({
-  variant,
-  onValueChange,
-  activationMode,
-}: {
-  variant?: TabsListProps["variant"];
-  onValueChange?: (value: string) => void;
-  activationMode?: "automatic" | "manual";
-} = {}) {
-  return (
-    <Tabs defaultValue="account" onValueChange={onValueChange} activationMode={activationMode}>
-      <TabsList variant={variant}>
-        <TabsTrigger value="account" variant={variant}>
-          Account
-        </TabsTrigger>
-        <TabsTrigger value="password" variant={variant}>
-          Password
-        </TabsTrigger>
-        <TabsTrigger value="team" variant={variant} disabled>
-          Team
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">Account panel</TabsContent>
-      <TabsContent value="password">Password panel</TabsContent>
-      <TabsContent value="team">Team panel</TabsContent>
-    </Tabs>
-  );
-}
-
-describe("Tabs", () => {
-  it("shows only the active panel", () => {
-    render(<Example />);
-    expect(screen.getByText("Account panel")).toBeInTheDocument();
-    expect(screen.queryByText("Password panel")).not.toBeInTheDocument();
-  });
-
-  it("marks the active tab as selected", () => {
-    render(<Example />);
-    expect(screen.getByRole("tab", { name: "Account" })).toHaveAttribute(
-      "aria-selected",
-      "true",
-    );
-    expect(screen.getByRole("tab", { name: "Password" })).toHaveAttribute(
-      "aria-selected",
-      "false",
-    );
-  });
-
-  it("switches panels on click", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("tab", { name: "Password" }));
-    expect(screen.getByText("Password panel")).toBeInTheDocument();
-    expect(screen.queryByText("Account panel")).not.toBeInTheDocument();
-  });
-
-  it("moves between tabs with the arrow keys", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("tab", { name: "Account" }));
-    await user.keyboard("{ArrowRight}");
-
-    expect(screen.getByRole("tab", { name: "Password" })).toHaveFocus();
-    expect(screen.getByText("Password panel")).toBeInTheDocument();
-  });
-
-  it("keeps only the active tab in the tab sequence", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    expect(screen.getByRole("tab", { name: "Account" })).toHaveFocus();
-
-    // A second Tab leaves the tablist entirely rather than visiting each tab.
-    await user.tab();
-    expect(screen.getByRole("tab", { name: "Password" })).not.toHaveFocus();
-  });
-
-  it("skips disabled tabs when arrowing", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("tab", { name: "Password" }));
-    await user.keyboard("{ArrowRight}");
-
-    expect(screen.getByRole("tab", { name: "Team" })).not.toHaveFocus();
-  });
-
-  it("defers activation in manual mode", async () => {
-    const user = userEvent.setup();
-    render(<Example activationMode="manual" />);
-
-    await user.click(screen.getByRole("tab", { name: "Account" }));
-    await user.keyboard("{ArrowRight}");
-
-    expect(screen.getByRole("tab", { name: "Password" })).toHaveFocus();
-    expect(screen.getByText("Account panel")).toBeInTheDocument();
-
-    await user.keyboard("{Enter}");
-    expect(screen.getByText("Password panel")).toBeInTheDocument();
-  });
-
-  it("reports value changes", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onValueChange={onValueChange} />);
-
-    await user.click(screen.getByRole("tab", { name: "Password" }));
-    expect(onValueChange).toHaveBeenCalledWith("password");
-  });
-
-  it.each([
-    ["solid", "bg-muted"],
-    ["underline", "border-b"],
-  ] as const)("applies the %s list variant", (variant, expectedClass) => {
-    render(<Example variant={variant} />);
-    expect(screen.getByRole("tablist")).toHaveClass(expectedClass);
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(
-      <Tabs defaultValue="a">
-        <TabsList className="bg-card">
-          <TabsTrigger value="a">A</TabsTrigger>
-        </TabsList>
-        <TabsContent value="a">Panel</TabsContent>
-      </Tabs>,
-    );
-
-    const list = screen.getByRole("tablist");
-    expect(list).toHaveClass("bg-card");
-    expect(list).not.toHaveClass("bg-muted");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/toast/toast.stories.tsx

@@ -1,167 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "@/components/button";
-
-import { Toaster, type ToastPosition } from "./toast";
-import { toast } from "./toast-store";
-
-const meta = {
-  title: "Feedback/Toast",
-  component: Toaster,
-  args: { position: "bottom-right" },
-  argTypes: {
-    position: {
-      control: "select",
-      options: [
-        "top-left",
-        "top-center",
-        "top-right",
-        "bottom-left",
-        "bottom-center",
-        "bottom-right",
-      ] satisfies ToastPosition[],
-    },
-    duration: { control: { type: "number", min: 1000, max: 20000, step: 500 } },
-  },
-} satisfies Meta<typeof Toaster>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <>
-      <Button onClick={() => toast("Project created")}>Show toast</Button>
-      <Toaster {...args} />
-    </>
-  ),
-};
-
-export const Variants: Story = {
-  render: (args) => (
-    <>
-      <div className="flex flex-wrap gap-2">
-        <Button variant="outline" onClick={() => toast("Saved")}>
-          Default
-        </Button>
-        <Button variant="outline" onClick={() => toast.success("Deployment succeeded")}>
-          Success
-        </Button>
-        <Button variant="outline" onClick={() => toast.info("Build queued")}>
-          Info
-        </Button>
-        <Button variant="outline" onClick={() => toast.warning("Approaching your quota")}>
-          Warning
-        </Button>
-        <Button variant="outline" onClick={() => toast.error("Payment failed")}>
-          Error
-        </Button>
-      </div>
-      <Toaster {...args} />
-    </>
-  ),
-};
-
-export const WithDescription: Story = {
-  render: (args) => (
-    <>
-      <Button
-        onClick={() =>
-          toast.success("Project created", {
-            description: "acme-inc is ready. Deploy when you are.",
-          })
-        }
-      >
-        Show toast
-      </Button>
-      <Toaster {...args} />
-    </>
-  ),
-};
-
-/** An action needs alt text: "Undo" alone is meaningless once the toast is gone. */
-export const WithAction: Story = {
-  render: (args) => (
-    <>
-      <Button
-        onClick={() =>
-          toast("Message archived", {
-            action: {
-              label: "Undo",
-              altText: "Undo archiving the message",
-              onClick: () => toast.success("Message restored"),
-            },
-          })
-        }
-      >
-        Archive message
-      </Button>
-      <Toaster {...args} />
-    </>
-  ),
-};
-
-export const Persistent: Story = {
-  render: (args) => (
-    <>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.custom({
-            title: "Connection lost",
-            description: "Reconnecting…",
-            variant: "destructive",
-            duration: Infinity,
-          })
-        }
-      >
-        Show until dismissed
-      </Button>
-      <Toaster {...args} />
-    </>
-  ),
-};
-
-export const Promise: Story = {
-  render: (args) => (
-    <>
-      <Button
-        variant="outline"
-        onClick={() => {
-          const work = new window.Promise<string>((resolve) => {
-            window.setTimeout(() => {
-              resolve("acme-inc");
-            }, 1500);
-          });
-
-          void toast.promise(work, {
-            loading: "Creating project…",
-            success: (name) => `Created ${name}`,
-            error: "Could not create the project",
-          });
-        }}
-      >
-        Create project
-      </Button>
-      <Toaster {...args} />
-    </>
-  ),
-};
-
-export const Stacking: Story = {
-  render: (args) => (
-    <>
-      <Button
-        variant="outline"
-        onClick={() => {
-          for (let index = 1; index <= 6; index += 1) {
-            toast(`Event ${String(index)}`);
-          }
-        }}
-      >
-        Raise six toasts
-      </Button>
-      <Toaster {...args} />
-    </>
-  ),
-};

package/src/components/toast/toast.test.tsx

@@ -1,306 +0,0 @@
-import { act, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Toaster } from "./toast";
-import { TOAST_LIMIT, resetToasts, toast } from "./toast-store";
-
-afterEach(() => {
-  act(() => {
-    resetToasts();
-  });
-});
-
-function raise(fn: () => void) {
-  act(() => {
-    fn();
-  });
-}
-
-describe("toast store", () => {
-  it("returns the id it created", () => {
-    let id = "";
-    raise(() => {
-      id = toast("Saved");
-    });
-    expect(id).toMatch(/^toast-\d+$/);
-  });
-
-  it("honours an explicit id, replacing rather than duplicating", async () => {
-    render(<Toaster />);
-
-    raise(() => toast.custom({ id: "sync", title: "Syncing" }));
-    expect(await screen.findByText("Syncing")).toBeInTheDocument();
-
-    raise(() => toast.custom({ id: "sync", title: "Synced" }));
-    await waitFor(() => {
-      expect(screen.getByText("Synced")).toBeInTheDocument();
-    });
-    expect(screen.queryByText("Syncing")).not.toBeInTheDocument();
-  });
-
-  it("keeps only the most recent toasts", async () => {
-    render(<Toaster />);
-
-    raise(() => {
-      for (let index = 0; index < TOAST_LIMIT + 3; index += 1) {
-        toast(`Message ${String(index)}`);
-      }
-    });
-
-    await waitFor(() => {
-      expect(document.querySelectorAll("[data-slot='toast']")).toHaveLength(TOAST_LIMIT);
-    });
-    expect(screen.queryByText("Message 0")).not.toBeInTheDocument();
-    expect(screen.getByText(`Message ${String(TOAST_LIMIT + 2)}`)).toBeInTheDocument();
-  });
-
-  it("calls onDismiss when a toast is removed", () => {
-    const onDismiss = vi.fn();
-    let id = "";
-    raise(() => {
-      id = toast.custom({ title: "Saved", onDismiss });
-    });
-
-    raise(() => {
-      toast.dismiss(id);
-    });
-    expect(onDismiss).toHaveBeenCalledWith(id);
-  });
-
-  it("updates a toast in place", async () => {
-    render(<Toaster />);
-
-    let id = "";
-    raise(() => {
-      id = toast("Uploading");
-    });
-    await screen.findByText("Uploading");
-
-    raise(() => {
-      toast.update(id, { title: "Uploaded", variant: "success" });
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText("Uploaded")).toBeInTheDocument();
-    });
-    expect(document.querySelector("[data-slot='toast']")).toHaveClass("border-success/30");
-  });
-
-  it("exposes a helper per variant", async () => {
-    render(<Toaster />);
-
-    raise(() => {
-      toast.default("Plain");
-      toast.info("Informational");
-    });
-
-    expect(await screen.findByText("Plain")).toBeInTheDocument();
-    expect(screen.getByText("Informational")).toBeInTheDocument();
-  });
-
-  it("dismisses everything at once", async () => {
-    render(<Toaster />);
-
-    raise(() => {
-      toast("One");
-      toast("Two");
-    });
-    await screen.findByText("One");
-
-    raise(() => {
-      toast.dismissAll();
-    });
-    await waitFor(() => {
-      expect(screen.queryByText("One")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("promise", () => {
-    it("resolves the pending toast into a success toast", async () => {
-      render(<Toaster />);
-
-      let resolve!: (value: string) => void;
-      const pending = new Promise<string>((r) => {
-        resolve = r;
-      });
-
-      raise(() => {
-        void toast.promise(pending, {
-          loading: "Saving…",
-          success: (value) => `Saved ${value}`,
-          error: "Failed",
-        });
-      });
-
-      expect(await screen.findByText("Saving…")).toBeInTheDocument();
-
-      await act(async () => {
-        resolve("project");
-        await pending;
-      });
-
-      await waitFor(() => {
-        expect(screen.getByText("Saved project")).toBeInTheDocument();
-      });
-    });
-
-    it("turns a rejection into an error toast and still rejects", async () => {
-      render(<Toaster />);
-
-      const failure = new Error("network");
-      const pending = Promise.reject(failure);
-
-      let returned!: Promise<never>;
-      raise(() => {
-        returned = toast.promise(pending, {
-          loading: "Saving…",
-          success: "Saved",
-          error: (error) => `Failed: ${(error as Error).message}`,
-        });
-      });
-
-      // The original promise is returned untouched, so callers still handle it.
-      await expect(returned).rejects.toThrow("network");
-      await waitFor(() => {
-        expect(screen.getByText("Failed: network")).toBeInTheDocument();
-      });
-    });
-  });
-});
-
-describe("Toaster", () => {
-  it("renders nothing until a toast is raised", () => {
-    render(<Toaster />);
-    expect(document.querySelector("[data-slot='toast']")).not.toBeInTheDocument();
-  });
-
-  it("renders a title and description", async () => {
-    render(<Toaster />);
-    raise(() => toast("Project created", { description: "It is ready to use." }));
-
-    expect(await screen.findByText("Project created")).toBeInTheDocument();
-    expect(screen.getByText("It is ready to use.")).toBeInTheDocument();
-  });
-
-  it.each([
-    ["success", "border-success/30"],
-    ["warning", "border-warning/35"],
-    ["destructive", "border-destructive/30"],
-    ["info", "border-info/30"],
-  ] as const)("applies the %s variant", async (variant, expectedClass) => {
-    render(<Toaster />);
-    raise(() => toast.custom({ title: "Message", variant }));
-    await screen.findByText("Message");
-
-    expect(document.querySelector("[data-slot='toast']")).toHaveClass(expectedClass);
-  });
-
-  it("interrupts for problems and waits for a pause otherwise", async () => {
-    render(<Toaster />);
-
-    raise(() => toast.error("Payment failed"));
-    const problem = await screen.findByText("Payment failed");
-    expect(problem.closest("[data-slot='toast']")).toHaveAttribute("data-type", "foreground");
-
-    raise(() => toast.success("Saved"));
-    const routine = await screen.findByText("Saved");
-    expect(routine.closest("[data-slot='toast']")).toHaveAttribute("data-type", "background");
-  });
-
-  it("announces a problem assertively through a live region", async () => {
-    render(<Toaster />);
-    raise(() => toast.error("Payment failed"));
-
-    const announcement = await screen.findByRole("status");
-    expect(announcement).toHaveAttribute("aria-live", "assertive");
-    // The primitive mounts the region first and fills it on a later tick.
-    await waitFor(() => {
-      expect(announcement).toHaveTextContent("Payment failed");
-    });
-  });
-
-  it("dismisses from the close button", async () => {
-    const user = userEvent.setup();
-    render(<Toaster />);
-    raise(() => toast("Saved"));
-    await screen.findByText("Saved");
-
-    await user.click(screen.getByRole("button", { name: "Dismiss" }));
-    await waitFor(() => {
-      expect(screen.queryByText("Saved")).not.toBeInTheDocument();
-    });
-  });
-
-  it("runs an action and exposes alt text for screen readers", async () => {
-    const onClick = vi.fn();
-    const user = userEvent.setup();
-    render(<Toaster />);
-
-    raise(() =>
-      toast.custom({
-        title: "Message archived",
-        action: { label: "Undo", altText: "Undo archiving the message", onClick },
-      }),
-    );
-
-    const action = await screen.findByRole("button", { name: "Undo" });
-    // The primitive announces the alt text in place of the visible label, since
-    // "Undo" alone is meaningless once the toast is gone.
-    expect(action).toHaveAttribute(
-      "data-radix-toast-announce-alt",
-      "Undo archiving the message",
-    );
-    const announcement = await screen.findByRole("status");
-    await waitFor(() => {
-      expect(announcement).toHaveTextContent("Undo archiving the message");
-    });
-
-    await user.click(action);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("falls back to the action label for alt text", async () => {
-    render(<Toaster />);
-    raise(() =>
-      toast.custom({
-        title: "Message archived",
-        action: { label: "Undo", onClick: () => undefined },
-      }),
-    );
-
-    expect(await screen.findByRole("button", { name: "Undo" })).toHaveAttribute(
-      "data-radix-toast-announce-alt",
-      "Undo",
-    );
-  });
-
-  it.each([
-    ["top-left", "top-0"],
-    ["bottom-right", "bottom-0"],
-    ["bottom-center", "left-1/2"],
-  ] as const)("positions the viewport for %s", async (position, expectedClass) => {
-    const { baseElement } = render(<Toaster position={position} />);
-    raise(() => toast("Message"));
-    await screen.findByText("Message");
-
-    expect(baseElement.querySelector("[data-slot='toast-viewport']")).toHaveClass(
-      expectedClass,
-    );
-  });
-
-  it("has no accessibility violations", async () => {
-    const { baseElement } = render(<Toaster />);
-    raise(() =>
-      toast.custom({
-        title: "Project created",
-        description: "It is ready to use.",
-        action: { label: "View", onClick: () => undefined },
-      }),
-    );
-    await screen.findByText("Project created");
-
-    await expectNoA11yViolations(baseElement);
-  });
-});

package/src/components/tooltip/tooltip.stories.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Bold, Italic, Underline } from "lucide-react";
-
-import { Button } from "@/components/button";
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
-
-const meta = {
-  title: "Overlays/Tooltip",
-  component: Tooltip,
-  args: { delayDuration: 200 },
-  argTypes: {
-    delayDuration: { control: { type: "number", min: 0, max: 1000, step: 50 } },
-  },
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Tooltip {...args}>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Hover or focus me</Button>
-      </TooltipTrigger>
-      <TooltipContent>Deploys the current branch</TooltipContent>
-    </Tooltip>
-  ),
-};
-
-/**
- * On an icon-only control the accessible name comes from aria-label. The
- * tooltip repeats it visually; it does not supply it.
- */
-export const IconButtons: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <TooltipProvider delayDuration={150}>
-      <div className="flex items-center gap-1">
-        {[
-          { icon: Bold, label: "Bold" },
-          { icon: Italic, label: "Italic" },
-          { icon: Underline, label: "Underline" },
-        ].map(({ icon: Icon, label }) => (
-          <Tooltip key={label}>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" aria-label={label}>
-                <Icon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{label}</TooltipContent>
-          </Tooltip>
-        ))}
-      </div>
-    </TooltipProvider>
-  ),
-};
-
-export const Sides: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <TooltipProvider delayDuration={0}>
-      <div className="flex flex-wrap gap-3">
-        {(["top", "right", "bottom", "left"] as const).map((side) => (
-          <Tooltip key={side}>
-            <TooltipTrigger asChild>
-              <Button variant="outline">{side}</Button>
-            </TooltipTrigger>
-            <TooltipContent side={side}>Anchored {side}</TooltipContent>
-          </Tooltip>
-        ))}
-      </div>
-    </TooltipProvider>
-  ),
-};
-
-export const LongText: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Tooltip delayDuration={0}>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Retention</Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        Logs are kept for 30 days on the current plan, then aggregated into daily summaries.
-      </TooltipContent>
-    </Tooltip>
-  ),
-};