@izumisy-tailor/tailor-data-viewer 0.1.20 → 0.1.22

package/src/component/data-table-toolbar.test.tsx

@@ -2,7 +2,18 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen, within, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { DataTableToolbar } from "./data-table-toolbar";
-import type { FieldMetadata } from "../generator/metadata-generator";
+import { ColumnSelector } from "./column-selector";
+import { SearchFilterForm } from "./search-filter";
+import { CsvButton } from "./csv-button";
+import { RefreshButton } from "./refresh-button";
+import { DataViewerProvider } from "./contexts";
+import { TableDataProvider } from "./contexts";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+import type { ReactNode } from "react";
 
 const mockFields: FieldMetadata[] = [
   { name: "id", type: "uuid", required: true, description: "ID" },
@@ -11,45 +22,96 @@ const mockFields: FieldMetadata[] = [
   { name: "age", type: "number", required: false, description: "年齢" },
 ];
 
-const createDefaultProps = () => ({
-  columnSelector: {
-    fields: mockFields,
-    selectedFields: ["id", "name"],
-    onToggle: vi.fn(),
-    onSelectAll: vi.fn(),
-    onDeselectAll: vi.fn(),
-  },
-  searchFilter: {
-    fields: mockFields,
-    filters: [],
-    onFiltersChange: vi.fn(),
-  },
-});
+const mockTableMetadata: TableMetadata = {
+  name: "TestTable",
+  pluralForm: "TestTables",
+  readAllowedRoles: [],
+  fields: mockFields,
+  relations: [],
+};
+
+const mockTableMetadataMap: TableMetadataMap = {
+  TestTable: mockTableMetadata,
+};
+
+interface WrapperProps {
+  children: ReactNode;
+  initialSelectedFields?: string[];
+}
+
+// Mock the GraphQL client to prevent actual API calls
+vi.mock("../graphql/graphql-client", () => ({
+  createGraphQLClient: vi.fn(() => ({
+    fetch: vi.fn(() =>
+      Promise.resolve({
+        data: {
+          testTables: { collection: [], pageInfo: { hasNextPage: false } },
+        },
+      }),
+    ),
+  })),
+}));
+
+function TestWrapper({
+  children,
+  initialSelectedFields = ["id", "name"],
+}: WrapperProps) {
+  return (
+    <DataViewerProvider
+      appUri="https://example.com"
+      tableName={mockTableMetadata.name}
+      metadata={mockTableMetadataMap}
+      initialData={{ selectedFields: initialSelectedFields }}
+    >
+      <TableDataProvider>{children}</TableDataProvider>
+    </DataViewerProvider>
+  );
+}
 
 describe("DataTableToolbar", () => {
   describe("基本的な表示", () => {
     it("カラム選択ボタンが表示される", () => {
-      render(<DataTableToolbar {...createDefaultProps()} />);
+      render(
+        <TestWrapper>
+          <DataTableToolbar>
+            <ColumnSelector />
+          </DataTableToolbar>
+        </TestWrapper>,
+      );
       expect(
         screen.getByRole("button", { name: /カラム選択/ }),
       ).toBeInTheDocument();
     });
 
     it("検索ボタンが表示される", () => {
-      render(<DataTableToolbar {...createDefaultProps()} />);
+      render(
+        <TestWrapper>
+          <DataTableToolbar>
+            <SearchFilterForm />
+          </DataTableToolbar>
+        </TestWrapper>,
+      );
       expect(screen.getByRole("button", { name: /検索/ })).toBeInTheDocument();
     });
 
-    it("CSV ボタンが表示される (onDownloadCsv が渡された場合)", () => {
+    it("CSV ボタンが表示される", () => {
       render(
-        <DataTableToolbar {...createDefaultProps()} onDownloadCsv={vi.fn()} />,
+        <TestWrapper>
+          <DataTableToolbar>
+            <CsvButton />
+          </DataTableToolbar>
+        </TestWrapper>,
       );
       expect(screen.getByRole("button", { name: /CSV/ })).toBeInTheDocument();
     });
 
-    it("更新ボタンが表示される (onRefresh が渡された場合)", () => {
+    it("更新ボタンが表示される", () => {
       render(
-        <DataTableToolbar {...createDefaultProps()} onRefresh={vi.fn()} />,
+        <TestWrapper>
+          <DataTableToolbar>
+            <RefreshButton />
+          </DataTableToolbar>
+        </TestWrapper>,
       );
       expect(screen.getByRole("button", { name: /更新/ })).toBeInTheDocument();
     });
@@ -58,7 +120,14 @@ describe("DataTableToolbar", () => {
   describe("パネルの排他制御", () => {
     it("カラム選択パネルを開くと検索パネルは開かない", async () => {
       const user = userEvent.setup();
-      render(<DataTableToolbar {...createDefaultProps()} />);
+      render(
+        <TestWrapper>
+          <DataTableToolbar>
+            <ColumnSelector />
+            <SearchFilterForm />
+          </DataTableToolbar>
+        </TestWrapper>,
+      );
 
       // カラム選択パネルを開く
       await user.click(screen.getByRole("button", { name: /カラム選択/ }));
@@ -76,7 +145,14 @@ describe("DataTableToolbar", () => {
 
     it("検索パネルを開くとカラム選択パネルは開かない", async () => {
       const user = userEvent.setup();
-      render(<DataTableToolbar {...createDefaultProps()} />);
+      render(
+        <TestWrapper>
+          <DataTableToolbar>
+            <ColumnSelector />
+            <SearchFilterForm />
+          </DataTableToolbar>
+        </TestWrapper>,
+      );
 
       // 検索パネルを開く
       await user.click(screen.getByRole("button", { name: /検索/ }));
@@ -94,7 +170,14 @@ describe("DataTableToolbar", () => {
 
     it("カラム選択パネルが開いている状態で検索パネルを開くとカラム選択パネルが閉じる", async () => {
       const user = userEvent.setup({ pointerEventsCheck: 0 });
-      render(<DataTableToolbar {...createDefaultProps()} />);
+      render(
+        <TestWrapper>
+          <DataTableToolbar>
+            <ColumnSelector />
+            <SearchFilterForm />
+          </DataTableToolbar>
+        </TestWrapper>,
+      );
 
       // カラム選択パネルを開く
       await user.click(screen.getByRole("button", { name: /カラム選択/ }));
@@ -128,7 +211,14 @@ describe("DataTableToolbar", () => {
 
     it("検索パネルが開いている状態でカラム選択パネルを開くと検索パネルが閉じる", async () => {
       const user = userEvent.setup({ pointerEventsCheck: 0 });
-      render(<DataTableToolbar {...createDefaultProps()} />);
+      render(
+        <TestWrapper>
+          <DataTableToolbar>
+            <ColumnSelector />
+            <SearchFilterForm />
+          </DataTableToolbar>
+        </TestWrapper>,
+      );
 
       // 検索パネルを開く
       await user.click(screen.getByRole("button", { name: /検索/ }));
@@ -161,56 +251,21 @@ describe("DataTableToolbar", () => {
     });
   });
 
-  describe("アクションボタン", () => {
-    it("CSV ボタンクリックで onDownloadCsv が呼ばれる", async () => {
-      const user = userEvent.setup();
-      const onDownloadCsv = vi.fn();
+  describe("Compositional API", () => {
+    it("children で任意のコンポーネントを配置できる", () => {
       render(
-        <DataTableToolbar
-          {...createDefaultProps()}
-          onDownloadCsv={onDownloadCsv}
-        />,
+        <TestWrapper>
+          <DataTableToolbar>
+            <button data-testid="custom-button">Custom Button</button>
+            <ColumnSelector />
+          </DataTableToolbar>
+        </TestWrapper>,
       );
 
-      await user.click(screen.getByRole("button", { name: /CSV/ }));
-      expect(onDownloadCsv).toHaveBeenCalled();
-    });
-
-    it("更新ボタンクリックで onRefresh が呼ばれる", async () => {
-      const user = userEvent.setup();
-      const onRefresh = vi.fn();
-      render(
-        <DataTableToolbar {...createDefaultProps()} onRefresh={onRefresh} />,
-      );
-
-      await user.click(screen.getByRole("button", { name: /更新/ }));
-      expect(onRefresh).toHaveBeenCalled();
-    });
-
-    it("loading 中は CSV と更新ボタンが無効になる", () => {
-      render(
-        <DataTableToolbar
-          {...createDefaultProps()}
-          onDownloadCsv={vi.fn()}
-          onRefresh={vi.fn()}
-          loading={true}
-        />,
-      );
-
-      expect(screen.getByRole("button", { name: /CSV/ })).toBeDisabled();
-      expect(screen.getByRole("button", { name: /更新/ })).toBeDisabled();
-    });
-
-    it("csvDisabled が true の場合、CSV ボタンが無効になる", () => {
-      render(
-        <DataTableToolbar
-          {...createDefaultProps()}
-          onDownloadCsv={vi.fn()}
-          csvDisabled={true}
-        />,
-      );
-
-      expect(screen.getByRole("button", { name: /CSV/ })).toBeDisabled();
+      expect(screen.getByTestId("custom-button")).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: /カラム選択/ }),
+      ).toBeInTheDocument();
     });
   });
 });

package/src/component/data-table-toolbar.tsx

@@ -1,165 +1,28 @@
-import { useState, useCallback } from "react";
-import { RefreshCw, Download } from "lucide-react";
-import { Button } from "./ui/button";
-import type {
-  FieldMetadata,
-  RelationMetadata,
-  TableMetadataMap,
-  ExpandedRelationFields,
-} from "../generator/metadata-generator";
-import { ColumnSelector } from "./column-selector";
-import { SearchFilterForm } from "./search-filter";
-import { ViewSave } from "./view-save-load";
-import type { SearchFilters } from "./types";
+import { type ReactNode } from "react";
+import { ToolbarProvider } from "./contexts";
 
 /**
  * Active panel type - only one panel can be open at a time
+ * @deprecated Use ToolbarContext instead
  */
 export type ActivePanel = "column" | "search" | null;
 
-interface ColumnSelectorConfig {
-  fields: FieldMetadata[];
-  selectedFields: string[];
-  onToggle: (fieldName: string) => void;
-  onSelectAll: () => void;
-  onDeselectAll: () => void;
-  relations?: RelationMetadata[];
-  selectedRelations?: string[];
-  onToggleRelation?: (fieldName: string) => void;
-  tableMetadataMap?: TableMetadataMap;
-  expandedRelationFields?: ExpandedRelationFields;
-  onToggleExpandedRelationField?: (
-    relationFieldName: string,
-    fieldName: string,
-  ) => void;
-  isExpandedRelationFieldSelected?: (
-    relationFieldName: string,
-    fieldName: string,
-  ) => boolean;
-}
-
-interface SearchFilterConfig {
-  fields: FieldMetadata[];
-  filters: SearchFilters;
-  onFiltersChange: (filters: SearchFilters) => void;
-}
-
-interface ViewSaveConfig {
-  tableName: string;
-  filters: SearchFilters;
-  selectedFields: string[];
-  selectedRelations: string[];
-  expandedRelationFields: ExpandedRelationFields;
-}
-
-interface DataTableToolbarProps {
-  /** Column selector configuration */
-  columnSelector: ColumnSelectorConfig;
-  /** Search filter configuration */
-  searchFilter: SearchFilterConfig;
-  /** View save configuration (optional - hidden if not provided) */
-  viewSave?: ViewSaveConfig;
-  /** CSV download handler */
-  onDownloadCsv?: () => void;
-  /** Refresh handler */
-  onRefresh?: () => void;
-  /** Whether the table is loading */
-  loading?: boolean;
-  /** Whether CSV download is disabled */
-  csvDisabled?: boolean;
+export interface DataTableToolbarProps {
+  /** Children components (uses ToolbarContext) */
+  children: ReactNode;
 }
 
 /**
  * Data table toolbar component
- * Combines column selector, search filter, view save, and action buttons
- * Ensures only one panel can be open at a time
+ *
+ * Provides ToolbarContext for exclusive panel management.
+ * Place ColumnSelector, SearchFilterForm, etc. as children.
+ * Must be used within DataViewer.Root context.
  */
-export function DataTableToolbar({
-  columnSelector,
-  searchFilter,
-  viewSave,
-  onDownloadCsv,
-  onRefresh,
-  loading = false,
-  csvDisabled = false,
-}: DataTableToolbarProps) {
-  // Active panel state - only one panel can be open at a time
-  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
-
-  const handleColumnPanelChange = useCallback((open: boolean) => {
-    setActivePanel(open ? "column" : null);
-  }, []);
-
-  const handleSearchPanelChange = useCallback((open: boolean) => {
-    setActivePanel(open ? "search" : null);
-  }, []);
-
+export function DataTableToolbar({ children }: DataTableToolbarProps) {
   return (
-    <div className="flex items-center gap-4">
-      <ColumnSelector
-        fields={columnSelector.fields}
-        selectedFields={columnSelector.selectedFields}
-        onToggle={columnSelector.onToggle}
-        onSelectAll={columnSelector.onSelectAll}
-        onDeselectAll={columnSelector.onDeselectAll}
-        relations={columnSelector.relations}
-        selectedRelations={columnSelector.selectedRelations}
-        onToggleRelation={columnSelector.onToggleRelation}
-        tableMetadataMap={columnSelector.tableMetadataMap}
-        expandedRelationFields={columnSelector.expandedRelationFields}
-        onToggleExpandedRelationField={
-          columnSelector.onToggleExpandedRelationField
-        }
-        isExpandedRelationFieldSelected={
-          columnSelector.isExpandedRelationFieldSelected
-        }
-        open={activePanel === "column"}
-        onOpenChange={handleColumnPanelChange}
-      />
-
-      <SearchFilterForm
-        fields={searchFilter.fields}
-        filters={searchFilter.filters}
-        onFiltersChange={searchFilter.onFiltersChange}
-        open={activePanel === "search"}
-        onOpenChange={handleSearchPanelChange}
-      />
-
-      {viewSave && (
-        <ViewSave
-          tableName={viewSave.tableName}
-          filters={viewSave.filters}
-          selectedFields={viewSave.selectedFields}
-          selectedRelations={viewSave.selectedRelations}
-          expandedRelationFields={viewSave.expandedRelationFields}
-        />
-      )}
-
-      <div className="flex-1" />
-
-      {onDownloadCsv && (
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onDownloadCsv}
-          disabled={loading || csvDisabled}
-        >
-          <Download className="size-4" />
-          CSV
-        </Button>
-      )}
-
-      {onRefresh && (
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onRefresh}
-          disabled={loading}
-        >
-          <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
-          更新
-        </Button>
-      )}
-    </div>
+    <ToolbarProvider>
+      <div className="flex items-center gap-4">{children}</div>
+    </ToolbarProvider>
   );
 }