@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/ai-response/ai-response.test.tsx

@@ -1,96 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { Response, ThinkingIndicator } from "./ai-response";
-
-describe("Response", () => {
-  it("renders its text", () => {
-    render(<Response>The capital of France is Paris.</Response>);
-    expect(screen.getByText("The capital of France is Paris.")).toBeInTheDocument();
-  });
-
-  it("is NOT a live region", () => {
-    // Announcing streamed text as it arrives interrupts a screen reader on
-    // every token; state goes through ConversationStatus instead.
-    const { container } = render(<Response streaming>Partial…</Response>);
-    const response = container.querySelector("[data-slot='response']");
-
-    expect(response).not.toHaveAttribute("aria-live");
-    expect(response).not.toHaveAttribute("role");
-  });
-
-  it("shows a decorative caret while streaming", () => {
-    const { container } = render(<Response streaming>Partial</Response>);
-    const caret = container.querySelector("[data-slot='response-caret']");
-
-    expect(caret).toBeInTheDocument();
-    expect(caret).toHaveAttribute("aria-hidden", "true");
-  });
-
-  it("has no caret when it is not streaming", () => {
-    const { container } = render(<Response>Done</Response>);
-    expect(container.querySelector("[data-slot='response-caret']")).not.toBeInTheDocument();
-  });
-
-  it("marks the streaming state for styling", () => {
-    const { container } = render(<Response streaming>Partial</Response>);
-    expect(container.querySelector("[data-slot='response']")).toHaveAttribute(
-      "data-streaming",
-      "true",
-    );
-  });
-
-  it("preserves paragraph whitespace", () => {
-    const { container } = render(<Response>{"line one\nline two"}</Response>);
-    expect(container.querySelector("[data-slot='response']")).toHaveClass(
-      "whitespace-pre-wrap",
-    );
-  });
-
-  it("renders markup a consumer has already rendered", () => {
-    render(
-      <Response>
-        <p>First</p>
-        <p>Second</p>
-      </Response>,
-    );
-    expect(screen.getByText("First")).toBeInTheDocument();
-    expect(screen.getByText("Second")).toBeInTheDocument();
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    const { container } = render(<Response className="text-base">Hi</Response>);
-    const response = container.querySelector("[data-slot='response']");
-    expect(response).toHaveClass("text-base");
-    expect(response).not.toHaveClass("text-sm");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Response streaming>Streaming text…</Response>);
-    await expectNoA11yViolations(container);
-  });
-});
-
-describe("ThinkingIndicator", () => {
-  it("is labelled, because it is the only thing on screen", () => {
-    render(<ThinkingIndicator />);
-    expect(screen.getByText("Thinking")).toBeInTheDocument();
-  });
-
-  it("accepts a custom label", () => {
-    render(<ThinkingIndicator label="Searching the web" />);
-    expect(screen.getByText("Searching the web")).toBeInTheDocument();
-  });
-
-  it("hides its dots from assistive technology", () => {
-    const { container } = render(<ThinkingIndicator />);
-    const dots = container.querySelectorAll("span[aria-hidden='true']");
-    expect(dots).toHaveLength(3);
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<ThinkingIndicator />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/ai-sources/ai-sources.stories.tsx

@@ -1,93 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { Response } from "@/components/ai-response";
-
-import { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger } from "./ai-sources";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-[32rem]">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "AI/Sources",
-  component: Sources,
-  parameters: { controls: { disable: true } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Sources>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const SOURCES = [
-  {
-    index: 1,
-    title: "ARIA Authoring Practices — Table pattern",
-    origin: "w3.org",
-    excerpt: "Scrollable regions should be focusable so keyboard users can scroll them.",
-  },
-  {
-    index: 2,
-    title: "Accessible data tables",
-    origin: "example.org",
-    excerpt: "Native table semantics convey row and column position without extra ARIA.",
-  },
-];
-
-/** Markers next to the claim, the list underneath saying what each one is. */
-export const Default: Story = {
-  render: () => (
-    <div className="grid gap-3">
-      <Response>
-        A scroll container needs an explicit focus stop to be reachable by keyboard
-        <InlineCitation index={1} title={SOURCES[0]!.title} href="#1" />, and native table
-        semantics carry position without extra ARIA
-        <InlineCitation index={2} title={SOURCES[1]!.title} href="#2" />.
-      </Response>
-      <Sources>
-        <SourcesTrigger count={SOURCES.length} />
-        <SourcesContent>
-          {SOURCES.map((source) => (
-            <Source key={source.index} {...source} href={`#${String(source.index)}`} />
-          ))}
-        </SourcesContent>
-      </Sources>
-    </div>
-  ),
-};
-
-export const Expanded: Story = {
-  render: () => (
-    <Sources defaultOpen>
-      <SourcesTrigger count={SOURCES.length} />
-      <SourcesContent>
-        {SOURCES.map((source) => (
-          <Source key={source.index} {...source} href={`#${String(source.index)}`} />
-        ))}
-      </SourcesContent>
-    </Sources>
-  ),
-};
-
-/** A marker with nowhere to go renders as text, not a link that does nothing. */
-export const WithoutLinks: Story = {
-  render: () => (
-    <Response>
-      Internal policy requires two approvals
-      <InlineCitation index={1} title="Engineering handbook, section 4" />.
-    </Response>
-  ),
-};
-
-export const SingleSource: Story = {
-  render: () => (
-    <Sources defaultOpen>
-      <SourcesTrigger count={1} />
-      <SourcesContent>
-        <Source index={1} title="Engineering handbook" origin="internal" href="#1" />
-      </SourcesContent>
-    </Sources>
-  ),
-};

package/src/components/ai-sources/ai-sources.test.tsx

@@ -1,102 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger } from "./ai-sources";
-
-describe("InlineCitation", () => {
-  it("carries the source title in its accessible name", () => {
-    render(<InlineCitation index={1} title="Encyclopaedia entry on France" href="#1" />);
-    // The visible text is a bare number, which conveys nothing on its own.
-    expect(
-      screen.getByRole("link", { name: "Source 1: Encyclopaedia entry on France" }),
-    ).toBeInTheDocument();
-  });
-
-  it("renders as text, not a dead link, without an href", () => {
-    render(<InlineCitation index={2} title="Internal document" />);
-    expect(screen.queryByRole("link")).not.toBeInTheDocument();
-    expect(screen.getByText("Source 2: Internal document")).toBeInTheDocument();
-  });
-
-  it("shows the marker number visually", () => {
-    const { container } = render(<InlineCitation index={3} title="A source" />);
-    expect(container.querySelector("[aria-hidden='true']")).toHaveTextContent("3");
-  });
-});
-
-describe("Sources", () => {
-  function Example() {
-    return (
-      <Sources>
-        <SourcesTrigger count={2} />
-        <SourcesContent>
-          <Source index={1} title="Paris — overview" origin="example.org" href="#1" />
-          <Source
-            index={2}
-            title="France factbook"
-            origin="factbook.example"
-            excerpt="Paris is the capital and most populous city."
-            href="#2"
-          />
-        </SourcesContent>
-      </Sources>
-    );
-  }
-
-  it("is collapsed by default", () => {
-    render(<Example />);
-    expect(screen.getByRole("button", { name: "2 sources" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-  });
-
-  it("pluralises the count", () => {
-    render(
-      <Sources>
-        <SourcesTrigger count={1} />
-        <SourcesContent>
-          <Source index={1} title="Only one" href="#1" />
-        </SourcesContent>
-      </Sources>,
-    );
-    expect(screen.getByRole("button", { name: "1 source" })).toBeInTheDocument();
-  });
-
-  it("lists the sources in order, matching the marker numbers", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: "2 sources" }));
-
-    const list = await screen.findByRole("list");
-    expect(list.tagName).toBe("OL");
-    expect(screen.getAllByRole("listitem")).toHaveLength(2);
-  });
-
-  it("shows origin and excerpt when given", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: "2 sources" }));
-    expect(await screen.findByText("factbook.example")).toBeInTheDocument();
-    expect(
-      screen.getByText(/Paris is the capital and most populous city\./),
-    ).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <Sources defaultOpen>
-        <SourcesTrigger count={2} />
-        <SourcesContent>
-          <Source index={1} title="Paris — overview" origin="example.org" href="#1" />
-          <Source index={2} title="France factbook" href="#2" />
-        </SourcesContent>
-      </Sources>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/ai-token-usage/ai-token-usage.stories.tsx

@@ -1,59 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { TokenCount, TokenUsage } from "./ai-token-usage";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-72">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "AI/Token Usage",
-  component: TokenUsage,
-  args: { used: 42000, limit: 200000 },
-  argTypes: {
-    used: { control: { type: "range", min: 0, max: 240000, step: 1000 } },
-  },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof TokenUsage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** Running out of context is a cliff, not a slope — so the gauge warns early. */
-export const Thresholds: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-5">
-      <TokenUsage used={42000} limit={200000} />
-      <TokenUsage used={175000} limit={200000} />
-      <TokenUsage used={212000} limit={200000} />
-    </div>
-  ),
-};
-
-export const CustomFormat: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <TokenUsage
-      used={128000}
-      limit={200000}
-      label="Context"
-      format={(value) => `${String(Math.round(value / 1000))}k`}
-    />
-  ),
-};
-
-export const InlineCount: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-3">
-      <TokenCount value={1284} />
-      <TokenCount value={412} label="output tokens" />
-    </div>
-  ),
-};

