@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/alert/alert.stories.tsx

@@ -1,101 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
-
-import { Alert, AlertDescription, AlertTitle } from "./alert";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-96">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Feedback/Alert",
-  component: Alert,
-  args: { variant: "default", live: "off" },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "destructive", "success", "warning", "info"],
-    },
-    live: { control: "select", options: ["off", "polite", "assertive"] },
-  },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Alert {...args}>
-      <Info />
-      <AlertTitle>Heads up</AlertTitle>
-      <AlertDescription>Your trial ends in 3 days.</AlertDescription>
-    </Alert>
-  ),
-};
-
-export const Variants: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="space-y-3">
-      <Alert>
-        <Info />
-        <AlertTitle>Heads up</AlertTitle>
-        <AlertDescription>Your trial ends in 3 days.</AlertDescription>
-      </Alert>
-      <Alert variant="success">
-        <CircleCheck />
-        <AlertTitle>Deployment succeeded</AlertTitle>
-        <AlertDescription>Build 1420 is live in production.</AlertDescription>
-      </Alert>
-      <Alert variant="warning">
-        <TriangleAlert />
-        <AlertTitle>Approaching your quota</AlertTitle>
-        <AlertDescription>You have used 92% of your monthly builds.</AlertDescription>
-      </Alert>
-      <Alert variant="destructive">
-        <CircleAlert />
-        <AlertTitle>Payment failed</AlertTitle>
-        <AlertDescription>Update your card to keep your workspace active.</AlertDescription>
-      </Alert>
-    </div>
-  ),
-};
-
-export const WithoutIcon: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Alert>
-      <AlertTitle>Scheduled maintenance</AlertTitle>
-      <AlertDescription>Deployments pause on Sunday from 02:00 to 04:00 UTC.</AlertDescription>
-    </Alert>
-  ),
-};
-
-export const TitleOnly: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Alert variant="info">
-      <Info />
-      <AlertTitle>Two-factor authentication is now required.</AlertTitle>
-    </Alert>
-  ),
-};
-
-/**
- * An alert that appears in response to a user action should announce itself.
- * The default `live="off"` avoids announcing notices that were already on screen.
- */
-export const LiveRegion: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Alert live="assertive" variant="destructive">
-      <CircleAlert />
-      <AlertTitle>Could not save changes</AlertTitle>
-      <AlertDescription>Check your connection and try again.</AlertDescription>
-    </Alert>
-  ),
-};

package/src/components/alert/alert.test.tsx

