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

package/src/components/table/table.test.tsx

@@ -0,0 +1,264 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  ColumnDef,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRow,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+describe("Table", () => {
+  interface Person {
+    name: string;
+    age: number;
+  }
+
+  const data: Person[] = [
+    {
+      name: "John",
+      age: 30,
+    },
+    {
+      name: "Jane",
+      age: 25,
+    },
+  ];
+
+  const columns: ColumnDef<Person>[] = [
+    {
+      header: "Name",
+      key: "name",
+    },
+    {
+      header: "Age",
+      key: "age",
+    },
+  ];
+
+  it("should render items", () => {
+    render(<Table data={data} columns={columns} />);
+
+    data.forEach((person: Person) =>
+      expect(screen.getByText(person.name)).toBeInTheDocument(),
+    );
+  });
+
+  it("should render custom header", () => {
+    const customColumns: ColumnDef<Person>[] = [
+      {
+        key: "name",
+        header: () => <div>Custom</div>,
+      },
+    ];
+    render(<Table data={data} columns={customColumns} />);
+
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+  });
+
+  it("should render custom cell", () => {
+    const customColumns: ColumnDef<Person>[] = [
+      {
+        key: "name",
+        header: "name",
+        cell: (row) => <div>{row.name + " custom"}</div>,
+      },
+    ];
+    render(<Table data={data} columns={customColumns} />);
+
+    expect(screen.getByText("John custom")).toBeInTheDocument();
+  });
+
+  it("should select row", () => {
+    render(
+      <Table
+        data={data}
+        columns={columns}
+        selected={(row) => row.name === "John"}
+      />,
+    );
+
+    const john = screen.getByText("John");
+
+    expect(john).toBeInTheDocument();
+    expect(john.parentElement).toHaveAttribute("data-selected", "true");
+  });
+
+  it("should handle onRowClick", () => {
+    const onRowClick = vi.fn();
+    render(<Table data={data} columns={columns} onRowClick={onRowClick} />);
+
+    const first = screen.getByText(data[0].name);
+    click(first);
+
+    expect(onRowClick).toHaveBeenCalledWith(data[0]);
+  });
+});
+
+describe("Table data-slots", () => {
+  it("TableRoot renders data-slot='table-container' and 'table'", () => {
+    render(
+      <TableRoot>
+        <tbody />
+      </TableRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="table-container"]'),
+    ).toBeTruthy();
+    expect(document.querySelector('[data-slot="table"]')).toBeTruthy();
+  });
+
+  it("TableHeader renders with data-slot='table-header'", () => {
+    render(
+      <table>
+        <TableHeader />
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-header"]')).toBeTruthy();
+  });
+
+  it("TableBody renders with data-slot='table-body'", () => {
+    render(
+      <table>
+        <TableBody />
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-body"]')).toBeTruthy();
+  });
+
+  it("TableFooter renders with data-slot='table-footer'", () => {
+    render(
+      <table>
+        <TableFooter />
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-footer"]')).toBeTruthy();
+  });
+
+  it("TableRow renders with data-slot='table-row'", () => {
+    render(
+      <table>
+        <tbody>
+          <TableRow />
+        </tbody>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-row"]')).toBeTruthy();
+  });
+
+  it("TableHead renders with data-slot='table-head'", () => {
+    render(
+      <table>
+        <thead>
+          <tr>
+            <TableHead />
+          </tr>
+        </thead>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-head"]')).toBeTruthy();
+  });
+
+  it("TableCell renders with data-slot='table-cell'", () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableCell />
+          </tr>
+        </tbody>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-cell"]')).toBeTruthy();
+  });
+
+  it("TableCaption renders with data-slot='table-caption'", () => {
+    render(
+      <table>
+        <TableCaption>Caption text</TableCaption>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-caption"]')).toBeTruthy();
+  });
+});
+
+describe("Table composite extras", () => {
+  interface Person {
+    name: string;
+    age: number;
+  }
+  const data: Person[] = [
+    { name: "John", age: 30 },
+    { name: "Jane", age: 25 },
+  ];
+  const columns: ColumnDef<Person>[] = [
+    { header: "Name", key: "name" },
+    { header: "Age", key: "age" },
+  ];
+
+  it("renders empty tbody when data is empty", () => {
+    render(<Table data={[]} columns={columns} />);
+    expect(screen.queryByRole("row", { name: /john/i })).toBeNull();
+    expect(document.querySelector('[data-slot="table-body"]')).toBeTruthy();
+  });
+
+  it("fires onRowDoubleClick on double click", async () => {
+    const onRowDoubleClick = vi.fn();
+    render(
+      <Table
+        data={data}
+        columns={columns}
+        onRowDoubleClick={onRowDoubleClick}
+      />,
+    );
+    await userEvent.dblClick(screen.getByText("John"));
+    expect(onRowDoubleClick).toHaveBeenCalledWith(data[0]);
+  });
+
+  it("uses getRowKey for row keys", () => {
+    const getRowKey = vi.fn((row: Person) => row.name);
+    render(<Table data={data} columns={columns} getRowKey={getRowKey} />);
+    expect(getRowKey).toHaveBeenCalledWith(data[0], 0);
+    expect(getRowKey).toHaveBeenCalledWith(data[1], 1);
+  });
+
+  it("applies className to table element", () => {
+    render(<Table data={[]} columns={[]} className="custom-table" />);
+    expect(document.querySelector('[data-slot="table"]')).toHaveClass(
+      "custom-table",
+    );
+  });
+
+  it("applies classNames.container to outer div", () => {
+    render(
+      <Table data={[]} columns={[]} classNames={{ container: "cls-wrap" }} />,
+    );
+    expect(document.querySelector('[data-slot="table-container"]')).toHaveClass(
+      "cls-wrap",
+    );
+  });
+
+  it("applies classNames.thead to thead", () => {
+    render(
+      <Table data={[]} columns={columns} classNames={{ thead: "cls-thead" }} />,
+    );
+    expect(document.querySelector('[data-slot="table-header"]')).toHaveClass(
+      "cls-thead",
+    );
+  });
+
+  it("applies classNames.td to body cells", () => {
+    render(
+      <Table data={data} columns={columns} classNames={{ td: "cls-td" }} />,
+    );
+    const cells = document.querySelectorAll('[data-slot="table-cell"]');
+    expect(cells[0]).toHaveClass("cls-td");
+  });
+});

package/src/components/table/table.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import * as React from "react";
+import { type ReactNode } from "react";
+import { cn } from "../../lib";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type ColumnDef<T> = {
+  header: string | (() => ReactNode);
+  key: keyof T;
+  cell?: (row: T, index: number) => ReactNode;
+  width?: string | number;
+};
+
+// ─── Primitives ──────────────────────────────────────────────────────────────
+
+type TableRootProps = React.ComponentProps<"table"> & {
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Outer wrapper div with overflow handling. */
+    container?: string;
+  };
+};
+
+export function TableRoot({ className, classNames, ...props }: TableRootProps) {
+  return (
+    <div
+      data-slot="table-container"
+      className={cn(
+        "relative w-full overflow-auto rounded-md border",
+        classNames?.container,
+      )}
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted data-[selected=true]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground sticky top-0 bg-background [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+// ─── Composite ───────────────────────────────────────────────────────────────
+
+type TableProps<T> = {
+  data: T[];
+  columns: ColumnDef<T>[];
+  getRowKey?: (row: T, index: number) => string | number;
+  onRowClick?: (row: T) => void;
+  onRowDoubleClick?: (row: T) => void;
+  selected?: (row: T) => boolean;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Outer wrapper div with overflow handling. */
+    container?: string;
+    /** `<thead>` element. */
+    thead?: string;
+    /** `<tbody>` element. */
+    tbody?: string;
+    /** `<tr>` inside `<thead>` (the single header row). */
+    headerRow?: string;
+    /** Each `<tr>` inside `<tbody>` (the repeating body rows). */
+    tr?: string;
+    /** Header cell `<th>`. */
+    th?: string;
+    /** Body cell `<td>`. */
+    td?: string;
+  };
+} & Omit<React.ComponentProps<"table">, "onDoubleClick">;
+
+export function Table<T>({
+  data = [],
+  columns = [],
+  getRowKey,
+  onRowClick,
+  onRowDoubleClick,
+  selected,
+  classNames,
+  ...tableProps
+}: TableProps<T>) {
+  return (
+    <TableRoot
+      {...tableProps}
+      classNames={{ container: classNames?.container }}
+    >
+      <TableHeader className={classNames?.thead}>
+        <TableRow className={classNames?.headerRow}>
+          {columns.map((column, i) => (
+            <TableHead
+              key={i}
+              className={classNames?.th}
+              style={{ width: column.width }}
+            >
+              {typeof column.header === "function"
+                ? column.header()
+                : column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody className={classNames?.tbody}>
+        {data.map((row, i) => (
+          <TableRow
+            key={getRowKey ? getRowKey(row, i) : i}
+            className={classNames?.tr}
+            data-selected={selected?.(row)}
+            onClick={() => onRowClick?.(row)}
+            onDoubleClick={() => onRowDoubleClick?.(row)}
+          >
+            {columns.map((column, j) => (
+              <TableCell key={j} className={classNames?.td}>
+                {column.cell
+                  ? column.cell(row, i)
+                  : (row[column.key] as ReactNode)}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </TableRoot>
+  );
+}

package/src/components/tabs/index.ts

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