package/src/components/ai-token-usage/ai-token-usage.test.tsx

@@ -1,83 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { TokenCount, TokenUsage } from "./ai-token-usage";
-
-describe("TokenUsage", () => {
-  it("shows the numbers, which are the actual content", () => {
-    render(<TokenUsage used={12000} limit={200000} />);
-    expect(screen.getByText("12,000 / 200,000")).toBeInTheDocument();
-  });
-
-  it("labels what is being measured", () => {
-    render(<TokenUsage used={100} limit={1000} />);
-    expect(screen.getByText("Context used")).toBeInTheDocument();
-  });
-
-  it("accepts a custom label and formatter", () => {
-    render(
-      <TokenUsage
-        used={1500}
-        limit={4000}
-        label="Budget"
-        format={(value) => `${String(Math.round(value / 1000))}k`}
-      />,
-    );
-    expect(screen.getByText("Budget")).toBeInTheDocument();
-    expect(screen.getByText("2k / 4k")).toBeInTheDocument();
-  });
-
-  it("hides the bar, since it only restates the numbers", () => {
-    const { container } = render(<TokenUsage used={100} limit={1000} />);
-    // Not a second progressbar to read past.
-    expect(container.querySelector("[aria-hidden='true']")).toBeInTheDocument();
-    expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
-  });
-
-  it("marks the warning state past the threshold", () => {
-    const { container } = render(<TokenUsage used={900} limit={1000} />);
-    expect(container.firstElementChild).toHaveAttribute("data-warning", "true");
-  });
-
-  it("does not warn below the threshold", () => {
-    const { container } = render(<TokenUsage used={100} limit={1000} />);
-    expect(container.firstElementChild).not.toHaveAttribute("data-warning");
-  });
-
-  it("marks going over the limit", () => {
-    const { container } = render(<TokenUsage used={1200} limit={1000} />);
-    expect(container.firstElementChild).toHaveAttribute("data-over", "true");
-    // The figures stay readable even when over.
-    expect(screen.getByText("1,200 / 1,000")).toBeInTheDocument();
-  });
-
-  it("clamps the bar rather than overflowing it", () => {
-    const { container } = render(<TokenUsage used={5000} limit={1000} />);
-    const fill = container.querySelector("[aria-hidden='true'] > div");
-    expect(fill).toHaveStyle({ width: "100%" });
-  });
-
-  it("survives a zero limit without dividing by it", () => {
-    const { container } = render(<TokenUsage used={10} limit={0} />);
-    const fill = container.querySelector("[aria-hidden='true'] > div");
-    expect(fill).toHaveStyle({ width: "0%" });
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<TokenUsage used={180000} limit={200000} />);
-    await expectNoA11yViolations(container);
-  });
-});
-
-describe("TokenCount", () => {
-  it("formats the count", () => {
-    render(<TokenCount value={12345} />);
-    expect(screen.getByText("12,345 tokens")).toBeInTheDocument();
-  });
-
-  it("accepts a custom unit", () => {
-    render(<TokenCount value={42} label="output tokens" />);
-    expect(screen.getByText("42 output tokens")).toBeInTheDocument();
-  });
-});

