@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/switch/switch.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+import { Switch, SwitchRoot, SwitchThumb } from "../../components";
+
+describe("Switch component", () => {
+  it("should be checked", () => {
+    render(<Switch name="Switch" data-testid="Switch" checked />);
+    const checkbox = screen.getByTestId("Switch");
+    expect(checkbox).toBeChecked();
+  });
+
+  it("should toggle on click", () => {
+    render(<Switch name="Switch" data-testid="Switch" />);
+    const checkbox = screen.getByTestId("Switch");
+    expect(checkbox).not.toBeChecked();
+
+    act(() => checkbox.click());
+    expect(checkbox).toBeChecked();
+
+    act(() => checkbox.click());
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it("should be disabled", () => {
+    render(<Switch name="Switch" data-testid="Switch" disabled />);
+    const checkbox = screen.getByTestId("Switch");
+    expect(checkbox).toHaveAttribute("aria-disabled", "true");
+  });
+});
+
+describe("Switch primitives", () => {
+  it("SwitchRoot renders with data-slot='switch'", () => {
+    render(<SwitchRoot />);
+    expect(document.querySelector('[data-slot="switch"]')).toBeTruthy();
+  });
+
+  it("SwitchThumb renders with data-slot='switch-thumb'", () => {
+    render(
+      <SwitchRoot>
+        <SwitchThumb />
+      </SwitchRoot>,
+    );
+    expect(document.querySelector('[data-slot="switch-thumb"]')).toBeTruthy();
+  });
+});
+
+describe("Switch composite", () => {
+  it("renders label from label prop", () => {
+    render(<Switch label="Dark mode" />);
+    expect(screen.getByText("Dark mode")).toBeTruthy();
+  });
+
+  it("renders label from children", () => {
+    render(<Switch>Notifications</Switch>);
+    expect(screen.getByText("Notifications")).toBeTruthy();
+  });
+
+  it("associates switch with label via htmlFor", () => {
+    render(<Switch label="Enable" />);
+    expect(screen.getByRole("switch", { name: "Enable" })).toBeTruthy();
+  });
+
+  it("applies className to switch root", () => {
+    render(<Switch className="custom-switch" />);
+    expect(document.querySelector('[data-slot="switch"]')).toHaveClass(
+      "custom-switch",
+    );
+  });
+
+  it("applies classNames.wrapper to wrapper div", () => {
+    render(<Switch classNames={{ wrapper: "cls-wrap" }} />);
+    expect(
+      document.querySelector('[data-slot="switch"]')?.parentElement,
+    ).toHaveClass("cls-wrap");
+  });
+
+  it("applies classNames.thumb to thumb", () => {
+    render(<Switch classNames={{ thumb: "cls-thumb" }} />);
+    expect(document.querySelector('[data-slot="switch-thumb"]')).toHaveClass(
+      "cls-thumb",
+    );
+  });
+
+  it("applies classNames.label to label", () => {
+    render(<Switch label="Test" classNames={{ label: "cls-label" }} />);
+    expect(screen.getByText("Test")).toHaveClass("cls-label");
+  });
+
+  it("applies flex-row-reverse when controlFirst=false", () => {
+    render(<Switch label="Test" controlFirst={false} />);
+    expect(
+      document.querySelector('[data-slot="switch"]')?.parentElement,
+    ).toHaveClass("flex-row-reverse");
+  });
+});

package/src/components/switch/switch.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import type * as React from "react";
+import { useId } from "react";
+import { cn } from "../../lib";
+import { Label } from "../label";
+
+export function SwitchRoot({
+  className,
+  ...props
+}: SwitchPrimitive.Root.Props): React.ReactElement {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        "peer inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200",
+        "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "data-checked:bg-primary data-unchecked:bg-input",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-64",
+        className,
+      )}
+      data-slot="switch"
+      {...props}
+    />
+  );
+}
+
+export function SwitchThumb({
+  className,
+  ...props
+}: SwitchPrimitive.Thumb.Props): React.ReactElement {
+  return (
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block aspect-square h-full rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform",
+        "origin-left [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]",
+        "data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
+        "in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110",
+        "in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)]",
+        className,
+      )}
+      data-slot="switch-thumb"
+      {...props}
+    />
+  );
+}
+
+interface SwitchProps extends Omit<SwitchPrimitive.Root.Props, "children"> {
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  tooltip?: string;
+  controlFirst?: boolean;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Outer flex wrapper that holds the switch and label. */
+    wrapper?: string;
+    /** Sliding thumb (knob) inside the switch. */
+    thumb?: string;
+    /** Label rendered next to the switch. */
+    label?: string;
+  };
+}
+
+export function Switch({
+  children,
+  label,
+  className,
+  id,
+  controlFirst = true,
+  tooltip,
+  classNames,
+  ...props
+}: SwitchProps): React.ReactElement {
+  const generatedId = useId();
+  const idToUse = id ?? generatedId;
+  const labelContent = label ?? children;
+
+  return (
+    <div
+      className={cn(
+        "flex select-none items-center gap-x-2",
+        !controlFirst && "flex-row-reverse justify-end",
+        classNames?.wrapper,
+      )}
+    >
+      <SwitchRoot id={idToUse} className={className} {...props}>
+        <SwitchThumb className={classNames?.thumb} />
+      </SwitchRoot>
+      {labelContent && (
+        <Label
+          htmlFor={idToUse}
+          tooltip={tooltip}
+          className={classNames?.label}
+        >
+          {labelContent}
+        </Label>
+      )}
+    </div>
+  );
+}

