@dowel-ui/react 0.1.0 → 0.2.0

package/src/components/activity-feed/activity-feed.stories.tsx

@@ -1,163 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { CircleCheck, GitBranch, GitPullRequest, Rocket, TriangleAlert } from "lucide-react";
-
-import { Avatar, AvatarFallback } from "@/components/avatar";
-import { Badge } from "@/components/badge";
-
-import {
-  ActivityContent,
-  ActivityDescription,
-  ActivityFeed,
-  ActivityIndicator,
-  ActivityItem,
-  ActivityTime,
-  ActivityTitle,
-} from "./activity-feed";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withFixedWidth: Decorator = (Story) => (
-  <div className="w-96">
-    <Story />
-  </div>
-);
-
-const meta = {
-  title: "Data/Activity Feed",
-  component: ActivityFeed,
-  parameters: { controls: { disable: true } },
-  decorators: [withFixedWidth],
-} satisfies Meta<typeof ActivityFeed>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const EVENTS = [
-  {
-    id: "1",
-    icon: Rocket,
-    title: "Deployed to production",
-    detail: "Build 1420 · main",
-    at: "2026-09-01T09:12:00Z",
-    label: "12 minutes ago",
-  },
-  {
-    id: "2",
-    icon: CircleCheck,
-    title: "All checks passed",
-    detail: "24 tests, 0 failures",
-    at: "2026-09-01T09:04:00Z",
-    label: "20 minutes ago",
-  },
-  {
-    id: "3",
-    icon: GitPullRequest,
-    title: "Opened pull request #482",
-    detail: "Add keyboard shortcuts to the command palette",
-    at: "2026-08-31T17:20:00Z",
-    label: "Yesterday",
-  },
-  {
-    id: "4",
-    icon: GitBranch,
-    title: "Created branch feat/shortcuts",
-    detail: "From main",
-    at: "2026-08-31T16:02:00Z",
-    label: "Yesterday",
-  },
-];
-
-export const Default: Story = {
-  render: () => (
-    <ActivityFeed>
-      {EVENTS.map((event, index) => {
-        const Icon = event.icon;
-        return (
-          <ActivityItem key={event.id} last={index === EVENTS.length - 1}>
-            <ActivityIndicator>
-              <Icon />
-            </ActivityIndicator>
-            <ActivityContent>
-              <ActivityTitle>{event.title}</ActivityTitle>
-              <ActivityDescription>{event.detail}</ActivityDescription>
-              <ActivityTime dateTime={event.at}>{event.label}</ActivityTime>
-            </ActivityContent>
-          </ActivityItem>
-        );
-      })}
-    </ActivityFeed>
-  ),
-};
-
-/** Avatars as the rail markers, via asChild. */
-export const WithAvatars: Story = {
-  render: () => (
-    <ActivityFeed>
-      {[
-        {
-          id: "1",
-          who: "AL",
-          title: "Ada Lovelace approved the pull request",
-          at: "2026-09-01T09:12:00Z",
-          label: "12 minutes ago",
-        },
-        {
-          id: "2",
-          who: "GH",
-          title: "Grace Hopper left a comment",
-          at: "2026-09-01T08:40:00Z",
-          label: "44 minutes ago",
-        },
-        {
-          id: "3",
-          who: "KJ",
-          title: "Katherine Johnson requested changes",
-          at: "2026-08-31T18:05:00Z",
-          label: "Yesterday",
-        },
-      ].map((event, index, all) => (
-        <ActivityItem key={event.id} last={index === all.length - 1}>
-          <ActivityIndicator asChild>
-            <Avatar size="xs">
-              <AvatarFallback>{event.who}</AvatarFallback>
-            </Avatar>
-          </ActivityIndicator>
-          <ActivityContent>
-            <ActivityTitle>{event.title}</ActivityTitle>
-            <ActivityTime dateTime={event.at}>{event.label}</ActivityTime>
-          </ActivityContent>
-        </ActivityItem>
-      ))}
-    </ActivityFeed>
-  ),
-};
-
-export const WithStatus: Story = {
-  render: () => (
-    <ActivityFeed>
-      <ActivityItem>
-        <ActivityIndicator className="border-success/40 text-success">
-          <CircleCheck />
-        </ActivityIndicator>
-        <ActivityContent>
-          <ActivityTitle className="flex items-center gap-2">
-            Deployment succeeded
-            <Badge variant="success" size="sm">
-              Live
-            </Badge>
-          </ActivityTitle>
-          <ActivityTime dateTime="2026-09-01T09:12:00Z">12 minutes ago</ActivityTime>
-        </ActivityContent>
-      </ActivityItem>
-      <ActivityItem last>
-        <ActivityIndicator className="border-warning/40 text-warning">
-          <TriangleAlert />
-        </ActivityIndicator>
-        <ActivityContent>
-          <ActivityTitle>Build finished with warnings</ActivityTitle>
-          <ActivityDescription>3 unused exports detected.</ActivityDescription>
-          <ActivityTime dateTime="2026-09-01T09:05:00Z">19 minutes ago</ActivityTime>
-        </ActivityContent>
-      </ActivityItem>
-    </ActivityFeed>
-  ),
-};

