@boxcustodia/library 2.0.0-alpha.12 → 2.0.0-alpha.14

package/src/components/table/index.ts

@@ -1,3 +1 @@
 export * from "./table";
-export * from "./table.model";
-export * from "./table-primitives";

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

@@ -1,11 +1,26 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ImageIcon } from "lucide-react";
 import { useMemo } from "react";
-import { Avatar, Checkbox, ColumnDef, Table, Tag } from "../../components";
+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: "Data display/Table",
+  title: "Components/Table",
   component: Table,
 };
 
@@ -44,7 +59,7 @@ const data: User[] = [
   },
   {
     id: 4,
-    name: "Doe",
+    name: "Smith",
     photo: "https://i.pravatar.cc/300?un=1234589",
     age: 15,
     gender: "female",
@@ -71,7 +86,6 @@ const columns: ColumnDef<User>[] = [
     key: "age",
     cell: (row) => {
       const isAdult = row.age > 18;
-
       return (
         <Tag variant={isAdult ? "secondary" : "error"}>
           {isAdult ? "Adult" : "Minor"}
@@ -87,31 +101,34 @@ const columns: ColumnDef<User>[] = [
 
 export const Default: Story<User> = {
   args: {
-    columns: columns,
-    data: data,
+    columns,
+    data,
     className: "table-fixed",
   },
 };
 
 /**
- * Al setear una altura en la propiedad `containerClassName` se puede hacer Scrollable
+ * 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
- *   ....
- *   containerClassName="max-h-[500px]"
- *  />
+ * <Table classNames={{ container: "max-h-[500px]" }} ... />
  * ```
  */
 export const Scrollable: Story<User> = {
   args: {
-    columns: columns,
+    columns,
     data: [...data, ...data, ...data],
     className: "table-fixed",
-    containerClassName: "max-h-[500px]",
+    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 {
@@ -126,7 +143,7 @@ export const Selection: Story<User> = {
     const columnsAdapter = (): ColumnDef<User>[] => [
       {
         key: "id",
-        width: 30,
+        width: 40,
         header: () => (
           <Checkbox
             name="selectAll"
@@ -155,15 +172,111 @@ export const Selection: Story<User> = {
         className="table-fixed"
         onRowClick={toggle}
         selected={isSelected}
+        getRowKey={(row) => row.id}
       />
     );
   },
 };
 
-export const DoubleClickAction: Story<User> = {
+export const DoubleClick: Story<User> = {
   args: {
-    columns: columns,
-    data: data,
-    onDoubleClick: (row: User) => alert(`clicked ${row.name}`),
+    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>

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ColumnDef, Table } from "../../components";
-import { click } from "../../utils";
+import { click } from "../../utils/tests";
 
 describe("Table", () => {
   interface Person {

package/src/components/table/table.tsx

@@ -1,104 +1,210 @@
-import { isFunction } from "lodash";
-import { ComponentPropsWithoutRef, HTMLProps, JSX } from "react";
-import { ClassName } from "@/models";
+import * as React from "react";
+import { type ReactNode } from "react";
 import { cn } from "../../lib";
-import { ColumnDef } from "./table.model";
-import {
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRoot,
-  TableRow,
-} from "./table-primitives";
 
-type Props<T> = {
+// ─── 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;
-  onDoubleClick?: (row: T) => void;
+  onRowDoubleClick?: (row: T) => void;
   selected?: (row: T) => boolean;
-} & ExtendedProps &
-  Omit<
-    ComponentPropsWithoutRef<typeof TableRoot>,
-    "data" | "selected" | "onDoubleClick"
-  >;
-
-interface ExtendedProps {
-  theadClassName?: ClassName;
-  theadProps?: HTMLProps<HTMLTableSectionElement>;
-  tbodyClassName?: ClassName;
-  tbodyProps?: HTMLProps<HTMLTableSectionElement>;
-  trClassName?: ClassName;
-  trProps?: HTMLProps<HTMLTableRowElement>;
-  thClassName?: ClassName;
-  thProps?: HTMLProps<HTMLTableCellElement>;
-  tdClassName?: ClassName;
-  tdProps?: Omit<HTMLProps<HTMLTableCellElement>, "onDoubleClick">;
-}
+  /** 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 const Table = <T,>({
+export function Table<T>({
   data = [],
   columns = [],
+  getRowKey,
   onRowClick,
-  onDoubleClick,
+  onRowDoubleClick,
   selected,
-  theadClassName,
-  theadProps,
-  tbodyClassName,
-  tbodyProps,
-  trClassName,
-  trProps,
-  thClassName,
-  thProps,
-  tdClassName,
-  tdProps,
+  classNames,
   ...tableProps
-}: Props<T>) => {
+}: TableProps<T>) {
   return (
-    <TableRoot {...tableProps} className={cn(tableProps?.className)}>
-      <TableHeader
-        {...theadProps}
-        className={cn(theadProps?.className, theadClassName)}
-      >
-        <TableRow {...trProps} className={cn(trProps?.className, trClassName)}>
+    <TableRoot
+      {...tableProps}
+      classNames={{ container: classNames?.container }}
+    >
+      <TableHeader className={classNames?.thead}>
+        <TableRow className={classNames?.headerRow}>
           {columns.map((column, i) => (
             <TableHead
               key={i}
-              {...thProps}
-              className={cn(thProps?.className, thClassName)}
-              style={{
-                width: column.width,
-              }}
+              className={classNames?.th}
+              style={{ width: column.width }}
             >
-              {isFunction(column.header) ? column.header?.() : column.header}
+              {typeof column.header === "function"
+                ? column.header()
+                : column.header}
             </TableHead>
           ))}
         </TableRow>
       </TableHeader>
-      <TableBody
-        {...tbodyProps}
-        className={cn(tbodyProps?.className, tbodyClassName)}
-      >
+      <TableBody className={classNames?.tbody}>
         {data.map((row, i) => (
           <TableRow
-            key={i}
-            {...trProps}
+            key={getRowKey ? getRowKey(row, i) : i}
+            className={classNames?.tr}
             data-selected={selected?.(row)}
-            className={cn(trProps?.className, trClassName)}
+            onClick={() => onRowClick?.(row)}
+            onDoubleClick={() => onRowDoubleClick?.(row)}
           >
-            {columns.map((column, i) => (
-              <TableCell
-                key={i}
-                {...tdProps}
-                onClick={(e) => {
-                  tdProps?.onClick?.(e);
-                  onRowClick?.(row);
-                }}
-                onDoubleClick={() => onDoubleClick?.(row)}
-                className={cn(tdProps?.className, tdClassName)}
-              >
-                {(column.cell?.(row, i) as JSX.Element) || row[column.key]}
+            {columns.map((column, j) => (
+              <TableCell key={j} className={classNames?.td}>
+                {column.cell
+                  ? column.cell(row, i)
+                  : (row[column.key] as ReactNode)}
               </TableCell>
             ))}
           </TableRow>
@@ -106,4 +212,4 @@ export const Table = <T,>({
       </TableBody>
     </TableRoot>
   );
-};
+}