@dowel-ui/react 0.1.0 → 0.2.0

package/src/blocks/admin-users/admin-users.stories.tsx

@@ -1,83 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { AdminUsersBlock, type AdminUser } from "./admin-users";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withPageWidth: Decorator = (Story) => (
-  <div className="w-[64rem] max-w-full">
-    <Story />
-  </div>
-);
-
-const USERS: AdminUser[] = [
-  {
-    id: "1",
-    name: "Ada Lovelace",
-    email: "ada@example.com",
-    role: "Owner",
-    status: "Active",
-    lastActive: "2 hours ago",
-  },
-  {
-    id: "2",
-    name: "Grace Hopper",
-    email: "grace@example.com",
-    role: "Admin",
-    status: "Active",
-    lastActive: "Yesterday",
-  },
-  {
-    id: "3",
-    name: "Katherine Johnson",
-    email: "kj@example.com",
-    role: "Member",
-    status: "Invited",
-    lastActive: "Never",
-  },
-  {
-    id: "4",
-    name: "Radia Perlman",
-    email: "radia@example.com",
-    role: "Viewer",
-    status: "Suspended",
-    lastActive: "3 weeks ago",
-  },
-  {
-    id: "5",
-    name: "Barbara Liskov",
-    email: "barbara@example.com",
-    role: "Member",
-    status: "Active",
-    lastActive: "5 minutes ago",
-  },
-  {
-    id: "6",
-    name: "Margaret Hamilton",
-    email: "margaret@example.com",
-    role: "Admin",
-    status: "Active",
-    lastActive: "Last week",
-  },
-];
-
-const meta = {
-  title: "Blocks/Admin — users",
-  component: AdminUsersBlock,
-  args: { users: USERS },
-  parameters: { controls: { disable: true } },
-  decorators: [withPageWidth],
-} satisfies Meta<typeof AdminUsersBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Filter, sort and hide columns. The matching count is announced as you type. */
-export const Default: Story = {};
-
-export const Empty: Story = {
-  args: { users: [] },
-};
-
-export const SinglePerson: Story = {
-  args: { users: [USERS[0]!] },
-};

package/src/blocks/admin-users/admin-users.test.tsx

@@ -1,159 +0,0 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { AdminUsersBlock, type AdminUser } from "./admin-users";
-
-const USERS: AdminUser[] = [
-  {
-    id: "1",
-    name: "Ada Lovelace",
-    email: "ada@example.com",
-    role: "Owner",
-    status: "Active",
-    lastActive: "2 hours ago",
-  },
-  {
-    id: "2",
-    name: "Grace Hopper",
-    email: "grace@example.com",
-    role: "Admin",
-    status: "Active",
-    lastActive: "Yesterday",
-  },
-  {
-    id: "3",
-    name: "Katherine Johnson",
-    email: "kj@example.com",
-    role: "Member",
-    status: "Invited",
-    lastActive: "Never",
-  },
-  {
-    id: "4",
-    name: "Radia Perlman",
-    email: "radia@example.com",
-    role: "Viewer",
-    status: "Suspended",
-    lastActive: "3 weeks ago",
-  },
-];
-
-function rowCount(): number {
-  const body = screen.getAllByRole("rowgroup")[1];
-  return body ? within(body).queryAllByRole("row").length : 0;
-}
-
-describe("AdminUsersBlock", () => {
-  it("renders a row per user", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    expect(rowCount()).toBe(4);
-  });
-
-  it("gives the filter a real label, not just a placeholder", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    // A placeholder disappears the moment anyone types, taking the field's name
-    // with it.
-    expect(screen.getByLabelText("Filter by name or email")).toBeInTheDocument();
-  });
-
-  it("filters by name and by email", async () => {
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} />);
-
-    await user.type(screen.getByLabelText("Filter by name or email"), "grace");
-    await waitFor(() => {
-      expect(rowCount()).toBe(1);
-    });
-    expect(screen.getByText("Grace Hopper")).toBeInTheDocument();
-
-    await user.clear(screen.getByLabelText("Filter by name or email"));
-    await user.type(screen.getByLabelText("Filter by name or email"), "kj@example");
-    await waitFor(() => {
-      expect(screen.getByText("Katherine Johnson")).toBeInTheDocument();
-    });
-  });
-
-  it("announces the matching count, since results change unbidden", async () => {
-    const user = userEvent.setup();
-    const { container } = render(<AdminUsersBlock users={USERS} />);
-
-    const status = container.querySelector("[aria-live='polite']");
-    expect(status).toHaveTextContent("4 people match the filter.");
-
-    await user.type(screen.getByLabelText("Filter by name or email"), "grace");
-    await waitFor(() => {
-      expect(status).toHaveTextContent("1 person match");
-    });
-  });
-
-  it("shows an empty state naming the query that found nothing", async () => {
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} />);
-
-    await user.type(screen.getByLabelText("Filter by name or email"), "zzzz");
-    expect(await screen.findByText(/No one matches/)).toBeInTheDocument();
-  });
-
-  it("names each row's action button after its row", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    // Four identical "Actions" buttons say nothing about which row you are on.
-    expect(
-      screen.getByRole("button", { name: "Actions for Ada Lovelace" }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Actions for Grace Hopper" }),
-    ).toBeInTheDocument();
-  });
-
-  it("runs the row actions", async () => {
-    const onEdit = vi.fn();
-    const onRemove = vi.fn();
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} onEdit={onEdit} onRemove={onRemove} />);
-
-    await user.click(screen.getByRole("button", { name: "Actions for Ada Lovelace" }));
-    await user.click(await screen.findByRole("menuitem", { name: "Edit member" }));
-    expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ name: "Ada Lovelace" }));
-
-    await user.click(screen.getByRole("button", { name: "Actions for Grace Hopper" }));
-    await user.click(await screen.findByRole("menuitem", { name: "Remove from team" }));
-    expect(onRemove).toHaveBeenCalledWith(expect.objectContaining({ name: "Grace Hopper" }));
-  });
-
-  it("states each status in words", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    expect(screen.getByText("Suspended")).toBeInTheDocument();
-    expect(screen.getByText("Invited")).toBeInTheDocument();
-  });
-
-  it("sorts by a column", async () => {
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} />);
-
-    await user.click(screen.getByRole("button", { name: /User, not sorted/ }));
-    await user.click(await screen.findByRole("menuitem", { name: "Sort descending" }));
-
-    await waitFor(() => {
-      expect(screen.getByRole("columnheader", { name: /User/ })).toHaveAttribute(
-        "aria-sort",
-        "descending",
-      );
-    });
-  });
-
-  it("invites people", async () => {
-    const onInvite = vi.fn();
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} onInvite={onInvite} />);
-
-    await user.click(screen.getByRole("button", { name: "Invite people" }));
-    expect(onInvite).toHaveBeenCalledTimes(1);
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<AdminUsersBlock users={USERS} />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/blocks/ai-chat/ai-chat.stories.tsx

