@izumisy-tailor/tailor-data-viewer 0.2.9 → 0.2.11

package/package.json

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

package/src/component/collection/use-collection.test.ts

@@ -73,7 +73,7 @@ describe("useCollection", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.addFilter("status", "ACTIVE", "eq");
+        result.current.addFilter("status", "eq", "ACTIVE");
       });
 
       expect(result.current.filters).toHaveLength(1);
@@ -91,10 +91,10 @@ describe("useCollection", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.addFilter("status", "ACTIVE", "eq");
+        result.current.addFilter("status", "eq", "ACTIVE");
       });
       act(() => {
-        result.current.addFilter("status", "INACTIVE", "eq");
+        result.current.addFilter("status", "eq", "INACTIVE");
       });
 
       expect(result.current.filters).toHaveLength(1);
@@ -130,8 +130,8 @@ describe("useCollection", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.addFilter("status", "ACTIVE", "eq");
-        result.current.addFilter("amount", 1000, "gte");
+        result.current.addFilter("status", "eq", "ACTIVE");
+        result.current.addFilter("amount", "gte", 1000);
       });
       act(() => {
         result.current.removeFilter("status");
@@ -145,8 +145,8 @@ describe("useCollection", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.addFilter("status", "ACTIVE", "eq");
-        result.current.addFilter("amount", 1000, "gte");
+        result.current.addFilter("status", "eq", "ACTIVE");
+        result.current.addFilter("amount", "gte", 1000);
       });
       act(() => {
         result.current.clearFilters();
@@ -167,7 +167,7 @@ describe("useCollection", () => {
 
       // Adding filter should reset pagination
       act(() => {
-        result.current.addFilter("status", "ACTIVE", "eq");
+        result.current.addFilter("status", "eq", "ACTIVE");
       });
       expect(result.current.cursor).toBeNull();
       expect(result.current.hasPrevPage).toBe(false);

package/src/component/collection/use-collection.ts

@@ -9,6 +9,7 @@ import type {
   UseCollectionOptions,
   UseCollectionReturn,
   ExtractQueryVariables,
+  ValidateCollectionQuery,
 } from "../types";
 import type { FieldName } from "../types";
 
@@ -57,7 +58,7 @@ export function useCollection<
   > & {
     metadata: TMetadata;
     tableName: TTableName;
-    query: TQuery;
+    query: ValidateCollectionQuery<TQuery, FieldName<TMetadata, TTableName>>;
   },
 ): UseCollectionReturn<
   FieldName<TMetadata, TTableName>,
@@ -65,7 +66,8 @@ export function useCollection<
   {
     query: TQuery;
     variables: ResolveVariables<TQuery, FieldName<TMetadata, TTableName>>;
-  }
+  },
+  MetadataFilter<TMetadata, TTableName>
 >;
 
 /**
@@ -129,7 +131,7 @@ export function useCollection(
   // Filter operations
   // ---------------------------------------------------------------------------
   const addFilter = useCallback(
-    (field: string, value: unknown, operator: FilterOperator = "eq") => {
+    (field: string, operator: FilterOperator, value: unknown) => {
       setFiltersState((prev) => {
         const existing = prev.findIndex((f) => f.field === field);
         const newFilter: Filter = {
@@ -273,7 +275,9 @@ export function useCollection(
   return {
     toQueryArgs,
     filters,
-    addFilter,
+    // Cast needed: implementation accepts FilterOperator (widest),
+    // but overload signatures narrow via OperatorForField<TFilter, F>.
+    addFilter: addFilter as UseCollectionReturn["addFilter"],
     setFilters,
     removeFilter,
     clearFilters,

package/src/component/collection/use-collection.typetest.ts

@@ -0,0 +1,185 @@
+/**
+ * Compile-time type tests for `ValidateCollectionQuery`.
+ *
+ * These tests verify that `useCollection` produces type errors when the
+ * query document's variables are incompatible with the collection's
+ * metadata fields.
+ *
+ * To run: `npx tsc --noEmit` — any assertion that evaluates to `never`
+ * will cause a compile error, ensuring the test cases stay enforced.
+ */
+
+import type {
+  ValidateCollectionQuery,
+  HasCollectionQueryError,
+  ExtractQueryInputKeys,
+  ExtractOrderField,
+} from "../types";
+
+// =============================================================================
+// Helpers – minimal branded document types mimicking gql-tada output
+// =============================================================================
+
+/** Helper to build a fake TypedDocumentNode with variable types */
+type FakeDoc<Variables> = {
+  __apiType?: (variables: Variables) => unknown;
+  kind: "Document";
+};
+
+// =============================================================================
+// 1. Variable key checks
+// =============================================================================
+
+// ✅ Query with standard Tailor variables should pass
+type DocOk = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  query?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type Pass1 = ValidateCollectionQuery<DocOk, "name">;
+type Assert1 = HasCollectionQueryError<Pass1> extends true ? never : true;
+export const assert1: Assert1 = true;
+
+// ❌ Query missing $first should fail
+type DocNoFirst = FakeDoc<{
+  after?: string | null;
+  query?: { name?: unknown } | null;
+}>;
+type Fail1 = ValidateCollectionQuery<DocNoFirst, "name">;
+type AssertFail1 = HasCollectionQueryError<Fail1> extends true ? true : never;
+export const assertFail1: AssertFail1 = true;
+
+// =============================================================================
+// 2. OrderInput field compatibility
+// =============================================================================
+
+// ❌ Metadata has "name" | "email" but OrderInput only allows "name"
+type DocNarrowOrder = FakeDoc<{
+  first?: number | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type Fail2 = ValidateCollectionQuery<DocNarrowOrder, "name" | "email">;
+type AssertFail2 = HasCollectionQueryError<Fail2> extends true ? true : never;
+export const assertFail2: AssertFail2 = true;
+
+// ✅ OrderInput allows all metadata fields
+type DocWideOrder = FakeDoc<{
+  first?: number | null;
+  order?: readonly { field?: "name" | "email" | "phone" | null }[] | null;
+}>;
+type Pass2 = ValidateCollectionQuery<DocWideOrder, "name" | "email">;
+type AssertPass2 = HasCollectionQueryError<Pass2> extends true ? never : true;
+export const assertPass2: AssertPass2 = true;
+
+// =============================================================================
+// 3. QueryInput key compatibility
+// =============================================================================
+
+// ❌ Metadata has "name" | "phone" but QueryInput only has "name"
+type DocNarrowQuery = FakeDoc<{
+  first?: number | null;
+  query?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | "phone" | null }[] | null;
+}>;
+type Fail3 = ValidateCollectionQuery<DocNarrowQuery, "name" | "phone">;
+type AssertFail3 = HasCollectionQueryError<Fail3> extends true ? true : never;
+export const assertFail3: AssertFail3 = true;
+
+// ✅ QueryInput has all metadata fields
+type DocWideQuery = FakeDoc<{
+  first?: number | null;
+  query?: { name?: unknown; phone?: unknown; email?: unknown } | null;
+  order?: readonly { field?: "name" | "phone" | "email" | null }[] | null;
+}>;
+type Pass3 = ValidateCollectionQuery<DocWideQuery, "name" | "phone">;
+type AssertPass3 = HasCollectionQueryError<Pass3> extends true ? never : true;
+export const assertPass3: AssertPass3 = true;
+
+// =============================================================================
+// 4. Variable name typo detection
+// =============================================================================
+
+// Query uses $filter instead of $query (typo) — no $query key in variables.
+// With metadata, there is no "query" key so QueryInput check is skipped.
+// But if the order is also correct, this particular typo would not be caught
+// at the useCollection level. It WILL be caught when spreading into useQuery()
+// because urql checks that variables match the document.
+type DocFilterTypo = FakeDoc<{
+  first?: number | null;
+  filter?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type Typo1 = ValidateCollectionQuery<DocFilterTypo, "name">;
+type AssertTypo1 = HasCollectionQueryError<Typo1> extends true ? never : true;
+export const assertTypo1: AssertTypo1 = true;
+
+// =============================================================================
+// 5. No gql-tada (plain DocumentNode) — all checks skipped
+// =============================================================================
+
+type PlainDoc = { kind: "Document" };
+type Pass5 = ValidateCollectionQuery<PlainDoc, "name">;
+type AssertPass5 = HasCollectionQueryError<Pass5> extends true ? never : true;
+export const assertPass5: AssertPass5 = true;
+
+// =============================================================================
+// 6. No metadata (string field names) — field-level checks skipped
+// =============================================================================
+
+type Pass6 = ValidateCollectionQuery<DocOk>;
+type AssertPass6 = HasCollectionQueryError<Pass6> extends true ? never : true;
+export const assertPass6: AssertPass6 = true;
+
+// =============================================================================
+// 7. Helper type tests
+// =============================================================================
+
+// ExtractOrderField
+type OrderField1 = ExtractOrderField<{
+  order?: readonly { field?: "a" | "b" | null }[] | null;
+}>;
+export const of1: OrderField1 = "a";
+export const of2: OrderField1 = "b";
+
+// ExtractQueryInputKeys
+type QIKeys1 = ExtractQueryInputKeys<
+  FakeDoc<{ query?: { name?: unknown; email?: unknown } | null }>
+>;
+export const qk1: QIKeys1 = "name";
+export const qk2: QIKeys1 = "email";
+
+// =============================================================================
+// 8. Mixed: $order present but no $query — only OrderInput checked
+// =============================================================================
+
+// ✅ No $query, order fields match
+type DocOrderOnly = FakeDoc<{
+  first?: number | null;
+  order?: readonly { field?: "name" | "email" | null }[] | null;
+}>;
+type Pass8 = ValidateCollectionQuery<DocOrderOnly, "name" | "email">;
+type AssertPass8 = HasCollectionQueryError<Pass8> extends true ? never : true;
+export const assertPass8: AssertPass8 = true;
+
+// =============================================================================
+// 9. Mixed: $query present but no $order — only QueryInput checked
+// =============================================================================
+
+// ✅ No $order, query keys match
+type DocQueryOnly = FakeDoc<{
+  first?: number | null;
+  query?: { name?: unknown; email?: unknown } | null;
+}>;
+type Pass9 = ValidateCollectionQuery<DocQueryOnly, "name" | "email">;
+type AssertPass9 = HasCollectionQueryError<Pass9> extends true ? never : true;
+export const assertPass9: AssertPass9 = true;
+
+// ❌ No $order, but query keys don't cover metadata fields
+type DocQueryOnlyMissing = FakeDoc<{
+  first?: number | null;
+  query?: { name?: unknown } | null;
+}>;
+type Fail9 = ValidateCollectionQuery<DocQueryOnlyMissing, "name" | "email">;
+type AssertFail9 = HasCollectionQueryError<Fail9> extends true ? true : never;
+export const assertFail9: AssertFail9 = true;

package/src/component/index.ts

@@ -30,6 +30,9 @@ export type {
   FieldName,
   ExtractOrderField,
   ExtractQueryVariables,
+  ExtractQueryInputKeys,
+  ValidateCollectionQuery,
+  HasCollectionQueryError,
   MatchingTableName,
   MetadataFieldOptions,
   MetadataFieldsOptions,

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

@@ -133,7 +133,7 @@ export function SearchFilterForm<TRow extends Record<string, unknown>>({
 
     if (!isBooleanType && !filterValue.trim()) return;
 
-    addFilter(selectedField, value, selectedOperator);
+    addFilter(selectedField, selectedOperator, value);
     setSelectedField("");
     setSelectedOperator("eq");
     setFilterValue("");

package/src/component/types.ts

@@ -72,6 +72,21 @@ export type OperatorForFilterType = {
  */
 export type FilterOperator = OperatorForFilterType[FilterConfig["type"]];
 
+/**
+ * Resolve the operator union for a specific field within a filter type.
+ *
+ * When `TFilter` is a metadata-aware discriminated union (e.g. `MetadataFilter`),
+ * this narrows operators to only those valid for the given field's type.
+ * When the field cannot be resolved (e.g. non-metadata usage), falls back to `FilterOperator`.
+ */
+export type OperatorForField<TFilter, F extends string> = [
+  Extract<TFilter, { field: F }>,
+] extends [never]
+  ? FilterOperator
+  : Extract<TFilter, { field: F }> extends { operator: infer O }
+    ? O
+    : FilterOperator;
+
 // =============================================================================
 // Filter Type → FieldType Mapping (type-level)
 // =============================================================================
@@ -364,6 +379,7 @@ export interface UseCollectionReturn<
   TFieldName extends string = string,
   TVariables = QueryVariables<TFieldName>,
   TQueryArgs = { query: unknown; variables: TVariables },
+  TFilter = Filter<TFieldName>,
 > {
   /**
    * Returns query arguments (`{ query, variables }`) that can be spread
@@ -381,7 +397,11 @@ export interface UseCollectionReturn<
   /** Current active filters */
   filters: Filter[];
   /** Add or update a filter for a field */
-  addFilter(field: TFieldName, value: unknown, operator?: FilterOperator): void;
+  addFilter<F extends TFieldName>(
+    field: F,
+    operator: OperatorForField<TFilter, F>,
+    value: unknown,
+  ): void;
   /** Replace all filters at once */
   setFilters(filters: Filter[]): void;
   /** Remove filter for a specific field */
@@ -600,6 +620,134 @@ export type ExtractQueryVariables<T> = T extends {
   ? NonNullable<V>
   : never;
 
+// =============================================================================
+// Collection Query Validation (compile-time safety)
+// =============================================================================
+
+/**
+ * Extract the key names of the `query` (filter) input type from GraphQL variables.
+ *
+ * For gql-tada's `VariablesOf<typeof QUERY>`, this extracts the allowed
+ * field names from the `query` (QueryInput) parameter.
+ *
+ * @example
+ * ```ts
+ * // query: BuyerContactQueryInput has keys: name, email, phone, ...
+ * type Keys = ExtractQueryInputKeys<typeof GET_BUYER_CONTACTS>;
+ * // → "name" | "email" | "phone" | ...
+ * ```
+ */
+export type ExtractQueryInputKeys<T> =
+  ExtractQueryVariables<T> extends {
+    query?: infer Q | null;
+  }
+    ? keyof NonNullable<Q> & string
+    : string;
+
+// ---------------------------------------------------------------------------
+// Individual collection query validation rules
+// ---------------------------------------------------------------------------
+// Each rule resolves to `Pass` when the check passes (or is not applicable),
+// or `{ __xxxError: "…" }` when it fails.  The rules are independent, so
+// adding a new one is just defining a new `Check*` type and appending it to
+// the intersection inside `ValidateCollectionQuery`.
+// ---------------------------------------------------------------------------
+
+/**
+ * Identity type for intersection: `T & Pass` ≡ `T`.
+ * Used as the "pass" branch of each validation rule.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Pass = {};
+
+/**
+ * Rule 1 — The query must declare `$first` as a variable.
+ */
+type CheckFirstVariable<TQuery> =
+  "first" extends keyof ExtractQueryVariables<TQuery>
+    ? Pass
+    : {
+        __firstVariableError: `Query must declare a $first variable (e.g. $first: Int).`;
+      };
+
+/**
+ * Rule 2 — When both metadata and `$order` variable exist, metadata field
+ * names must be assignable to the `field` enum inside the `OrderInput` type.
+ * Skipped when `TFieldName` is the generic `string` (no metadata).
+ */
+type CheckOrderField<
+  TQuery,
+  TFieldName extends string,
+> = "order" extends keyof ExtractQueryVariables<TQuery>
+  ? [TFieldName] extends [ExtractOrderField<ExtractQueryVariables<TQuery>>]
+    ? Pass
+    : {
+        __orderFieldError: `Some metadata field names are not assignable to OrderInput field enum. Check that the order variable's field type includes all metadata fields.`;
+      }
+  : Pass;
+
+/**
+ * Rule 3 — When both metadata and `$query` variable exist, metadata field
+ * names must be a subset of the `QueryInput` type's keys.
+ * Skipped when `TFieldName` is the generic `string` (no metadata).
+ */
+type CheckQueryInput<
+  TQuery,
+  TFieldName extends string,
+> = "query" extends keyof ExtractQueryVariables<TQuery>
+  ? [Exclude<TFieldName, ExtractQueryInputKeys<TQuery>>] extends [never]
+    ? Pass
+    : {
+        __queryInputError: `Some metadata field names are not present in QueryInput keys. Missing: ${Exclude<TFieldName, ExtractQueryInputKeys<TQuery>> & string}`;
+      }
+  : Pass;
+
+/**
+ * Validate that a query document is compatible with `useCollection`.
+ *
+ * When gql-tada type information is available (i.e. `ExtractQueryVariables`
+ * does not resolve to `never`), this type performs compile-time checks by
+ * intersecting independent rule types:
+ *
+ * 1. **`CheckFirstVariable`** — `$first` must exist.
+ * 2. **`CheckOrderField`** — OrderInput field compatibility (metadata-aware).
+ * 3. **`CheckQueryInput`** — QueryInput key compatibility (metadata-aware).
+ *
+ * Each rule resolves to `{}` on pass or `{ __xxxError: "…" }` on fail.
+ * A failing rule adds a phantom error property that makes `TQuery`
+ * incompatible with the actual value, producing a compile error.
+ *
+ * When gql-tada is not used (plain `DocumentNode`), all checks are skipped.
+ *
+ * @typeParam TQuery - The query document type (e.g. `typeof GET_ORDERS`).
+ * @typeParam TFieldName - Union of metadata field names (default: `string`,
+ *                         which disables metadata-aware checks).
+ */
+export type ValidateCollectionQuery<
+  TQuery,
+  TFieldName extends string = string,
+> =
+  ExtractQueryVariables<TQuery> extends never
+    ? TQuery // No gql-tada type info → skip validation
+    : string extends TFieldName
+      ? TQuery & CheckFirstVariable<TQuery> // No metadata → only check $first
+      : TQuery &
+          CheckFirstVariable<TQuery> &
+          CheckOrderField<TQuery, TFieldName> &
+          CheckQueryInput<TQuery, TFieldName>;
+
+/**
+ * Helper to check whether a `ValidateCollectionQuery` result contains any
+ * validation error.  Use this in type-level assertions instead of checking
+ * individual error keys.
+ */
+export type HasCollectionQueryError<T> = T extends
+  | { __firstVariableError: string }
+  | { __orderFieldError: string }
+  | { __queryInputError: string }
+  ? true
+  : false;
+
 /**
  * Find table names in metadata whose fields are a superset of `TFieldName`.
  *
@@ -762,7 +910,7 @@ export interface SearchFilterFormProps<TRow extends Record<string, unknown>> {
   /** Current active filters */
   filters: Filter[];
   /** Add or update a filter */
-  addFilter: (field: string, value: unknown, operator?: FilterOperator) => void;
+  addFilter: (field: string, operator: FilterOperator, value: unknown) => void;
   /** Remove a filter */
   removeFilter: (field: string) => void;
   /** Clear all filters */