@elabs-ai/components-ui 4.0.0

package/src/components/carousel/carousel.tsx

@@ -0,0 +1,225 @@
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentProps,
+  type HTMLAttributes,
+  type KeyboardEvent,
+} from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type CarouselOptions = NonNullable<Parameters<typeof useEmblaCarousel>[0]>;
+type CarouselPlugin = NonNullable<Parameters<typeof useEmblaCarousel>[1]>;
+
+interface CarouselProps {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+}
+
+interface CarouselContextValue extends CarouselProps {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: CarouselApi;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) throw new Error("useCarousel must be used within <Carousel />");
+  return ctx;
+}
+
+/**
+ * Root carousel region. Carries `role="region" aria-roledescription="carousel"`
+ * plus an `aria-label` — it defaults to `"Carousel"` so the region always has an
+ * accessible name (issue #279), but **consumers should pass a specific
+ * `aria-label`** (e.g. `"Product photos"`) describing what the carousel actually
+ * shows, since AT users otherwise can't distinguish multiple carousels on a page.
+ */
+export const Carousel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  function Carousel(
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      // A carousel region MUST have an accessible name (WAI-ARIA APG) —
+      // aria-roledescription changes the announcement, it does not name the
+      // landmark. Default is overridable; pass a specific label ("Product
+      // photos") when the carousel's purpose isn't generic. Issue #279.
+      "aria-label": ariaLabel = "Carousel",
+      ...props
+    },
+    ref,
+  ) {
+    const [carouselRef, api] = useEmblaCarousel(
+      { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+
+    const onSelect = useCallback((a: CarouselApi) => {
+      if (!a) return;
+      setCanScrollPrev(a.canScrollPrev());
+      setCanScrollNext(a.canScrollNext());
+    }, []);
+
+    const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+    const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+
+    const onKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          scrollPrev();
+        } else if (e.key === "ArrowRight") {
+          e.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    useEffect(() => {
+      if (api && setApi) setApi(api);
+    }, [api, setApi]);
+    useEffect(() => {
+      if (!api) return;
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api,
+          opts,
+          orientation,
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={onKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          aria-label={ariaLabel}
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+
+export const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CarouselContent({ className, ...props }, ref) {
+    const { carouselRef, orientation } = useCarousel();
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(
+            "flex",
+            orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+
+export const CarouselItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CarouselItem({ className, ...props }, ref) {
+    const { orientation } = useCarousel();
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "ps-4" : "pt-4",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export function CarouselPrevious({ className, ...props }: ComponentProps<typeof Button>) {
+  const { scrollPrev, canScrollPrev, orientation } = useCarousel();
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      aria-label="Previous slide"
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "-start-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      <ArrowLeft className="size-4" data-rtl-flip />
+    </Button>
+  );
+}
+
+export function CarouselNext({ className, ...props }: ComponentProps<typeof Button>) {
+  const { scrollNext, canScrollNext, orientation } = useCarousel();
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      aria-label="Next slide"
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "-end-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      <ArrowRight className="size-4" data-rtl-flip />
+    </Button>
+  );
+}
+
+export type { CarouselApi };

package/src/components/carousel/index.ts

@@ -0,0 +1,8 @@
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  type CarouselApi,
+} from "./carousel";

package/src/components/change-review/change-review.stories.tsx

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { useState } from "react";
+import {
+  ChangeReview,
+  ChangeReviewHeader,
+  ChangeReviewHunk,
+  ChangeReviewList,
+  ChangeReviewProvider,
+  ChangeReviewProvenance,
+  type ChangeHunk,
+} from "./change-review";
+
+// ─── Sample hunks ─────────────────────────────────────────────────────────────
+
+const HUNKS: ChangeHunk[] = [
+  {
+    id: "hunk-1",
+    title: "config/settings.json",
+    status: "modified",
+    before: `"timeout": 30`,
+    after: `"timeout": 60`,
+  },
+  {
+    id: "hunk-2",
+    title: "src/utils/logger.ts",
+    status: "added",
+    after: `export const log = (msg: string) => console.log("[APP]", msg);`,
+  },
+  {
+    id: "hunk-3",
+    title: "src/legacy/old-handler.ts",
+    status: "removed",
+    before: `export function oldHandler() { /* deprecated */ }`,
+  },
+];
+
+const PROVENANCE = {
+  author: "Claude Sonnet",
+  model: "claude-sonnet-4-6",
+  timestamp: "2026-06-15 14:02",
+  note: "run-abc123",
+};
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
+
+const meta = {
+  title: "AI/ChangeReview",
+  component: ChangeReview,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "AI-edit trust gate. When an agent proposes edits, the human reviews them " +
+          "hunk-by-hunk and accepts or rejects each before they apply. Compound " +
+          "component with lifted state — compose parts for custom layouts, or use the " +
+          "convenience `<ChangeReview>` root.",
+      },
+    },
+  },
+} satisfies Meta<typeof ChangeReview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ─── Default (uncontrolled, with provenance) ──────────────────────────────────
+
+export const Default: Story = {
+  args: {
+    hunks: HUNKS,
+    provenance: PROVENANCE,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Header renders with count
+    await waitFor(() => expect(canvas.getByText("Review changes")).toBeVisible());
+    await waitFor(() => expect(canvas.getByText("0 of 3 approved")).toBeVisible());
+    // Three hunk rows visible
+    expect(canvas.getAllByRole("listitem")).toHaveLength(3);
+    // Provenance attribution visible
+    await waitFor(() => expect(canvas.getByText("Claude Sonnet")).toBeVisible());
+  },
+};
+
+// ─── Empty (no hunks → StatePanel) ───────────────────────────────────────────
+
+export const Empty: Story = {
+  args: {
+    hunks: [],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // The empty StatePanel fades in (animate-in), so wait out the entrance before
+    // asserting visibility (jest-dom toBeVisible treats opacity:0 as not visible).
+    await waitFor(() => expect(canvas.getByText("No changes to review")).toBeVisible());
+    // No list items
+    expect(canvas.queryAllByRole("listitem")).toHaveLength(0);
+    // Approve all / Reject all buttons absent when no hunks
+    expect(canvas.queryByRole("button", { name: /approve all/i })).not.toBeInTheDocument();
+  },
+};
+
+// ─── Single hunk ──────────────────────────────────────────────────────────────
+
+export const SingleHunk: Story = {
+  args: {
+    hunks: [HUNKS[0]],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("config/settings.json")).toBeVisible());
+    expect(canvas.getAllByRole("listitem")).toHaveLength(1);
+  },
+};
+
+// ─── All approved ─────────────────────────────────────────────────────────────
+
+export const AllApproved: Story = {
+  args: {
+    hunks: HUNKS,
+    approved: new Set(HUNKS.map((h) => h.id)),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("3 of 3 approved")).toBeVisible());
+    // Each hunk shows "Approved" badge
+    const approvedBadges = canvas.getAllByText("Approved");
+    expect(approvedBadges).toHaveLength(3);
+    // Approve all button disabled
+    const approveAll = canvas.getByRole("button", { name: /approve all/i });
+    expect(approveAll).toBeDisabled();
+    // Reject all button enabled
+    const rejectAll = canvas.getByRole("button", { name: /reject all/i });
+    expect(rejectAll).not.toBeDisabled();
+  },
+};
+
+// ─── All rejected ─────────────────────────────────────────────────────────────
+
+export const AllRejected: Story = {
+  args: {
+    hunks: HUNKS,
+    approved: new Set(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("0 of 3 approved")).toBeVisible());
+    // Reject all button disabled (nothing to reject)
+    const rejectAll = canvas.getByRole("button", { name: /reject all/i });
+    expect(rejectAll).toBeDisabled();
+  },
+};
+
+// ─── Mixed approval ───────────────────────────────────────────────────────────
+
+export const Mixed: Story = {
+  args: {
+    hunks: HUNKS,
+    approved: new Set(["hunk-1", "hunk-3"]),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("2 of 3 approved")).toBeVisible());
+  },
+};
+
+// ─── Interactive (uncontrolled, toggle hunks) ─────────────────────────────────
+
+export const Interactive: Story = {
+  args: { hunks: HUNKS },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Initially 0 approved
+    await waitFor(() => expect(canvas.getByText("0 of 3 approved")).toBeVisible());
+
+    // Approve first hunk
+    const approveBtn = canvas.getByRole("button", {
+      name: /approve hunk: config\/settings\.json/i,
+    });
+    await userEvent.click(approveBtn);
+    await waitFor(() => expect(canvas.getByText("1 of 3 approved")).toBeVisible());
+
+    // Approve all
+    const approveAll = canvas.getByRole("button", { name: /approve all/i });
+    await userEvent.click(approveAll);
+    await waitFor(() => expect(canvas.getByText("3 of 3 approved")).toBeVisible());
+
+    // Reject all
+    const rejectAll = canvas.getByRole("button", { name: /reject all/i });
+    await userEvent.click(rejectAll);
+    await waitFor(() => expect(canvas.getByText("0 of 3 approved")).toBeVisible());
+  },
+};
+
+// ─── Controlled ───────────────────────────────────────────────────────────────
+
+function ControlledDemo() {
+  const [approved, setApproved] = useState<Set<string>>(new Set());
+  return (
+    <div className="space-y-3">
+      <ChangeReview
+        hunks={HUNKS}
+        approved={approved}
+        onToggle={(id, next) =>
+          setApproved((prev) => {
+            const s = new Set(prev);
+            if (next) s.add(id);
+            else s.delete(id);
+            return s;
+          })
+        }
+        onApproveAll={() => setApproved(new Set(HUNKS.map((h) => h.id)))}
+        onRejectAll={() => setApproved(new Set())}
+      />
+      <p className="text-caption text-muted-foreground">
+        Approved IDs: {[...approved].join(", ") || "(none)"}
+      </p>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+};
+
+// ─── Custom renderHunk ────────────────────────────────────────────────────────
+
+export const CustomRenderer: Story = {
+  args: {
+    hunks: HUNKS,
+    renderHunk: (hunk, { approved }) => (
+      <div className="text-caption text-muted-foreground italic">
+        {approved ? "Accepted" : "Pending"}: {hunk.title}
+      </div>
+    ),
+  },
+};
+
+// ─── Compound (manual layout) ─────────────────────────────────────────────────
+
+export const Compound: Story = {
+  render: () => (
+    <ChangeReviewProvider hunks={HUNKS}>
+      <div className="space-y-3 p-4 border rounded-lg bg-card">
+        <ChangeReviewHeader />
+        <ChangeReviewProvenance
+          provenance={{ author: "Atlas Agent", model: "claude-sonnet-4-6", timestamp: "14:02" }}
+        />
+        <ChangeReviewList>
+          {HUNKS.map((hunk) => (
+            <ChangeReviewHunk key={hunk.id} hunk={hunk} />
+          ))}
+        </ChangeReviewList>
+      </div>
+    </ChangeReviewProvider>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("Review changes")).toBeVisible());
+    expect(canvas.getAllByRole("listitem")).toHaveLength(3);
+  },
+};
+
+// ─── Long content ─────────────────────────────────────────────────────────────
+
+export const LongContent: Story = {
+  args: {
+    hunks: [
+      {
+        id: "long-1",
+        title: "src/components/very/deeply/nested/component/with/a/long/path.tsx",
+        status: "modified",
+        before: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.`,
+        after: `Revised content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Completely
+rewritten with improved clarity and fewer side effects. The new version handles
+edge cases properly and includes proper error boundaries.`,
+      },
+    ],
+  },
+};