@dowel-ui/react 0.1.0 → 0.2.0

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

@@ -1,144 +0,0 @@
-import { fireEvent, 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 { Message, MessageBody } from "../ai-message";
-import {
-  Conversation,
-  ConversationMessages,
-  ConversationScrollButton,
-  ConversationStatus,
-} from "./ai-conversation";
-
-function Example({ status }: { status?: string } = {}) {
-  return (
-    <Conversation>
-      <ConversationMessages>
-        <Message from="user">
-          <MessageBody from="user">What is the capital of France?</MessageBody>
-        </Message>
-        <Message from="assistant">
-          <MessageBody from="assistant">Paris.</MessageBody>
-        </Message>
-      </ConversationMessages>
-      {status ? <ConversationStatus>{status}</ConversationStatus> : null}
-      <ConversationScrollButton />
-    </Conversation>
-  );
-}
-
-/** jsdom has no layout, so scroll geometry is stubbed to drive the logic. */
-function stubScroll(
-  viewport: HTMLElement,
-  { scrollTop = 0, scrollHeight = 1000, clientHeight = 400 } = {},
-) {
-  Object.defineProperty(viewport, "scrollHeight", { value: scrollHeight, configurable: true });
-  Object.defineProperty(viewport, "clientHeight", { value: clientHeight, configurable: true });
-  Object.defineProperty(viewport, "scrollTop", {
-    value: scrollTop,
-    writable: true,
-    configurable: true,
-  });
-}
-
-function viewportOf(container: HTMLElement): HTMLElement {
-  const viewport = container.querySelector<HTMLElement>("[data-slot='conversation-viewport']");
-  if (!viewport) throw new Error("no viewport");
-  return viewport;
-}
-
-describe("Conversation", () => {
-  it("renders the transcript as an ordered list", () => {
-    render(<Example />);
-    expect(screen.getByRole("list").tagName).toBe("OL");
-    expect(screen.getAllByRole("listitem")).toHaveLength(2);
-  });
-
-  it("does NOT make the transcript a live region", () => {
-    // The central accessibility decision of this component. A live region that
-    // updates per streamed token is unusable with a screen reader.
-    const list = render(<Example />).container.querySelector(
-      "[data-slot='conversation-messages']",
-    );
-    expect(list).not.toHaveAttribute("aria-live");
-    expect(list).not.toHaveAttribute("role", "log");
-  });
-
-  it("announces state, not content, through a separate status region", () => {
-    render(<Example status="Generating response" />);
-
-    const status = screen.getByRole("status");
-    expect(status).toHaveAttribute("aria-live", "polite");
-    expect(status).toHaveTextContent("Generating response");
-    // The transcript text must not be inside the live region.
-    expect(status).not.toHaveTextContent("Paris.");
-  });
-
-  describe("the jump-to-latest control", () => {
-    it("is absent while the reader is at the bottom", () => {
-      render(<Example />);
-      expect(screen.queryByRole("button", { name: "Jump to latest" })).not.toBeInTheDocument();
-    });
-
-    it("appears once the reader scrolls away", async () => {
-      const { container } = render(<Example />);
-      const viewport = viewportOf(container);
-
-      stubScroll(viewport, { scrollTop: 0 });
-      fireEvent.scroll(viewport);
-
-      expect(await screen.findByRole("button", { name: "Jump to latest" })).toBeInTheDocument();
-    });
-
-    it("scrolls back down and then disappears", async () => {
-      const user = userEvent.setup();
-      const { container } = render(<Example />);
-      const viewport = viewportOf(container);
-      const scrollTo = vi.fn();
-      viewport.scrollTo = scrollTo;
-
-      stubScroll(viewport, { scrollTop: 0 });
-      fireEvent.scroll(viewport);
-      await user.click(await screen.findByRole("button", { name: "Jump to latest" }));
-
-      expect(scrollTo).toHaveBeenCalledWith({ top: 1000, behavior: "smooth" });
-
-      stubScroll(viewport, { scrollTop: 600 });
-      fireEvent.scroll(viewport);
-      await waitFor(() => {
-        expect(
-          screen.queryByRole("button", { name: "Jump to latest" }),
-        ).not.toBeInTheDocument();
-      });
-    });
-
-    it("counts near-the-bottom as the bottom, so a pixel of drift is not a prompt", async () => {
-      const { container } = render(<Example />);
-      const viewport = viewportOf(container);
-
-      stubScroll(viewport, { scrollTop: 580 });
-      fireEvent.scroll(viewport);
-
-      await waitFor(() => {
-        expect(container.querySelector("[data-slot='conversation']")).toHaveAttribute(
-          "data-at-bottom",
-          "true",
-        );
-      });
-    });
-  });
-
-  it("throws a useful error if the scroll button is used outside the root", () => {
-    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined);
-    expect(() => render(<ConversationScrollButton />)).toThrow(
-      /must be rendered inside <Conversation>/,
-    );
-    consoleError.mockRestore();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example status="Response complete" />);
-    await expectNoA11yViolations(container);
-  });
-});

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