package/src/components/activity-feed/activity-feed.test.tsx

@@ -1,125 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import {
-  ActivityContent,
-  ActivityDescription,
-  ActivityFeed,
-  ActivityIndicator,
-  ActivityItem,
-  ActivityTime,
-  ActivityTitle,
-} from "./activity-feed";
-
-const EVENTS = [
-  { id: "1", title: "Deployed to production", at: "2026-09-01T09:00:00Z" },
-  { id: "2", title: "Opened a pull request", at: "2026-08-31T17:20:00Z" },
-  { id: "3", title: "Created the project", at: "2026-08-30T11:05:00Z" },
-];
-
-function Example() {
-  return (
-    <ActivityFeed>
-      {EVENTS.map((event, index) => (
-        <ActivityItem key={event.id} last={index === EVENTS.length - 1}>
-          <ActivityIndicator>
-            <svg />
-          </ActivityIndicator>
-          <ActivityContent>
-            <ActivityTitle>{event.title}</ActivityTitle>
-            <ActivityTime dateTime={event.at}>Recently</ActivityTime>
-          </ActivityContent>
-        </ActivityItem>
-      ))}
-    </ActivityFeed>
-  );
-}
-
-describe("ActivityFeed", () => {
-  it("renders an ordered list, so position and count are announced", () => {
-    render(<Example />);
-    expect(screen.getByRole("list").tagName).toBe("OL");
-    expect(screen.getAllByRole("listitem")).toHaveLength(3);
-  });
-
-  it("renders each event", () => {
-    render(<Example />);
-    for (const event of EVENTS) {
-      expect(screen.getByText(event.title)).toBeInTheDocument();
-    }
-  });
-
-  it("hides the indicator from assistive technology", () => {
-    const { container } = render(<Example />);
-    for (const indicator of container.querySelectorAll("[data-slot='activity-indicator']")) {
-      expect(indicator).toHaveAttribute("aria-hidden", "true");
-    }
-  });
-
-  it("carries a machine-readable timestamp", () => {
-    const { container } = render(<Example />);
-    const time = container.querySelector("time");
-    expect(time).toHaveAttribute("datetime", "2026-09-01T09:00:00Z");
-  });
-
-  it("marks the last item so no rail is drawn past it", () => {
-    const { container } = render(<Example />);
-    const items = container.querySelectorAll("[data-slot='activity-item']");
-    expect(items[items.length - 1]).toHaveAttribute("data-last", "true");
-    expect(items[0]).not.toHaveAttribute("data-last");
-  });
-
-  it("renders the indicator as another element with asChild", () => {
-    render(
-      <ActivityFeed>
-        <ActivityItem>
-          <ActivityIndicator asChild>
-            <span data-testid="custom">A</span>
-          </ActivityIndicator>
-          <ActivityContent>
-            <ActivityTitle>Event</ActivityTitle>
-          </ActivityContent>
-        </ActivityItem>
-      </ActivityFeed>,
-    );
-    expect(screen.getByTestId("custom")).toHaveAttribute("aria-hidden", "true");
-  });
-
-  it("renders a description when given one", () => {
-    render(
-      <ActivityFeed>
-        <ActivityItem last>
-          <ActivityIndicator />
-          <ActivityContent>
-            <ActivityTitle>Deployed</ActivityTitle>
-            <ActivityDescription>Build 1420 is live.</ActivityDescription>
-          </ActivityContent>
-        </ActivityItem>
-      </ActivityFeed>,
-    );
-    expect(screen.getByText("Build 1420 is live.")).toBeInTheDocument();
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    const { container } = render(
-      <ActivityFeed className="gap-4">
-        <ActivityItem last className="pb-0">
-          <ActivityIndicator />
-          <ActivityContent>
-            <ActivityTitle>Event</ActivityTitle>
-          </ActivityContent>
-        </ActivityItem>
-      </ActivityFeed>,
-    );
-
-    const item = container.querySelector("[data-slot='activity-item']");
-    expect(item).toHaveClass("pb-0");
-    expect(item).not.toHaveClass("pb-6");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Example />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/ai-agent-status/ai-agent-status.stories.tsx

@@ -1,86 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import {
-  ActivityContent,
-  ActivityFeed,
-  ActivityIndicator,
-  ActivityItem,
-  ActivityTime,
-  ActivityTitle,
-} from "@/components/activity-feed";
-
-import { AgentStatus } from "./ai-agent-status";
-
-const meta = {
-  title: "AI/Agent Status",
-  component: AgentStatus,
-  args: { state: "working", live: false },
-  argTypes: {
-    state: {
-      control: "select",
-      options: ["idle", "thinking", "working", "waiting", "done", "error"],
-    },
-    live: { control: "boolean" },
-  },
-} satisfies Meta<typeof AgentStatus>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** Every state is a word. Colour never carries it alone. */
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      {(["idle", "thinking", "working", "waiting", "done", "error"] as const).map((state) => (
-        <AgentStatus key={state} state={state} />
-      ))}
-    </div>
-  ),
-};
-
-export const CustomWording: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <AgentStatus state="working" label="Indexing 412 files" />
-      <AgentStatus state="waiting" label="Needs your approval" />
-      <AgentStatus state="error" label="Rate limited — retrying in 30s" />
-    </div>
-  ),
-};
-
-/** In a fleet view, announcements stay off: six agents narrating is noise. */
-export const AgentFleet: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-96">
-      <ActivityFeed>
-        {[
-          {
-            id: "1",
-            name: "Researcher",
-            state: "working" as const,
-            at: "2026-09-01T09:12:00Z",
-          },
-          { id: "2", name: "Writer", state: "waiting" as const, at: "2026-09-01T09:10:00Z" },
-          { id: "3", name: "Reviewer", state: "done" as const, at: "2026-09-01T09:02:00Z" },
-          { id: "4", name: "Publisher", state: "error" as const, at: "2026-09-01T08:58:00Z" },
-        ].map((agent, index, all) => (
-          <ActivityItem key={agent.id} last={index === all.length - 1}>
-            <ActivityIndicator />
-            <ActivityContent>
-              <ActivityTitle className="flex items-center gap-2">
-                {agent.name}
-                <AgentStatus state={agent.state} />
-              </ActivityTitle>
-              <ActivityTime dateTime={agent.at}>Updated recently</ActivityTime>
-            </ActivityContent>
-          </ActivityItem>
-        ))}
-      </ActivityFeed>
-    </div>
-  ),
-};

