@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/diff-view.stories.tsx

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { ChangeReview, type ChangeHunk, type DiffLine } from "@elabs-ai/components-ui";
+import { DiffView } from "./diff-view";
+
+const meta = {
+  title: "AI/DiffView",
+  component: DiffView,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The READ-ONLY patch renderer. Pick a diff surface by what the human is allowed " +
+          "to do with the change: reading lines of a patch → `AI/DiffView` " +
+          "(`@elabs-ai/components-ai`); accepting or rejecting per hunk → " +
+          "`AI/ChangeReview` (`@elabs-ai/components-ui`); editing both sides, side by " +
+          "side → `Editor/DiffEditor` (`@elabs-ai/components-editor`); reading a " +
+          "patch in a console transcript → `Terminal/TerminalDiffHunk` " +
+          "(`@elabs-ai/components-terminal`). See " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
+          "This view renders a `DiffLine[]` someone else computed — it never diffs, " +
+          "fetches or parses a patch itself. To put those lines behind an approve/reject " +
+          "gate, the app that depends on both packages injects one into the other: pass a " +
+          "`<DiffView>` through `ChangeReview`’s `renderHunk` render-prop or a " +
+          "hunk’s `after` slot, as the *Composed into ChangeReview (ui)* story below " +
+          "does. That seam is ratified, not unfinished — `ChangeHunk` gains no " +
+          "`lines` field and `DiffLine` never moves, because `@elabs-ai/components-ui` " +
+          "may not import `@elabs-ai/components-ai` and this view needs Shiki.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DiffView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// A representative mix of every DiffLineType — meta headers, a hunk range, a
+// deletion, two additions and trailing context (#102 acceptance criteria).
+const SAMPLE_LINES: DiffLine[] = [
+  { type: "meta", text: "diff --git a/src/math.ts b/src/math.ts" },
+  { type: "meta", text: "index a1b2c3d..e4f5g6h 100644" },
+  { type: "meta", text: "--- a/src/math.ts" },
+  { type: "meta", text: "+++ b/src/math.ts" },
+  { type: "hunk", text: "@@ -1,5 +1,6 @@" },
+  {
+    type: "context",
+    oldNumber: 1,
+    newNumber: 1,
+    text: "export function add(a: number, b: number) {",
+  },
+  { type: "del", oldNumber: 2, text: "  return a - b; // bug: subtracts instead of adds" },
+  { type: "add", newNumber: 2, text: "  return a + b;" },
+  { type: "add", newNumber: 3, text: "  // fixed the sign error" },
+  { type: "context", oldNumber: 3, newNumber: 4, text: "}" },
+  { type: "context", oldNumber: 4, newNumber: 5, text: "" },
+  { type: "context", oldNumber: 5, newNumber: 6, text: "export const VERSION = 2;" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView
+        lines={SAMPLE_LINES}
+        file="src/math.ts"
+        stats={{ additions: 2, deletions: 1 }}
+        language="typescript"
+      />
+    </div>
+  ),
+};
+
+// Dark theme — the row tints (`bg-success/10` / `bg-destructive/10`), the
+// marker/gutter tokens and the Shiki-derived syntax colour must all resolve
+// from the SCOPED dark region, not the document root (same pattern as
+// `code-block.stories.tsx`'s `DarkTheme`).
+export const DarkTheme: Story = {
+  render: () => (
+    <div className="max-w-2xl" data-theme="dark">
+      <div className="rounded-lg bg-background p-6 text-foreground">
+        <DiffView lines={SAMPLE_LINES} file="src/math.ts" stats={{ additions: 2, deletions: 1 }} />
+      </div>
+    </div>
+  ),
+};
+
+// variant="split" — two aligned columns (old-file view | new-file view).
+export const SplitVariant: Story = {
+  name: 'variant="split"',
+  render: () => (
+    <div className="max-w-3xl">
+      <DiffView lines={SAMPLE_LINES} file="src/math.ts" variant="split" />
+    </div>
+  ),
+};
+
+// pager — absorbs the upstream CodexDiff shape: scroll-position indicator, a
+// key legend, and a named `role="region"`.
+const LONG_LINES: DiffLine[] = Array.from({ length: 60 }, (_, i) => ({
+  type: i % 11 === 0 ? "del" : i % 13 === 0 ? "add" : "context",
+  oldNumber: i % 13 === 0 ? undefined : i + 1,
+  newNumber: i % 11 === 0 ? undefined : i + 1,
+  text: `line ${i + 1} of a long file`,
+})) as DiffLine[];
+
+export const Pager: Story = {
+  name: "pager",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView lines={LONG_LINES} file="src/very-long-file.ts" pager />
+    </div>
+  ),
+};
+
+// contextLines — a long run of unchanged lines collapses behind a "show more"
+// control that restores it on click.
+const CONTEXT_RUN_LINES: DiffLine[] = [
+  { type: "hunk", text: "@@ -1,12 +1,13 @@" },
+  ...Array.from({ length: 10 }, (_, i) => ({
+    type: "context" as const,
+    oldNumber: i + 1,
+    newNumber: i + 1,
+    text: `unchanged line ${i + 1}`,
+  })),
+  { type: "add", newNumber: 11, text: "// a single new line at the end" },
+];
+
+export const CollapsedContext: Story = {
+  name: "contextLines",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView lines={CONTEXT_RUN_LINES} contextLines={4} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const showMore = await canvas.findByRole("button", { name: /more line/ });
+    await expect(canvas.queryByText("unchanged line 5")).not.toBeInTheDocument();
+    await userEvent.click(showMore);
+    await expect(canvas.getByText("unchanged line 5")).toBeInTheDocument();
+  },
+};
+
+// LOADING — no renderable diff yet (loading-states.md). Layout-shaped
+// skeleton rows at the real row height; no layout shift once `lines` settles.
+export const Loading: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView lines={[]} loading file="src/math.ts" />
+    </div>
+  ),
+};
+
+// STREAMING — lines are still arriving (loading-states.md `isStreaming`). What
+// exists renders as-is, including a syntactically incomplete final line, and
+// no error surface appears.
+export const Streaming: Story = {
+  name: "isStreaming",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView
+        lines={[
+          { type: "context", oldNumber: 1, newNumber: 1, text: "export function add(a, b) {" },
+          { type: "add", newNumber: 2, text: "  return a + b" },
+        ]}
+        isStreaming
+      />
+    </div>
+  ),
+};
+
+// ─── ChangeReview composition (binding decision — architecture § 3) ────────
+//
+// DiffView (ai) and ChangeReview (ui) never import each other. The app, which
+// depends on both, wires them together through ChangeReview's existing
+// injection seams — here, the `renderHunk` render-prop seam. `ChangeHunk`
+// gains no `lines` field; `DiffLine` never moves into `ui`.
+const REVIEW_HUNK_LINES: Record<string, DiffLine[]> = {
+  "hunk-1": SAMPLE_LINES.filter((l) => l.type !== "meta"),
+};
+
+const REVIEW_HUNKS: ChangeHunk[] = [{ id: "hunk-1", title: "src/math.ts", status: "modified" }];
+
+export const ChangeReviewComposition: Story = {
+  name: "Composed into ChangeReview (ui)",
+  render: () => (
+    <div className="max-w-2xl">
+      <ChangeReview
+        hunks={REVIEW_HUNKS}
+        renderHunk={(hunk) => (
+          <DiffView lines={REVIEW_HUNK_LINES[hunk.id] ?? []} variant="inline" />
+        )}
+      />
+    </div>
+  ),
+};