@@ -1,106 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { Copy, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
-
-import { Response } from "@/components/ai-response";
-import { Button } from "@/components/button";
-
-import {
-  Message,
-  MessageActions,
-  MessageAvatar,
-  MessageBody,
-  MessageFooter,
-} from "./ai-message";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <ol className="flex w-[32rem] flex-col gap-6">
-    <Story />
-  </ol>
-);
-
-const meta = {
-  title: "AI/Message",
-  component: Message,
-  args: { from: "assistant" },
-  argTypes: { from: { control: "inline-radio", options: ["user", "assistant", "system"] } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Message>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Message {...args}>
-      {args.from === "assistant" ? <MessageAvatar>AI</MessageAvatar> : null}
-      <MessageBody from={args.from}>
-        {args.from === "user"
-          ? "How do I make a table keyboard-scrollable?"
-          : 'Give the scrolling wrapper tabindex="0" and an accessible name. Without it, columns past the edge are unreachable by keyboard.'}
-      </MessageBody>
-    </Message>
-  ),
-};
-
-export const Roles: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <>
-      <Message from="system">
-        <MessageBody from="system">Conversation started with the Balanced model.</MessageBody>
-      </Message>
-      <Message from="user">
-        <MessageBody from="user">What is the capital of France?</MessageBody>
-      </Message>
-      <Message from="assistant">
-        <MessageAvatar>AI</MessageAvatar>
-        <MessageBody from="assistant">
-          <Response>Paris.</Response>
-        </MessageBody>
-      </Message>
-    </>
-  ),
-};
-
-/** Actions fade in on hover but stay in the tab order the whole time. */
-export const WithActions: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Message from="assistant">
-      <MessageAvatar>AI</MessageAvatar>
-      <MessageBody from="assistant">
-        <Response>
-          A Sheet slides in from an edge; a Drawer is bottom-anchored and can be dragged away.
-        </Response>
-        <MessageActions>
-          {[
-            { icon: Copy, label: "Copy" },
-            { icon: RefreshCw, label: "Regenerate" },
-            { icon: ThumbsUp, label: "Good response" },
-            { icon: ThumbsDown, label: "Bad response" },
-          ].map(({ icon: Icon, label }) => (
-            <Button key={label} variant="ghost" size="icon-sm" aria-label={label}>
-              <Icon />
-            </Button>
-          ))}
-        </MessageActions>
-      </MessageBody>
-    </Message>
-  ),
-};
-
-export const WithFooter: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Message from="assistant">
-      <MessageAvatar>AI</MessageAvatar>
-      <MessageBody from="assistant">
-        <Response>Paris has been the capital since 987.</Response>
-        <MessageFooter>
-          <span className="text-2xs text-muted-foreground">2 sources · 148 tokens</span>
-        </MessageFooter>
-      </MessageBody>
-    </Message>
-  ),
-};

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