package/src/components/ai-agent-status/ai-agent-status.test.tsx

@@ -1,66 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { AgentStatus, type AgentState } from "./ai-agent-status";
-
-describe("AgentStatus", () => {
-  it.each([
-    ["idle", "Idle"],
-    ["thinking", "Thinking"],
-    ["working", "Working"],
-    ["waiting", "Waiting for input"],
-    ["done", "Done"],
-    ["error", "Error"],
-  ] as [AgentState, string][])("states %s in words", (state, label) => {
-    render(<AgentStatus state={state} />);
-    // Agent states matter most when something has failed — exactly when a
-    // colour-only signal fails the people who most need to notice.
-    expect(screen.getByText(label)).toBeInTheDocument();
-  });
-
-  it("accepts custom wording", () => {
-    render(<AgentStatus state="working" label="Indexing 412 files" />);
-    expect(screen.getByText("Indexing 412 files")).toBeInTheDocument();
-  });
-
-  it("marks the state for styling", () => {
-    const { container } = render(<AgentStatus state="error" />);
-    expect(container.firstElementChild).toHaveAttribute("data-state", "error");
-  });
-
-  it("does not announce by default", () => {
-    // Several agents each announcing their transitions turns a dashboard into
-    // noise.
-    render(<AgentStatus state="working" />);
-    expect(screen.queryByRole("status")).not.toBeInTheDocument();
-  });
-
-  it("announces politely when asked", () => {
-    render(<AgentStatus state="working" live />);
-    const status = screen.getByRole("status");
-    expect(status).toHaveAttribute("aria-live", "polite");
-    expect(status).toHaveTextContent("Working");
-  });
-
-  it("hides its dot from assistive technology", () => {
-    const { container } = render(<AgentStatus state="done" />);
-    expect(container.querySelector("span[aria-hidden='true']")).toBeInTheDocument();
-  });
-
-  it("lets a consumer className override a conflicting utility", () => {
-    const { container } = render(<AgentStatus state="idle" className="text-base" />);
-    expect(container.firstElementChild).toHaveClass("text-base");
-    expect(container.firstElementChild).not.toHaveClass("text-xs");
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <div>
-        <AgentStatus state="working" />
-        <AgentStatus state="error" />
-      </div>,
-    );
-    await expectNoA11yViolations(container);
-  });
-});

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