package/src/diff-view.test.tsx

@@ -0,0 +1,238 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { type DiffLine } from "@elabs-ai/components-ui";
+import { DiffView } from "./diff-view";
+
+/**
+ * No `LocaleProvider` wrapper: `useLocale()` falls back to the shipped English
+ * defaults, so these assertions prove the real `ai.diffView.*` catalogue in
+ * `packages/ui/src/components/locale-provider/messages.ts` — not a local stub
+ * that would keep passing if the central entry were missing or misspelled.
+ */
+function renderDiffView(ui: React.ReactElement) {
+  return render(ui);
+}
+
+const MIXED_LINES: DiffLine[] = [
+  { type: "hunk", text: "@@ -1,3 +1,4 @@" },
+  { type: "context", oldNumber: 1, newNumber: 1, text: "function add(a, b) {" },
+  { type: "del", oldNumber: 2, text: "  return a - b; // bug" },
+  { type: "add", newNumber: 2, text: "  return a + b;" },
+  { type: "add", newNumber: 3, text: "  // fixed" },
+  { type: "context", oldNumber: 3, newNumber: 4, text: "}" },
+];
+
+describe("DiffView — gutter correctness (the off-by-one this model exists to prevent)", () => {
+  it("shows an add row's new number only, and a del row's old number only", () => {
+    const { container } = renderDiffView(<DiffView lines={MIXED_LINES} />);
+    const rows = container.querySelectorAll('[data-slot="diff-view-row"][data-diff-type]');
+
+    const del = Array.from(rows).find((r) => r.getAttribute("data-diff-type") === "del")!;
+    expect(within(del as HTMLElement).getByText("2")).toBeInTheDocument();
+    expect(del.querySelector('[data-slot="diff-view-gutter-old"]')?.textContent).toBe("2");
+    expect(del.querySelector('[data-slot="diff-view-gutter-new"]')?.textContent).toBe("");
+
+    const add = Array.from(rows).find(
+      (r) => r.getAttribute("data-diff-type") === "add" && r.textContent?.includes("fixed"),
+    )!;
+    expect(add.querySelector('[data-slot="diff-view-gutter-new"]')?.textContent).toBe("3");
+    expect(add.querySelector('[data-slot="diff-view-gutter-old"]')?.textContent).toBe("");
+
+    const context = Array.from(rows).find((r) => r.getAttribute("data-diff-type") === "context")!;
+    expect(context.querySelector('[data-slot="diff-view-gutter-old"]')?.textContent).toBe("1");
+    expect(context.querySelector('[data-slot="diff-view-gutter-new"]')?.textContent).toBe("1");
+  });
+});
+
+describe("DiffView — colour is never the only channel (accessibility.md)", () => {
+  it("gives add and del rows DIFFERENT accessible text and a different marker glyph — not merely different classes", () => {
+    const { container } = renderDiffView(
+      <DiffView
+        lines={[
+          { type: "del", oldNumber: 1, text: "old line" },
+          { type: "add", newNumber: 1, text: "new line" },
+        ]}
+      />,
+    );
+
+    // Accessible text: the sr-only polarity word actually differs.
+    expect(screen.getByText("Added:", { exact: false })).toBeInTheDocument();
+    expect(screen.getByText("Removed:", { exact: false })).toBeInTheDocument();
+
+    // Marker glyph: a real, different rendered character per row — the shape
+    // channel a colour-blind or greyscale reader relies on.
+    const delMarker = container.querySelector(
+      '[data-diff-type="del"] [data-slot="diff-view-marker"]',
+    );
+    const addMarker = container.querySelector(
+      '[data-diff-type="add"] [data-slot="diff-view-marker"]',
+    );
+    expect(delMarker?.textContent).toBe("−");
+    expect(addMarker?.textContent).toBe("+");
+    expect(delMarker?.textContent).not.toBe(addMarker?.textContent);
+  });
+
+  it("gives the del row's marker a distinct tone class from the add row's — but that alone is insufficient (locked above by text+glyph)", () => {
+    const { container } = renderDiffView(
+      <DiffView
+        lines={[
+          { type: "del", oldNumber: 1, text: "old line" },
+          { type: "add", newNumber: 1, text: "new line" },
+        ]}
+      />,
+    );
+    const delMarker = container.querySelector(
+      '[data-diff-type="del"] [data-slot="diff-view-marker"]',
+    );
+    const addMarker = container.querySelector(
+      '[data-diff-type="add"] [data-slot="diff-view-marker"]',
+    );
+    expect(delMarker?.className).not.toBe(addMarker?.className);
+  });
+});
+
+describe("DiffView — loading vocabulary (loading-states.md)", () => {
+  it("loading renders layout-shaped skeleton rows sharing the real row's height class (no shift on settle)", () => {
+    const { container: loadingContainer } = renderDiffView(<DiffView lines={[]} loading />);
+    const { container: settledContainer } = renderDiffView(<DiffView lines={MIXED_LINES} />);
+
+    const skeletonRow = loadingContainer.querySelector('[data-slot="diff-view-row"]');
+    const realRow = settledContainer.querySelector(
+      '[data-slot="diff-view-row"][data-diff-type="add"]',
+    );
+    expect(skeletonRow).toBeTruthy();
+    expect(realRow).toBeTruthy();
+    // Same grid template + padding class => same row height; only the tint axis differs.
+    expect(skeletonRow?.className).toContain("grid-cols-[2.75rem_2.75rem_1.25rem_1fr]");
+    expect(realRow?.className).toContain("grid-cols-[2.75rem_2.75rem_1.25rem_1fr]");
+
+    expect(screen.getByText("Loading diff…")).toBeInTheDocument();
+  });
+
+  it("isStreaming with a truncated final line renders no error surface", () => {
+    const truncated: DiffLine[] = [
+      { type: "context", oldNumber: 1, newNumber: 1, text: "const partial = {" },
+      { type: "add", newNumber: 2, text: '  key: "unterminated' },
+    ];
+    renderDiffView(<DiffView lines={truncated} isStreaming />);
+
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(screen.getByText("Generating…")).toBeInTheDocument();
+  });
+});
+
+describe("DiffView — variants", () => {
+  it('renders one row per line for variant="inline" (default)', () => {
+    const { container } = renderDiffView(<DiffView lines={MIXED_LINES} />);
+    expect(container.querySelectorAll('[data-slot="diff-view-row"]')).toHaveLength(
+      MIXED_LINES.length,
+    );
+  });
+
+  it('renders two aligned columns for variant="split"', () => {
+    const { container } = renderDiffView(
+      <DiffView
+        lines={[
+          { type: "del", oldNumber: 1, text: "old" },
+          { type: "add", newNumber: 1, text: "new" },
+        ]}
+        variant="split"
+      />,
+    );
+    const rows = container.querySelectorAll('[data-slot="diff-view-row"][data-diff-type]');
+    expect(rows).toHaveLength(2);
+    for (const row of rows) {
+      // Each row is split into exactly two side-by-side panes.
+      expect(row.children).toHaveLength(2);
+    }
+  });
+});
+
+describe("DiffView — pager (absorbs CodexDiff)", () => {
+  it("renders a scroll-position indicator, a key legend, and a named region", () => {
+    renderDiffView(<DiffView lines={MIXED_LINES} pager file="src/add.ts" />);
+
+    const region = screen.getByRole("region", { name: "Code diff: src/add.ts" });
+    expect(region).toBeInTheDocument();
+    expect(
+      within(region).getByText("Arrow keys scroll, Page Up/Down page, Home/End jump"),
+    ).toBeInTheDocument();
+    expect(within(region).getByText("0%")).toBeInTheDocument();
+  });
+});
+
+describe("DiffView — old/new sides tokenize SEPARATELY (perf review §2 — a deleted comment opener must not swallow the added side)", () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute("data-theme");
+    for (const token of [
+      "--code-foreground",
+      "--code-comment",
+      "--code-keyword",
+      "--code-number",
+    ]) {
+      document.documentElement.style.removeProperty(token);
+    }
+  });
+
+  it("does not let an unterminated block comment on the del side swallow the add side's tokens", async () => {
+    // Distinct resolved colors per scope (comment vs. keyword vs. number) so
+    // a merged/degenerate single-token line is distinguishable from a real,
+    // multi-token breakdown — see the module doc comment on `useDiffTokens`.
+    document.documentElement.setAttribute("data-theme", "light");
+    document.documentElement.style.setProperty("--code-foreground", "oklch(0.1 0 0)");
+    document.documentElement.style.setProperty("--code-comment", "oklch(0.5 0 0)");
+    document.documentElement.style.setProperty("--code-keyword", "oklch(0.3 0.2 260)");
+    document.documentElement.style.setProperty("--code-number", "oklch(0.4 0.2 140)");
+
+    const lines: DiffLine[] = [
+      { type: "del", oldNumber: 1, text: "/* unterminated" },
+      { type: "add", newNumber: 1, text: "const value = 1;" },
+    ];
+
+    const { container } = renderDiffView(<DiffView language="tsx" lines={lines} />);
+
+    // Combining old+new into ONE document (the bug) makes Shiki carry the
+    // del line's still-open `/*` across the line boundary, so the ENTIRE add
+    // line becomes one comment-colored token. Tokenized as its own document,
+    // `const value = 1;` is real code and splits into several distinctly
+    // colored spans.
+    await waitFor(() => {
+      const addLineText = container.querySelector(
+        '[data-diff-type="add"] [data-slot="diff-view-line-text"]',
+      );
+      const spans = addLineText?.querySelectorAll("span[style]") ?? [];
+      expect(spans.length).toBeGreaterThan(1);
+    });
+
+    const addLineText = container.querySelector(
+      '[data-diff-type="add"] [data-slot="diff-view-line-text"]',
+    );
+    expect(addLineText?.textContent).toContain("const value = 1;");
+  });
+});
+
+describe("DiffView — contextLines collapsing", () => {
+  const longContext: DiffLine[] = Array.from({ length: 10 }, (_, i) => ({
+    type: "context" as const,
+    oldNumber: i + 1,
+    newNumber: i + 1,
+    text: `line ${i + 1}`,
+  }));
+
+  it("collapses a long context run behind a show-more control that restores it", async () => {
+    const user = userEvent.setup();
+    const { container } = renderDiffView(<DiffView lines={longContext} contextLines={4} />);
+
+    expect(screen.queryByText("line 5")).not.toBeInTheDocument();
+    const control = screen.getByRole("button", { name: /more line/ });
+    expect(control).toBeInTheDocument();
+
+    await user.click(control);
+
+    expect(screen.getByText("line 5")).toBeInTheDocument();
+    expect(container.querySelectorAll('[data-slot="diff-view-row"]')).toHaveLength(
+      longContext.length,
+    );
+  });
+});