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

package/src/component/data-view-tab-content.tsx

@@ -3,15 +3,18 @@ import { Alert, AlertDescription } from "./ui/alert";
 import type {
   TableMetadata,
   TableMetadataMap,
-  FieldMetadata,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../graphql/query-builder";
 import { TableSelector } from "./table-selector";
 import { DataTable } from "./data-table";
 import { DataTableToolbar } from "./data-table-toolbar";
 import { Pagination } from "./pagination";
-import { useColumnState } from "./hooks/use-column-state";
-import { useTableData } from "./hooks/use-table-data";
+import { ColumnSelector } from "./column-selector";
+import { SearchFilterForm } from "./search-filter";
+import { ViewSave } from "./view-save-load";
+import { CsvButton } from "./csv-button";
+import { RefreshButton } from "./refresh-button";
+import { DataViewerProvider } from "./contexts";
+import { TableDataProvider, useTableDataContext } from "./contexts";
 import type { InitialQuery } from "./data-viewer";
 import type { SearchFilters } from "./types";
 import type { SavedView } from "./saved-view-context";
@@ -22,8 +25,8 @@ interface DataViewTabContentProps {
   initialTable?: TableMetadata;
   onTableConfirm: (table: TableMetadata) => void;
   isTableLocked: boolean;
-  /** All table metadata for relation lookup */
-  tableMetadataMap: TableMetadataMap;
+  /** All table metadata (generated from TailorDB schema) */
+  metadata: TableMetadataMap;
   /** Initial query condition for filtering */
   initialQuery?: InitialQuery;
   /** Initial saved view to load */
@@ -51,7 +54,7 @@ export function DataViewTabContent({
   initialTable,
   onTableConfirm,
   isTableLocked,
-  tableMetadataMap,
+  metadata,
   initialQuery,
   initialView,
   onOpenAsSheet,
@@ -86,94 +89,11 @@ export function DataViewTabContent({
   }, [initialQuery, initialTable, initialView]);
 
   // Search filters (includes initialQuery as a regular filter that can be edited/removed)
-  const [searchFilters, setSearchFilters] =
-    useState<SearchFilters>(getInitialFilters);
-
-  // Memoize fields to avoid creating new array reference on every render when selectedTable is null
-  const fields = useMemo(
-    () => selectedTable?.fields ?? [],
-    [selectedTable?.fields],
-  );
-
-  // Column state (includes relation selection)
-  // If initialView is provided, use its column selections as defaults
-  const columnState = useColumnState(
-    fields,
-    selectedTable?.relations,
-    initialView?.selectedFields,
-    initialView?.selectedRelations,
-    initialView?.expandedRelationFields,
-  );
-
-  // Table data fetching (pass selectedRelations for FK field inclusion and search filters)
-  const tableData = useTableData(
-    appUri,
-    selectedTable,
-    columnState.selectedFields,
-    columnState.selectedRelations,
-    searchFilters,
-    tableMetadataMap,
-    columnState.expandedRelationFields,
+  const initialFilters = useMemo(
+    () => getInitialFilters(),
+    [getInitialFilters],
   );
 
-  // Handle filter changes - reset pagination when filters change
-  const handleFiltersChange = useCallback(
-    (newFilters: SearchFilters) => {
-      setSearchFilters(newFilters);
-      tableData.resetPagination();
-    },
-    [tableData],
-  );
-
-  // CSV Download handler
-  const handleDownloadCsv = useCallback(() => {
-    if (!selectedTable || tableData.data.length === 0) return;
-
-    const selectedFieldsMetadata = selectedTable.fields.filter(
-      (f: FieldMetadata) => columnState.selectedFields.includes(f.name),
-    );
-
-    // Create CSV header
-    const headers = selectedFieldsMetadata.map((f: FieldMetadata) => f.name);
-
-    // Create CSV rows
-    const rows = tableData.data.map((row: Record<string, unknown>) =>
-      selectedFieldsMetadata.map((field: FieldMetadata) => {
-        const value = row[field.name];
-        const formattedValue = formatFieldValue(value, field);
-        // Escape double quotes and wrap in quotes if contains comma, newline, or quotes
-        const stringValue = String(formattedValue ?? "");
-        if (
-          stringValue.includes(",") ||
-          stringValue.includes("\n") ||
-          stringValue.includes('"')
-        ) {
-          return `"${stringValue.replace(/"/g, '""')}"`;
-        }
-        return stringValue;
-      }),
-    );
-
-    // Combine headers and rows
-    const csvContent = [
-      headers.join(","),
-      ...rows.map((r: string[]) => r.join(",")),
-    ].join("\n");
-
-    // Create and download file
-    const blob = new Blob(["\uFEFF" + csvContent], {
-      type: "text/csv;charset=utf-8;",
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${selectedTable.name}_${new Date().toISOString().slice(0, 10)}.csv`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }, [selectedTable, tableData.data, columnState.selectedFields]);
-
   const handleTableSelect = useCallback(
     (table: TableMetadata) => {
       setSelectedTable(table);
@@ -204,6 +124,52 @@ export function DataViewTabContent({
     );
   }
 
+  return (
+    <DataViewerProvider
+      appUri={appUri}
+      tableName={selectedTable.name}
+      metadata={metadata}
+      initialData={{
+        filters: initialFilters,
+        selectedFields: initialView?.selectedFields,
+        selectedRelations: initialView?.selectedRelations,
+        expandedRelationFields: initialView?.expandedRelationFields,
+      }}
+    >
+      <TableDataProvider>
+        <DataViewTabContentInner
+          selectedTable={selectedTable}
+          onOpenAsSheet={onOpenAsSheet}
+          onOpenSingleRecordAsSheet={onOpenSingleRecordAsSheet}
+        />
+      </TableDataProvider>
+    </DataViewerProvider>
+  );
+}
+
+interface DataViewTabContentInnerProps {
+  selectedTable: TableMetadata;
+  onOpenAsSheet?: (
+    targetTableName: string,
+    filterField: string,
+    filterValue: string,
+  ) => void;
+  onOpenSingleRecordAsSheet?: (
+    targetTableName: string,
+    recordId: string,
+  ) => void;
+}
+
+/**
+ * Inner component that uses context
+ */
+function DataViewTabContentInner({
+  selectedTable,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+}: DataViewTabContentInnerProps) {
+  const tableData = useTableDataContext();
+
   return (
     <div className="space-y-4">
       {/* Table name and description */}
@@ -217,40 +183,14 @@ export function DataViewTabContent({
       </div>
 
       {/* Operations row: column selector, search filter, etc. */}
-      <DataTableToolbar
-        columnSelector={{
-          fields: selectedTable.fields,
-          selectedFields: columnState.selectedFields,
-          onToggle: columnState.toggleField,
-          onSelectAll: columnState.selectAll,
-          onDeselectAll: columnState.deselectAll,
-          relations: selectedTable.relations,
-          selectedRelations: columnState.selectedRelations,
-          onToggleRelation: columnState.toggleRelation,
-          tableMetadataMap: tableMetadataMap,
-          expandedRelationFields: columnState.expandedRelationFields,
-          onToggleExpandedRelationField:
-            columnState.toggleExpandedRelationField,
-          isExpandedRelationFieldSelected:
-            columnState.isExpandedRelationFieldSelected,
-        }}
-        searchFilter={{
-          fields: selectedTable.fields,
-          filters: searchFilters,
-          onFiltersChange: handleFiltersChange,
-        }}
-        viewSave={{
-          tableName: selectedTable.name,
-          filters: searchFilters,
-          selectedFields: columnState.selectedFields,
-          selectedRelations: columnState.selectedRelations,
-          expandedRelationFields: columnState.expandedRelationFields,
-        }}
-        onDownloadCsv={handleDownloadCsv}
-        onRefresh={() => tableData.refetch()}
-        loading={tableData.loading}
-        csvDisabled={tableData.data.length === 0}
-      />
+      <DataTableToolbar>
+        <ColumnSelector />
+        <SearchFilterForm />
+        <ViewSave />
+        <div className="flex-1" />
+        <CsvButton />
+        <RefreshButton />
+      </DataTableToolbar>
 
       {/* Error Display */}
       {tableData.error && (
@@ -263,19 +203,8 @@ export function DataViewTabContent({
 
       {/* Data Table */}
       <DataTable
-        data={tableData.data}
-        fields={selectedTable.fields}
-        selectedFields={columnState.selectedFields}
-        sortState={tableData.sortState}
-        onSort={tableData.setSort}
-        loading={tableData.loading}
-        tableMetadata={selectedTable}
-        tableMetadataMap={tableMetadataMap}
-        appUri={appUri}
-        selectedRelations={columnState.selectedRelations}
         onOpenAsSheet={onOpenAsSheet}
         onOpenSingleRecordAsSheet={onOpenSingleRecordAsSheet}
-        expandedRelationFields={columnState.expandedRelationFields}
       />
 
       {/* Pagination */}

package/src/component/data-viewer.tsx

@@ -11,7 +11,7 @@ import { SingleRecordTabContent } from "./single-record-tab-content";
 import { useSavedViews, type SavedView } from "./saved-view-context";
 
 interface DataViewerProps {
-  tableMetadata: TableMetadataMap;
+  metadata: TableMetadataMap;
   appUri: string;
   /** Initial view ID to load on mount */
   initialViewId?: string;
@@ -52,11 +52,11 @@ function generateTabId(): string {
  * Similar to Excel sheets - each tab has its own table view
  */
 export function DataViewer({
-  tableMetadata,
+  metadata,
   appUri,
   initialViewId,
 }: DataViewerProps) {
-  const allTables = Object.values(tableMetadata);
+  const allTables = Object.values(metadata);
   const { getViewById, isLoading } = useSavedViews();
 
   // Track if we've already initialized from the saved view
@@ -84,7 +84,7 @@ export function DataViewer({
 
     const view = getViewById(initialViewId);
     if (view) {
-      const table = tableMetadata[view.tableName];
+      const table = metadata[view.tableName];
       if (table) {
         initializedFromViewRef.current = true;
         const newTab: Tab = {
@@ -98,7 +98,7 @@ export function DataViewer({
         setActiveTabId(newTab.id);
       }
     }
-  }, [initialViewId, isLoading, getViewById, tableMetadata]);
+  }, [initialViewId, isLoading, getViewById, metadata]);
 
   const handleAddTab = useCallback(() => {
     const newTab: Tab = {
@@ -154,7 +154,7 @@ export function DataViewer({
    */
   const handleOpenAsSheet = useCallback(
     (targetTableName: string, filterField: string, filterValue: string) => {
-      const targetTable = tableMetadata[targetTableName];
+      const targetTable = metadata[targetTableName];
       if (!targetTable) return;
 
       const newTab: Tab = {
@@ -170,7 +170,7 @@ export function DataViewer({
       setTabs((prev) => [...prev, newTab]);
       setActiveTabId(newTab.id);
     },
-    [tableMetadata],
+    [metadata],
   );
 
   /**
@@ -178,7 +178,7 @@ export function DataViewer({
    */
   const handleOpenSingleRecordAsSheet = useCallback(
     (targetTableName: string, recordId: string) => {
-      const targetTable = tableMetadata[targetTableName];
+      const targetTable = metadata[targetTableName];
       if (!targetTable) return;
 
       const newTab: Tab = {
@@ -193,7 +193,7 @@ export function DataViewer({
       setTabs((prev) => [...prev, newTab]);
       setActiveTabId(newTab.id);
     },
-    [tableMetadata],
+    [metadata],
   );
 
   return (
@@ -250,7 +250,7 @@ export function DataViewer({
             {tab.singleRecordMode && tab.table ? (
               <SingleRecordTabContent
                 tableMetadata={tab.table}
-                tableMetadataMap={tableMetadata}
+                metadata={metadata}
                 appUri={appUri}
                 recordId={tab.singleRecordMode.recordId}
                 onOpenAsSheet={handleOpenAsSheet}
@@ -263,7 +263,7 @@ export function DataViewer({
                 initialTable={tab.table ?? undefined}
                 onTableConfirm={(table) => handleTableConfirm(tab.id, table)}
                 isTableLocked={tab.isLocked}
-                tableMetadataMap={tableMetadata}
+                metadata={metadata}
                 initialQuery={tab.initialQuery}
                 initialView={tab.initialView}
                 onOpenAsSheet={handleOpenAsSheet}

package/src/component/hooks/use-column-state.ts

@@ -51,8 +51,8 @@ export interface ColumnState {
  * Manage column visibility state (fields and relations)
  */
 export function useColumnState(
-  fields: FieldMetadata[],
-  relations?: RelationMetadata[],
+  fields: readonly FieldMetadata[],
+  relations?: readonly RelationMetadata[],
   defaultFields?: string[],
   defaultRelations?: string[],
   defaultExpandedRelationFields?: ExpandedRelationFields,

package/src/component/index.ts

@@ -1,6 +1,38 @@
+// Main DataViewer component
 export { DataViewer } from "./data-viewer";
 export type { InitialQuery } from "./data-viewer";
+
+// Toolbar component (children-based)
 export { DataTableToolbar } from "./data-table-toolbar";
-export type { ActivePanel } from "./data-table-toolbar";
+
+// Saved view context
 export { useSavedViews, SavedViewProvider } from "./saved-view-context";
 export type { SavedView, SaveViewInput } from "./saved-view-context";
+
+// Context providers and hooks
+export { DataViewerProvider, useDataViewer } from "./contexts";
+export type {
+  DataViewerContextValue,
+  DataViewerProviderProps,
+  DataViewerInitialData,
+} from "./contexts";
+export { TableDataProvider, useTableDataContext } from "./contexts";
+export type { TableDataContextValue, TableDataProviderProps } from "./contexts";
+export { ToolbarProvider, useToolbar } from "./contexts";
+export type {
+  ToolbarContextValue,
+  ToolbarProviderProps,
+  ToolbarActivePanel,
+} from "./contexts";
+
+// Individual components (context-only, must be used within DataViewerProvider)
+export { ColumnSelector } from "./column-selector";
+export { SearchFilterForm } from "./search-filter";
+export { ViewSave } from "./view-save-load";
+export { DataTable } from "./data-table";
+export type { DataTableProps } from "./data-table";
+export { CsvButton } from "./csv-button";
+export { RefreshButton } from "./refresh-button";
+
+// Types
+export type { SearchFilter, SearchFilters } from "./types";

package/src/component/refresh-button.tsx

@@ -0,0 +1,20 @@
+import { RefreshCw } from "lucide-react";
+import { Button } from "./ui/button";
+import { useDataViewer } from "./contexts";
+import { useTableDataContext } from "./contexts";
+
+/**
+ * Refresh button
+ * Must be used within DataViewer.Root and TableDataProvider context.
+ */
+export function RefreshButton() {
+  const { refetch } = useDataViewer();
+  const { loading } = useTableDataContext();
+
+  return (
+    <Button variant="outline" size="sm" onClick={refetch} disabled={loading}>
+      <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+      更新
+    </Button>
+  );
+}

package/src/component/search-filter.tsx

@@ -18,17 +18,9 @@ import {
 import { Badge } from "./ui/badge";
 import { Label } from "./ui/label";
 import type { FieldMetadata } from "../generator/metadata-generator";
-import type { SearchFilter, SearchFilters } from "./types";
-
-interface SearchFilterProps {
-  fields: FieldMetadata[];
-  filters: SearchFilters;
-  onFiltersChange: (filters: SearchFilters) => void;
-  /** Controlled open state */
-  open?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (open: boolean) => void;
-}
+import type { SearchFilter } from "./types";
+import { useDataViewer } from "./contexts";
+import { useToolbar } from "./contexts";
 
 // Filterable field types
 const FILTERABLE_TYPES = [
@@ -49,14 +41,17 @@ function isFilterableField(field: FieldMetadata): boolean {
 /**
  * Search filter form component
  * Allows adding multiple AND filters for string/number/boolean/enum fields
+ * Must be used within DataViewer.Root and DataViewer.Toolbar context
  */
-export function SearchFilterForm({
-  fields,
-  filters,
-  onFiltersChange,
-  open,
-  onOpenChange,
-}: SearchFilterProps) {
+export function SearchFilterForm() {
+  const { tableMetadata, filters, setFilters } = useDataViewer();
+  const { activePanel, setActivePanel } = useToolbar();
+
+  const fields = tableMetadata?.fields ?? [];
+  const open = activePanel === "search";
+  const onOpenChange = (isOpen: boolean) =>
+    setActivePanel(isOpen ? "search" : null);
+
   const [selectedField, setSelectedField] = useState<string>("");
   const [inputValue, setInputValue] = useState<string>("");
   const [booleanValue, setBooleanValue] = useState<boolean>(false);
@@ -85,7 +80,7 @@ export function SearchFilterForm({
       enumValues: selectedFieldMetadata.enumValues,
     };
 
-    onFiltersChange([...filters, newFilter]);
+    setFilters([...filters, newFilter]);
     setSelectedField("");
     setInputValue("");
     setBooleanValue(false);
@@ -95,19 +90,19 @@ export function SearchFilterForm({
     inputValue,
     booleanValue,
     filters,
-    onFiltersChange,
+    setFilters,
   ]);
 
   const handleRemoveFilter = useCallback(
     (fieldName: string) => {
-      onFiltersChange(filters.filter((f) => f.field !== fieldName));
+      setFilters(filters.filter((f) => f.field !== fieldName));
     },
-    [filters, onFiltersChange],
+    [filters, setFilters],
   );
 
   const handleClearAll = useCallback(() => {
-    onFiltersChange([]);
-  }, [onFiltersChange]);
+    setFilters([]);
+  }, [setFilters]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {

package/src/component/single-record-tab-content.test.tsx

@@ -127,7 +127,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -141,7 +141,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -160,7 +160,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -193,7 +193,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -213,7 +213,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="nonexistent-id"
           fetcher={mockFetcher}
@@ -233,7 +233,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -257,7 +257,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -277,7 +277,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -298,7 +298,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -326,7 +326,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}