@izumisy-tailor/tailor-data-viewer 0.2.33 → 0.3.0

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

@@ -1,304 +1,168 @@
 /**
- * Compile-time type tests for `ValidateCollectionQuery`.
+ * Compile-time type tests for `BuildQueryVariables`.
  *
- * These tests verify that `useCollection` produces type errors when the
- * query document's variables are incompatible with the collection's
- * metadata fields.
+ * These tests verify that `BuildQueryVariables` produces the correct
+ * filter input types from table metadata.
  *
  * 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,
+  BuildQueryVariables,
+  TableFieldName,
+  TableOrderableFieldName,
 } 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";
+import type { TableMetadata } from "../../generator/metadata-generator";
+
+// =============================================================================
+// 1. BuildQueryVariables produces correct filter types per field type
+// =============================================================================
+
+type TestTable = {
+  readonly name: "test";
+  readonly pluralForm: "tests";
+  readonly readAllowedRoles: readonly [];
+  readonly fields: readonly [
+    { readonly name: "id"; readonly type: "uuid"; readonly required: true },
+    {
+      readonly name: "title";
+      readonly type: "string";
+      readonly required: true;
+    },
+    {
+      readonly name: "amount";
+      readonly type: "number";
+      readonly required: false;
+    },
+    {
+      readonly name: "status";
+      readonly type: "enum";
+      readonly required: true;
+      readonly enumValues: readonly ["active", "inactive"];
+    },
+    {
+      readonly name: "isActive";
+      readonly type: "boolean";
+      readonly required: false;
+    },
+    {
+      readonly name: "createdAt";
+      readonly type: "datetime";
+      readonly required: false;
+    },
+    { readonly name: "tags"; readonly type: "array"; readonly required: false },
+    {
+      readonly name: "config";
+      readonly type: "nested";
+      readonly required: false;
+    },
+  ];
 };
 
-// =============================================================================
-// 1. Variable key checks
-// =============================================================================
-
-// ✅ Query with standard Tailor variables should pass
-type DocOk = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: 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;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown } | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type Fail1 = ValidateCollectionQuery<DocNoFirst, "name">;
-type AssertFail1 = HasCollectionQueryError<Fail1> extends true ? true : never;
-export const assertFail1: AssertFail1 = true;
-
-// ❌ Query missing $after should fail
-type DocNoAfter = FakeDoc<{
-  first?: number | null;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown } | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type FailNoAfter = ValidateCollectionQuery<DocNoAfter, "name">;
-type AssertFailNoAfter =
-  HasCollectionQueryError<FailNoAfter> extends true ? true : never;
-export const assertFailNoAfter: AssertFailNoAfter = true;
-
-// ❌ Query missing $last should fail
-type DocNoLast = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  before?: string | null;
-  query?: { name?: unknown } | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type FailNoLast = ValidateCollectionQuery<DocNoLast, "name">;
-type AssertFailNoLast =
-  HasCollectionQueryError<FailNoLast> extends true ? true : never;
-export const assertFailNoLast: AssertFailNoLast = true;
-
-// ❌ Query missing $before should fail
-type DocNoBefore = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  query?: { name?: unknown } | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type FailNoBefore = ValidateCollectionQuery<DocNoBefore, "name">;
-type AssertFailNoBefore =
-  HasCollectionQueryError<FailNoBefore> extends true ? true : never;
-export const assertFailNoBefore: AssertFailNoBefore = true;
-
-// ❌ Query missing $query should fail
-type DocNoQuery = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type FailNoQuery = ValidateCollectionQuery<DocNoQuery, "name">;
-type AssertFailNoQuery =
-  HasCollectionQueryError<FailNoQuery> extends true ? true : never;
-export const assertFailNoQuery: AssertFailNoQuery = true;
-
-// ❌ Query missing $order should fail
-type DocNoOrder = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown } | null;
-}>;
-type FailNoOrder = ValidateCollectionQuery<DocNoOrder, "name">;
-type AssertFailNoOrder =
-  HasCollectionQueryError<FailNoOrder> extends true ? true : never;
-export const assertFailNoOrder: AssertFailNoOrder = true;
-
-// =============================================================================
-// 2. OrderInput field compatibility
-// =============================================================================
-
-// ❌ Metadata has "name" | "email" but OrderInput only allows "name"
-type DocNarrowOrder = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown; email?: unknown } | 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;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown; email?: unknown } | 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;
-  after?: string | null;
-  last?: number | null;
-  before?: string | 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;
-  after?: string | null;
-  last?: number | null;
-  before?: string | 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) — now caught because $query
-// is required.
-type DocFilterTypo = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  filter?: { name?: unknown } | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type Typo1 = ValidateCollectionQuery<DocFilterTypo, "name">;
-type AssertTypo1 = HasCollectionQueryError<Typo1> extends true ? true : never;
-export const assertTypo1: AssertTypo1 = true;
-
-// ❌ Query uses $queryy instead of $query (typo) — now caught
-type DocQueryTypo = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  queryy?: { name?: unknown } | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type Typo2 = ValidateCollectionQuery<DocQueryTypo, "name">;
-type AssertTypo2 = HasCollectionQueryError<Typo2> extends true ? true : never;
-export const assertTypo2: AssertTypo2 = 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 but
-//    variable existence is still required
-// =============================================================================
-
-type Pass6 = ValidateCollectionQuery<DocOk>;
-type AssertPass6 = HasCollectionQueryError<Pass6> extends true ? never : true;
-export const assertPass6: AssertPass6 = true;
-
-// ❌ No metadata but missing $query — still fails
-type DocNoMetaNoQuery = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  order?: readonly { field?: "name" | null }[] | null;
-}>;
-type Fail6 = ValidateCollectionQuery<DocNoMetaNoQuery>;
-type AssertFail6 = HasCollectionQueryError<Fail6> extends true ? true : never;
-export const assertFail6: AssertFail6 = 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. Missing $query — now fails (previously was "Mixed: $order only")
-// =============================================================================
-
-// ❌ Missing $query variable
-type DocOrderOnly = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  order?: readonly { field?: "name" | "email" | null }[] | null;
-}>;
-type Fail8 = ValidateCollectionQuery<DocOrderOnly, "name" | "email">;
-type AssertFail8 = HasCollectionQueryError<Fail8> extends true ? true : never;
-export const assertFail8: AssertFail8 = true;
-
-// =============================================================================
-// 9. Missing $order — now fails (previously was "Mixed: $query only")
-// =============================================================================
-
-// ❌ Missing $order variable
-type DocQueryOnly = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown; email?: unknown } | null;
-}>;
-type Fail9 = ValidateCollectionQuery<DocQueryOnly, "name" | "email">;
-type AssertFail9 = HasCollectionQueryError<Fail9> extends true ? true : never;
-export const assertFail9: AssertFail9 = true;
-
-// ❌ Missing $order, and query keys don't cover metadata fields
-type DocQueryOnlyMissing = FakeDoc<{
-  first?: number | null;
-  after?: string | null;
-  last?: number | null;
-  before?: string | null;
-  query?: { name?: unknown } | null;
-}>;
-type Fail9b = ValidateCollectionQuery<DocQueryOnlyMissing, "name" | "email">;
-type AssertFail9b = HasCollectionQueryError<Fail9b> extends true ? true : never;
-export const assertFail9b: AssertFail9b = true;
+// Verify TestTable is assignable to TableMetadata
+type AssertValidTable = TestTable extends TableMetadata ? true : never;
+export const assertValidTable: AssertValidTable = true;
+
+type TestQuery = BuildQueryVariables<TestTable>;
+
+// ✅ String fields produce string operators
+type AssertStringField = TestQuery extends {
+  title?: { eq?: string; contains?: string };
+}
+  ? true
+  : never;
+export const assertStringField: AssertStringField = true;
+
+// ✅ Number fields produce number operators with between
+type AssertNumberField = TestQuery extends {
+  amount?: { eq?: number; gt?: number; between?: { min: number; max: number } };
+}
+  ? true
+  : never;
+export const assertNumberField: AssertNumberField = true;
+
+// ✅ Enum fields produce in/nin with string arrays
+type AssertEnumField = TestQuery extends {
+  status?: { eq?: string; in?: string[]; nin?: string[] };
+}
+  ? true
+  : never;
+export const assertEnumField: AssertEnumField = true;
+
+// ✅ Boolean fields produce eq/ne operators
+type AssertBooleanField = TestQuery extends {
+  isActive?: { eq?: boolean; ne?: boolean };
+}
+  ? true
+  : never;
+export const assertBooleanField: AssertBooleanField = true;
+
+// ✅ UUID fields produce eq/ne/in/nin operators
+type AssertUuidField = TestQuery extends {
+  id?: { eq?: string; ne?: string; in?: string[]; nin?: string[] };
+}
+  ? true
+  : never;
+export const assertUuidField: AssertUuidField = true;
+
+// ✅ Datetime fields produce date operators
+type AssertDatetimeField = TestQuery extends {
+  createdAt?: {
+    eq?: string;
+    gt?: string;
+    between?: { min: string; max: string };
+  };
+}
+  ? true
+  : never;
+export const assertDatetimeField: AssertDatetimeField = true;
+
+// ✅ Array and nested fields are excluded (not filterable)
+type AssertNoArrayField = "tags" extends keyof TestQuery ? never : true;
+export const assertNoArrayField: AssertNoArrayField = true;
+
+type AssertNoNestedField = "config" extends keyof TestQuery ? never : true;
+export const assertNoNestedField: AssertNoNestedField = true;
+
+// =============================================================================
+// 2. TableFieldName extracts all field names
+// =============================================================================
+
+type TestFieldNames = TableFieldName<TestTable>;
+type AssertFieldNames =
+  | "id"
+  | "title"
+  | "amount"
+  | "status"
+  | "isActive"
+  | "createdAt"
+  | "tags"
+  | "config" extends TestFieldNames
+  ? true
+  : never;
+export const assertFieldNames: AssertFieldNames = true;
+
+// =============================================================================
+// 3. TableOrderableFieldName excludes non-orderable types
+// =============================================================================
+
+type TestOrderableNames = TableOrderableFieldName<TestTable>;
+
+// uuid is NOT orderable
+type AssertNoUuidOrder = "id" extends TestOrderableNames ? never : true;
+export const assertNoUuidOrder: AssertNoUuidOrder = true;
+
+// array and nested are NOT orderable
+type AssertNoArrayOrder = "tags" extends TestOrderableNames ? never : true;
+export const assertNoArrayOrder: AssertNoArrayOrder = true;
+
+// string, number, enum, boolean, datetime ARE orderable
+type AssertStringOrderable = "title" extends TestOrderableNames ? true : never;
+export const assertStringOrderable: AssertStringOrderable = true;
+
+type AssertNumberOrderable = "amount" extends TestOrderableNames ? true : never;
+export const assertNumberOrderable: AssertNumberOrderable = true;
+
+type AssertEnumOrderable = "status" extends TestOrderableNames ? true : never;
+export const assertEnumOrderable: AssertEnumOrderable = true;

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

@@ -8,7 +8,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/utils";
-import { CollectionProvider } from "../collection/collection-provider";
+import { CollectionVariablesProvider } from "../collection/collection-provider";
 import { Table } from "../table";
 import type { RowAction, SortConfig, UseDataTableReturn } from "../types";
 import {
@@ -53,14 +53,14 @@ function DataTableRoot({
 /**
  * Provider that shares `useDataTable()` state via React Context.
  *
- * Internally provides both `DataTableContext` and `CollectionContext`
+ * Internally provides both `DataTableContext` and `CollectionVariablesContext`
  * so that utility components (`Pagination`, `ColumnSelector`,
  * `SearchFilterForm`, `CsvButton`) can consume data without explicit props.
  *
  * @example
  * ```tsx
- * const collection = useCollection({ query: GET_ORDERS, params: { pageSize: 20 } });
- * const [result] = useQuery({ ...collection.toQueryArgs() });
+ * const { variables, ...collection } = useCollectionVariables({ params: { pageSize: 20 } });
+ * const [result] = useQuery({ query: GET_ORDERS, variables: { ...variables.pagination, query: variables.query, order: variables.order } });
  * const table = useDataTable({ columns, data: result.data?.orders, collection });
  *
  * <DataTable.Provider value={table}>
@@ -110,10 +110,12 @@ function DataTableProviderComponent<TRow extends Record<string, unknown>>({
     </DataTableContext.Provider>
   );
 
-  // Wrap with CollectionContext when collection is available
+  // Wrap with CollectionVariablesContext when collection is available
   if (collectionValue) {
     return (
-      <CollectionProvider value={collectionValue}>{inner}</CollectionProvider>
+      <CollectionVariablesProvider value={collectionValue}>
+        {inner}
+      </CollectionVariablesProvider>
     );
   }
 

package/src/component/data-table/i18n.ts

@@ -85,15 +85,18 @@ const en: DataTableLabels = {
       eq: "=",
       ne: "≠",
       contains: "contains",
-      startsWith: "starts with",
-      endsWith: "ends with",
+      notContains: "not contains",
+      hasPrefix: "starts with",
+      hasSuffix: "ends with",
+      notHasPrefix: "not starts with",
+      notHasSuffix: "not ends with",
       gt: ">",
       gte: "≥",
       lt: "<",
       lte: "≤",
       between: "between",
       in: "in",
-      notIn: "not in",
+      nin: "not in",
     },
   },
 };
@@ -133,15 +136,18 @@ const ja: DataTableLabels = {
       eq: "等しい",
       ne: "等しくない",
       contains: "含む",
-      startsWith: "で始まる",
-      endsWith: "で終わる",
+      notContains: "含まない",
+      hasPrefix: "で始まる",
+      hasSuffix: "で終わる",
+      notHasPrefix: "で始まらない",
+      notHasSuffix: "で終わらない",
       gt: "より大きい",
       gte: "以上",
       lt: "より小さい",
       lte: "以下",
       between: "範囲内",
       in: "含まれる",
-      notIn: "含まれない",
+      nin: "含まれない",
     },
   },
 };

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

@@ -1,5 +1,5 @@
 import { useDataTableContext } from "./data-table-context";
-import { useCollectionContext } from "../collection/collection-provider";
+import { useCollectionVariablesContext } from "../collection/collection-provider";
 import { getLabels } from "./i18n";
 
 // =============================================================================
@@ -112,7 +112,7 @@ const btnClass =
 /**
  * Pagination controls with first/prev/next/last navigation and page indicator.
  *
- * Reads pagination state from `DataTableContext` and `CollectionContext`.
+ * Reads pagination state from `DataTableContext` and `CollectionVariablesContext`.
  * Must be rendered inside `DataTable.Provider` but **outside** `DataTable.Root`.
  *
  * @example
@@ -139,7 +139,7 @@ export function Pagination({ labels, pageSizeOptions }: PaginationProps = {}) {
     goToLastPage,
     pageSize,
     setPageSize,
-  } = useCollectionContext();
+  } = useCollectionVariablesContext();
 
   const pl = getLabels(locale).pagination;
   const firstLabel = labels?.first ?? pl.first;

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

@@ -14,7 +14,7 @@ import type {
 } from "../types";
 import { OPERATORS_BY_FILTER_TYPE } from "../types";
 import { useDataTableContext } from "./data-table-context";
-import { useCollectionContext } from "../collection/collection-provider";
+import { useCollectionVariablesContext } from "../collection/collection-provider";
 import { getLabels } from "./i18n";
 
 /**
@@ -22,7 +22,7 @@ import { getLabels } from "./i18n";
  *
  * Renders a dropdown panel with type-specific filter inputs, operator
  * selectors, and active filter badges.  Reads `columns` from
- * `DataTableContext` and filter state from `CollectionContext`.
+ * `DataTableContext` and filter state from `CollectionVariablesContext`.
  * Must be rendered inside `DataTable.Provider`.
  *
  * All text is customisable through the optional `labels` prop (defaults
@@ -46,7 +46,7 @@ export function SearchFilterForm({
 } = {}) {
   const { columns, locale } = useDataTableContext();
   const { filters, addFilter, removeFilter, clearFilters } =
-    useCollectionContext();
+    useCollectionVariablesContext();
   const sf = getLabels(locale).searchFilter;
   const filterableColumns = columns.filter((col) => !!col.filter);
 

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

@@ -13,8 +13,12 @@ import type {
  *
  * @example
  * ```tsx
- * const collection = useCollection({ query: GET_ORDERS, params: { pageSize: 20 } });
- * const [result] = useQuery({ ...collection.toQueryArgs() });
+ * const { variables, ...collection } = useCollectionVariables({ params: { pageSize: 20 } });
+ * const { query, order, pagination } = variables;
+ * const [result] = useQuery({
+ *   query: GET_ORDERS,
+ *   variables: { ...pagination, query, order },
+ * });
  *
  * const table = useDataTable<Order>({
  *   columns,

package/src/component/index.ts

@@ -8,6 +8,9 @@ export type {
   SortState,
   PageInfo,
   QueryVariables,
+  PaginationVariables,
+  CollectionVariables,
+  BuildQueryVariables,
   CollectionResult,
   NodeType,
   ColumnOptions,
@@ -23,11 +26,6 @@ export type {
   TableFieldName,
   OrderableFieldName,
   TableOrderableFieldName,
-  ExtractOrderField,
-  ExtractQueryVariables,
-  ExtractQueryInputKeys,
-  ValidateCollectionQuery,
-  HasCollectionQueryError,
   MatchingTableName,
   MetadataFieldOptions,
   MetadataFieldsOptions,
@@ -44,11 +42,10 @@ export {
 } from "./types";
 
 // Collection
-export { useCollection } from "./collection/use-collection";
+export { useCollectionVariables } from "./collection/use-collection";
 export {
-  Collection,
-  CollectionProvider,
-  useCollectionContext,
+  CollectionVariablesProvider,
+  useCollectionVariablesContext,
 } from "./collection/collection-provider";
 
 // Table (static)