@@ -1,149 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { AiChatBlock, type ChatMessage } from "./ai-chat";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withChatFrame: Decorator = (Story) => (
-  <div className="h-[36rem] w-[42rem] max-w-full overflow-hidden rounded-xl border border-border">
-    <Story />
-  </div>
-);
-
-const MODELS = [
-  { id: "fast", name: "Fast", description: "Lowest latency." },
-  { id: "balanced", name: "Balanced", description: "The default." },
-  { id: "deep", name: "Deep Research", description: "Multi-step, with citations." },
-];
-
-const CONVERSATION: ChatMessage[] = [
-  { id: "1", from: "user", content: "How do I make an overflowing table keyboard-scrollable?" },
-  {
-    id: "2",
-    from: "assistant",
-    content:
-      'Give the scrolling wrapper tabindex="0", a role of "region" and an accessible name. Without a focus stop, the columns past the edge are unreachable without a pointer.',
-    reasoning:
-      "The question is about keyboard access to overflowing tables.\n\nA scroll container is not focusable by default, so its content past the edge cannot be reached without a pointer. Adding a focus stop with a role and a name fixes both the reachability and the unlabelled-stop problem.",
-    tools: [
-      {
-        id: "t1",
-        name: "search_docs",
-        status: "success",
-        arguments: JSON.stringify({ query: "scrollable region keyboard", limit: 5 }, null, 2),
-        result: JSON.stringify({ hits: 3, top: "ARIA Authoring Practices" }, null, 2),
-      },
-    ],
-    sources: [
-      {
-        index: 1,
-        title: "ARIA Authoring Practices — scrollable regions",
-        origin: "w3.org",
-        href: "#1",
-      },
-      { index: 2, title: "Accessible data tables", origin: "example.org", href: "#2" },
-    ],
-    tokens: 148,
-  },
-];
-
-const meta = {
-  title: "Blocks/AI Chat",
-  component: AiChatBlock,
-  args: { messages: CONVERSATION, models: MODELS, model: "balanced" },
-  parameters: { controls: { disable: true } },
-  decorators: [withChatFrame],
-} satisfies Meta<typeof AiChatBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Empty: Story = {
-  args: { messages: [] },
-};
-
-export const Waiting: Story = {
-  args: { messages: [CONVERSATION[0]!], waiting: true },
-};
-
-export const Streaming: Story = {
-  args: {
-    messages: [
-      CONVERSATION[0]!,
-      {
-        id: "2",
-        from: "assistant",
-        content: 'Give the scrolling wrapper tabindex="0", a role',
-        streaming: true,
-      },
-    ],
-    busy: true,
-  },
-};
-
-/** Send a message and watch it stream back. */
-export const Interactive: Story = {
-  render: function Interactive() {
-    const [messages, setMessages] = useState<ChatMessage[]>([]);
-    const [waiting, setWaiting] = useState(false);
-    const [busy, setBusy] = useState(false);
-
-    function reply(text: string) {
-      const answer = `You asked: “${text}”. In a real product this is where the response would stream in, one token at a time.`;
-      let shown = 0;
-
-      const id = String(Date.now());
-      setWaiting(false);
-      setBusy(true);
-      setMessages((current) => [
-        ...current,
-        { id, from: "assistant", content: "", streaming: true },
-      ]);
-
-      const timer = window.setInterval(() => {
-        shown += 2;
-        const done = shown >= answer.length;
-
-        setMessages((current) =>
-          current.map((message) =>
-            message.id === id
-              ? {
-                  ...message,
-                  content: answer.slice(0, shown),
-                  streaming: !done,
-                  tokens: done ? 42 : undefined,
-                }
-              : message,
-          ),
-        );
-
-        if (done) {
-          window.clearInterval(timer);
-          setBusy(false);
-        }
-      }, 30);
-    }
-
-    return (
-      <AiChatBlock
-        messages={messages}
-        models={MODELS}
-        model="balanced"
-        busy={busy}
-        waiting={waiting}
-        onSend={(text) => {
-          setMessages((current) => [
-            ...current,
-            { id: `u${String(current.length)}`, from: "user", content: text },
-          ]);
-          setWaiting(true);
-          window.setTimeout(() => {
-            reply(text);
-          }, 700);
-        }}
-      />
-    );
-  },
-};