@@ -1,94 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Alert, AlertDescription, AlertTitle } from "./alert";
-
-describe("Alert", () => {
-  it("renders its title and description", () => {
-    render(
-      <Alert>
-        <AlertTitle>Heads up</AlertTitle>
-        <AlertDescription>Your trial ends in 3 days.</AlertDescription>
-      </Alert>,
-    );
-
-    expect(screen.getByText("Heads up")).toBeInTheDocument();
-    expect(screen.getByText("Your trial ends in 3 days.")).toBeInTheDocument();
-  });
-
-  it("is not a live region by default", () => {
-    render(
-      <Alert data-testid="alert">
-        <AlertTitle>Heads up</AlertTitle>
-      </Alert>,
-    );
-
-    const alert = screen.getByTestId("alert");
-    expect(alert).not.toHaveAttribute("role");
-    expect(alert).not.toHaveAttribute("aria-live");
-    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
-  });
-
-  it("becomes a polite status region when live is polite", () => {
-    render(
-      <Alert live="polite">
-        <AlertTitle>Saved</AlertTitle>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole("status");
-    expect(alert).toHaveAttribute("aria-live", "polite");
-  });
-
-  it("becomes an assertive alert region when live is assertive", () => {
-    render(
-      <Alert live="assertive" variant="destructive">
-        <AlertTitle>Payment failed</AlertTitle>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole("alert");
-    expect(alert).toHaveAttribute("aria-live", "assertive");
-  });
-
-  it.each([
-    ["default", "bg-card"],
-    ["destructive", "bg-destructive/8"],
-    ["success", "bg-success/8"],
-    ["warning", "bg-warning/10"],
-    ["info", "bg-info/8"],
-  ] as const)("applies the %s variant", (variant, expectedClass) => {
-    render(
-      <Alert variant={variant} data-testid="alert">
-        <AlertTitle>Title</AlertTitle>
-      </Alert>,
-    );
-    expect(screen.getByTestId("alert")).toHaveClass(expectedClass);
-  });
-
-  it("merges a consumer className", () => {
-    render(
-      <Alert className="mt-8" data-testid="alert">
-        <AlertTitle>Title</AlertTitle>
-      </Alert>,
-    );
-    expect(screen.getByTestId("alert")).toHaveClass("mt-8");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <>
-        <Alert>
-          <AlertTitle>Heads up</AlertTitle>
-          <AlertDescription>Your trial ends in 3 days.</AlertDescription>
-        </Alert>
-        <Alert live="assertive" variant="destructive">
-          <AlertTitle>Payment failed</AlertTitle>
-          <AlertDescription>Update your card to continue.</AlertDescription>
-        </Alert>
-      </>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/avatar/avatar.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
-
-const meta = {
-  title: "Display/Avatar",
-  component: Avatar,
-  args: { size: "md" },
-  argTypes: { size: { control: "select", options: ["xs", "sm", "md", "lg", "xl"] } },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Avatar {...args}>
-      <AvatarImage src="https://i.pravatar.cc/128?img=12" alt="Ada Lovelace" />
-      <AvatarFallback>AL</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-/** The fallback is what renders when the image is missing, slow or broken. */
-export const Fallback: Story = {
-  render: (args) => (
-    <Avatar {...args}>
-      <AvatarImage src="/does-not-exist.png" alt="Grace Hopper" />
-      <AvatarFallback>GH</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-3">
-      {(["xs", "sm", "md", "lg", "xl"] as const).map((size) => (
-        <Avatar key={size} size={size}>
-          <AvatarFallback>AL</AvatarFallback>
-        </Avatar>
-      ))}
-    </div>
-  ),
-};
-
-export const Group: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex -space-x-2">
-      {["AL", "GH", "KJ", "RM"].map((initials) => (
-        <Avatar key={initials} size="sm" className="ring-2 ring-background">
-          <AvatarFallback>{initials}</AvatarFallback>
-        </Avatar>
-      ))}
-    </div>
-  ),
-};

package/src/components/avatar/avatar.test.tsx

@@ -1,64 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
-
-describe("Avatar", () => {
-  it("shows the fallback while the image has not loaded", async () => {
-    render(
-      <Avatar>
-        <AvatarImage src="/nope.png" alt="Ada Lovelace" />
-        <AvatarFallback>AL</AvatarFallback>
-      </Avatar>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText("AL")).toBeInTheDocument();
-    });
-  });
-
-  it("renders the fallback alone when there is no image", () => {
-    render(
-      <Avatar>
-        <AvatarFallback>AL</AvatarFallback>
-      </Avatar>,
-    );
-    expect(screen.getByText("AL")).toBeInTheDocument();
-  });
-
-  it.each([
-    ["xs", "size-6"],
-    ["sm", "size-8"],
-    ["md", "size-10"],
-    ["lg", "size-12"],
-    ["xl", "size-16"],
-  ] as const)("applies the %s size", (size, expectedClass) => {
-    render(
-      <Avatar size={size} data-testid="avatar">
-        <AvatarFallback>AL</AvatarFallback>
-      </Avatar>,
-    );
-    expect(screen.getByTestId("avatar")).toHaveClass(expectedClass);
-  });
-
-  it("lets a consumer className override the size", () => {
-    render(
-      <Avatar className="size-24" data-testid="avatar">
-        <AvatarFallback>AL</AvatarFallback>
-      </Avatar>,
-    );
-    const avatar = screen.getByTestId("avatar");
-    expect(avatar).toHaveClass("size-24");
-    expect(avatar).not.toHaveClass("size-10");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <Avatar>
-        <AvatarFallback>AL</AvatarFallback>
-      </Avatar>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/badge/badge.stories.tsx

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check } from "lucide-react";
-
-import { Badge } from "./badge";
-
-const meta = {
-  title: "Display/Badge",
-  component: Badge,
-  args: { children: "Active", variant: "default", size: "md" },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "secondary", "outline", "destructive", "success", "warning", "info"],
-    },
-    size: { control: "select", options: ["sm", "md"] },
-    asChild: { table: { disable: true } },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Variants: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap items-center gap-2">
-      <Badge>Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="outline">Outline</Badge>
-      <Badge variant="destructive">Failed</Badge>
-      <Badge variant="success">Deployed</Badge>
-      <Badge variant="warning">Degraded</Badge>
-      <Badge variant="info">Queued</Badge>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-2">
-      <Badge size="sm">Small</Badge>
-      <Badge size="md">Medium</Badge>
-    </div>
-  ),
-};
-
-export const WithIcon: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Badge variant="success">
-      <Check />
-      Verified
-    </Badge>
-  ),
-};
-
-export const AsLink: Story = {
-  name: "asChild (renders a link)",
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Badge asChild variant="outline">
-      <a href="#status">View status</a>
-    </Badge>
-  ),
-};