package/src/components/ai-tool/ai-tool.stories.tsx

@@ -1,96 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { Tool, ToolContent, ToolHeader, ToolPayload, ToolSection } from "./ai-tool";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-[32rem]">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "AI/Tool Call",
-  component: Tool,
-  args: { status: "success" },
-  argTypes: {
-    status: { control: "inline-radio", options: ["pending", "running", "success", "error"] },
-  },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Tool>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Tool {...args}>
-      <ToolHeader name="search_web" status={args.status ?? "success"} />
-      <ToolContent>
-        <ToolSection label="Arguments">
-          <ToolPayload label="Arguments">
-            {JSON.stringify({ query: "accessible data tables", limit: 5 }, null, 2)}
-          </ToolPayload>
-        </ToolSection>
-        <ToolSection label="Result">
-          <ToolPayload label="Result">
-            {JSON.stringify(
-              { results: [{ title: "ARIA authoring practices", url: "https://example.org" }] },
-              null,
-              2,
-            )}
-          </ToolPayload>
-        </ToolSection>
-      </ToolContent>
-    </Tool>
-  ),
-};
-
-/** Status is always a word, never only a colour. */
-export const Statuses: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid gap-2">
-      {(["pending", "running", "success", "error"] as const).map((status) => (
-        <Tool key={status} status={status}>
-          <ToolHeader name={`tool_${status}`} status={status} />
-          <ToolContent>
-            <ToolSection label="Result">
-              <ToolPayload label="Result">{`Status: ${status}`}</ToolPayload>
-            </ToolSection>
-          </ToolContent>
-        </Tool>
-      ))}
-    </div>
-  ),
-};
-
-export const CustomStatusWording: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Tool status="running">
-      <ToolHeader name="crawl_site" status="running" statusLabel="Fetching page 12 of 40" />
-      <ToolContent>
-        <ToolSection label="Progress">
-          <ToolPayload label="Progress">Crawling https://example.org…</ToolPayload>
-        </ToolSection>
-      </ToolContent>
-    </Tool>
-  ),
-};
-
-export const Failed: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Tool status="error" defaultOpen>
-      <ToolHeader name="read_file" status="error" />
-      <ToolContent>
-        <ToolSection label="Error">
-          <ToolPayload label="Error">
-            {"ENOENT: no such file or directory, open '/app/missing.ts'"}
-          </ToolPayload>
-        </ToolSection>
-      </ToolContent>
-    </Tool>
-  ),
-};

