@elabs-ai/components-ai 4.0.0

package/src/terminal.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { Button } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import Ansi from "ansi-to-react";
+import { CheckIcon, CopyIcon, TerminalIcon, Trash2Icon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+interface TerminalContextType {
+  output: string;
+  isStreaming: boolean;
+  autoScroll: boolean;
+  onClear?: () => void;
+}
+
+const TerminalContext = createContext<TerminalContextType>({
+  autoScroll: true,
+  isStreaming: false,
+  output: "",
+});
+
+export type TerminalHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const TerminalHeader = ({ className, children, ...props }: TerminalHeaderProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-between border-zinc-800 border-b px-4 py-2",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type TerminalTitleProps = HTMLAttributes<HTMLDivElement>;
+
+export const TerminalTitle = ({ className, children, ...props }: TerminalTitleProps) => (
+  <div className={cn("flex items-center gap-2 text-sm text-zinc-400", className)} {...props}>
+    <TerminalIcon className="size-4" />
+    {children ?? "Terminal"}
+  </div>
+);
+
+export type TerminalStatusProps = HTMLAttributes<HTMLDivElement>;
+
+export const TerminalStatus = ({ className, children, ...props }: TerminalStatusProps) => {
+  const { isStreaming } = useContext(TerminalContext);
+
+  if (!isStreaming) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex items-center gap-2 text-xs text-zinc-400", className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export type TerminalActionsProps = HTMLAttributes<HTMLDivElement>;
+
+export const TerminalActions = ({ className, children, ...props }: TerminalActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type TerminalCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const TerminalCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: TerminalCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number>(0);
+  const { output } = useContext(TerminalContext);
+
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(output);
+      setIsCopied(true);
+      onCopy?.();
+      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  }, [output, onCopy, onError, timeout]);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn(
+        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+        className,
+      )}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};
+
+export type TerminalClearButtonProps = ComponentProps<typeof Button>;
+
+export const TerminalClearButton = ({
+  children,
+  className,
+  ...props
+}: TerminalClearButtonProps) => {
+  const { onClear } = useContext(TerminalContext);
+
+  if (!onClear) {
+    return null;
+  }
+
+  return (
+    <Button
+      className={cn(
+        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+        className,
+      )}
+      onClick={onClear}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Trash2Icon size={14} />}
+    </Button>
+  );
+};
+
+export type TerminalContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const TerminalContent = ({ className, children, ...props }: TerminalContentProps) => {
+  const { output, isStreaming, autoScroll } = useContext(TerminalContext);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [output, autoScroll]);
+
+  return (
+    <div
+      className={cn("max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed", className)}
+      ref={containerRef}
+      {...props}
+    >
+      {children ?? (
+        <pre className="whitespace-pre-wrap break-words">
+          <Ansi>{output}</Ansi>
+          {isStreaming && (
+            <span className="ml-0.5 inline-block h-4 w-2 animate-pulse bg-zinc-100" />
+          )}
+        </pre>
+      )}
+    </div>
+  );
+};
+
+export type TerminalProps = HTMLAttributes<HTMLDivElement> & {
+  output: string;
+  isStreaming?: boolean;
+  autoScroll?: boolean;
+  onClear?: () => void;
+};
+
+export const Terminal = ({
+  output,
+  isStreaming = false,
+  autoScroll = true,
+  onClear,
+  className,
+  children,
+  ...props
+}: TerminalProps) => {
+  const contextValue = useMemo(
+    () => ({ autoScroll, isStreaming, onClear, output }),
+    [autoScroll, isStreaming, onClear, output],
+  );
+
+  return (
+    <TerminalContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex flex-col overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100",
+          className,
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <TerminalHeader>
+              <TerminalTitle />
+              <div className="flex items-center gap-1">
+                <TerminalStatus />
+                <TerminalActions>
+                  <TerminalCopyButton />
+                  {onClear && <TerminalClearButton />}
+                </TerminalActions>
+              </div>
+            </TerminalHeader>
+            <TerminalContent />
+          </>
+        )}
+      </div>
+    </TerminalContext.Provider>
+  );
+};