@@ -1,126 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Message, MessageAvatar, MessageBody } from "@/components/ai-message";
-import { Response, ThinkingIndicator } from "@/components/ai-response";
-import { Button } from "@/components/button";
-
-import {
-  Conversation,
-  ConversationMessages,
-  ConversationScrollButton,
-  ConversationStatus,
-} from "./ai-conversation";
-
-const meta: Meta<typeof Conversation> = {
-  title: "AI/Conversation",
-  component: Conversation,
-  parameters: { controls: { disable: true } },
-};
-
-export default meta;
-type Story = StoryObj<typeof Conversation>;
-
-const TURNS = [
-  { role: "user" as const, text: "What's the difference between a Sheet and a Drawer?" },
-  {
-    role: "assistant" as const,
-    text: "A Sheet slides in from any edge and is dismissed with Escape, the overlay or a close button. A Drawer is bottom-anchored and adds a drag gesture — but the gesture is never the only way out.",
-  },
-  { role: "user" as const, text: "When would I use one over the other?" },
-  {
-    role: "assistant" as const,
-    text: "Use a Sheet for secondary content on any viewport: filters, details, navigation. Use a Drawer when the surface is primarily touch-driven and dragging it away is the natural gesture.",
-  },
-];
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex h-96 w-[34rem] flex-col rounded-xl border border-border">
-      <Conversation>
-        <ConversationMessages>
-          {TURNS.map((turn, index) => (
-            <Message key={index} from={turn.role}>
-              {turn.role === "assistant" ? <MessageAvatar>AI</MessageAvatar> : null}
-              <MessageBody from={turn.role}>
-                {turn.role === "assistant" ? <Response>{turn.text}</Response> : turn.text}
-              </MessageBody>
-            </Message>
-          ))}
-        </ConversationMessages>
-        <ConversationScrollButton />
-      </Conversation>
-    </div>
-  ),
-};
-
-/**
- * State goes in the status region; the response text never does. A live region
- * that updates per token is unusable with a screen reader.
- */
-export const Streaming: Story = {
-  render: function Streaming() {
-    const [streaming, setStreaming] = useState(false);
-
-    return (
-      <div className="flex h-96 w-[34rem] flex-col rounded-xl border border-border">
-        <Conversation>
-          <ConversationMessages>
-            <Message from="user">
-              <MessageBody from="user">Explain streaming responses.</MessageBody>
-            </Message>
-            <Message from="assistant">
-              <MessageAvatar>AI</MessageAvatar>
-              <MessageBody from="assistant">
-                {streaming ? (
-                  <Response streaming>Tokens arrive one at a time, and the caret</Response>
-                ) : (
-                  <ThinkingIndicator />
-                )}
-              </MessageBody>
-            </Message>
-          </ConversationMessages>
-          <ConversationStatus>
-            {streaming ? "Generating response" : "Waiting for the first token"}
-          </ConversationStatus>
-        </Conversation>
-        <div className="border-t border-border p-3">
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => {
-              setStreaming((current) => !current);
-            }}
-          >
-            Toggle streaming
-          </Button>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** Scroll up: following stops, and an explicit way back appears. */
-export const LongTranscript: Story = {
-  render: () => (
-    <div className="flex h-96 w-[34rem] flex-col rounded-xl border border-border">
-      <Conversation>
-        <ConversationMessages>
-          {Array.from({ length: 14 }, (_, index) => {
-            const role = index % 2 === 0 ? ("user" as const) : ("assistant" as const);
-            return (
-              <Message key={index} from={role}>
-                {role === "assistant" ? <MessageAvatar>AI</MessageAvatar> : null}
-                <MessageBody from={role}>
-                  Turn {index + 1}.{" "}
-                  {role === "assistant" ? "An answer of some length." : "A question."}
-                </MessageBody>
-              </Message>
-            );
-          })}
-        </ConversationMessages>
-        <ConversationScrollButton />
-      </Conversation>
-    </div>
-  ),
-};