@izumisy-tailor/tailor-data-viewer 0.1.40 → 0.1.41

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.40",
+  "version": "0.1.41",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

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

@@ -89,7 +89,6 @@ export function DataViewTabContent({
 
     return [
       {
-        filterType: "search" as const,
         field: initialQuery.field,
         fieldType: field.type,
         operator: "eq" as const,

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

@@ -27,7 +27,7 @@ describe("buildQueryInput", () => {
     it("単一のフィルターでクエリオブジェクトを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "name",
           fieldType: "string",
           operator: "eq",
@@ -43,14 +43,14 @@ describe("buildQueryInput", () => {
     it("複数のフィルターでクエリオブジェクトを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "name",
           fieldType: "string",
           operator: "eq",
           value: "test",
         },
         {
-          filterType: "search",
+          
           field: "age",
           fieldType: "number",
           operator: "gt",
@@ -69,7 +69,7 @@ describe("buildQueryInput", () => {
     it("eq 演算子で等価検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "name",
           fieldType: "string",
           operator: "eq",
@@ -85,7 +85,7 @@ describe("buildQueryInput", () => {
     it("contains 演算子で部分一致検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "name",
           fieldType: "string",
           operator: "contains",
@@ -101,7 +101,7 @@ describe("buildQueryInput", () => {
     it("hasPrefix 演算子で前方一致検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "name",
           fieldType: "string",
           operator: "hasPrefix",
@@ -117,7 +117,7 @@ describe("buildQueryInput", () => {
     it("hasSuffix 演算子で後方一致検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "email",
           fieldType: "string",
           operator: "hasSuffix",
@@ -135,7 +135,7 @@ describe("buildQueryInput", () => {
     it("eq 演算子で等価検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "age",
           fieldType: "number",
           operator: "eq",
@@ -151,7 +151,7 @@ describe("buildQueryInput", () => {
     it("gt 演算子で大なり検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "age",
           fieldType: "number",
           operator: "gt",
@@ -167,7 +167,7 @@ describe("buildQueryInput", () => {
     it("lt 演算子で小なり検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "age",
           fieldType: "number",
           operator: "lt",
@@ -183,7 +183,7 @@ describe("buildQueryInput", () => {
     it("小数点を含む数値を正しく変換する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "price",
           fieldType: "number",
           operator: "gt",
@@ -199,7 +199,7 @@ describe("buildQueryInput", () => {
     it("負の数値を正しく変換する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "temperature",
           fieldType: "number",
           operator: "lt",
@@ -215,7 +215,7 @@ describe("buildQueryInput", () => {
     it("無効な数値はフィルターに含まれない", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "age",
           fieldType: "number",
           operator: "eq",
@@ -231,7 +231,7 @@ describe("buildQueryInput", () => {
     it("true 値で検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "isActive",
           fieldType: "boolean",
           operator: "eq",
@@ -247,7 +247,7 @@ describe("buildQueryInput", () => {
     it("false 値で検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "isActive",
           fieldType: "boolean",
           operator: "eq",
@@ -265,7 +265,7 @@ describe("buildQueryInput", () => {
     it("enum 値で検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "status",
           fieldType: "enum",
           operator: "eq",
@@ -284,7 +284,7 @@ describe("buildQueryInput", () => {
     it("UUID 値で検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "id",
           fieldType: "uuid",
           operator: "eq",
@@ -302,7 +302,7 @@ describe("buildQueryInput", () => {
     it("date フィールドで eq 演算子の検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "birthDate",
           fieldType: "date",
           operator: "eq",
@@ -318,7 +318,7 @@ describe("buildQueryInput", () => {
     it("date フィールドで gt 演算子の検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "birthDate",
           fieldType: "date",
           operator: "gt",
@@ -334,7 +334,7 @@ describe("buildQueryInput", () => {
     it("date フィールドで lt 演算子の検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "birthDate",
           fieldType: "date",
           operator: "lt",
@@ -350,7 +350,7 @@ describe("buildQueryInput", () => {
     it("空の日付値はフィルターに含まれない", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "birthDate",
           fieldType: "date",
           operator: "eq",
@@ -376,7 +376,7 @@ describe("buildQueryInput", () => {
       // datetime-local format: "YYYY-MM-DDTHH:mm"
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "createdAt",
           fieldType: "datetime",
           operator: "eq",
@@ -396,7 +396,7 @@ describe("buildQueryInput", () => {
     it("datetime フィールドで gt 演算子の検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "createdAt",
           fieldType: "datetime",
           operator: "gt",
@@ -415,7 +415,7 @@ describe("buildQueryInput", () => {
     it("datetime フィールドで lt 演算子の検索クエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "updatedAt",
           fieldType: "datetime",
           operator: "lt",
@@ -434,7 +434,7 @@ describe("buildQueryInput", () => {
     it("空の日時値はフィルターに含まれない", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "createdAt",
           fieldType: "datetime",
           operator: "eq",
@@ -450,28 +450,28 @@ describe("buildQueryInput", () => {
     it("異なる型のフィルターを組み合わせてクエリを生成する", () => {
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "name",
           fieldType: "string",
           operator: "contains",
           value: "test",
         },
         {
-          filterType: "search",
+          
           field: "age",
           fieldType: "number",
           operator: "gt",
           value: "18",
         },
         {
-          filterType: "search",
+          
           field: "isActive",
           fieldType: "boolean",
           operator: "eq",
           value: true,
         },
         {
-          filterType: "search",
+          
           field: "status",
           fieldType: "enum",
           operator: "eq",
@@ -491,14 +491,14 @@ describe("buildQueryInput", () => {
       // Note: In actual use, same field shouldn't appear twice, but testing the function behavior
       const filters: Filters = [
         {
-          filterType: "search",
+          
           field: "minAge",
           fieldType: "number",
           operator: "gt",
           value: "18",
         },
         {
-          filterType: "search",
+          
           field: "maxAge",
           fieldType: "number",
           operator: "lt",
@@ -619,7 +619,7 @@ describe("useTableData", () => {
     it("initialSortが指定された場合も初回マウント時にリクエストが1回だけ実行される", async () => {
       const initialSort = [
         {
-          filterType: "search",
+          
           field: "createdAt",
           direction: "Desc" as const,
         },
@@ -657,7 +657,7 @@ describe("useTableData", () => {
     it("searchFiltersが指定された場合も初回マウント時にリクエストが1回だけ実行される", async () => {
       const searchFilters: Filters = [
         {
-          filterType: "search",
+          
           field: "status",
           fieldType: "string",
           operator: "eq",

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

@@ -44,8 +44,8 @@ export function buildQueryInput(
   const queryInput: Record<string, unknown> = {};
 
   for (const filter of filters) {
-    // VariationFilter uses eq operator implicitly
-    const operator = filter.filterType === "variation" ? "eq" : filter.operator;
+    // Use the operator directly (all filters are now SearchFilter)
+    const operator = filter.operator;
 
     if (filter.fieldType === "boolean") {
       // Boolean always uses eq

package/src/component/index.ts

@@ -71,7 +71,6 @@ export type {
   Filter,
   Filters,
   SearchFilter,
-  VariationFilter,
   FilterOperator,
   StringFilterOperator,
   NumberFilterOperator,

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 { Filters, SearchFilter, VariationFilter } from "./types";
+import type { Filters, SearchFilter } from "./types";
 import type {
   SavedViewStore,
   SavedView as StoreSavedView,
@@ -67,33 +67,60 @@ interface SavedViewProviderProps {
 }
 
 /**
- * Migrate a filter from old format (without operator/filterType) to new format
- * Adds default "eq" operator and "search" filterType for backward compatibility
+ * Migrate a filter from old format to new format
+ * Adds default "eq" operator for backward compatibility
+ * Also handles migration from old VariationFilter format (filterType: "variation")
+ * and old SearchFilter format (filterType: "search")
  */
 function migrateFilter(
   filter:
     | SearchFilter
-    | (Omit<SearchFilter, "operator" | "filterType"> & {
-        operator?: never;
-        filterType?: never;
-      }),
+    | (Omit<SearchFilter, "operator"> & { operator?: never })
+    | {
+        filterType: "variation";
+        field: string;
+        fieldType: string;
+        value: string;
+        options?: readonly string[];
+      }
+    | {
+        filterType: "search";
+        field: string;
+        fieldType: string;
+        operator: string;
+        value: string | boolean;
+        enumValues?: readonly string[];
+      },
 ): SearchFilter {
-  // If filterType and operator are already present, return as-is (SearchFilter)
-  if (
-    "filterType" in filter &&
-    filter.filterType === "search" &&
-    "operator" in filter &&
-    typeof (filter as SearchFilter).operator === "string"
-  ) {
+  // Handle old VariationFilter format (filterType: "variation")
+  if ("filterType" in filter && filter.filterType === "variation") {
+    return {
+      field: filter.field,
+      fieldType: filter.fieldType as SearchFilter["fieldType"],
+      operator: "eq",
+      value: filter.value,
+    };
+  }
+
+  // Handle old SearchFilter format with filterType: "search"
+  if ("filterType" in filter && filter.filterType === "search") {
+    const { filterType, ...rest } = filter;
+    return {
+      ...rest,
+      fieldType: rest.fieldType as SearchFilter["fieldType"],
+      operator: (rest.operator as SearchFilter["operator"]) ?? "eq",
+    };
+  }
+
+  // If operator is already present, return as-is
+  if ("operator" in filter && typeof filter.operator === "string") {
     return filter as SearchFilter;
   }
-  // Add default filterType and operator for backward compatibility
-  const existingOperator =
-    "operator" in filter ? (filter as SearchFilter).operator : undefined;
+
+  // Add default operator for backward compatibility
   return {
-    filterType: "search",
     ...filter,
-    operator: existingOperator ?? "eq",
+    operator: "eq",
   } as SearchFilter;
 }
 
@@ -101,17 +128,11 @@ function migrateFilter(
  * Migrate filters array from old format to new format
  */
 function migrateFilters(
-  filters: Filters | Array<Omit<SearchFilter, "operator" | "filterType">>,
+  filters: Filters | Array<Omit<SearchFilter, "operator">>,
 ): Filters {
-  return filters.map((f) => {
-    // Check if filterType exists using 'in' operator
-    if ("filterType" in f && f.filterType === "variation") {
-      return f as VariationFilter;
-    }
-    return migrateFilter(
-      f as SearchFilter | Omit<SearchFilter, "operator" | "filterType">,
-    );
-  });
+  return filters.map((f) =>
+    migrateFilter(f as Parameters<typeof migrateFilter>[0]),
+  );
 }
 
 /**

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

@@ -105,7 +105,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
@@ -126,21 +126,21 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
               value: "test",
             },
             {
-              filterType: "search",
+              
               field: "age",
               fieldType: "number",
               operator: "gt",
               value: "18",
             },
             {
-              filterType: "search",
+              
               field: "isActive",
               fieldType: "boolean",
               operator: "eq",
@@ -199,7 +199,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
@@ -226,7 +226,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
@@ -272,7 +272,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
@@ -298,7 +298,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "age",
               fieldType: "number",
               operator: "gt",
@@ -324,7 +324,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "age",
               fieldType: "number",
               operator: "lt",
@@ -350,7 +350,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "contains",
@@ -376,7 +376,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "hasPrefix",
@@ -402,7 +402,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "hasSuffix",
@@ -428,7 +428,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "isActive",
               fieldType: "boolean",
               operator: "eq",
@@ -454,7 +454,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "isActive",
               fieldType: "boolean",
               operator: "eq",
@@ -480,7 +480,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "createdAt",
               fieldType: "datetime",
               operator: "gt",
@@ -508,7 +508,7 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "birthDate",
               fieldType: "date",
               operator: "lt",
@@ -537,14 +537,14 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
               value: "test",
             },
             {
-              filterType: "search",
+              
               field: "age",
               fieldType: "number",
               operator: "eq",
@@ -574,14 +574,14 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "eq",
               value: "test",
             },
             {
-              filterType: "search",
+              
               field: "age",
               fieldType: "number",
               operator: "eq",
@@ -620,28 +620,28 @@ describe("SearchFilterForm", () => {
         <TestWrapper
           initialFilters={[
             {
-              filterType: "search",
+              
               field: "name",
               fieldType: "string",
               operator: "contains",
               value: "test",
             },
             {
-              filterType: "search",
+              
               field: "age",
               fieldType: "number",
               operator: "gt",
               value: "18",
             },
             {
-              filterType: "search",
+              
               field: "isActive",
               fieldType: "boolean",
               operator: "eq",
               value: true,
             },
             {
-              filterType: "search",
+              
               field: "status",
               fieldType: "enum",
               operator: "eq",

package/src/component/search-filter.tsx

@@ -71,10 +71,8 @@ export function SearchFilterForm({
   const onOpenChange = (isOpen: boolean) =>
     setActivePanel(isOpen ? "search" : null);
 
-  // Get only search filters from all filters
-  const searchFilters = filters.filter(
-    (f) => f.filterType === "search",
-  ) as SearchFilter[];
+  // All filters are now SearchFilter
+  const searchFilters = filters as SearchFilter[];
 
   const [selectedField, setSelectedField] = useState<string>("");
   const [selectedOperator, setSelectedOperator] =
@@ -117,7 +115,6 @@ export function SearchFilterForm({
     if (selectedFieldMetadata.type !== "boolean" && !inputValue.trim()) return;
 
     const newFilter: SearchFilter = {
-      filterType: "search",
       field: selectedField,
       fieldType: selectedFieldMetadata.type,
       operator: selectedOperator,
@@ -125,9 +122,8 @@ export function SearchFilterForm({
       enumValues: selectedFieldMetadata.enumValues,
     };
 
-    // Preserve non-search filters
-    const nonSearchFilters = filters.filter((f) => f.filterType !== "search");
-    setFilters([...nonSearchFilters, ...searchFilters, newFilter]);
+    // Add the new filter
+    setFilters([...searchFilters, newFilter]);
     setSelectedField("");
     setSelectedOperator("eq");
     setInputValue("");
@@ -145,19 +141,14 @@ export function SearchFilterForm({
 
   const handleRemoveFilter = useCallback(
     (fieldName: string) => {
-      setFilters(
-        filters.filter(
-          (f) => !(f.filterType === "search" && f.field === fieldName),
-        ),
-      );
+      setFilters(filters.filter((f) => f.field !== fieldName));
     },
     [filters, setFilters],
   );
 
   const handleClearAll = useCallback(() => {
-    // Clear only search filters, preserve other filter types
-    setFilters(filters.filter((f) => f.filterType !== "search"));
-  }, [filters, setFilters]);
+    setFilters([]);
+  }, [setFilters]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {

package/src/component/types.ts

@@ -174,8 +174,6 @@ export const OPERATORS_BY_FIELD_TYPE: Record<
  * Search filter condition for a single field
  */
 export interface SearchFilter {
-  /** Discriminator for filter type */
-  filterType: "search";
   /** Field name to filter */
   field: string;
   /** Field type (determines UI input type and query format) */
@@ -189,27 +187,9 @@ export interface SearchFilter {
 }
 
 /**
- * Variation filter condition for a single field
- * Differs from SearchFilter in that it only supports eq operator
- * and is designed for enum/string fields with dropdown selection
+ * Filter type
  */
-export interface VariationFilter {
-  /** Discriminator for filter type */
-  filterType: "variation";
-  /** Field name to filter */
-  field: string;
-  /** Field type (only "string" or "enum") */
-  fieldType: "string" | "enum";
-  /** Filter value (always uses eq operator) */
-  value: string;
-  /** Enum values (if fieldType is "enum") or distinct values (if fieldType is "string") */
-  options?: readonly string[];
-}
-
-/**
- * Union type for all filter types
- */
-export type Filter = SearchFilter | VariationFilter;
+export type Filter = SearchFilter;
 
 /**
  * Filters state - a collection of filters to be applied with AND logic

package/src/component/variation-filter.test.tsx

@@ -0,0 +1,365 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { VariationFilterForm } from "./variation-filter";
+import { DataViewerProvider, useDataViewer } from "./contexts";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+import type { ReactNode } from "react";
+import type { Filters } from "./types";
+import type { GraphQLFetcher } from "../graphql/fetcher";
+
+// Mock fields for testing
+const mockFields: FieldMetadata[] = [
+  { name: "id", type: "uuid", required: true },
+  { name: "name", type: "string", required: true },
+  { name: "category", type: "string", required: false },
+  {
+    name: "status",
+    type: "enum",
+    required: false,
+    enumValues: ["ACTIVE", "INACTIVE", "PENDING"],
+  },
+  { name: "age", type: "number", required: false },
+];
+
+const mockTableMetadata: TableMetadata = {
+  name: "testTable",
+  pluralForm: "testTables",
+  readAllowedRoles: [],
+  fields: mockFields,
+  relations: [],
+};
+
+const mockTableMetadataMap: TableMetadataMap = {
+  testTable: mockTableMetadata,
+};
+
+function createMockFetcher(
+  mockResponse: Record<string, unknown> = {},
+): GraphQLFetcher {
+  return {
+    execute: vi.fn().mockResolvedValue({ data: mockResponse }),
+  };
+}
+
+interface WrapperProps {
+  children: ReactNode;
+  initialFilters?: Filters;
+  fetcher?: GraphQLFetcher;
+}
+
+function TestWrapper({ children, initialFilters = [], fetcher }: WrapperProps) {
+  return (
+    <DataViewerProvider
+      fetcher={fetcher ?? createMockFetcher()}
+      tableName={mockTableMetadata.name}
+      metadata={mockTableMetadataMap}
+      initialData={{
+        selectedFields: ["id", "name", "status", "category"],
+        filters: initialFilters,
+      }}
+    >
+      {children}
+    </DataViewerProvider>
+  );
+}
+
+describe("VariationFilterForm", () => {
+  describe("基本的な表示", () => {
+    it("enumフィールドのボタンが表示される", () => {
+      render(
+        <TestWrapper>
+          <VariationFilterForm fieldName="status" />
+        </TestWrapper>,
+      );
+
+      expect(
+        screen.getByRole("button", { name: /status/i }),
+      ).toBeInTheDocument();
+    });
+
+    it("カスタムラベルが表示される", () => {
+      render(
+        <TestWrapper>
+          <VariationFilterForm fieldName="status" label="ステータス" />
+        </TestWrapper>,
+      );
+
+      expect(
+        screen.getByRole("button", { name: "ステータス" }),
+      ).toBeInTheDocument();
+    });
+
+    it("存在しないフィールドの場合はnullを返す", () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      const { container } = render(
+        <TestWrapper>
+          <VariationFilterForm fieldName="nonExistentField" />
+        </TestWrapper>,
+      );
+
+      expect(container.firstChild).toBeNull();
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining("nonExistentField"),
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it("string/enum以外のフィールドの場合はnullを返す", () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      const { container } = render(
+        <TestWrapper>
+          <VariationFilterForm fieldName="age" />
+        </TestWrapper>,
+      );
+
+      expect(container.firstChild).toBeNull();
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining("must be of type"),
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("enumフィールドのフィルタリング", () => {
+    it("ドロップダウンをクリックするとenum値が表示される", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <TestWrapper>
+          <VariationFilterForm fieldName="status" />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /status/i });
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText("ACTIVE")).toBeInTheDocument();
+        expect(screen.getByText("INACTIVE")).toBeInTheDocument();
+        expect(screen.getByText("PENDING")).toBeInTheDocument();
+      });
+    });
+
+    it("enum値を選択するとフィルターが適用される", async () => {
+      const user = userEvent.setup();
+      let capturedFilters: Filters = [];
+
+      const TestComponent = () => {
+        const { filters } = useDataViewer();
+        capturedFilters = filters;
+        return <VariationFilterForm fieldName="status" />;
+      };
+
+      render(
+        <TestWrapper>
+          <TestComponent />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /status/i });
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText("ACTIVE")).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText("ACTIVE"));
+
+      await waitFor(() => {
+        expect(capturedFilters).toContainEqual({
+          field: "status",
+          fieldType: "enum",
+          operator: "eq",
+          value: "ACTIVE",
+        });
+      });
+    });
+
+    it("フィルターが適用されている場合はバッジが表示される", () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "status",
+              fieldType: "enum",
+              operator: "eq",
+              value: "ACTIVE",
+            },
+          ]}
+        >
+          <VariationFilterForm fieldName="status" />
+        </TestWrapper>,
+      );
+
+      expect(screen.getByText("ACTIVE")).toBeInTheDocument();
+    });
+  });
+
+  describe("stringフィールドのフィルタリング", () => {
+    it("stringフィールドのボタンが表示される", async () => {
+      const mockFetcher = createMockFetcher({
+        testTables: {
+          edges: [],
+        },
+      });
+
+      render(
+        <TestWrapper fetcher={mockFetcher}>
+          <VariationFilterForm fieldName="category" />
+        </TestWrapper>,
+      );
+
+      expect(
+        screen.getByRole("button", { name: /category/i }),
+      ).toBeInTheDocument();
+
+      // Wait for async fetch to complete to avoid act warning
+      await waitFor(() => {
+        expect(mockFetcher.execute).toHaveBeenCalled();
+      });
+    });
+
+    it("stringフィールドはGraphQLで選択肢をフェッチする", async () => {
+      const mockFetcher = createMockFetcher({
+        testTables: {
+          edges: [
+            { node: { category: "Category A" } },
+            { node: { category: "Category B" } },
+            { node: { category: "Category A" } }, // duplicate
+          ],
+        },
+      });
+
+      const user = userEvent.setup();
+
+      render(
+        <TestWrapper fetcher={mockFetcher}>
+          <VariationFilterForm fieldName="category" />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /category/i });
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText("Category A")).toBeInTheDocument();
+        expect(screen.getByText("Category B")).toBeInTheDocument();
+      });
+
+      // Verify duplicates are removed (only one "Category A")
+      expect(screen.getAllByText("Category A")).toHaveLength(1);
+    });
+
+    it("GraphQLエラー時にエラーメッセージが表示される", async () => {
+      const mockFetcher: GraphQLFetcher = {
+        execute: vi.fn().mockResolvedValue({
+          errors: [{ message: "Network error" }],
+        }),
+      };
+
+      const user = userEvent.setup();
+
+      render(
+        <TestWrapper fetcher={mockFetcher}>
+          <VariationFilterForm fieldName="category" />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /category/i });
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("選択肢の読み込みに失敗しました"),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("フィルターのクリア", () => {
+    it("クリアボタンをクリックするとフィルターが削除される", async () => {
+      const user = userEvent.setup();
+      let capturedFilters: Filters = [];
+
+      const TestComponent = () => {
+        const { filters } = useDataViewer();
+        capturedFilters = filters;
+        return <VariationFilterForm fieldName="status" />;
+      };
+
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "status",
+              fieldType: "enum",
+              operator: "eq",
+              value: "ACTIVE",
+            },
+          ]}
+        >
+          <TestComponent />
+        </TestWrapper>,
+      );
+
+      // Open dropdown
+      const button = screen.getByRole("button", { name: /status/i });
+      await user.click(button);
+
+      // Click clear button (text is "フィルターを解除" from ui-labels)
+      await waitFor(() => {
+        expect(screen.getByText(/フィルターを解除/)).toBeInTheDocument();
+      });
+
+      const clearButton = screen.getByText(/フィルターを解除/);
+      await user.click(clearButton);
+
+      await waitFor(() => {
+        expect(capturedFilters).not.toContainEqual(
+          expect.objectContaining({ field: "status" }),
+        );
+      });
+    });
+  });
+
+  describe("複数のVariationFilterForm", () => {
+    it("複数のフィルターが独立して動作する", async () => {
+      const mockFetcher = createMockFetcher({
+        testTables: {
+          edges: [
+            { node: { category: "Cat A" } },
+            { node: { category: "Cat B" } },
+          ],
+        },
+      });
+
+      render(
+        <TestWrapper fetcher={mockFetcher}>
+          <VariationFilterForm fieldName="status" />
+          <VariationFilterForm fieldName="category" />
+        </TestWrapper>,
+      );
+
+      expect(
+        screen.getByRole("button", { name: /status/i }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: /category/i }),
+      ).toBeInTheDocument();
+
+      // Wait for async fetch to complete to avoid act warning
+      await waitFor(() => {
+        expect(mockFetcher.execute).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/component/variation-filter.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from "react";
-import { X, ChevronDown, Check } from "lucide-react";
+import { ChevronDown, Check } from "lucide-react";
 import { Button } from "./ui/button";
 import {
   DropdownMenu,
@@ -8,7 +8,7 @@ import {
   DropdownMenuItem,
 } from "./ui/dropdown-menu";
 import { Badge } from "./ui/badge";
-import type { VariationFilter } from "./types";
+import type { SearchFilter } from "./types";
 import { useDataViewer } from "./contexts";
 import { useLabels } from "./hooks/use-labels";
 import { QueryBuilder } from "raku-ql";
@@ -59,10 +59,12 @@ export function VariationFilterForm({
 
   const fields = tableMetadata?.fields ?? [];
 
-  // Get only variation filters from all filters
+  // Get variation filters (SearchFilter with operator: "eq" and string/enum field)
   const variationFilters = filters.filter(
-    (f) => f.filterType === "variation",
-  ) as VariationFilter[];
+    (f) =>
+      f.operator === "eq" &&
+      (f.fieldType === "string" || f.fieldType === "enum"),
+  ) as SearchFilter[];
 
   // Find the specific field for this component
   const fieldMetadata = fields.find((f) => f.name === fieldName);
@@ -71,11 +73,9 @@ export function VariationFilterForm({
   const currentFilter = variationFilters.find((f) => f.field === fieldName);
 
   const [selectedValue, setSelectedValue] = useState<string>(
-    currentFilter?.value ?? "",
-  );
-  const [availableOptions, setAvailableOptions] = useState<string[]>(
-    currentFilter?.options ? [...currentFilter.options] : [],
+    (currentFilter?.value as string) ?? "",
   );
+  const [availableOptions, setAvailableOptions] = useState<string[]>([]);
   const [loadingOptions, setLoadingOptions] = useState(false);
   const [optionsError, setOptionsError] = useState<string | null>(null);
 
@@ -158,7 +158,6 @@ export function VariationFilterForm({
             setAvailableOptions(uniqueValues);
           }
         } catch (error) {
-          console.error("Failed to fetch distinct values:", error);
           setOptionsError(
             error instanceof Error ? error.message : "Failed to load options",
           );
@@ -174,7 +173,7 @@ export function VariationFilterForm({
 
   // Update selected value when current filter changes
   useEffect(() => {
-    setSelectedValue(currentFilter?.value ?? "");
+    setSelectedValue((currentFilter?.value as string) ?? "");
   }, [currentFilter]);
 
   const handleValueChange = useCallback(
@@ -183,21 +182,20 @@ export function VariationFilterForm({
 
       if (!fieldMetadata) return;
 
-      const newFilter: VariationFilter = {
-        filterType: "variation",
+      const newFilter: SearchFilter = {
         field: fieldName,
         fieldType: fieldMetadata.type as "string" | "enum",
+        operator: "eq",
         value,
-        options: availableOptions,
       };
 
       // Remove existing filter for this field and add new one
       const otherFilters = filters.filter(
-        (f) => !(f.filterType === "variation" && f.field === fieldName),
+        (f) => !(f.operator === "eq" && f.field === fieldName),
       );
       setFilters([...otherFilters, newFilter]);
     },
-    [fieldName, fieldMetadata, availableOptions, filters, setFilters],
+    [fieldName, fieldMetadata, filters, setFilters],
   );
 
   const handleClearFilter = useCallback(
@@ -205,9 +203,7 @@ export function VariationFilterForm({
       e?.stopPropagation();
       setSelectedValue("");
       setFilters(
-        filters.filter(
-          (f) => !(f.filterType === "variation" && f.field === fieldName),
-        ),
+        filters.filter((f) => !(f.operator === "eq" && f.field === fieldName)),
       );
     },
     [fieldName, filters, setFilters],
@@ -236,7 +232,6 @@ export function VariationFilterForm({
             className="text-destructive cursor-pointer justify-center"
             onClick={handleClearFilter}
           >
-            <X className="mr-1 size-3" />
             {getLabel("$:clearFilter")}
           </DropdownMenuItem>
         )}