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

package/src/component/pagination.tsx

@@ -1,22 +1,24 @@
-import type { PaginationProps } from "./types";
+import { useDataTableContext } from "./data-table/data-table-context";
+import { useCollectionContext } from "./collection/collection-provider";
 
 /**
  * Pagination controls for cursor-based navigation.
  *
- * Designed to receive props via spread from `useDataTable()`.
+ * Reads `pageInfo` from `DataTableContext` and pagination actions
+ * from `CollectionContext`. Must be rendered inside `DataTable.Provider`.
  *
  * @example
  * ```tsx
- * <Pagination {...table} />
+ * <DataTable.Provider value={table}>
+ *   <Pagination />
+ * </DataTable.Provider>
  * ```
  */
-export function Pagination({
-  pageInfo,
-  nextPage,
-  prevPage,
-  hasPrevPage,
-  hasNextPage,
-}: PaginationProps) {
+export function Pagination() {
+  const { pageInfo } = useDataTableContext();
+  const { nextPage, prevPage, hasPrevPage, hasNextPage } =
+    useCollectionContext();
+
   return (
     <div className="flex items-center justify-end gap-2 py-2">
       <button

package/src/component/search-filter-form.test.tsx

@@ -0,0 +1,222 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import type { Column, Filter } from "./types";
+import { createTestProviders } from "../tests/helpers";
+import { SearchFilterForm } from "./search-filter-form";
+
+// =============================================================================
+// Fixtures
+// =============================================================================
+
+type TestRow = { id: string; name: string; status: string; priority: number };
+
+const testColumns: Column<TestRow>[] = [
+  {
+    kind: "field",
+    dataKey: "name",
+    label: "Name",
+    sort: { type: "string" },
+    filter: { type: "string" },
+  },
+  {
+    kind: "field",
+    dataKey: "status",
+    label: "Status",
+    filter: {
+      type: "enum",
+      options: [
+        { value: "active", label: "Active" },
+        { value: "inactive", label: "Inactive" },
+      ],
+    },
+  },
+  {
+    kind: "field",
+    dataKey: "priority",
+    label: "Priority",
+    sort: { type: "number" },
+    filter: { type: "number" },
+  },
+  {
+    kind: "display",
+    id: "actions",
+    label: "Actions",
+    render: (row) => <button>Edit {row.name}</button>,
+  },
+];
+
+const testRows: TestRow[] = [
+  { id: "1", name: "Alice", status: "active", priority: 1 },
+  { id: "2", name: "Bob", status: "inactive", priority: 2 },
+];
+
+const TestProviders = createTestProviders({
+  columns: testColumns,
+  rows: testRows,
+});
+
+// =============================================================================
+// Tests
+// =============================================================================
+
+describe("SearchFilterForm", () => {
+  it("renders the search trigger button", () => {
+    render(
+      <TestProviders>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Search")).toBeInTheDocument();
+  });
+
+  it("shows active filter count badge", () => {
+    const filters: Filter[] = [
+      { field: "name", operator: "eq", value: "Alice" },
+    ];
+    render(
+      <TestProviders collection={{ filters }}>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+  });
+
+  it("renders custom trigger when provided", () => {
+    render(
+      <TestProviders>
+        <SearchFilterForm trigger={<span>Custom Trigger</span>} />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Custom Trigger")).toBeInTheDocument();
+  });
+
+  it("shows filterable field options in the dropdown", () => {
+    render(
+      <TestProviders>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Select field...")).toBeInTheDocument();
+    const options = screen.getAllByRole("option");
+    const optionTexts = options.map((o) => o.textContent);
+    expect(optionTexts).toContain("Name");
+    expect(optionTexts).toContain("Status");
+    expect(optionTexts).toContain("Priority");
+  });
+
+  it("displays active filters with remove buttons", () => {
+    const filters: Filter[] = [
+      { field: "name", operator: "eq", value: "Alice" },
+    ];
+    const removeFilter = vi.fn();
+    render(
+      <TestProviders collection={{ filters, removeFilter }}>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Active filters")).toBeInTheDocument();
+    expect(screen.getByText("Name = Alice")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("✕"));
+    expect(removeFilter).toHaveBeenCalledWith("name");
+  });
+
+  it("calls clearFilters when Clear all is clicked", () => {
+    const filters: Filter[] = [
+      { field: "name", operator: "eq", value: "test" },
+    ];
+    const clearFilters = vi.fn();
+    render(
+      <TestProviders collection={{ filters, clearFilters }}>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Clear all"));
+    expect(clearFilters).toHaveBeenCalled();
+  });
+
+  it("calls addFilter when a filter is submitted", async () => {
+    const user = userEvent.setup();
+    const addFilter = vi.fn();
+    render(
+      <TestProviders collection={{ addFilter }}>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    // Select field
+    await user.selectOptions(
+      screen.getByDisplayValue("Select field..."),
+      "name",
+    );
+
+    // Type value
+    await user.type(screen.getByPlaceholderText("Enter value..."), "Alice");
+
+    // Click Add
+    await user.click(screen.getByText("Add"));
+
+    expect(addFilter).toHaveBeenCalledWith("name", "eq", "Alice");
+  });
+
+  it("shows 'No filterable fields' when no columns have filter config", () => {
+    const columnsWithoutFilter: Column<TestRow>[] = [
+      { kind: "field", dataKey: "name", label: "Name" },
+    ];
+    render(
+      <TestProviders dataTable={{ columns: columnsWithoutFilter }}>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("No filterable fields")).toBeInTheDocument();
+  });
+
+  it("shows 'All fields have filters applied' when every field is filtered", () => {
+    const filters: Filter[] = [
+      { field: "name", operator: "eq", value: "a" },
+      { field: "status", operator: "eq", value: "active" },
+      { field: "priority", operator: "eq", value: "1" },
+    ];
+    render(
+      <TestProviders collection={{ filters }}>
+        <SearchFilterForm />
+      </TestProviders>,
+    );
+
+    expect(
+      screen.getByText("All fields have filters applied"),
+    ).toBeInTheDocument();
+  });
+
+  it("supports custom labels", () => {
+    render(
+      <TestProviders>
+        <SearchFilterForm
+          labels={{
+            search: "検索",
+            searchFilter: "検索フィルタ",
+            selectField: "フィールド選択...",
+          }}
+        />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("検索")).toBeInTheDocument();
+    expect(screen.getByText("検索フィルタ")).toBeInTheDocument();
+    expect(screen.getByText("フィールド選択...")).toBeInTheDocument();
+  });
+
+  it("throws when rendered outside provider", () => {
+    console.error = vi.fn();
+    expect(() => render(<SearchFilterForm />)).toThrow();
+    console.error = globalThis.console.error;
+  });
+});

package/src/component/search-filter-form.tsx

@@ -4,38 +4,43 @@ import {
   useEffect,
   useRef,
   type KeyboardEvent,
+  type ReactNode,
 } from "react";
-import type {
-  FilterOperator,
-  SearchFilterFormProps,
-  FilterConfig,
-} from "./types";
+import type { FilterOperator, FilterConfig, SearchFilterLabels } from "./types";
 import { OPERATORS_BY_FILTER_TYPE, DEFAULT_OPERATOR_LABELS } from "./types";
+import { useDataTableContext } from "./data-table/data-table-context";
+import { useCollectionContext } from "./collection/collection-provider";
 
 /**
  * Composite search filter form.
  *
  * Renders a dropdown panel with type-specific filter inputs, operator
- * selectors, and active filter badges.  Designed to receive props via
- * spread from `useDataTable()` / `useCollection()`.
+ * selectors, and active filter badges.  Reads `columns` from
+ * `DataTableContext` and filter state from `CollectionContext`.
+ * Must be rendered inside `DataTable.Provider`.
  *
  * All text is customisable through the optional `labels` prop (defaults
  * to English).
  *
  * @example
  * ```tsx
- * <SearchFilterForm {...table} {...params} />
+ * <DataTable.Provider value={table}>
+ *   <SearchFilterForm />
+ * </DataTable.Provider>
  * ```
  */
-export function SearchFilterForm<TRow extends Record<string, unknown>>({
-  columns,
-  filters,
-  addFilter,
-  removeFilter,
-  clearFilters,
+export function SearchFilterForm({
   labels,
   trigger,
-}: SearchFilterFormProps<TRow>) {
+}: {
+  /** Localizable labels (defaults to English) */
+  labels?: SearchFilterLabels;
+  /** Custom trigger element. When provided, replaces the default trigger button content. */
+  trigger?: ReactNode;
+} = {}) {
+  const { columns } = useDataTableContext();
+  const { filters, addFilter, removeFilter, clearFilters } =
+    useCollectionContext();
   const filterableColumns = columns.filter(
     (col) => col.kind === "field" && col.filter,
   );

package/src/component/types.ts

@@ -511,63 +511,10 @@ export interface RowOperations<TRow extends Record<string, unknown>> {
   insertRow: (row: TRow) => { rollback: () => void };
 }
 
-/**
- * Props for `DataTable.Root` component (generated by `useDataTable`).
- */
-export interface DataTableRootProps<TRow extends Record<string, unknown>> {
-  /** Visible column definitions */
-  columns: Column<TRow>[];
-  /** Row data */
-  rows: TRow[];
-  /** Loading state */
-  loading?: boolean;
-  /** Error */
-  error?: Error | null;
-  /** Sort handler (connected to collection) */
-  onSort?: (field: string, direction?: "Asc" | "Desc") => void;
-  /** Current sort states */
-  sortStates?: SortState[];
-  /** Row operations (provided to children via Context) */
-  rowOperations?: RowOperations<TRow>;
-  children: ReactNode;
-}
-
-/**
- * Props for `DataTable.Row` component.
- */
-export interface DataTableRowProps<TRow extends Record<string, unknown>> {
-  /** The row data */
-  row: TRow;
-}
-
-/**
- * Props for `DataTable.Cell` component.
- */
-export interface DataTableCellProps<TRow extends Record<string, unknown>> {
-  /** The row data */
-  row: TRow;
-  /** The column definition */
-  column: Column<TRow>;
-  /** The row index */
-  rowIndex: number;
-}
-
 /**
  * Return type of `useDataTable` hook.
  */
 export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
-  // Props generators (for spreading)
-  /** Props for DataTable.Root */
-  rootProps: DataTableRootProps<TRow>;
-  /** Get props for a DataTable.Row */
-  getRowProps: (row: TRow) => DataTableRowProps<TRow>;
-  /** Get props for a DataTable.Cell */
-  getCellProps: (
-    row: TRow,
-    column: Column<TRow>,
-    rowIndex: number,
-  ) => DataTableCellProps<TRow>;
-
   // Data
   /** Row data extracted from collection result */
   rows: TRow[];
@@ -575,6 +522,10 @@ export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
   loading: boolean;
   /** Error */
   error: Error | null;
+  /** Current sort states */
+  sortStates: SortState[];
+  /** Sort handler (connected to collection) */
+  onSort?: (field: string, direction?: "Asc" | "Desc") => void;
 
   // Pagination (delegated from collection)
   /** Page info from GraphQL response */
@@ -609,6 +560,10 @@ export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
   deleteRow: (rowId: string) => { rollback: () => void; deletedRow: TRow };
   /** Optimistically insert a row */
   insertRow: (row: TRow) => { rollback: () => void };
+
+  // Collection (passthrough for DataTable.Provider)
+  /** Collection state passed through from options */
+  collection: UseCollectionReturn<string, unknown> | undefined;
 }
 
 // =============================================================================

package/src/tests/helpers.tsx

@@ -0,0 +1,131 @@
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import type { Column, UseCollectionReturn } from "../component/types";
+import { DataTableContext } from "../component/data-table/data-table-context";
+import type { DataTableContextValue } from "../component/data-table/data-table-context";
+import { CollectionProvider } from "../component/collection/collection-provider";
+
+// =============================================================================
+// Mock factory: DataTableContext
+// =============================================================================
+
+export function createMockDataTableContext<T extends Record<string, unknown>>(
+  defaults: { columns: Column<T>[]; rows: T[] },
+  overrides?: Partial<DataTableContextValue<T>>,
+): DataTableContextValue<T> {
+  return {
+    columns: defaults.columns,
+    rows: defaults.rows,
+    loading: false,
+    error: null,
+    sortStates: [],
+    onSort: vi.fn(),
+    updateRow: vi.fn(() => ({ rollback: vi.fn() })),
+    deleteRow: vi.fn(() => ({
+      rollback: vi.fn(),
+      deletedRow: defaults.rows[0],
+    })),
+    insertRow: vi.fn(() => ({ rollback: vi.fn() })),
+    visibleColumns: defaults.columns,
+    isColumnVisible: vi.fn(() => true),
+    toggleColumn: vi.fn(),
+    showAllColumns: vi.fn(),
+    hideAllColumns: vi.fn(),
+    pageInfo: {
+      hasNextPage: false,
+      endCursor: null,
+      hasPreviousPage: false,
+      startCursor: null,
+    },
+    ...overrides,
+  };
+}
+
+// =============================================================================
+// Mock factory: CollectionContext
+// =============================================================================
+
+export function createMockCollectionContext(
+  overrides?: Partial<UseCollectionReturn<string, unknown>>,
+): UseCollectionReturn<string, unknown> {
+  return {
+    toQueryArgs: vi.fn(() => ({ query: null, variables: {} })),
+    filters: [],
+    addFilter: vi.fn(),
+    setFilters: vi.fn(),
+    removeFilter: vi.fn(),
+    clearFilters: vi.fn(),
+    sortStates: [],
+    setSort: vi.fn(),
+    clearSort: vi.fn(),
+    pageSize: 20,
+    cursor: null,
+    paginationDirection: "forward",
+    nextPage: vi.fn(),
+    prevPage: vi.fn(),
+    resetPage: vi.fn(),
+    hasPrevPage: false,
+    hasNextPage: false,
+    setPageInfo: vi.fn(),
+    ...overrides,
+  };
+}
+
+// =============================================================================
+// TestProviders factory
+// =============================================================================
+
+/**
+ * Creates a `TestProviders` wrapper component bound to specific fixture data.
+ *
+ * ```tsx
+ * const TestProviders = createTestProviders({
+ *   columns: testColumns,
+ *   rows: testRows,
+ *   dataTableDefaults: { pageInfo: { hasNextPage: true, ... } },
+ *   collectionDefaults: { hasPrevPage: true },
+ * });
+ *
+ * render(
+ *   <TestProviders dataTable={{ loading: true }}>
+ *     <MyComponent />
+ *   </TestProviders>,
+ * );
+ * ```
+ */
+export function createTestProviders<
+  T extends Record<string, unknown>,
+>(defaults: {
+  columns: Column<T>[];
+  rows: T[];
+  dataTableDefaults?: Partial<DataTableContextValue<T>>;
+  collectionDefaults?: Partial<UseCollectionReturn<string, unknown>>;
+}) {
+  return function TestProviders({
+    children,
+    dataTable,
+    collection,
+  }: {
+    children: ReactNode;
+    dataTable?: Partial<DataTableContextValue<T>>;
+    collection?: Partial<UseCollectionReturn<string, unknown>>;
+  }) {
+    return (
+      <CollectionProvider
+        value={createMockCollectionContext({
+          ...defaults.collectionDefaults,
+          ...collection,
+        })}
+      >
+        <DataTableContext.Provider
+          value={createMockDataTableContext(defaults, {
+            ...defaults.dataTableDefaults,
+            ...dataTable,
+          })}
+        >
+          {children}
+        </DataTableContext.Provider>
+      </CollectionProvider>
+    );
+  };
+}