@izumisy-tailor/tailor-data-viewer 0.1.21 → 0.1.23

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

@@ -0,0 +1,399 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { buildQueryInput } from "./use-table-data";
+import type { SearchFilters } from "../types";
+
+describe("buildQueryInput", () => {
+  describe("基本的な動作", () => {
+    it("空のフィルター配列では undefined を返す", () => {
+      const result = buildQueryInput([]);
+      expect(result).toBeUndefined();
+    });
+
+    it("単一のフィルターでクエリオブジェクトを生成する", () => {
+      const filters: SearchFilters = [
+        { field: "name", fieldType: "string", operator: "eq", value: "test" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        name: { eq: "test" },
+      });
+    });
+
+    it("複数のフィルターでクエリオブジェクトを生成する", () => {
+      const filters: SearchFilters = [
+        { field: "name", fieldType: "string", operator: "eq", value: "test" },
+        { field: "age", fieldType: "number", operator: "gt", value: "25" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        name: { eq: "test" },
+        age: { gt: 25 },
+      });
+    });
+  });
+
+  describe("文字列フィールド", () => {
+    it("eq 演算子で等価検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        { field: "name", fieldType: "string", operator: "eq", value: "test" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        name: { eq: "test" },
+      });
+    });
+
+    it("contains 演算子で部分一致検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "name",
+          fieldType: "string",
+          operator: "contains",
+          value: "test",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        name: { contains: "test" },
+      });
+    });
+
+    it("hasPrefix 演算子で前方一致検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "name",
+          fieldType: "string",
+          operator: "hasPrefix",
+          value: "pre",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        name: { hasPrefix: "pre" },
+      });
+    });
+
+    it("hasSuffix 演算子で後方一致検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "email",
+          fieldType: "string",
+          operator: "hasSuffix",
+          value: ".com",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        email: { hasSuffix: ".com" },
+      });
+    });
+  });
+
+  describe("数値フィールド", () => {
+    it("eq 演算子で等価検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        { field: "age", fieldType: "number", operator: "eq", value: "25" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        age: { eq: 25 },
+      });
+    });
+
+    it("gt 演算子で大なり検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        { field: "age", fieldType: "number", operator: "gt", value: "18" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        age: { gt: 18 },
+      });
+    });
+
+    it("lt 演算子で小なり検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        { field: "age", fieldType: "number", operator: "lt", value: "65" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        age: { lt: 65 },
+      });
+    });
+
+    it("小数点を含む数値を正しく変換する", () => {
+      const filters: SearchFilters = [
+        { field: "price", fieldType: "number", operator: "gt", value: "99.99" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        price: { gt: 99.99 },
+      });
+    });
+
+    it("負の数値を正しく変換する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "temperature",
+          fieldType: "number",
+          operator: "lt",
+          value: "-10",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        temperature: { lt: -10 },
+      });
+    });
+
+    it("無効な数値はフィルターに含まれない", () => {
+      const filters: SearchFilters = [
+        { field: "age", fieldType: "number", operator: "eq", value: "abc" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe("booleanフィールド", () => {
+    it("true 値で検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "isActive",
+          fieldType: "boolean",
+          operator: "eq",
+          value: true,
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        isActive: { eq: true },
+      });
+    });
+
+    it("false 値で検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "isActive",
+          fieldType: "boolean",
+          operator: "eq",
+          value: false,
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        isActive: { eq: false },
+      });
+    });
+  });
+
+  describe("enumフィールド", () => {
+    it("enum 値で検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "status",
+          fieldType: "enum",
+          operator: "eq",
+          value: "ACTIVE",
+          enumValues: ["ACTIVE", "INACTIVE", "PENDING"],
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        status: { eq: "ACTIVE" },
+      });
+    });
+  });
+
+  describe("UUIDフィールド", () => {
+    it("UUID 値で検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "id",
+          fieldType: "uuid",
+          operator: "eq",
+          value: "123e4567-e89b-12d3-a456-426614174000",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        id: { eq: "123e4567-e89b-12d3-a456-426614174000" },
+      });
+    });
+  });
+
+  describe("日付フィールド", () => {
+    it("date フィールドで eq 演算子の検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "birthDate",
+          fieldType: "date",
+          operator: "eq",
+          value: "1990-01-15",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        birthDate: { eq: "1990-01-15" },
+      });
+    });
+
+    it("date フィールドで gt 演算子の検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "birthDate",
+          fieldType: "date",
+          operator: "gt",
+          value: "2000-01-01",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        birthDate: { gt: "2000-01-01" },
+      });
+    });
+
+    it("date フィールドで lt 演算子の検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "birthDate",
+          fieldType: "date",
+          operator: "lt",
+          value: "1980-12-31",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        birthDate: { lt: "1980-12-31" },
+      });
+    });
+
+    it("空の日付値はフィルターに含まれない", () => {
+      const filters: SearchFilters = [
+        { field: "birthDate", fieldType: "date", operator: "eq", value: "" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe("日時フィールド", () => {
+    // Mock Date to ensure consistent ISO string output
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("datetime フィールドで eq 演算子の検索クエリを生成する", () => {
+      // datetime-local format: "YYYY-MM-DDTHH:mm"
+      const filters: SearchFilters = [
+        {
+          field: "createdAt",
+          fieldType: "datetime",
+          operator: "eq",
+          value: "2024-01-15T10:30",
+        },
+      ];
+      const result = buildQueryInput(filters);
+
+      // The result should contain an ISO string
+      expect(result).toBeDefined();
+      expect(result!.createdAt).toBeDefined();
+      expect((result!.createdAt as { eq: string }).eq).toMatch(
+        /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/,
+      );
+    });
+
+    it("datetime フィールドで gt 演算子の検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "createdAt",
+          fieldType: "datetime",
+          operator: "gt",
+          value: "2024-01-01T00:00",
+        },
+      ];
+      const result = buildQueryInput(filters);
+
+      expect(result).toBeDefined();
+      expect(result!.createdAt).toBeDefined();
+      expect((result!.createdAt as { gt: string }).gt).toMatch(
+        /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/,
+      );
+    });
+
+    it("datetime フィールドで lt 演算子の検索クエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "updatedAt",
+          fieldType: "datetime",
+          operator: "lt",
+          value: "2024-12-31T23:59",
+        },
+      ];
+      const result = buildQueryInput(filters);
+
+      expect(result).toBeDefined();
+      expect(result!.updatedAt).toBeDefined();
+      expect((result!.updatedAt as { lt: string }).lt).toMatch(
+        /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/,
+      );
+    });
+
+    it("空の日時値はフィルターに含まれない", () => {
+      const filters: SearchFilters = [
+        {
+          field: "createdAt",
+          fieldType: "datetime",
+          operator: "eq",
+          value: "",
+        },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe("複合フィルター", () => {
+    it("異なる型のフィルターを組み合わせてクエリを生成する", () => {
+      const filters: SearchFilters = [
+        {
+          field: "name",
+          fieldType: "string",
+          operator: "contains",
+          value: "test",
+        },
+        { field: "age", fieldType: "number", operator: "gt", value: "18" },
+        {
+          field: "isActive",
+          fieldType: "boolean",
+          operator: "eq",
+          value: true,
+        },
+        { field: "status", fieldType: "enum", operator: "eq", value: "ACTIVE" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        name: { contains: "test" },
+        age: { gt: 18 },
+        isActive: { eq: true },
+        status: { eq: "ACTIVE" },
+      });
+    });
+
+    it("同じフィールドタイプで異なる演算子のフィルターを処理する", () => {
+      // Note: In actual use, same field shouldn't appear twice, but testing the function behavior
+      const filters: SearchFilters = [
+        { field: "minAge", fieldType: "number", operator: "gt", value: "18" },
+        { field: "maxAge", fieldType: "number", operator: "lt", value: "65" },
+      ];
+      const result = buildQueryInput(filters);
+      expect(result).toEqual({
+        minAge: { gt: 18 },
+        maxAge: { lt: 65 },
+      });
+    });
+  });
+});

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

@@ -56,8 +56,9 @@ const DEFAULT_PAGE_SIZE = 20;
 
 /**
  * Build query input from search filters (AND logic)
+ * @internal Exported for testing purposes
  */
-function buildQueryInput(
+export function buildQueryInput(
   filters: SearchFilters,
 ): Record<string, unknown> | undefined {
   if (filters.length === 0) return undefined;
@@ -65,19 +66,35 @@ function buildQueryInput(
   const queryInput: Record<string, unknown> = {};
 
   for (const filter of filters) {
-    // For boolean, use the boolean value directly
-    // For string/number/enum/uuid, use { eq: value }
+    const operator = filter.operator;
+
     if (filter.fieldType === "boolean") {
+      // Boolean always uses eq
       queryInput[filter.field] = { eq: filter.value };
     } else if (filter.fieldType === "number") {
-      // Parse number value
+      // Parse number value and apply operator
       const numValue = parseFloat(filter.value as string);
       if (!isNaN(numValue)) {
-        queryInput[filter.field] = { eq: numValue };
+        queryInput[filter.field] = { [operator]: numValue };
+      }
+    } else if (filter.fieldType === "datetime") {
+      // DateTime: convert local datetime string to ISO format
+      const dateValue = filter.value as string;
+      if (dateValue) {
+        // datetime-local format is "YYYY-MM-DDTHH:mm"
+        // Need to convert to ISO 8601 format for GraphQL
+        const isoDate = new Date(dateValue).toISOString();
+        queryInput[filter.field] = { [operator]: isoDate };
+      }
+    } else if (filter.fieldType === "date") {
+      // Date: use as-is (YYYY-MM-DD format)
+      const dateValue = filter.value as string;
+      if (dateValue) {
+        queryInput[filter.field] = { [operator]: dateValue };
       }
     } else {
-      // string, enum, uuid - use string value
-      queryInput[filter.field] = { eq: filter.value };
+      // string, enum, uuid - use string value with operator
+      queryInput[filter.field] = { [operator]: filter.value };
     }
   }
 

package/src/component/index.ts

@@ -1,6 +1,48 @@
+// 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,
+  FilterOperator,
+  StringFilterOperator,
+  NumberFilterOperator,
+  DateFilterOperator,
+  BooleanFilterOperator,
+  EnumFilterOperator,
+} from "./types";
+export { OPERATOR_LABELS, OPERATORS_BY_FIELD_TYPE } 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/saved-view-context.tsx

@@ -7,7 +7,7 @@ import {
   type ReactNode,
 } from "react";
 import type { ExpandedRelationFields } from "../generator/metadata-generator";
-import type { SearchFilters } from "./types";
+import type { SearchFilters, SearchFilter } from "./types";
 import type {
   SavedViewStore,
   SavedView as StoreSavedView,
@@ -66,6 +66,35 @@ interface SavedViewProviderProps {
   store?: SavedViewStore;
 }
 
+/**
+ * Migrate a filter from old format (without operator) to new format (with operator)
+ * Adds default "eq" operator for backward compatibility
+ */
+function migrateFilter(
+  filter:
+    | SearchFilter
+    | (Omit<SearchFilter, "operator"> & { operator?: never }),
+): SearchFilter {
+  // If operator is already present, return as-is
+  if ("operator" in filter && filter.operator !== undefined) {
+    return filter as SearchFilter;
+  }
+  // Add default "eq" operator for backward compatibility
+  return {
+    ...filter,
+    operator: "eq",
+  };
+}
+
+/**
+ * Migrate filters array from old format to new format
+ */
+function migrateFilters(
+  filters: SearchFilters | Array<Omit<SearchFilter, "operator">>,
+): SearchFilters {
+  return filters.map(migrateFilter);
+}
+
 /**
  * Convert store format to UI format
  */
@@ -74,7 +103,7 @@ function fromStoreView(storeView: StoreSavedView): SavedView {
     id: storeView.id,
     name: storeView.name,
     tableName: storeView.tableName,
-    filters: storeView.filters,
+    filters: migrateFilters(storeView.filters),
     selectedFields: storeView.columns,
     selectedRelations: storeView.selectedRelations,
     expandedRelationFields: storeView.expandedRelationFields,