package/src/test-results.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestResults,
+  TestResultsContent,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsMeta,
+  TestResultsProgress,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+  TestSuiteStats,
+} from "./test-results";
+
+/**
+ * TestResults — the status colors are semantic tokens (#157): success / destructive
+ * / warning (badges + progress), success-text / destructive-text (pass/fail), and
+ * muted / primary for skipped / running. Verify they read correctly in every theme,
+ * especially low-chroma ones (where the old raw Tailwind palette did not adapt).
+ *
+ * Structure: `TestResultsHeader` (file name + duration) → `TestResultsMeta`
+ * (badges + progress bar) → `TestResultsContent` (divide-y suite list) →
+ * `TestSuite` (collapsible trigger + `TestSuiteContent` rows). No nested
+ * rounded boxes — suites are separated by dividers; the content area uses a
+ * flat `divide-y` list.
+ */
+const meta = {
+  title: "AI/TestResults",
+  component: TestResults,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TestResults>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const summary = { passed: 8, failed: 2, skipped: 1, total: 11, duration: 1240 };
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <TestResults summary={summary}>
+        <TestResultsHeader>
+          <span className="min-w-0 flex-1 truncate font-medium text-foreground text-body">
+            api.integration.test.ts
+          </span>
+          <TestResultsDuration />
+        </TestResultsHeader>
+        <TestResultsMeta>
+          <TestResultsSummary />
+          <TestResultsProgress />
+        </TestResultsMeta>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed">
+            <TestSuiteName>
+              auth.service
+              <TestSuiteStats passed={3} failed={1} skipped={1} />
+            </TestSuiteName>
+            <TestSuiteContent>
+              <Test name="signs a valid user in" status="passed" duration={42} />
+              <Test name="issues a refresh token" status="passed" duration={31} />
+              <Test name="rejects an expired token" status="failed" duration={88} />
+              <div className="px-4 py-2">
+                <TestError>
+                  <TestErrorMessage>Expected status 401 but received 200</TestErrorMessage>
+                  <TestErrorStack>{"at verify (auth.service.test.ts:14:9)"}</TestErrorStack>
+                </TestError>
+              </div>
+              <Test name="enforces the rate limit" status="running" />
+              <Test name="legacy SSO path" status="skipped" />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>
+    </div>
+  ),
+};
+
+export const AllPassing: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <TestResults summary={{ passed: 5, failed: 0, skipped: 0, total: 5, duration: 320 }}>
+        <TestResultsHeader>
+          <span className="min-w-0 flex-1 truncate font-medium text-foreground text-body">
+            utils.test.ts
+          </span>
+          <TestResultsDuration />
+        </TestResultsHeader>
+        <TestResultsMeta>
+          <TestResultsSummary />
+          <TestResultsProgress />
+        </TestResultsMeta>
+        <TestResultsContent>
+          <TestSuite name="formatDate" status="passed">
+            <TestSuiteName>
+              formatDate
+              <TestSuiteStats passed={5} />
+            </TestSuiteName>
+            <TestSuiteContent>
+              <Test name="formats ISO strings" status="passed" duration={12} />
+              <Test name="handles null gracefully" status="passed" duration={8} />
+              <Test name="respects locale" status="passed" duration={14} />
+              <Test name="handles leap years" status="passed" duration={9} />
+              <Test name="returns empty string on invalid input" status="passed" duration={11} />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>
+    </div>
+  ),
+};
+
+export const MultipleSuites: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <TestResults summary={{ passed: 6, failed: 1, skipped: 2, total: 9, duration: 2100 }}>
+        <TestResultsHeader>
+          <span className="min-w-0 flex-1 truncate font-medium text-foreground text-body">
+            payments/checkout.integration.test.ts
+          </span>
+          <TestResultsDuration />
+        </TestResultsHeader>
+        <TestResultsMeta>
+          <TestResultsSummary />
+          <TestResultsProgress />
+        </TestResultsMeta>
+        <TestResultsContent>
+          <TestSuite name="CartService" status="passed">
+            <TestSuiteName>
+              CartService
+              <TestSuiteStats passed={3} />
+            </TestSuiteName>
+            <TestSuiteContent>
+              <Test name="adds items to cart" status="passed" duration={55} />
+              <Test name="removes items from cart" status="passed" duration={43} />
+              <Test name="calculates totals" status="passed" duration={61} />
+            </TestSuiteContent>
+          </TestSuite>
+          <TestSuite name="PaymentService" status="failed">
+            <TestSuiteName>
+              PaymentService
+              <TestSuiteStats passed={3} failed={1} skipped={2} />
+            </TestSuiteName>
+            <TestSuiteContent>
+              <Test name="authorises a card" status="passed" duration={180} />
+              <Test name="declines an expired card" status="failed" duration={95} />
+              <div className="px-4 py-2">
+                <TestError>
+                  <TestErrorMessage>Expected decline but received 200 OK</TestErrorMessage>
+                  <TestErrorStack>
+                    {"at PaymentService.charge (payment.test.ts:38:5)"}
+                  </TestErrorStack>
+                </TestError>
+              </div>
+              <Test name="handles 3DS challenge" status="passed" duration={210} />
+              <Test name="processes refund" status="passed" duration={145} />
+              <Test name="applies discount codes" status="skipped" />
+              <Test name="handles partial refund" status="skipped" />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>
+    </div>
+  ),
+};
+
+/** The minimal auto-render path: pass `summary` only, no children. */
+export const SummaryOnly: Story = {
+  args: {
+    summary: { passed: 8, failed: 2, skipped: 1, total: 11, duration: 1240 },
+    className: "max-w-xl",
+  },
+};