package/src/blocks/ai-chat/ai-chat.test.tsx

@@ -1,166 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { AiChatBlock, type ChatMessage } from "./ai-chat";
-
-const MESSAGES: ChatMessage[] = [
-  { id: "1", from: "user", content: "How do I make an overflowing table keyboard-scrollable?" },
-  {
-    id: "2",
-    from: "assistant",
-    content: 'Give the scrolling wrapper tabindex="0", a role and an accessible name.',
-    reasoning: "The container is not focusable by default, so its overflow is unreachable.",
-    tools: [
-      {
-        id: "t1",
-        name: "search_docs",
-        status: "success",
-        arguments: '{ "query": "scrollable region" }',
-        result: '{ "hits": 3 }',
-      },
-    ],
-    sources: [{ index: 1, title: "ARIA Authoring Practices", origin: "w3.org", href: "#1" }],
-    tokens: 148,
-  },
-];
-
-describe("AiChatBlock", () => {
-  it("shows an empty state before anything is said", () => {
-    render(<AiChatBlock messages={[]} />);
-    expect(screen.getByText("Start a conversation")).toBeInTheDocument();
-  });
-
-  it("renders the transcript as a list, never a live region", () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} />);
-
-    const list = container.querySelector("[data-slot='conversation-messages']");
-    expect(list?.tagName).toBe("OL");
-    // The decision the whole AI layer rests on: announcing streamed text token
-    // by token is unusable with a screen reader.
-    expect(list).not.toHaveAttribute("aria-live");
-  });
-
-  it("names the speaker of every turn in text", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-    expect(screen.getByText("You said:")).toBeInTheDocument();
-    expect(screen.getByText("Assistant said:")).toBeInTheDocument();
-  });
-
-  it("announces state, not content", () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} busy />);
-
-    const status = container.querySelector("[data-slot='conversation-status']");
-    expect(status).toHaveAttribute("aria-live", "polite");
-    expect(status).toHaveTextContent("Generating response");
-    expect(status).not.toHaveTextContent("tabindex");
-  });
-
-  it("distinguishes waiting from generating", () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} waiting />);
-    expect(container.querySelector("[data-slot='conversation-status']")).toHaveTextContent(
-      "Waiting for a response",
-    );
-    expect(screen.getByText("Thinking")).toBeInTheDocument();
-  });
-
-  it("collapses reasoning and tool calls by default", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-
-    expect(screen.getByRole("button", { name: "Reasoning" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-    expect(screen.getByRole("button", { name: /search_docs/ })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-  });
-
-  it("names tool payloads per tool, so two open tools do not collide", async () => {
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} />);
-
-    await user.click(screen.getByRole("button", { name: /search_docs/ }));
-    expect(
-      await screen.findByRole("region", { name: "search_docs arguments" }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole("region", { name: "search_docs result" })).toBeInTheDocument();
-  });
-
-  it("lists sources behind a disclosure", async () => {
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} />);
-
-    await user.click(screen.getByRole("button", { name: "1 source" }));
-    expect(await screen.findByText("ARIA Authoring Practices")).toBeInTheDocument();
-  });
-
-  it("shows the token count for a finished response", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-    expect(screen.getByText("148 tokens")).toBeInTheDocument();
-  });
-
-  it("sends a message and clears the composer", async () => {
-    const onSend = vi.fn();
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} onSend={onSend} />);
-
-    const composer = screen.getByRole("textbox", { name: "Message" });
-    await user.type(composer, "Thanks{Enter}");
-
-    expect(onSend).toHaveBeenCalledWith("Thanks");
-    await waitFor(() => {
-      expect(composer).toHaveValue("");
-    });
-  });
-
-  it("does not send an empty message", async () => {
-    const onSend = vi.fn();
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} onSend={onSend} />);
-
-    await user.type(screen.getByRole("textbox", { name: "Message" }), "   {Enter}");
-    expect(onSend).not.toHaveBeenCalled();
-  });
-
-  it("offers Stop while a response is in flight", async () => {
-    const onStop = vi.fn();
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} busy onStop={onStop} />);
-
-    await user.click(screen.getByRole("button", { name: "Stop generating" }));
-    expect(onStop).toHaveBeenCalledTimes(1);
-  });
-
-  it("offers a model picker when models are given", async () => {
-    const onModelChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <AiChatBlock
-        messages={MESSAGES}
-        model="fast"
-        onModelChange={onModelChange}
-        models={[
-          { id: "fast", name: "Fast" },
-          { id: "deep", name: "Deep" },
-        ]}
-      />,
-    );
-
-    await user.click(screen.getByRole("combobox", { name: "Model" }));
-    await user.click(await screen.findByRole("option", { name: "Deep" }));
-    expect(onModelChange).toHaveBeenCalledWith("deep");
-  });
-
-  it("hides the model picker when there are no models", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-    expect(screen.queryByRole("combobox", { name: "Model" })).not.toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/blocks/dashboard/dashboard.stories.tsx

@@ -1,106 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "@/components/button";
-
-import { DashboardBlock, type DashboardEvent, type DashboardStat } from "./dashboard";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withPageWidth: Decorator = (Story) => (
-  <div className="w-[64rem] max-w-full">
-    <Story />
-  </div>
-);
-
-const STATS: DashboardStat[] = [
-  {
-    id: "mrr",
-    label: "Monthly revenue",
-    value: "$48,120",
-    change: 12.4,
-    comparison: "on last month",
-  },
-  {
-    id: "users",
-    label: "Active users",
-    value: "2,410",
-    change: 4.2,
-    comparison: "on last week",
-  },
-  {
-    id: "churn",
-    label: "Churn",
-    value: "1.8%",
-    change: 0.4,
-    comparison: "on last month",
-    higherIsBetter: false,
-  },
-  { id: "uptime", label: "Uptime", value: "99.98%" },
-];
-
-const EVENTS: DashboardEvent[] = [
-  {
-    id: "1",
-    title: "Deployed to production",
-    detail: "Build 1420 · main",
-    at: "2026-09-01T09:12:00Z",
-    label: "12 minutes ago",
-    tone: "success",
-  },
-  {
-    id: "2",
-    title: "Build finished with warnings",
-    detail: "3 unused exports",
-    at: "2026-09-01T09:04:00Z",
-    label: "20 minutes ago",
-    tone: "warning",
-  },
-  {
-    id: "3",
-    title: "Build failed",
-    detail: "Type error in table.tsx",
-    at: "2026-09-01T08:31:00Z",
-    label: "53 minutes ago",
-    tone: "destructive",
-  },
-  {
-    id: "4",
-    title: "Opened pull request #482",
-    at: "2026-08-31T17:20:00Z",
-    label: "Yesterday",
-  },
-];
-
-const meta = {
-  title: "Blocks/Dashboard",
-  component: DashboardBlock,
-  args: { stats: STATS, events: EVENTS },
-  parameters: { controls: { disable: true } },
-  decorators: [withPageWidth],
-} satisfies Meta<typeof DashboardBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Every change is stated in words — "up 12.4%", not a green triangle. */
-export const Default: Story = {};
-
-export const Loading: Story = {
-  args: { loading: true },
-};
-
-export const MetricsOnly: Story = {
-  args: { events: [] },
-};
-
-export const WithActions: Story = {
-  args: {
-    actions: (
-      <div className="flex gap-2">
-        <Button variant="outline" size="sm">
-          Last 30 days
-        </Button>
-        <Button size="sm">Export</Button>
-      </div>
-    ),
-  },
-};