package/src/components/badge/badge.test.tsx

@@ -1,61 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Badge } from "./badge";
-
-describe("Badge", () => {
-  it("renders its label", () => {
-    render(<Badge>Active</Badge>);
-    expect(screen.getByText("Active")).toBeInTheDocument();
-  });
-
-  it.each([
-    ["default", "bg-primary"],
-    ["secondary", "bg-secondary"],
-    ["outline", "border-border-strong"],
-    ["destructive", "bg-destructive"],
-    ["success", "bg-success"],
-    ["warning", "bg-warning"],
-    ["info", "bg-info"],
-  ] as const)("applies the %s variant", (variant, expectedClass) => {
-    render(<Badge variant={variant}>Label</Badge>);
-    expect(screen.getByText("Label")).toHaveClass(expectedClass);
-  });
-
-  it.each([
-    ["sm", "h-5"],
-    ["md", "h-6"],
-  ] as const)("applies the %s size", (size, expectedClass) => {
-    render(<Badge size={size}>Label</Badge>);
-    expect(screen.getByText("Label")).toHaveClass(expectedClass);
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(<Badge className="bg-card">Label</Badge>);
-    const badge = screen.getByText("Label");
-    expect(badge).toHaveClass("bg-card");
-    expect(badge).not.toHaveClass("bg-primary");
-  });
-
-  it("renders as a link when asChild is set", () => {
-    render(
-      <Badge asChild>
-        <a href="/status">Active</a>
-      </Badge>,
-    );
-    const link = screen.getByRole("link", { name: "Active" });
-    expect(link).toHaveAttribute("href", "/status");
-    expect(link).toHaveClass("bg-primary");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <>
-        <Badge>Active</Badge>
-        <Badge variant="destructive">Failed</Badge>
-      </>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/button/button.stories.tsx

@@ -1,128 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ArrowRight, Plus, Trash2 } from "lucide-react";
-
-import { Button } from "./button";
-
-const meta = {
-  title: "Foundation/Button",
-  component: Button,
-  args: {
-    children: "Continue",
-    variant: "primary",
-    size: "md",
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "outline", "ghost", "destructive", "link"],
-    },
-    size: { control: "select", options: ["sm", "md", "lg", "icon", "icon-sm"] },
-    loading: { control: "boolean" },
-    disabled: { control: "boolean" },
-    asChild: { table: { disable: true } },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Variants: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="link">Link</Button>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button size="sm">Small</Button>
-      <Button size="md">Medium</Button>
-      <Button size="lg">Large</Button>
-      <Button size="icon" aria-label="Add item">
-        <Plus />
-      </Button>
-      <Button size="icon-sm" variant="outline" aria-label="Delete item">
-        <Trash2 />
-      </Button>
-    </div>
-  ),
-};
-
-export const WithIcons: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button>
-        <Plus />
-        New project
-      </Button>
-      <Button variant="outline">
-        Continue
-        <ArrowRight />
-      </Button>
-    </div>
-  ),
-};
-
-export const Loading: Story = {
-  args: { loading: true },
-};
-
-export const LoadingAcrossVariants: Story = {
-  name: "Loading (all variants)",
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button loading>Saving</Button>
-      <Button variant="secondary" loading>
-        Saving
-      </Button>
-      <Button variant="outline" loading>
-        Saving
-      </Button>
-      <Button variant="destructive" loading>
-        Deleting
-      </Button>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};
-
-export const AsLink: Story = {
-  name: "asChild (renders a link)",
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Button asChild>
-      <a href="#pricing">View pricing</a>
-    </Button>
-  ),
-};
-
-/** Icon-only buttons need an accessible name; the a11y addon fails without one. */
-export const IconOnly: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-3">
-      <Button size="icon" aria-label="Add item">
-        <Plus />
-      </Button>
-      <Button size="icon" variant="outline" aria-label="Delete item">
-        <Trash2 />
-      </Button>
-    </div>
-  ),
-};