@elabs-ai/components-ui 4.2.0 → 5.1.0

package/src/components/install-tabs/install-tabs.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+/**
+ * InstallTabs — every way to bring brand-ui in, one tab strip.
+ *
+ * Ships no site copy, no URL and no install command of its own (`i18n-strings`,
+ * `remote-origins`): every command, option and prompt is a prop. `TabsList`'s
+ * `overflow-x-auto` (shared by every `Tabs` variant) makes the strip scroll
+ * horizontally once it no longer fits — no bespoke mobile layout needed.
+ */
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
+import { Button } from "../button";
+import { CommandChip } from "../command-chip";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import { Textarea } from "../textarea";
+import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard";
+
+/** One option in the `pnpm add` or `Copy-own` select — the exact command it resolves to. */
+export interface InstallTabsSelectOption {
+  id: string;
+  label: string;
+  command: string;
+}
+
+/** One host-specific tab (Claude Code, Cursor, …), one or more commands top to bottom. */
+export interface InstallTabsHostTab {
+  id: string;
+  label: string;
+  commands: { label: string; command: string }[];
+}
+
+export interface InstallTabsLabels {
+  packagesTab: string;
+  copyOwnTab: string;
+  promptTab: string;
+  packageSelectAriaLabel: string;
+  blockSelectAriaLabel: string;
+  packageCommandLabel: string;
+  blockCommandLabel: string;
+  /** `aria-label` of the read-only prompt textarea. */
+  promptAriaLabel: string;
+  promptCopyLabel: string;
+  promptCopiedLabel: string;
+}
+
+export const DEFAULT_INSTALL_TABS_LABELS: InstallTabsLabels = {
+  packagesTab: "pnpm add",
+  copyOwnTab: "Copy-own",
+  promptTab: "Prompt",
+  packageSelectAriaLabel: "Archetype",
+  blockSelectAriaLabel: "Block",
+  packageCommandLabel: "Install",
+  blockCommandLabel: "Add block",
+  promptAriaLabel: "Agent prompt",
+  promptCopyLabel: "Copy prompt",
+  promptCopiedLabel: "Copied",
+};
+
+export interface InstallTabsProps extends HTMLAttributes<HTMLDivElement> {
+  /** The `pnpm add` tab's per-archetype options; the first is the default selection. */
+  packageOptions: InstallTabsSelectOption[];
+  /** The `Copy-own` tab's per-block options; the first is the default selection. */
+  blockOptions: InstallTabsSelectOption[];
+  /** One tab per host, in order, between `Copy-own` and `Prompt`. */
+  hostTabs: InstallTabsHostTab[];
+  /** The multi-line agent prompt shown (read-only) on the `Prompt` tab. */
+  prompt: string;
+  /** Selected tab id (controlled): `"packages"`, `"copy-own"`, a host id, or `"prompt"`. */
+  value?: string;
+  /** Initially selected tab id (uncontrolled). Default: `"packages"`. */
+  defaultValue?: string;
+  onValueChange?: (id: string) => void;
+  /** Selected `pnpm add` archetype id (controlled). */
+  packageValue?: string;
+  onPackageValueChange?: (id: string) => void;
+  /** Selected `Copy-own` block id (controlled). */
+  blockValue?: string;
+  onBlockValueChange?: (id: string) => void;
+  onCommandCopy?: (command: string, copied: boolean) => void;
+  onPromptCopy?: (copied: boolean) => void;
+  labels?: Partial<InstallTabsLabels>;
+}
+
+export const InstallTabs = forwardRef<HTMLDivElement, InstallTabsProps>(function InstallTabs(
+  {
+    packageOptions,
+    blockOptions,
+    hostTabs,
+    prompt,
+    value,
+    defaultValue,
+    onValueChange,
+    packageValue,
+    onPackageValueChange,
+    blockValue,
+    onBlockValueChange,
+    onCommandCopy,
+    onPromptCopy,
+    labels: labelsProp,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const labels = { ...DEFAULT_INSTALL_TABS_LABELS, ...labelsProp };
+  const [tabId, setTabId] = useControllableState(value, defaultValue ?? "packages", onValueChange);
+  const [pkgId, setPkgId] = useControllableState(
+    packageValue,
+    packageOptions[0]?.id ?? "",
+    onPackageValueChange,
+  );
+  const [blockId, setBlockId] = useControllableState(
+    blockValue,
+    blockOptions[0]?.id ?? "",
+    onBlockValueChange,
+  );
+  const { copied: promptCopied, copy: copyPrompt } = useCopyToClipboard();
+
+  const selectedPackage = packageOptions.find((o) => o.id === pkgId) ?? packageOptions[0];
+  const selectedBlock = blockOptions.find((o) => o.id === blockId) ?? blockOptions[0];
+
+  return (
+    <div
+      ref={ref}
+      data-slot="install-tabs"
+      className={cn("flex flex-col gap-4", className)}
+      {...props}
+    >
+      <Tabs value={tabId} onValueChange={setTabId}>
+        <TabsList variant="underline">
+          <TabsTrigger value="packages">{labels.packagesTab}</TabsTrigger>
+          <TabsTrigger value="copy-own">{labels.copyOwnTab}</TabsTrigger>
+          {hostTabs.map((host) => (
+            <TabsTrigger key={host.id} value={host.id}>
+              {host.label}
+            </TabsTrigger>
+          ))}
+          <TabsTrigger value="prompt">{labels.promptTab}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="packages" className="flex flex-col gap-3">
+          <Select value={pkgId} onValueChange={setPkgId}>
+            <SelectTrigger
+              data-slot="install-tabs-package-select"
+              aria-label={labels.packageSelectAriaLabel}
+              className="min-w-48"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {packageOptions.map((option) => (
+                <SelectItem key={option.id} value={option.id}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedPackage ? (
+            <CommandChip
+              hosts={[
+                {
+                  id: "value",
+                  label: labels.packageCommandLabel,
+                  command: selectedPackage.command,
+                },
+              ]}
+              onCopyCommand={onCommandCopy}
+            />
+          ) : null}
+        </TabsContent>
+
+        <TabsContent value="copy-own" className="flex flex-col gap-3">
+          <Select value={blockId} onValueChange={setBlockId}>
+            <SelectTrigger
+              data-slot="install-tabs-block-select"
+              aria-label={labels.blockSelectAriaLabel}
+              className="min-w-48"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {blockOptions.map((option) => (
+                <SelectItem key={option.id} value={option.id}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedBlock ? (
+            <CommandChip
+              hosts={[
+                { id: "value", label: labels.blockCommandLabel, command: selectedBlock.command },
+              ]}
+              onCopyCommand={onCommandCopy}
+            />
+          ) : null}
+        </TabsContent>
+
+        {hostTabs.map((host) => (
+          <TabsContent key={host.id} value={host.id} className="flex flex-col gap-2">
+            {host.commands.map((command) => (
+              <CommandChip
+                key={command.label}
+                hosts={[{ id: "value", label: command.label, command: command.command }]}
+                onCopyCommand={onCommandCopy}
+              />
+            ))}
+          </TabsContent>
+        ))}
+
+        <TabsContent value="prompt" className="flex flex-col gap-3">
+          <Textarea
+            readOnly
+            value={prompt}
+            rows={4}
+            aria-label={labels.promptAriaLabel}
+            data-slot="install-tabs-prompt"
+            className="resize-none font-mono text-code"
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="self-start"
+            onClick={() => {
+              void copyPrompt(prompt).then((ok) => onPromptCopy?.(ok));
+            }}
+          >
+            {promptCopied ? labels.promptCopiedLabel : labels.promptCopyLabel}
+          </Button>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+});

package/src/components/integration-matrix/index.ts

@@ -0,0 +1,10 @@
+export {
+  IntegrationMatrix,
+  DEFAULT_INTEGRATION_MATRIX_LABELS,
+  type IntegrationMatrixHost,
+  type IntegrationMatrixAction,
+  type IntegrationMatrixRow,
+  type IntegrationMatrixRoutineStep,
+  type IntegrationMatrixLabels,
+  type IntegrationMatrixProps,
+} from "./integration-matrix";

package/src/components/integration-matrix/integration-matrix.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import {
+  IntegrationMatrix,
+  type IntegrationMatrixHost,
+  type IntegrationMatrixRoutineStep,
+  type IntegrationMatrixRow,
+} from "./integration-matrix";
+
+const HOSTS: IntegrationMatrixHost[] = [
+  { id: "claude-code", label: "Claude Code" },
+  { id: "cursor", label: "Cursor" },
+  { id: "vscode", label: "VS Code" },
+  { id: "codex", label: "Codex" },
+  { id: "other", label: "Other" },
+];
+
+const ROWS: IntegrationMatrixRow[] = [
+  {
+    id: "hosted-mcp",
+    unit: "Hosted MCP",
+    gives: "A remote MCP server — no local process to run.",
+    actions: [
+      {
+        label: "Add server",
+        kind: "copy",
+        value: {
+          "claude-code": "claude mcp add --transport http brand-ui https://elabs-ai.com/mcp",
+          cursor: '{ "mcpServers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }',
+          vscode: '{ "servers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }',
+          codex: "https://elabs-ai.com/mcp",
+          other: "https://elabs-ai.com/mcp",
+        },
+      },
+    ],
+  },
+  {
+    id: "local-mcp",
+    unit: "Local MCP + CLI",
+    gives: "The same tools, run from your machine, plus `audit --strict`.",
+    actions: [{ label: "Run locally", kind: "copy", value: "npx -y @elabs-ai/components-cli mcp" }],
+  },
+  {
+    id: "plugin",
+    unit: "Claude Code plugin",
+    gives: "11 skills your agent picks up automatically.",
+    actions: [
+      {
+        label: "Add marketplace",
+        kind: "copy",
+        value: {
+          "claude-code": "/plugin marketplace add mreimitz/elabs-components",
+          cursor: "Plugin is Claude-Code-specific — use the hosted MCP row instead.",
+          vscode: "Plugin is Claude-Code-specific — use the hosted MCP row instead.",
+          codex: "Plugin is Claude-Code-specific — use the hosted MCP row instead.",
+          other: "Plugin is Claude-Code-specific — use the hosted MCP row instead.",
+        },
+      },
+    ],
+  },
+  {
+    id: "llms-txt",
+    unit: "llms.txt",
+    gives: "A plain-text map of the docs for any agent that reads it.",
+    actions: [{ label: "Open", kind: "link", value: "https://elabs-ai.com/llms.txt" }],
+  },
+  {
+    id: "registry",
+    unit: "Registry",
+    gives: "65 shadcn-compatible blocks, copy-owned into your app.",
+    actions: [{ label: "Browse", kind: "link", value: "https://elabs-ai.com/r" }],
+  },
+  {
+    id: "manifest",
+    unit: "Manifest",
+    gives: "Every export, prop and gate, machine-readable.",
+    actions: [
+      { label: "Open", kind: "link", value: "https://elabs-ai.com/brand-ui.manifest.json" },
+    ],
+  },
+];
+
+const ROUTINE: IntegrationMatrixRoutineStep[] = [
+  { verb: "info", does: "Prints the project's taste profile and package layer graph." },
+  { verb: "search", does: "Finds a component by keyword across every package." },
+  { verb: "docs", does: "Prints one component's props, variants and anti-patterns." },
+  { verb: "build", does: "Scaffolds a screen from an archetype template." },
+  { verb: "audit --strict", does: "Fails the build on a raw color, a missing focus ring, …" },
+];
+
+const meta = {
+  title: "Display/IntegrationMatrix",
+  component: IntegrationMatrix,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Every agent-facing integration unit as installable rows, with a host selector that swaps every row's copy command at once.",
+      },
+    },
+  },
+  args: { hosts: HOSTS, rows: ROWS, routine: ROUTINE, onCopyAction: fn(), onValueChange: fn() },
+} satisfies Meta<typeof IntegrationMatrix>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** A host picked up front (uncontrolled `defaultValue`) shows its own commands. */
+export const CursorSelected: Story = { args: { defaultValue: "cursor" } };
+
+/** One host only: no selector, every row shows its single command. */
+export const SingleHost: Story = { args: { hosts: [HOSTS[0]!] } };
+
+/** Choosing another host swaps every row's copy command at once. */
+export const SwitchHost: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("combobox", { name: "Host to show commands for" }));
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(await body.findByRole("option", { name: "Cursor" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText('{ "mcpServers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }'),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** Copying a row's command writes the exact per-host string. */
+export const CopyAction: Story = {
+  play: async ({ canvasElement, args }) => {
+    const writeText = fn(() => Promise.resolve());
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+      writable: true,
+    });
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getAllByRole("button", { name: "Copy command" })[0]!);
+    await waitFor(() =>
+      expect(writeText).toHaveBeenCalledWith(
+        "claude mcp add --transport http brand-ui https://elabs-ai.com/mcp",
+      ),
+    );
+    await waitFor(() => expect(args.onCopyAction).toHaveBeenCalled());
+  },
+};
+
+/** The routine chip's tooltip shows the verb's `does` text. */
+export const RoutineTooltip: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const chip = canvas.getByText("audit --strict");
+    await userEvent.hover(chip);
+    const body = within(canvasElement.ownerDocument.body);
+    // Radix nests an sr-only role="tooltip" copy of the text INSIDE the visible popper
+    // content, so the text matches twice — target the popper content node (the only one
+    // carrying data-side), same pattern as tooltip.stories.tsx's own hover test.
+    await waitFor(() =>
+      expect(
+        body.getByText("Fails the build on a raw color, a missing focus ring, …", {
+          selector: "[data-side]",
+        }),
+      ).toBeInTheDocument(),
+    );
+  },
+};

