@izumisy-tailor/tailor-data-viewer 0.2.18 → 0.2.20

package/src/component/data-table/{index.tsx → data-table.tsx}

@@ -5,8 +5,9 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/utils";
+import { CollectionProvider } from "../collection/collection-provider";
 import { Table } from "../table";
-import type { Column, DataTableRootProps } from "../types";
+import type { Column, UseDataTableReturn } from "../types";
 import {
   DataTableContext,
   type DataTableContextValue,
@@ -17,61 +18,102 @@ import {
 // =============================================================================
 
 /**
- * Internal noop row operations used when none are provided.
+ * Root container for the DataTable compound component.
+ *
+ * Must be used within `DataTable.Provider`.
+ * Renders a `<Table.Root>` wrapper; all data is read from context.
  */
-const noopRowOps = {
-  updateRow: () => ({ rollback: () => {} }),
-  deleteRow: () => ({
-    rollback: () => {},
-    deletedRow: {} as Record<string, unknown>,
-  }),
-  insertRow: () => ({ rollback: () => {} }),
-};
+function DataTableRoot({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <Table.Root className={className}>{children}</Table.Root>;
+}
+
+// =============================================================================
+// DataTable.Provider
+// =============================================================================
 
-function DataTableRoot<TRow extends Record<string, unknown>>({
-  columns = [] as Column<TRow>[],
-  rows = [] as TRow[],
-  loading = false,
-  error = null,
-  sortStates = [],
-  onSort,
-  rowOperations,
+/**
+ * Provider that shares `useDataTable()` state via React Context.
+ *
+ * Internally provides both `DataTableContext` and `CollectionContext`
+ * so that utility components (`Pagination`, `ColumnSelector`,
+ * `SearchFilterForm`, `CsvButton`) can consume data without explicit props.
+ *
+ * @example
+ * ```tsx
+ * const collection = useCollection({ query: GET_ORDERS, params: { pageSize: 20 } });
+ * const [result] = useQuery({ ...collection.toQueryArgs() });
+ * const table = useDataTable({ columns, data: result.data?.orders, collection });
+ *
+ * <DataTable.Provider value={table}>
+ *   <SearchFilterForm />
+ *   <ColumnSelector />
+ *   <DataTable.Root>
+ *     <DataTable.Headers />
+ *     <DataTable.Body />
+ *   </DataTable.Root>
+ *   <Pagination />
+ * </DataTable.Provider>
+ * ```
+ */
+function DataTableProviderComponent<TRow extends Record<string, unknown>>({
+  value,
   children,
-}: DataTableRootProps<TRow>) {
-  const contextValue: DataTableContextValue<TRow> = {
-    updateRow: (rowOperations?.updateRow ??
-      noopRowOps.updateRow) as DataTableContextValue<TRow>["updateRow"],
-    deleteRow: (rowOperations?.deleteRow ??
-      noopRowOps.deleteRow) as DataTableContextValue<TRow>["deleteRow"],
-    insertRow: (rowOperations?.insertRow ??
-      noopRowOps.insertRow) as DataTableContextValue<TRow>["insertRow"],
-    columns,
-    rows,
-    loading,
-    error,
-    sortStates,
-    onSort,
+}: {
+  value: UseDataTableReturn<TRow>;
+  children: ReactNode;
+}) {
+  const dataTableValue: DataTableContextValue<TRow> = {
+    columns: value.columns,
+    rows: value.rows,
+    loading: value.loading,
+    error: value.error,
+    sortStates: value.sortStates ?? [],
+    onSort: value.onSort,
+    updateRow: value.updateRow,
+    deleteRow: value.deleteRow,
+    insertRow: value.insertRow,
+    visibleColumns: value.visibleColumns,
+    isColumnVisible: value.isColumnVisible,
+    toggleColumn: value.toggleColumn,
+    showAllColumns: value.showAllColumns,
+    hideAllColumns: value.hideAllColumns,
+    pageInfo: value.pageInfo,
   };
 
-  return (
-    <DataTableContext.Provider value={contextValue}>
-      <Table.Root>{children}</Table.Root>
+  const collectionValue = value.collection ?? null;
+
+  const inner = (
+    <DataTableContext.Provider value={dataTableValue}>
+      {children}
     </DataTableContext.Provider>
   );
+
+  // Wrap with CollectionContext when collection is available
+  if (collectionValue) {
+    return (
+      <CollectionProvider value={collectionValue}>{inner}</CollectionProvider>
+    );
+  }
+
+  return inner;
 }
 
 // =============================================================================
 // DataTable.Headers
 // =============================================================================
 
-interface DataTableHeadersProps {
-  className?: string;
-}
-
-function DataTableHeaders({ className }: DataTableHeadersProps) {
+function DataTableHeaders({ className }: { className?: string }) {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
-    throw new Error("<DataTable.Headers> must be used within <DataTable.Root>");
+    throw new Error(
+      "<DataTable.Headers> must be used within <DataTable.Provider>",
+    );
   }
   const { columns, sortStates, onSort } = ctx;
 
@@ -129,15 +171,18 @@ function SortIndicator({ direction }: { direction: "Asc" | "Desc" }) {
 // DataTable.Body
 // =============================================================================
 
-interface DataTableBodyProps {
+function DataTableBody({
+  children,
+  className,
+}: {
   children?: ReactNode;
   className?: string;
-}
-
-function DataTableBody({ children, className }: DataTableBodyProps) {
+}) {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
-    throw new Error("<DataTable.Body> must be used within <DataTable.Root>");
+    throw new Error(
+      "<DataTable.Body> must be used within <DataTable.Provider>",
+    );
   }
   const { columns, rows, loading, error } = ctx;
 
@@ -180,19 +225,19 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
         </Table.Row>
       )}
       {rows?.map((row, rowIndex) => (
-        <DataTableRow key={rowIndex} row={row}>
+        <Table.Row key={rowIndex}>
           {columns?.map((col) => {
             const key = col.kind === "field" ? col.dataKey : col.id;
             return (
-              <DataTableCell
+              <Table.Cell
                 key={key}
-                row={row}
-                column={col}
-                rowIndex={rowIndex}
-              />
+                style={col.width ? { width: col.width } : undefined}
+              >
+                {resolveContent(row, col, rowIndex)}
+              </Table.Cell>
             );
           })}
-        </DataTableRow>
+        </Table.Row>
       ))}
     </Table.Body>
   );
@@ -202,82 +247,54 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
 // DataTable.Row
 // =============================================================================
 
-interface DataTableRowComponentProps<
-  TRow extends Record<string, unknown>,
-> extends Omit<ComponentProps<"tr">, "children"> {
-  row?: TRow;
-  children?: ReactNode;
-}
-
-function DataTableRow<TRow extends Record<string, unknown>>({
-  children,
-  ...restProps
-}: DataTableRowComponentProps<TRow>) {
-  return <Table.Row {...restProps}>{children}</Table.Row>;
+/**
+ * Thin wrapper around `Table.Row` for use in custom rendering within
+ * `DataTable.Body`.
+ */
+function DataTableRow(props: ComponentProps<"tr">) {
+  return <Table.Row {...props} />;
 }
 
 // =============================================================================
 // DataTable.Cell
 // =============================================================================
 
-interface DataTableCellComponentProps<
-  TRow extends Record<string, unknown>,
-> extends ComponentProps<"td"> {
-  row?: TRow;
-  column?: Column<TRow>;
-  rowIndex?: number;
+/**
+ * Thin wrapper around `Table.Cell` for use in custom rendering within
+ * `DataTable.Body`.
+ */
+function DataTableCell(props: ComponentProps<"td">) {
+  return <Table.Cell {...props} />;
 }
 
-function DataTableCell<TRow extends Record<string, unknown>>({
-  row,
-  column,
-  rowIndex = 0,
-  children,
-  className,
-  ...restProps
-}: DataTableCellComponentProps<TRow>) {
-  const content = resolveContent(children, row, column, rowIndex);
-
-  return (
-    <Table.Cell
-      className={className}
-      style={column?.width ? { width: column.width } : undefined}
-      {...restProps}
-    >
-      {content}
-    </Table.Cell>
-  );
-}
+// =============================================================================
+// Helpers
+// =============================================================================
 
 /**
- * Resolve cell content from children, row data, and column definition.
+ * Resolve cell content from row data and column definition.
  */
 function resolveContent<TRow extends Record<string, unknown>>(
-  children: ReactNode,
-  row: TRow | undefined,
-  column: Column<TRow> | undefined,
+  row: TRow,
+  column: Column<TRow>,
   rowIndex: number,
 ): ReactNode {
-  if (!children && row && column) {
-    switch (column.kind) {
-      case "field": {
-        const value = row[column.dataKey];
-        if (column.renderer) {
-          return createElement(column.renderer, {
-            value,
-            row,
-            rowIndex,
-            column,
-          });
-        }
-        return formatValue(value);
+  switch (column.kind) {
+    case "field": {
+      const value = row[column.dataKey];
+      if (column.renderer) {
+        return createElement(column.renderer, {
+          value,
+          row,
+          rowIndex,
+          column,
+        });
       }
-      case "display":
-        return column.render(row);
+      return formatValue(value);
     }
+    case "display":
+      return column.render(row);
   }
-
-  return children;
 }
 
 /**
@@ -298,19 +315,26 @@ function formatValue(value: unknown): ReactNode {
 /**
  * Data-bound table compound component.
  *
- * Use with `useDataTable()` hook which provides `rootProps` to spread.
+ * Use with `useDataTable()` hook and wrap with `DataTable.Provider`
+ * for context-based data flow.
  *
  * @example
  * ```tsx
  * const table = useDataTable({ columns, data, loading, collection });
  *
- * <DataTable.Root {...table.rootProps}>
- *   <DataTable.Headers />
- *   <DataTable.Body />
- * </DataTable.Root>
+ * <DataTable.Provider value={table}>
+ *   <SearchFilterForm />
+ *   <ColumnSelector />
+ *   <DataTable.Root>
+ *     <DataTable.Headers />
+ *     <DataTable.Body />
+ *   </DataTable.Root>
+ *   <Pagination />
+ * </DataTable.Provider>
  * ```
  */
 export const DataTable = {
+  Provider: DataTableProviderComponent,
   Root: DataTableRoot,
   Headers: DataTableHeaders,
   Body: DataTableBody,

package/src/component/data-table/use-data-table.test.ts

@@ -234,46 +234,23 @@ describe("useDataTable", () => {
   });
 
   // ---------------------------------------------------------------------------
-  // Props generators
+  // Sort state
   // ---------------------------------------------------------------------------
-  describe("props generators", () => {
-    it("rootProps contains columns, rows, loading, error", () => {
-      const { result } = renderHook(() =>
-        useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          loading: true,
-        }),
-      );
-
-      const { rootProps } = result.current;
-      expect(rootProps.columns).toHaveLength(4);
-      expect(rootProps.rows).toHaveLength(3);
-      expect(rootProps.loading).toBe(true);
-    });
-
-    it("getRowProps returns row", () => {
+  describe("sort state", () => {
+    it("sortStates is empty when no collection is provided", () => {
       const { result } = renderHook(() =>
         useDataTable<TestRow>({ columns: testColumns, data: testData }),
       );
 
-      const rowProps = result.current.getRowProps(result.current.rows[0]);
-      expect(rowProps.row.name).toBe("Alice");
+      expect(result.current.sortStates).toEqual([]);
     });
 
-    it("getCellProps returns row, column, rowIndex", () => {
+    it("onSort is undefined when no collection is provided", () => {
       const { result } = renderHook(() =>
         useDataTable<TestRow>({ columns: testColumns, data: testData }),
       );
 
-      const cellProps = result.current.getCellProps(
-        result.current.rows[0],
-        testColumns[0],
-        0,
-      );
-      expect(cellProps.row.name).toBe("Alice");
-      expect(cellProps.column).toBe(testColumns[0]);
-      expect(cellProps.rowIndex).toBe(0);
+      expect(result.current.onSort).toBeUndefined();
     });
   });
 });

package/src/component/data-table/use-data-table.ts

@@ -1,17 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type {
   Column,
-  DataTableCellProps,
-  DataTableRootProps,
-  DataTableRowProps,
   PageInfo,
+  SortState,
   UseDataTableOptions,
   UseDataTableReturn,
 } from "../types";
 
 /**
  * Hook that integrates data management, column visibility, row operations, and
- * props generators for the `DataTable.*` compound component.
+ * sort/pagination state for the `DataTable.*` compound component.
  *
  * @example
  * ```tsx
@@ -25,10 +23,12 @@ import type {
  *   collection,
  * });
  *
- * <DataTable.Root {...table.rootProps}>
- *   <DataTable.Headers />
- *   <DataTable.Body />
- * </DataTable.Root>
+ * <DataTable.Provider value={table}>
+ *   <DataTable.Root>
+ *     <DataTable.Headers />
+ *     <DataTable.Body />
+ *   </DataTable.Root>
+ * </DataTable.Provider>
  * ```
  */
 export function useDataTable<TRow extends Record<string, unknown>>(
@@ -194,64 +194,30 @@ export function useDataTable<TRow extends Record<string, unknown>>(
   );
 
   // ---------------------------------------------------------------------------
-  // Props generators
+  // Sort (delegated from collection)
   // ---------------------------------------------------------------------------
-  const rootProps = useMemo<DataTableRootProps<TRow>>(() => {
-    return {
-      columns: visibleColumns,
-      rows,
-      loading,
-      error,
-      onSort: collection
-        ? (field: string, direction?: "Asc" | "Desc") =>
-            collection.setSort(field, direction)
-        : undefined,
-      sortStates: collection?.sortStates,
-      rowOperations: { updateRow, deleteRow, insertRow },
-      children: null,
-    };
-  }, [
-    visibleColumns,
-    rows,
-    loading,
-    error,
-    collection,
-    updateRow,
-    deleteRow,
-    insertRow,
-  ]);
-
-  const getRowProps = useCallback(
-    (row: TRow): DataTableRowProps<TRow> => ({ row }),
-    [],
-  );
-
-  const getCellProps = useCallback(
-    (
-      row: TRow,
-      column: Column<TRow>,
-      rowIndex: number,
-    ): DataTableCellProps<TRow> => ({
-      row,
-      column,
-      rowIndex,
-    }),
-    [],
-  );
+  const sortStates = useMemo<SortState[]>(() => {
+    return collection?.sortStates ?? [];
+  }, [collection?.sortStates]);
+
+  const onSort = useMemo<
+    ((field: string, direction?: "Asc" | "Desc") => void) | undefined
+  >(() => {
+    if (!collection) return undefined;
+    return (field: string, direction?: "Asc" | "Desc") =>
+      collection.setSort(field, direction);
+  }, [collection]);
 
   // ---------------------------------------------------------------------------
   // Return
   // ---------------------------------------------------------------------------
   return {
-    // Props generators
-    rootProps,
-    getRowProps,
-    getCellProps,
-
     // Data
     rows,
     loading,
     error,
+    sortStates,
+    onSort,
 
     // Pagination
     pageInfo,
@@ -272,5 +238,8 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     updateRow,
     deleteRow,
     insertRow,
+
+    // Collection (passthrough for DataTable.Provider)
+    collection,
   };
 }

package/src/component/index.ts

@@ -23,9 +23,6 @@ export type {
   UseDataTableOptions,
   UseDataTableReturn,
   RowOperations,
-  DataTableRootProps,
-  DataTableRowProps,
-  DataTableCellProps,
   FieldName,
   TableFieldName,
   OrderableFieldName,
@@ -40,11 +37,7 @@ export type {
   MetadataFieldsOptions,
   MetadataFilter,
   TableMetadataFilter,
-  ColumnSelectorProps,
-  CsvButtonProps,
-  SearchFilterFormProps,
   SearchFilterLabels,
-  PaginationProps,
 } from "./types";
 
 export {
@@ -66,7 +59,7 @@ export {
 export { Table } from "./table";
 
 // DataTable (data-bound)
-export { DataTable } from "./data-table/index";
+export { DataTable } from "./data-table/data-table";
 export { useDataTable } from "./data-table/use-data-table";
 export { useDataTableContext } from "./data-table/data-table-context";
 

package/src/component/pagination.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import type { Column } from "./types";
+import { createTestProviders } from "../tests/helpers";
+import { Pagination } from "./pagination";
+
+// =============================================================================
+// Fixtures
+// =============================================================================
+
+type TestRow = { id: string; name: string; status: string };
+
+const testColumns: Column<TestRow>[] = [
+  { kind: "field", dataKey: "name", label: "Name" },
+  { kind: "field", dataKey: "status", label: "Status" },
+];
+
+const testRows: TestRow[] = [
+  { id: "1", name: "Alice", status: "active" },
+  { id: "2", name: "Bob", status: "inactive" },
+];
+
+const TestProviders = createTestProviders({
+  columns: testColumns,
+  rows: testRows,
+  dataTableDefaults: {
+    pageInfo: {
+      hasNextPage: true,
+      endCursor: "cursor-end",
+      hasPreviousPage: true,
+      startCursor: "cursor-start",
+    },
+  },
+  collectionDefaults: {
+    hasPrevPage: true,
+    hasNextPage: true,
+  },
+});
+
+// =============================================================================
+// Tests
+// =============================================================================
+
+describe("Pagination", () => {
+  it("renders Previous and Next buttons", () => {
+    render(
+      <TestProviders>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Previous")).toBeInTheDocument();
+    expect(screen.getByText("Next")).toBeInTheDocument();
+  });
+
+  it("disables Previous when hasPrevPage is false", () => {
+    render(
+      <TestProviders collection={{ hasPrevPage: false }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Previous")).toBeDisabled();
+    expect(screen.getByText("Next")).toBeEnabled();
+  });
+
+  it("disables Next when hasNextPage is false", () => {
+    render(
+      <TestProviders collection={{ hasNextPage: false }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Previous")).toBeEnabled();
+    expect(screen.getByText("Next")).toBeDisabled();
+  });
+
+  it("calls nextPage with endCursor when Next is clicked", () => {
+    const nextPage = vi.fn();
+    render(
+      <TestProviders collection={{ nextPage }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Next"));
+    expect(nextPage).toHaveBeenCalledWith("cursor-end");
+  });
+
+  it("calls prevPage with startCursor when Previous is clicked", () => {
+    const prevPage = vi.fn();
+    render(
+      <TestProviders collection={{ prevPage }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Previous"));
+    expect(prevPage).toHaveBeenCalledWith("cursor-start");
+  });
+
+  it("does not call nextPage when endCursor is null", () => {
+    const nextPage = vi.fn();
+    render(
+      <TestProviders
+        dataTable={{
+          pageInfo: {
+            hasNextPage: true,
+            endCursor: null,
+            hasPreviousPage: false,
+            startCursor: null,
+          },
+        }}
+        collection={{ nextPage, hasNextPage: true }}
+      >
+        <Pagination />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Next"));
+    expect(nextPage).not.toHaveBeenCalled();
+  });
+
+  it("throws when rendered outside provider", () => {
+    console.error = vi.fn();
+    expect(() => render(<Pagination />)).toThrow();
+    console.error = globalThis.console.error;
+  });
+});