@elabs-ai/components-ui 4.0.0

package/src/components/transfer/transfer.stories.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { Transfer } from "./transfer";
+import type { TransferItem } from "./transfer";
+
+const PEOPLE: TransferItem[] = [
+  { value: "alice", label: "Alice Okafor" },
+  { value: "bob", label: "Bob Chen" },
+  { value: "carol", label: "Carol Singh" },
+  { value: "david", label: "David Müller" },
+  { value: "eve", label: "Eve Nakamura" },
+  { value: "frank", label: "Frank Johansson" },
+  { value: "grace", label: "Grace Andersen" },
+  { value: "hana", label: "Hana Petrov" },
+];
+
+const PERMISSIONS: TransferItem[] = [
+  { value: "read", label: "Read" },
+  { value: "write", label: "Write" },
+  { value: "delete", label: "Delete", disabled: true },
+  { value: "admin", label: "Admin", disabled: true },
+  { value: "export", label: "Export" },
+  { value: "import", label: "Import" },
+];
+
+const meta = {
+  title: "Forms/Transfer",
+  component: Transfer,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+  args: {
+    dataSource: PEOPLE,
+    defaultTargetKeys: ["carol", "eve"],
+    titles: ["Available", "Selected"],
+  },
+  argTypes: {
+    dataSource: {
+      description: "Full item list `{ value, label, disabled? }[]`.",
+      control: false,
+      table: { category: "Content" },
+    },
+    targetKeys: {
+      description: "Controlled list of values in the right (target) panel.",
+      control: false,
+      table: { category: "State" },
+    },
+    defaultTargetKeys: {
+      description: "Uncontrolled initial target keys.",
+      control: false,
+      table: { category: "State" },
+    },
+    showSearch: {
+      description: "Show per-panel search inputs.",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    titles: {
+      description: "Panel title labels `[sourceTitle, targetTitle]`.",
+      control: false,
+      table: { category: "Content" },
+    },
+    renderItem: {
+      description: "Custom row renderer for each item.",
+      control: false,
+      table: { category: "Content" },
+    },
+    onChange: {
+      description: "Called when the target key list changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Transfer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default uncontrolled transfer with pre-selected items. */
+export const Default: Story = {
+  // Checks "Alice Okafor" in the source panel, then moves her to the target.
+  // Transfer's whole purpose is that Alice APPEARS in the target list after the
+  // move — so the "no longer present" assertion must be scoped to the SOURCE
+  // panel (a `role="region"` labelled by its title), not the whole canvas.
+  play: async ({ canvas, userEvent }) => {
+    const sourcePanel = within(canvas.getByRole("region", { name: /available/i }));
+    const aliceCheckbox = sourcePanel.getByRole("checkbox", { name: /alice okafor/i });
+    await userEvent.click(aliceCheckbox);
+    await expect(aliceCheckbox).toBeChecked();
+    const moveRightBtn = canvas.getByRole("button", { name: /move selected right/i });
+    await expect(moveRightBtn).not.toBeDisabled();
+    await userEvent.click(moveRightBtn);
+    // Alice should no longer be in the SOURCE panel...
+    await expect(sourcePanel.queryByRole("checkbox", { name: /alice okafor/i })).toBeNull();
+    // ...but should now appear in the TARGET panel.
+    const targetPanel = within(canvas.getByRole("region", { name: /selected/i }));
+    await expect(targetPanel.getByRole("checkbox", { name: /alice okafor/i })).toBeInTheDocument();
+  },
+};
+
+/** With per-panel search inputs. */
+export const WithSearch: Story = {
+  args: {
+    showSearch: true,
+    dataSource: PEOPLE,
+    defaultTargetKeys: ["alice", "bob"],
+  },
+};
+
+/** Controlled — parent owns the target key list. */
+export const Controlled: Story = {
+  render: () => {
+    function ControlledExample() {
+      const [targetKeys, setTargetKeys] = useState(["read", "export"]);
+      return (
+        <div className="flex flex-col gap-4">
+          <Transfer
+            dataSource={PERMISSIONS}
+            targetKeys={targetKeys}
+            onChange={setTargetKeys}
+            titles={["Available permissions", "Granted permissions"]}
+          />
+          <p className="text-body text-muted-foreground">
+            Granted: {targetKeys.join(", ") || "(none)"}
+          </p>
+        </div>
+      );
+    }
+    return <ControlledExample />;
+  },
+};
+
+/** Some items are disabled and cannot be moved. */
+export const DisabledItems: Story = {
+  args: {
+    dataSource: PERMISSIONS,
+    defaultTargetKeys: ["read"],
+    titles: ["Available permissions", "Granted permissions"],
+  },
+};
+
+/** Empty dataSource — both panels show the empty state. */
+export const Empty: Story = {
+  args: {
+    dataSource: [],
+    defaultTargetKeys: [],
+  },
+};
+
+/** Custom panel titles. */
+export const CustomTitles: Story = {
+  args: {
+    titles: ["Team members", "Reviewers"],
+    dataSource: PEOPLE,
+    defaultTargetKeys: ["grace", "hana"],
+  },
+};

package/src/components/transfer/transfer.test.tsx

@@ -0,0 +1,177 @@
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { Transfer } from "./transfer";
+import type { TransferItem } from "./transfer";
+
+// jsdom does not provide ResizeObserver, which Radix ScrollArea requires.
+// Stub it so the component mounts cleanly in the test environment.
+beforeAll(() => {
+  if (typeof window !== "undefined" && !("ResizeObserver" in window)) {
+    // @ts-expect-error jsdom stub
+    window.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+const ITEMS: TransferItem[] = [
+  { value: "a", label: "Alpha" },
+  { value: "b", label: "Beta" },
+  { value: "c", label: "Gamma" },
+  { value: "d", label: "Delta", disabled: true },
+];
+
+/** Each panel is a labelled region (aria-labelledby its CardTitle). */
+function getPanel(name: string): HTMLElement {
+  return screen.getByRole("region", { name });
+}
+
+/**
+ * A row's checkbox is named via aria-labelledby → its row label text, so it is
+ * directly addressable by accessible name (this also verifies the a11y wiring).
+ */
+function rowCheckbox(panel: HTMLElement, name: string): HTMLElement {
+  return within(panel).getByRole("checkbox", { name });
+}
+
+describe("Transfer", () => {
+  it("renders both panels with the correct initial split given defaultTargetKeys", () => {
+    render(
+      <Transfer dataSource={ITEMS} defaultTargetKeys={["b", "c"]} titles={["Source", "Target"]} />,
+    );
+
+    const source = getPanel("Source");
+    const target = getPanel("Target");
+
+    // Source: Alpha + Delta
+    expect(rowCheckbox(source, "Alpha")).toBeInTheDocument();
+    expect(rowCheckbox(source, "Delta")).toBeInTheDocument();
+    expect(within(source).queryByRole("checkbox", { name: "Beta" })).not.toBeInTheDocument();
+
+    // Target: Beta + Gamma
+    expect(rowCheckbox(target, "Beta")).toBeInTheDocument();
+    expect(rowCheckbox(target, "Gamma")).toBeInTheDocument();
+  });
+
+  it("checking a source row + clicking move-right moves it to target and calls onChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <Transfer
+        dataSource={ITEMS}
+        defaultTargetKeys={["c"]}
+        onChange={onChange}
+        titles={["Source", "Target"]}
+      />,
+    );
+
+    const alpha = rowCheckbox(getPanel("Source"), "Alpha");
+    await user.click(alpha);
+    expect(alpha).toHaveAttribute("data-state", "checked");
+
+    await user.click(screen.getByRole("button", { name: "Move selected right" }));
+
+    expect(onChange).toHaveBeenCalledOnce();
+    const nextKeys: string[] = onChange.mock.calls[0]![0];
+    expect(nextKeys).toContain("a");
+    expect(nextKeys).toContain("c");
+  });
+
+  it("move-all-right moves all enabled items; disabled items stay in source", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <Transfer
+        dataSource={ITEMS}
+        defaultTargetKeys={[]}
+        onChange={onChange}
+        titles={["Source", "Target"]}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Move all right" }));
+
+    expect(onChange).toHaveBeenCalledOnce();
+    const nextKeys: string[] = onChange.mock.calls[0]![0];
+    expect(nextKeys).toContain("a");
+    expect(nextKeys).toContain("b");
+    expect(nextKeys).toContain("c");
+    expect(nextKeys).not.toContain("d");
+  });
+
+  it("move-left returns items from target back to source", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <Transfer
+        dataSource={ITEMS}
+        defaultTargetKeys={["a", "b"]}
+        onChange={onChange}
+        titles={["Source", "Target"]}
+      />,
+    );
+
+    const alpha = rowCheckbox(getPanel("Target"), "Alpha");
+    await user.click(alpha);
+    expect(alpha).toHaveAttribute("data-state", "checked");
+
+    await user.click(screen.getByRole("button", { name: "Move selected left" }));
+
+    expect(onChange).toHaveBeenCalledOnce();
+    const nextKeys: string[] = onChange.mock.calls[0]![0];
+    expect(nextKeys).not.toContain("a");
+    expect(nextKeys).toContain("b");
+  });
+
+  it("controlled mode: renders the given targetKeys split and onChange fires on move", async () => {
+    const user = userEvent.setup();
+
+    function ControlledWrapper() {
+      const [keys, setKeys] = useState(["b"]);
+      return (
+        <div>
+          <Transfer
+            dataSource={ITEMS}
+            targetKeys={keys}
+            onChange={setKeys}
+            titles={["Source", "Target"]}
+          />
+          <span data-testid="keys">{keys.join(",")}</span>
+        </div>
+      );
+    }
+
+    render(<ControlledWrapper />);
+
+    expect(screen.getByTestId("keys").textContent).toBe("b");
+
+    const alpha = rowCheckbox(getPanel("Source"), "Alpha");
+    await user.click(alpha);
+    expect(alpha).toHaveAttribute("data-state", "checked");
+
+    await user.click(screen.getByRole("button", { name: "Move selected right" }));
+
+    expect(screen.getByTestId("keys").textContent).toBe("b,a");
+  });
+
+  it("select-all checkbox checks all enabled rows in the source panel", async () => {
+    const user = userEvent.setup();
+
+    render(<Transfer dataSource={ITEMS} defaultTargetKeys={[]} titles={["Source", "Target"]} />);
+
+    const selectAll = screen.getByRole("checkbox", { name: /Select all in Source/i });
+    await user.click(selectAll);
+
+    // Enabling all source rows enables the "Move selected right" control.
+    expect(screen.getByRole("button", { name: "Move selected right" })).not.toBeDisabled();
+    // The enabled row checkbox reflects the checked state.
+    expect(rowCheckbox(getPanel("Source"), "Alpha")).toHaveAttribute("data-state", "checked");
+  });
+});