@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/ai-prompt-input/ai-prompt-input.stories.tsx

@@ -1,145 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Paperclip } from "lucide-react";
-import { useState } from "react";
-
-import { ModelSelector } from "@/components/ai-model-selector";
-import { Button } from "@/components/button";
-
-import {
-  PromptInput,
-  PromptInputCounter,
-  PromptInputSubmit,
-  PromptInputTextarea,
-  PromptInputToolbar,
-} from "./ai-prompt-input";
-
-const meta: Meta<typeof PromptInput> = {
-  title: "AI/Prompt Input",
-  component: PromptInput,
-  parameters: { controls: { disable: true } },
-  decorators: [
-    (Story) => (
-      <div className="w-[34rem]">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof PromptInput>;
-
-/** Enter sends, Shift+Enter adds a line — and neither fires mid-IME-composition. */
-export const Default: Story = {
-  render: function Default() {
-    const [sent, setSent] = useState<string[]>([]);
-    const [value, setValue] = useState("");
-
-    return (
-      <div className="grid gap-3">
-        <PromptInput
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (!value.trim()) return;
-            setSent((current) => [...current, value.trim()]);
-            setValue("");
-          }}
-        >
-          <PromptInputTextarea
-            aria-label="Message"
-            placeholder="Ask anything…"
-            value={value}
-            onChange={(event) => {
-              setValue(event.target.value);
-            }}
-          />
-          <PromptInputToolbar>
-            <Button variant="ghost" size="icon-sm" aria-label="Attach a file">
-              <Paperclip />
-            </Button>
-            <PromptInputSubmit />
-          </PromptInputToolbar>
-        </PromptInput>
-        {sent.length > 0 ? (
-          <ul className="text-xs text-muted-foreground">
-            {sent.map((message, index) => (
-              <li key={index}>Sent: {message}</li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-    );
-  },
-};
-
-/** While a response streams, the one control becomes Stop — name included. */
-export const Busy: Story = {
-  render: function Busy() {
-    const [busy, setBusy] = useState(true);
-
-    return (
-      <PromptInput
-        busy={busy}
-        onSubmit={(event) => {
-          event.preventDefault();
-        }}
-      >
-        <PromptInputTextarea aria-label="Message" placeholder="Generating…" />
-        <PromptInputToolbar>
-          <PromptInputSubmit
-            onStop={() => {
-              setBusy(false);
-            }}
-          />
-        </PromptInputToolbar>
-      </PromptInput>
-    );
-  },
-};
-
-export const WithModelAndCounter: Story = {
-  render: function WithModelAndCounter() {
-    const [value, setValue] = useState("");
-
-    return (
-      <PromptInput
-        onSubmit={(event) => {
-          event.preventDefault();
-        }}
-      >
-        <PromptInputTextarea
-          aria-label="Message"
-          placeholder="Ask anything…"
-          value={value}
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-        />
-        <PromptInputToolbar>
-          <ModelSelector
-            aria-label="Model"
-            defaultValue="balanced"
-            triggerSize="sm"
-            models={[
-              { id: "fast", name: "Fast", description: "Quick answers." },
-              { id: "balanced", name: "Balanced", description: "The default." },
-            ]}
-          />
-          <PromptInputCounter value={value.length} max={280} />
-          <PromptInputSubmit />
-        </PromptInputToolbar>
-      </PromptInput>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <PromptInput disabled>
-      <PromptInputTextarea aria-label="Message" placeholder="Sign in to send a message" />
-      <PromptInputToolbar>
-        <PromptInputSubmit />
-      </PromptInputToolbar>
-    </PromptInput>
-  ),
-};

package/src/components/ai-prompt-input/ai-prompt-input.test.tsx

@@ -1,273 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import {
-  PromptInput,
-  PromptInputCounter,
-  PromptInputSubmit,
-  PromptInputTextarea,
-  PromptInputToolbar,
-} from "./ai-prompt-input";
-
-function Example({
-  onSubmit,
-  onStop,
-  busy = false,
-  disabled = false,
-  submitOnEnter = true,
-}: {
-  onSubmit?: () => void;
-  onStop?: () => void;
-  busy?: boolean;
-  disabled?: boolean;
-  submitOnEnter?: boolean;
-} = {}) {
-  return (
-    <PromptInput
-      busy={busy}
-      disabled={disabled}
-      onSubmit={(event) => {
-        event.preventDefault();
-        onSubmit?.();
-      }}
-    >
-      <PromptInputTextarea
-        aria-label="Message"
-        placeholder="Ask anything…"
-        submitOnEnter={submitOnEnter}
-      />
-      <PromptInputToolbar>
-        <PromptInputSubmit onStop={onStop} />
-      </PromptInputToolbar>
-    </PromptInput>
-  );
-}
-
-describe("PromptInput", () => {
-  it("submits on Enter", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onSubmit={onSubmit} />);
-
-    await user.click(screen.getByRole("textbox"));
-    await user.keyboard("Hello{Enter}");
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  it("inserts a newline on Shift+Enter instead of submitting", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onSubmit={onSubmit} />);
-
-    const textarea = screen.getByRole<HTMLTextAreaElement>("textbox");
-    await user.click(textarea);
-    await user.keyboard("Hello{Shift>}{Enter}{/Shift}world");
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(textarea.value).toBe("Hello\nworld");
-  });
-
-  it("does not submit mid-IME-composition", () => {
-    const onSubmit = vi.fn();
-    render(<Example onSubmit={onSubmit} />);
-
-    const textarea = screen.getByRole("textbox");
-    // Enter while an IME composition is active confirms the candidate — for
-    // Japanese, Chinese and Korean input it is part of typing a word. Sending
-    // there truncates the sentence, and it is the most common way a chat
-    // composer breaks for those users.
-    fireEvent.keyDown(textarea, { key: "Enter", isComposing: true });
-    expect(onSubmit).not.toHaveBeenCalled();
-
-    fireEvent.keyDown(textarea, { key: "Enter", isComposing: false });
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  it("can leave Enter as a newline entirely", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onSubmit={onSubmit} submitOnEnter={false} />);
-
-    await user.click(screen.getByRole("textbox"));
-    await user.keyboard("Hello{Enter}");
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it("submits from the send button", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<Example onSubmit={onSubmit} />);
-
-    await user.click(screen.getByRole("button", { name: "Send message" }));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  describe("while busy", () => {
-    it("renames the control to say what it now does", () => {
-      render(<Example busy />);
-      expect(screen.getByRole("button", { name: "Stop generating" })).toBeInTheDocument();
-      expect(screen.queryByRole("button", { name: "Send message" })).not.toBeInTheDocument();
-    });
-
-    it("stops instead of submitting", async () => {
-      const onSubmit = vi.fn();
-      const onStop = vi.fn();
-      const user = userEvent.setup();
-      render(<Example busy onSubmit={onSubmit} onStop={onStop} />);
-
-      await user.click(screen.getByRole("button", { name: "Stop generating" }));
-      expect(onStop).toHaveBeenCalledTimes(1);
-      expect(onSubmit).not.toHaveBeenCalled();
-    });
-
-    it("ignores Enter", async () => {
-      const onSubmit = vi.fn();
-      const user = userEvent.setup();
-      render(<Example busy onSubmit={onSubmit} />);
-
-      await user.click(screen.getByRole("textbox"));
-      await user.keyboard("Hi{Enter}");
-      expect(onSubmit).not.toHaveBeenCalled();
-    });
-  });
-
-  it("does not submit while disabled", async () => {
-    const onSubmit = vi.fn();
-    const user = userEvent.setup();
-    render(<Example disabled onSubmit={onSubmit} />);
-
-    expect(screen.getByRole("textbox")).toBeDisabled();
-    await user.click(screen.getByRole("button", { name: "Send message" }));
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  describe("auto-growing", () => {
-    /**
-     * jsdom performs no layout, so scrollHeight is always 0. Stubbing the
-     * prototype getter before render is what lets the sizing logic run at all;
-     * without it this would assert against a stub of nothing.
-     */
-    function withScrollHeight(height: number, run: () => void) {
-      const original = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollHeight");
-      Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
-        configurable: true,
-        get: () => height,
-      });
-
-      try {
-        run();
-      } finally {
-        if (original) Object.defineProperty(HTMLElement.prototype, "scrollHeight", original);
-      }
-    }
-
-    it("sizes itself to its content", () => {
-      withScrollHeight(120, () => {
-        render(<Example />);
-        expect(screen.getByRole<HTMLTextAreaElement>("textbox").style.height).toBe("120px");
-      });
-    });
-
-    it("stops growing at maxRows and scrolls instead", () => {
-      withScrollHeight(4000, () => {
-        render(
-          <PromptInput>
-            <PromptInputTextarea aria-label="Message" maxRows={4} />
-          </PromptInput>,
-        );
-
-        const textarea = screen.getByRole<HTMLTextAreaElement>("textbox");
-        // jsdom reports no line-height, so the component falls back to 20px.
-        expect(textarea.style.height).toBe("80px");
-        expect(textarea.style.overflowY).toBe("auto");
-      });
-    });
-
-    it("does not scroll while it still fits", () => {
-      withScrollHeight(40, () => {
-        render(<Example />);
-        expect(screen.getByRole<HTMLTextAreaElement>("textbox").style.overflowY).toBe("hidden");
-      });
-    });
-  });
-
-  it("throws a useful error if a part is used outside the root", () => {
-    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined);
-    expect(() => render(<PromptInputSubmit />)).toThrow(
-      /must be rendered inside <PromptInput>/,
-    );
-    consoleError.mockRestore();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});
-
-describe("PromptInputCounter", () => {
-  function Counter({ value, max = 100 }: { value: number; max?: number }) {
-    return <PromptInputCounter value={value} max={max} />;
-  }
-
-  it("shows the count", () => {
-    render(<Counter value={12} />);
-    expect(screen.getByText("12")).toBeInTheDocument();
-  });
-
-  it("stays silent during ordinary typing", () => {
-    render(<Counter value={12} />);
-    // The region exists and is live from the start, but has nothing in it —
-    // announcing every keystroke would be unusable.
-    expect(screen.getByRole("status")).toHaveTextContent("");
-  });
-
-  it("announces once the limit is close", () => {
-    render(<Counter value={95} />);
-    expect(screen.getByRole("status")).toHaveTextContent("5 characters remaining");
-  });
-
-  it("announces going over the limit", () => {
-    render(<Counter value={110} />);
-    expect(screen.getByRole("status")).toHaveTextContent("Over the limit by 10 characters");
-  });
-
-  it("is live from the start, so the first warning is not missed", () => {
-    // A region that only becomes live when it matters misses the very change
-    // that made it matter.
-    render(<Counter value={1} />);
-    expect(screen.getByRole("status")).toHaveAttribute("aria-live", "polite");
-  });
-
-  it("shows the limit visually once warning", () => {
-    render(<Counter value={95} />);
-    expect(screen.getByText("95 / 100")).toBeInTheDocument();
-  });
-
-  it("updates as the value changes", async () => {
-    const user = userEvent.setup();
-
-    function Live() {
-      const [value, setValue] = useState("");
-      return (
-        <>
-          <textarea
-            aria-label="Message"
-            value={value}
-            onChange={(event) => {
-              setValue(event.target.value);
-            }}
-          />
-          <PromptInputCounter value={value.length} max={10} />
-        </>
-      );
-    }
-
-    render(<Live />);
-    await user.type(screen.getByRole("textbox"), "abcdefghij");
-    expect(screen.getByRole("status")).toHaveTextContent("0 characters remaining");
-  });
-});

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

@@ -1,60 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { Response } from "@/components/ai-response";
-
-import { Reasoning, ReasoningContent, ReasoningTrigger } from "./ai-reasoning";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-[32rem]">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "AI/Reasoning",
-  component: Reasoning,
-  parameters: { controls: { disable: true } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Reasoning>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const WORKING =
-  '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 tabindex="0" makes it a focus stop, and a role plus a name stops it being an unlabelled one.';
-
-/** Collapsed by default: reasoning is supporting material, not the answer. */
-export const Default: Story = {
-  render: () => (
-    <div className="grid gap-2">
-      <Reasoning>
-        <ReasoningTrigger />
-        <ReasoningContent>{WORKING}</ReasoningContent>
-      </Reasoning>
-      <Response>
-        Give the scrolling wrapper `tabindex=&quot;0&quot;`, a role and an accessible name.
-      </Response>
-    </div>
-  ),
-};
-
-export const Streaming: Story = {
-  render: () => (
-    <Reasoning defaultOpen>
-      <ReasoningTrigger streaming />
-      <ReasoningContent>
-        The question is about keyboard access to overflowing tables. A scroll container
-      </ReasoningContent>
-    </Reasoning>
-  ),
-};
-
-export const Expanded: Story = {
-  render: () => (
-    <Reasoning defaultOpen>
-      <ReasoningTrigger />
-      <ReasoningContent>{WORKING}</ReasoningContent>
-    </Reasoning>
-  ),
-};

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

@@ -1,95 +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 { Reasoning, ReasoningContent, ReasoningTrigger } from "./ai-reasoning";
-
-describe("Reasoning", () => {
-  it("is collapsed by default, so the answer is not buried", () => {
-    render(
-      <Reasoning>
-        <ReasoningTrigger />
-        <ReasoningContent>Step one, then step two.</ReasoningContent>
-      </Reasoning>,
-    );
-
-    expect(screen.getByRole("button", { name: "Reasoning" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-    expect(screen.queryByText("Step one, then step two.")).not.toBeInTheDocument();
-  });
-
-  it("opens on click", async () => {
-    const user = userEvent.setup();
-    render(
-      <Reasoning>
-        <ReasoningTrigger />
-        <ReasoningContent>Step one, then step two.</ReasoningContent>
-      </Reasoning>,
-    );
-
-    await user.click(screen.getByRole("button", { name: "Reasoning" }));
-    expect(await screen.findByText("Step one, then step two.")).toBeInTheDocument();
-  });
-
-  it("says it is thinking while reasoning streams", () => {
-    render(
-      <Reasoning>
-        <ReasoningTrigger streaming />
-        <ReasoningContent>Partial…</ReasoningContent>
-      </Reasoning>,
-    );
-    expect(screen.getByRole("button", { name: "Thinking…" })).toBeInTheDocument();
-  });
-
-  it("accepts custom labels", () => {
-    render(
-      <Reasoning>
-        <ReasoningTrigger label="Show working" />
-        <ReasoningContent>Work</ReasoningContent>
-      </Reasoning>,
-    );
-    expect(screen.getByRole("button", { name: "Show working" })).toBeInTheDocument();
-  });
-
-  it("can be opened by default", () => {
-    render(
-      <Reasoning defaultOpen>
-        <ReasoningTrigger />
-        <ReasoningContent>Visible</ReasoningContent>
-      </Reasoning>,
-    );
-    expect(screen.getByText("Visible")).toBeInTheDocument();
-  });
-
-  it("toggles from the keyboard", async () => {
-    const user = userEvent.setup();
-    render(
-      <Reasoning>
-        <ReasoningTrigger />
-        <ReasoningContent>Work</ReasoningContent>
-      </Reasoning>,
-    );
-
-    await user.tab();
-    await user.keyboard("{Enter}");
-    await waitFor(() => {
-      expect(screen.getByRole("button", { name: "Reasoning" })).toHaveAttribute(
-        "aria-expanded",
-        "true",
-      );
-    });
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <Reasoning defaultOpen>
-        <ReasoningTrigger />
-        <ReasoningContent>Step one, then step two.</ReasoningContent>
-      </Reasoning>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

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

@@ -1,75 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useEffect, useState } from "react";
-
-import { Response, ThinkingIndicator } from "./ai-response";
-
-const FULL =
-  "Streaming works one token at a time. The caret marks where the text stops, and nothing is announced as it arrives — a live region firing on every token is unusable with a screen reader.";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-[32rem]">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "AI/Response",
-  component: Response,
-  args: { streaming: false, children: FULL },
-  argTypes: { streaming: { control: "boolean" } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof Response>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Streaming: Story = {
-  args: { streaming: true, children: "Streaming works one token at a time. The caret" },
-};
-
-/** The real thing: text arriving, then settling. */
-export const Live: Story = {
-  parameters: { controls: { disable: true } },
-  render: function Live() {
-    const [length, setLength] = useState(0);
-
-    useEffect(() => {
-      const timer = setInterval(() => {
-        setLength((current) => (current >= FULL.length ? 0 : current + 2));
-      }, 40);
-      return () => {
-        clearInterval(timer);
-      };
-    }, []);
-
-    const done = length >= FULL.length;
-    return <Response streaming={!done}>{FULL.slice(0, length)}</Response>;
-  },
-};
-
-/** Before the first token there is nothing to put a caret after. */
-export const Thinking: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ThinkingIndicator />,
-};
-
-export const WithRenderedMarkdown: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Response>
-      <p>Three things matter here:</p>
-      <ul>
-        <li>
-          The transcript is a <code>list</code>, not a live region.
-        </li>
-        <li>State is announced; content is not.</li>
-        <li>
-          See <a href="#a11y">the accessibility notes</a>.
-        </li>
-      </ul>
-    </Response>
-  ),
-};