package/src/components/ai-tool/ai-tool.test.tsx

@@ -1,137 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import {
-  Tool,
-  ToolContent,
-  ToolHeader,
-  ToolPayload,
-  ToolSection,
-  type ToolStatus,
-} from "./ai-tool";
-
-function Example({ status = "success" }: { status?: ToolStatus } = {}) {
-  return (
-    <Tool status={status}>
-      <ToolHeader name="search_web" status={status} />
-      <ToolContent>
-        <ToolSection label="Arguments">
-          <ToolPayload label="Arguments">{'{ "query": "capital of France" }'}</ToolPayload>
-        </ToolSection>
-        <ToolSection label="Result">
-          <ToolPayload label="Result">{'{ "answer": "Paris" }'}</ToolPayload>
-        </ToolSection>
-      </ToolContent>
-    </Tool>
-  );
-}
-
-describe("Tool", () => {
-  it("is collapsed by default, because provenance is not the answer", () => {
-    render(<Example />);
-    expect(screen.getByRole("button", { name: /search_web/ })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-    expect(screen.queryByText(/capital of France/)).not.toBeInTheDocument();
-  });
-
-  it("opens on click", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: /search_web/ }));
-    expect(await screen.findByText(/capital of France/)).toBeInTheDocument();
-  });
-
-  it("opens from the keyboard", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.tab();
-    await user.keyboard("{Enter}");
-    await waitFor(() => {
-      expect(screen.getByRole("button", { name: /search_web/ })).toHaveAttribute(
-        "aria-expanded",
-        "true",
-      );
-    });
-  });
-
-  it.each([
-    ["pending", "Queued"],
-    ["running", "Running"],
-    ["success", "Completed"],
-    ["error", "Failed"],
-  ] as const)("states the %s status in words, not only in colour", (status, label) => {
-    render(<Example status={status} />);
-    // A coloured dot says nothing to a screen reader, and nothing to anyone who
-    // cannot distinguish the colours.
-    expect(screen.getByRole("button", { name: new RegExp(label) })).toBeInTheDocument();
-  });
-
-  it("accepts custom status wording", () => {
-    render(
-      <Tool status="running">
-        <ToolHeader name="fetch" status="running" statusLabel="Fetching page 2 of 5" />
-        <ToolContent>Body</ToolContent>
-      </Tool>,
-    );
-    expect(screen.getByText("Fetching page 2 of 5")).toBeInTheDocument();
-  });
-
-  it("marks the status for styling", () => {
-    const { container } = render(<Example status="error" />);
-    expect(container.querySelector("[data-slot='tool']")).toHaveAttribute(
-      "data-status",
-      "error",
-    );
-  });
-
-  it("makes payloads focusable named regions", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: /search_web/ }));
-
-    // JSON scrolls, and a scroll box that cannot take focus is unreachable by
-    // keyboard.
-    const payload = await screen.findByRole("region", { name: "Arguments" });
-    expect(payload).toHaveAttribute("tabindex", "0");
-  });
-
-  it("labels each section", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-
-    await user.click(screen.getByRole("button", { name: /search_web/ }));
-    expect(await screen.findByText("Arguments")).toBeInTheDocument();
-    expect(screen.getByText("Result")).toBeInTheDocument();
-  });
-
-  it("can be opened by default", () => {
-    render(
-      <Tool status="success" defaultOpen>
-        <ToolHeader name="read_file" status="success" />
-        <ToolContent>Contents</ToolContent>
-      </Tool>,
-    );
-    expect(screen.getByText("Contents")).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations when open", async () => {
-    const { container } = render(
-      <Tool status="success" defaultOpen>
-        <ToolHeader name="search_web" status="success" />
-        <ToolContent>
-          <ToolSection label="Result">
-            <ToolPayload label="Result">{'{ "answer": "Paris" }'}</ToolPayload>
-          </ToolSection>
-        </ToolContent>
-      </Tool>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});