package/src/components/table/index.ts

@@ -0,0 +1 @@
+export * from "./table";

package/src/components/table/table.stories.tsx

@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ImageIcon } from "lucide-react";
+import { useMemo } from "react";
+import { Avatar, Checkbox, Tag } from "../../components";
+import { useSelection } from "../../hooks";
+import {
+  ColumnDef,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRow,
+} from "./table";
+
+/**
+ * Data table with typed column definitions. `onRowClick` and `onRowDoubleClick`
+ * fire at the row level — not per cell. For per-cell events or full markup control,
+ * compose with the exported primitives directly.
+ */
+const meta: Meta<typeof Table> = {
+  title: "Components/Table",
+  component: Table,
+};
+
+export default meta;
+type Story<T> = StoryObj<typeof Table<T>>;
+
+interface User {
+  id: number;
+  name: string;
+  photo: string;
+  age: number;
+  gender: "male" | "female";
+}
+
+const data: User[] = [
+  {
+    id: 1,
+    name: "John",
+    photo: "https://i.pravatar.cc/300?un=123456787",
+    age: 25,
+    gender: "male",
+  },
+  {
+    id: 2,
+    name: "Doe",
+    photo: "https://i.pravatar.cc/300?un=123456789",
+    age: 15,
+    gender: "female",
+  },
+  {
+    id: 3,
+    name: "Jane",
+    photo: "https://i.pravatar.cc/300?un=123612788",
+    age: 35,
+    gender: "female",
+  },
+  {
+    id: 4,
+    name: "Smith",
+    photo: "https://i.pravatar.cc/300?un=1234589",
+    age: 15,
+    gender: "female",
+  },
+];
+
+const columns: ColumnDef<User>[] = [
+  {
+    header: () => (
+      <div className="flex items-center gap-x-2">
+        <ImageIcon />
+        <span>Photo</span>
+      </div>
+    ),
+    key: "photo",
+    cell: (row) => <Avatar src={row.photo} alt={row.name} />,
+  },
+  {
+    header: "Name",
+    key: "name",
+  },
+  {
+    header: "Adult",
+    key: "age",
+    cell: (row) => {
+      const isAdult = row.age > 18;
+      return (
+        <Tag variant={isAdult ? "secondary" : "error"}>
+          {isAdult ? "Adult" : "Minor"}
+        </Tag>
+      );
+    },
+  },
+  {
+    header: "Gender",
+    key: "gender",
+  },
+];
+
+export const Default: Story<User> = {
+  args: {
+    columns,
+    data,
+    className: "table-fixed",
+  },
+};
+
+/**
+ * Set a max height on `classNames.container` to clip the body and enable vertical
+ * scroll. The header stays sticky via `position: sticky` on `<th>`.
+ *
+ * ```tsx
+ * <Table classNames={{ container: "max-h-[500px]" }} ... />
+ * ```
+ */
+export const Scrollable: Story<User> = {
+  args: {
+    columns,
+    data: [...data, ...data, ...data],
+    className: "table-fixed",
+    classNames: { container: "max-h-[500px]" },
+  },
+};
+
+/**
+ * `onRowClick` and `selected` wire directly to `useSelection`. `getRowKey` is
+ * required here because `columnsAdapter` rebuilds the columns array on each render —
+ * without stable keys React reconciles by index and checkbox state drifts.
+ */
+export const Selection: Story<User> = {
+  render: () => {
+    const {
+      selected,
+      isSelected,
+      isAllSelected,
+      isSomeSelected,
+      toggle,
+      toggleAll,
+    } = useSelection(data);
+
+    const columnsAdapter = (): ColumnDef<User>[] => [
+      {
+        key: "id",
+        width: 40,
+        header: () => (
+          <Checkbox
+            name="selectAll"
+            checked={isAllSelected}
+            onCheckedChange={toggleAll}
+            indeterminate={isSomeSelected}
+          />
+        ),
+        cell: (row) => (
+          <Checkbox
+            name={row.id.toString()}
+            checked={isSelected(row)}
+            onCheckedChange={() => toggle(row)}
+          />
+        ),
+      },
+      ...columns,
+    ];
+
+    const columnsNew = useMemo(columnsAdapter, [selected]);
+
+    return (
+      <Table
+        data={data}
+        columns={columnsNew}
+        className="table-fixed"
+        onRowClick={toggle}
+        selected={isSelected}
+        getRowKey={(row) => row.id}
+      />
+    );
+  },
+};
+
+export const DoubleClick: Story<User> = {
+  args: {
+    columns,
+    data,
+    onRowDoubleClick: (row: User) => alert(`Double-clicked: ${row.name}`),
+  },
+};
+
+/**
+ * `classNames` expone los slots `container`, `thead`, `tbody`, `tr`, `th` y `td`.
+ * `tr` aplica sólo a las filas del body — la fila del header queda intacta.
+ */
+export const WithClassNames: Story<User> = {
+  args: {
+    columns,
+    data,
+    classNames: {
+      thead: "bg-muted/50",
+      tr: "odd:bg-muted/20",
+      th: "uppercase text-xs tracking-wider",
+      td: "text-muted-foreground",
+    },
+  },
+};
+
+/**
+ * Use the exported primitives when the composite `Table` is not enough: per-cell
+ * events, custom `tfoot`, or arbitrary markup between sections.
+ *
+ * ```tsx
+ * import { TableRoot, TableHeader, TableBody, TableRow, TableHead, TableCell } from "./table";
+ * ```
+ */
+export const Primitive: Story<User> = {
+  render: () => (
+    <TableRoot>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Age</TableHead>
+          <TableHead>Gender</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((row) => (
+          <TableRow key={row.id} onClick={() => alert(row.name)}>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>{row.age}</TableCell>
+            <TableCell>{row.gender}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </TableRoot>
+  ),
+};
+
+// ─── Changelog ───────────────────────────────────────────────────────────────
+//
+// v2 — Breaking changes
+//
+// REMOVED props (*Props escape hatches — use primitives for full prop control):
+//   - theadProps
+//   - tbodyProps
+//   - trProps      → was also incorrectly applied to the header row
+//   - thProps
+//   - tdProps
+//
+// KEPT as className-only escape hatches:
+//   - theadClassName, tbodyClassName, trClassName, thClassName, tdClassName
+//   Note: trClassName now applies to body rows only, NOT the header row.
+//
+// CHANGED behavior:
+//   - onRowClick fires on <tr>, not <td>. Event no longer bubbles per-cell.
+//   - onDoubleClick renamed to onRowDoubleClick for consistency with onRowClick.
+//     Native onDoubleClick is omitted from the table spread — linter will catch misuse.
+//   - cell fallback uses explicit check (`column.cell ? ... : row[key]`)
+//     instead of truthiness (`||`). cell() returning null/0/"" no longer
+//     falls back to raw row value.
+//
+// ADDED props:
+//   - getRowKey: (row, index) => string | number — stable React keys
+//
+// CONSOLIDATED files:
+//   - table-primitives.tsx deleted — primitives now live in table.tsx
+//   - table.model.ts deleted      — ColumnDef now exported from table.tsx
+//   - index.ts now only re-exports from "./table"
+//
+// Migration example for removed *Props escape hatches:
+//
+//   Before:
+//     <Table tdProps={{ onClick: handleCellClick }} ... />
+//
+//   After (use primitives):
+//     <TableRoot>
+//       <TableBody>
+//         {data.map(row => (
+//           <TableRow key={row.id}>
+//             <TableCell onClick={handleCellClick}>{row.name}</TableCell>
+//           </TableRow>
+//         ))}
+//       </TableBody>
+//     </TableRoot>