package/src/test-results.test.tsx

@@ -0,0 +1,241 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestResults,
+  TestResultsContent,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsMeta,
+  TestResultsProgress,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+  TestSuiteStats,
+} from "./test-results";
+
+const summary = { passed: 8, failed: 2, skipped: 1, total: 11, duration: 1240 };
+
+describe("TestResults", () => {
+  it("renders the compound tree without crashing", () => {
+    render(
+      <TestResults summary={summary} data-testid="results">
+        <TestResultsHeader>
+          <span>api.integration.test.ts</span>
+          <TestResultsDuration />
+        </TestResultsHeader>
+        <TestResultsMeta>
+          <TestResultsSummary />
+          <TestResultsProgress />
+        </TestResultsMeta>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed">
+            <TestSuiteName />
+            <TestSuiteContent>
+              <Test name="signs a valid user in" status="passed" duration={42} />
+              <Test name="rejects an expired token" status="failed" duration={88} />
+              <Test name="legacy SSO path" status="skipped" />
+              <Test name="enforces the rate limit" status="running" />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+
+    expect(screen.getByTestId("results")).toBeInTheDocument();
+  });
+
+  it("renders duration from context when summary has a duration", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsHeader>
+          <TestResultsDuration />
+        </TestResultsHeader>
+      </TestResults>,
+    );
+    // 1240ms → "1.24s"
+    expect(screen.getByText("1.24s")).toBeInTheDocument();
+  });
+
+  it("renders nothing for TestResultsDuration when duration is absent", () => {
+    const { container } = render(
+      <TestResults summary={{ passed: 3, failed: 0, skipped: 0, total: 3 }}>
+        <TestResultsHeader>
+          <TestResultsDuration />
+        </TestResultsHeader>
+      </TestResults>,
+    );
+    // No duration span rendered
+    expect(container.querySelector("span")).toBeNull();
+  });
+
+  it("renders passed/failed/skipped badges in TestResultsSummary", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsMeta>
+          <TestResultsSummary />
+        </TestResultsMeta>
+      </TestResults>,
+    );
+    expect(screen.getByText("8 passed")).toBeInTheDocument();
+    expect(screen.getByText("2 failed")).toBeInTheDocument();
+    expect(screen.getByText("1 skipped")).toBeInTheDocument();
+  });
+
+  it("omits failed/skipped badges when counts are zero", () => {
+    render(
+      <TestResults summary={{ passed: 5, failed: 0, skipped: 0, total: 5 }}>
+        <TestResultsMeta>
+          <TestResultsSummary />
+        </TestResultsMeta>
+      </TestResults>,
+    );
+    expect(screen.getByText("5 passed")).toBeInTheDocument();
+    expect(screen.queryByText(/failed/)).toBeNull();
+    expect(screen.queryByText(/skipped/)).toBeNull();
+  });
+
+  it("renders progress bar with tabular-nums label", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsMeta>
+          <TestResultsProgress />
+        </TestResultsMeta>
+      </TestResults>,
+    );
+    // 8/11 = 72.727…% → "73%"
+    expect(screen.getByText("8/11 tests passed")).toBeInTheDocument();
+    expect(screen.getByText("73%")).toBeInTheDocument();
+  });
+
+  it("renders suite stats with correct counts", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed">
+            <TestSuiteName>
+              auth.service
+              <TestSuiteStats passed={3} failed={1} skipped={1} />
+            </TestSuiteName>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+    expect(screen.getByText("3 passed")).toBeInTheDocument();
+    expect(screen.getByText("1 failed")).toBeInTheDocument();
+    expect(screen.getByText("1 skipped")).toBeInTheDocument();
+  });
+
+  it("renders Test rows with name and duration (suite open)", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed" defaultOpen>
+            <TestSuiteContent>
+              <Test name="signs a valid user in" status="passed" duration={42} />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+    expect(screen.getByText("signs a valid user in")).toBeInTheDocument();
+    expect(screen.getByText("42ms")).toBeInTheDocument();
+  });
+
+  it("omits Test duration when not provided (suite open)", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed" defaultOpen>
+            <TestSuiteContent>
+              <Test name="legacy SSO path" status="skipped" />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+    expect(screen.queryByText(/ms/)).toBeNull();
+  });
+
+  it("renders TestError with message and stack (suite open)", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed" defaultOpen>
+            <TestSuiteContent>
+              <Test name="rejects an expired token" status="failed" duration={88} />
+              <div className="px-4 py-2">
+                <TestError>
+                  <TestErrorMessage>Expected status 401 but received 200</TestErrorMessage>
+                  <TestErrorStack>{"at verify (auth.service.test.ts:14:9)"}</TestErrorStack>
+                </TestError>
+              </div>
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+    expect(screen.getByText("Expected status 401 but received 200")).toBeInTheDocument();
+    expect(screen.getByText("at verify (auth.service.test.ts:14:9)")).toBeInTheDocument();
+  });
+
+  it("renders the minimal auto path when only summary is passed", () => {
+    render(<TestResults summary={summary} data-testid="min" />);
+    // Auto-render produces the header with badges + duration
+    expect(screen.getByTestId("min")).toBeInTheDocument();
+  });
+
+  it("TestResultsMeta applies consistent padding class", () => {
+    const { container } = render(
+      <TestResults summary={summary}>
+        <TestResultsMeta data-testid="meta">
+          <TestResultsSummary />
+        </TestResultsMeta>
+      </TestResults>,
+    );
+    const meta = container.querySelector("[data-testid='meta']");
+    expect(meta?.className).toContain("px-4");
+    expect(meta?.className).toContain("pb-4");
+    expect(meta?.className).toContain("pt-3");
+  });
+
+  it("TestResultsContent uses divide-y (no nested border boxes)", () => {
+    const { container } = render(
+      <TestResults summary={summary}>
+        <TestResultsContent data-testid="content">
+          <TestSuite name="s1" status="passed">
+            <TestSuiteName />
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+    const content = container.querySelector("[data-testid='content']");
+    expect(content?.className).toContain("divide-y");
+    // TestSuite must NOT have a border class of its own (no nested box)
+    const suite = content?.querySelector("[data-radix-collapsible-root]") as HTMLElement | null;
+    if (suite) {
+      expect(suite.className).not.toMatch(/\bborder\b/);
+      expect(suite.className).not.toContain("rounded-lg");
+    }
+  });
+
+  it("Test rows use ps-10 for hierarchical indent alignment (suite open)", () => {
+    render(
+      <TestResults summary={summary}>
+        <TestResultsContent>
+          <TestSuite name="auth" status="failed" defaultOpen>
+            <TestSuiteContent>
+              <Test name="signs a valid user in" status="passed" data-testid="testrow" />
+            </TestSuiteContent>
+          </TestSuite>
+        </TestResultsContent>
+      </TestResults>,
+    );
+    const row = screen.getByTestId("testrow");
+    expect(row.className).toContain("ps-10");
+  });
+});