@@ -1,160 +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 { Button } from "../button";
-import {
-  Message,
-  MessageActions,
-  MessageAvatar,
-  MessageBody,
-  MessageFooter,
-} from "./ai-message";
-
-describe("Message", () => {
-  it("renders as a list item, for a transcript", () => {
-    render(
-      <ol>
-        <Message from="user">
-          <MessageBody from="user">Hello</MessageBody>
-        </Message>
-      </ol>,
-    );
-    expect(screen.getByRole("listitem")).toBeInTheDocument();
-  });
-
-  it.each([
-    ["user", "You said"],
-    ["assistant", "Assistant said"],
-    ["system", "System"],
-  ] as const)("names the %s speaker in text, not only by layout", (role, label) => {
-    render(
-      <ol>
-        <Message from={role}>
-          <MessageBody from={role}>Content</MessageBody>
-        </Message>
-      </ol>,
-    );
-    // Colour and alignment convey the speaker to a sighted reader and nothing
-    // to anyone else, so the role has to be readable.
-    expect(screen.getByRole("listitem")).toHaveTextContent(label);
-  });
-
-  it("accepts a custom speaker label", () => {
-    render(
-      <ol>
-        <Message from="assistant" fromLabel="Claude said">
-          <MessageBody from="assistant">Hi</MessageBody>
-        </Message>
-      </ol>,
-    );
-    expect(screen.getByRole("listitem")).toHaveTextContent("Claude said");
-  });
-
-  it("marks the speaker for styling", () => {
-    render(
-      <ol>
-        <Message from="user">
-          <MessageBody from="user">Hello</MessageBody>
-        </Message>
-      </ol>,
-    );
-    expect(screen.getByRole("listitem")).toHaveAttribute("data-from", "user");
-  });
-
-  it("does not shadow the ARIA role attribute", () => {
-    // `from` names the speaker; `role` still reaches the element as the real
-    // ARIA attribute, so a consumer can override the list-item semantics.
-    render(
-      <ol>
-        <Message from="assistant" role="presentation">
-          <MessageBody from="assistant">Hi</MessageBody>
-        </Message>
-      </ol>,
-    );
-    expect(screen.queryByRole("listitem")).not.toBeInTheDocument();
-  });
-
-  it("hides the avatar from assistive technology", () => {
-    const { container } = render(
-      <ol>
-        <Message from="assistant">
-          <MessageAvatar>AI</MessageAvatar>
-          <MessageBody from="assistant">Hi</MessageBody>
-        </Message>
-      </ol>,
-    );
-    expect(container.querySelector("[data-slot='message-avatar']")).toHaveAttribute(
-      "aria-hidden",
-      "true",
-    );
-  });
-
-  it("keeps hover-revealed actions in the tab order", async () => {
-    const user = userEvent.setup();
-    render(
-      <ol>
-        <Message from="assistant">
-          <MessageBody from="assistant">
-            Hi
-            <MessageActions>
-              <Button size="icon-sm" variant="ghost" aria-label="Copy">
-                C
-              </Button>
-            </MessageActions>
-          </MessageBody>
-        </Message>
-      </ol>,
-    );
-
-    // Visually faded until hover, but reachable — a control that only exists on
-    // hover is unusable by keyboard and invisible on touch.
-    await user.tab();
-    expect(screen.getByRole("button", { name: "Copy" })).toHaveFocus();
-  });
-
-  it("renders a footer for attachments and citations", () => {
-    render(
-      <ol>
-        <Message from="assistant">
-          <MessageBody from="assistant">
-            Hi
-            <MessageFooter>
-              <span>2 sources</span>
-            </MessageFooter>
-          </MessageBody>
-        </Message>
-      </ol>,
-    );
-    expect(screen.getByText("2 sources")).toBeInTheDocument();
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    render(
-      <ol>
-        <Message from="user" className="gap-8">
-          <MessageBody from="user">Hi</MessageBody>
-        </Message>
-      </ol>,
-    );
-    const item = screen.getByRole("listitem");
-    expect(item).toHaveClass("gap-8");
-    expect(item).not.toHaveClass("gap-3");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <ol>
-        <Message from="user">
-          <MessageBody from="user">What is the capital of France?</MessageBody>
-        </Message>
-        <Message from="assistant">
-          <MessageAvatar>AI</MessageAvatar>
-          <MessageBody from="assistant">Paris.</MessageBody>
-        </Message>
-      </ol>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/ai-model-selector/ai-model-selector.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Badge } from "@/components/badge";
-
-import { ModelSelector, type ModelOption } from "./ai-model-selector";
-
-const MODELS: ModelOption[] = [
-  {
-    id: "fast",
-    name: "Fast",
-    description: "Lowest latency. Good for short answers.",
-    group: "General",
-  },
-  {
-    id: "balanced",
-    name: "Balanced",
-    description: "The default for most work.",
-    group: "General",
-    badge: (
-      <Badge size="sm" variant="secondary">
-        Default
-      </Badge>
-    ),
-  },
-  {
-    id: "deep",
-    name: "Deep Research",
-    description: "Multi-step research with citations.",
-    group: "Advanced",
-  },
-  {
-    id: "vision",
-    name: "Vision Pro",
-    group: "Advanced",
-    disabled: true,
-    disabledReason: "Available on the Team plan",
-  },
-];
-
-const meta = {
-  title: "AI/Model Selector",
-  component: ModelSelector,
-  args: { models: MODELS, defaultValue: "balanced", "aria-label": "Model" },
-  parameters: { controls: { disable: true } },
-} satisfies Meta<typeof ModelSelector>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The trigger shows only the model name; descriptions stay in the list. */
-export const Default: Story = {};
-
-export const Ungrouped: Story = {
-  args: {
-    models: [
-      { id: "a", name: "Model A", description: "Fast and cheap." },
-      { id: "b", name: "Model B", description: "Slower and stronger." },
-    ],
-    defaultValue: "a",
-  },
-};
-
-/** A disabled model always says why. Otherwise it reads as a broken interface. */
-export const WithUnavailableModel: Story = {
-  args: { defaultValue: "fast" },
-};

package/src/components/ai-model-selector/ai-model-selector.test.tsx

@@ -1,120 +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 { ModelSelector, type ModelOption } from "./ai-model-selector";
-
-const MODELS: ModelOption[] = [
-  { id: "fast", name: "Fast", description: "Quick answers.", group: "General" },
-  { id: "balanced", name: "Balanced", description: "The default.", group: "General" },
-  {
-    id: "deep",
-    name: "Deep Research",
-    group: "Advanced",
-    disabled: true,
-    disabledReason: "Available on the Pro plan",
-  },
-];
-
-describe("ModelSelector", () => {
-  it("shows a placeholder until a model is chosen", () => {
-    render(<ModelSelector models={MODELS} aria-label="Model" />);
-    expect(screen.getByRole("combobox")).toHaveTextContent("Select a model");
-  });
-
-  it("lists the models, grouped", async () => {
-    const user = userEvent.setup();
-    render(<ModelSelector models={MODELS} aria-label="Model" />);
-
-    await user.click(screen.getByRole("combobox"));
-    expect(await screen.findByRole("option", { name: /Fast/ })).toBeInTheDocument();
-    expect(screen.getByText("General")).toBeInTheDocument();
-    expect(screen.getByText("Advanced")).toBeInTheDocument();
-  });
-
-  it("shows each model's description", async () => {
-    const user = userEvent.setup();
-    render(<ModelSelector models={MODELS} aria-label="Model" />);
-
-    await user.click(screen.getByRole("combobox"));
-    expect(await screen.findByText("Quick answers.")).toBeInTheDocument();
-  });
-
-  it("says why an unavailable model cannot be chosen", async () => {
-    const user = userEvent.setup();
-    render(<ModelSelector models={MODELS} aria-label="Model" />);
-
-    await user.click(screen.getByRole("combobox"));
-    // A disabled option with no reason reads as a broken interface.
-    expect(await screen.findByText("Available on the Pro plan")).toBeInTheDocument();
-  });
-
-  it("does not select a disabled model", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(<ModelSelector models={MODELS} aria-label="Model" onValueChange={onValueChange} />);
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: /Deep Research/ }));
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-
-  it("reports the chosen model", async () => {
-    const onValueChange = vi.fn();
-    const user = userEvent.setup();
-    render(<ModelSelector models={MODELS} aria-label="Model" onValueChange={onValueChange} />);
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: /Balanced/ }));
-    expect(onValueChange).toHaveBeenCalledWith("balanced");
-  });
-
-  it("shows the chosen model's name, not its description", async () => {
-    render(<ModelSelector models={MODELS} aria-label="Model" defaultValue="fast" />);
-
-    await waitFor(() => {
-      expect(screen.getByRole("combobox")).toHaveTextContent("Fast");
-    });
-    expect(screen.getByRole("combobox")).not.toHaveTextContent("Quick answers.");
-  });
-
-  it("keeps the order it was given rather than sorting groups", async () => {
-    const user = userEvent.setup();
-    render(<ModelSelector models={MODELS} aria-label="Model" />);
-
-    await user.click(screen.getByRole("combobox"));
-    const options = await screen.findAllByRole("option");
-    expect(options.map((option) => option.textContent?.slice(0, 4))).toEqual([
-      "Fast",
-      "Bala",
-      "Deep",
-    ]);
-  });
-
-  it("works without groups", async () => {
-    const user = userEvent.setup();
-    render(
-      <ModelSelector
-        models={[
-          { id: "a", name: "Model A" },
-          { id: "b", name: "Model B" },
-        ]}
-        aria-label="Model"
-      />,
-    );
-
-    await user.click(screen.getByRole("combobox"));
-    expect(await screen.findByRole("option", { name: "Model A" })).toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <>
-        <span id="model-label">Model</span>
-        <ModelSelector models={MODELS} aria-labelledby="model-label" />
-      </>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});