package/src/components/integration-matrix/integration-matrix.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import {
+  IntegrationMatrix,
+  type IntegrationMatrixHost,
+  type IntegrationMatrixRow,
+} from "./integration-matrix";
+
+const HOSTS: IntegrationMatrixHost[] = [
+  { id: "claude-code", label: "Claude Code" },
+  { id: "cursor", label: "Cursor" },
+];
+
+const ROWS: IntegrationMatrixRow[] = [
+  {
+    id: "hosted-mcp",
+    unit: "Hosted MCP",
+    gives: "A remote MCP server.",
+    actions: [
+      {
+        label: "Add server",
+        kind: "copy",
+        value: { "claude-code": "claude mcp add brand-ui", cursor: "cursor command" },
+      },
+    ],
+  },
+  {
+    id: "llms-txt",
+    unit: "llms.txt",
+    gives: "A plain-text doc map.",
+    actions: [{ label: "Open", kind: "link", value: "https://elabs-ai.com/llms.txt" }],
+  },
+];
+
+function stubClipboard() {
+  const writeText = vi.fn(() => Promise.resolve());
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText },
+    configurable: true,
+    writable: true,
+  });
+  return writeText;
+}
+
+describe("IntegrationMatrix", () => {
+  it("renders its data-slot and every row", () => {
+    const { container } = render(<IntegrationMatrix hosts={HOSTS} rows={ROWS} />);
+    expect(container.querySelector('[data-slot="integration-matrix"]')).not.toBeNull();
+    expect(screen.getByText("Hosted MCP")).toBeInTheDocument();
+    expect(screen.getByText("llms.txt")).toBeInTheDocument();
+  });
+
+  it("shows the first host's command by default", () => {
+    render(<IntegrationMatrix hosts={HOSTS} rows={ROWS} />);
+    expect(screen.getByText("claude mcp add brand-ui")).toBeInTheDocument();
+  });
+
+  it("honours a controlled host value", () => {
+    render(<IntegrationMatrix hosts={HOSTS} rows={ROWS} value="cursor" onValueChange={() => {}} />);
+    expect(screen.getByText("cursor command")).toBeInTheDocument();
+  });
+
+  it("renders a link action as a real anchor", () => {
+    render(<IntegrationMatrix hosts={HOSTS} rows={ROWS} />);
+    expect(screen.getByRole("link", { name: "Open" })).toHaveAttribute(
+      "href",
+      "https://elabs-ai.com/llms.txt",
+    );
+  });
+
+  it("copies the resolved command and reports it", async () => {
+    const writeText = stubClipboard();
+    const onCopyAction = vi.fn();
+    render(<IntegrationMatrix hosts={HOSTS} rows={ROWS} onCopyAction={onCopyAction} />);
+    fireEvent.click(screen.getByRole("button", { name: "Copy command" }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith("claude mcp add brand-ui"));
+    expect(onCopyAction).toHaveBeenCalledWith(
+      "hosted-mcp",
+      "Add server",
+      "claude mcp add brand-ui",
+      true,
+    );
+  });
+
+  it("renders no host selector for a single host", () => {
+    render(<IntegrationMatrix hosts={[HOSTS[0]!]} rows={ROWS} />);
+    expect(screen.queryByRole("combobox")).toBeNull();
+  });
+});