@izumisy-tailor/tailor-data-viewer 0.1.5 → 0.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [
@@ -46,6 +46,7 @@
     "graphql-request": "^6.1.0",
     "idb": "^8.0.3",
     "lucide-react": "^0.468.0",
+    "raku-ql": "^1.4.0",
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
@@ -70,10 +71,12 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsdown": "^0.20.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "build": "tsdown",
-    "type-check": "tsc -b"
+    "type-check": "tsc -b",
+    "test": "vitest run"
   }
 }

package/src/app-shell/create-data-view-module.tsx

@@ -1,9 +1,28 @@
-import { defineModule, defineResource } from "@tailor-platform/app-shell";
-import { Database } from "lucide-react";
+import {
+  defineModule,
+  defineResource,
+  useNavigate,
+  useSearchParams,
+  Link,
+} from "@tailor-platform/app-shell";
+import {
+  Database,
+  Trash2,
+  Calendar,
+  Filter,
+  Columns,
+  LayoutGrid,
+} from "lucide-react";
 import type { DataViewModuleConfig } from "./types";
 import { isStoreFactory } from "./types";
 import { DataViewer } from "../component/data-viewer";
-import { SavedViewProvider } from "../component/saved-view-context";
+import {
+  SavedViewProvider,
+  useSavedViews,
+} from "../component/saved-view-context";
+import { Card, CardContent, CardHeader, CardTitle } from "../component/ui/card";
+import { Button } from "../component/ui/button";
+import { Badge } from "../component/ui/badge";
 
 /**
  * Create a DataView module for use with AppShell
@@ -42,22 +61,130 @@ export function createDataViewModule(config: DataViewModuleConfig) {
 
   // Create the explorer resource page component
   const ExplorerPage = () => {
+    const [searchParams] = useSearchParams();
+    const viewId = searchParams.get("viewId") ?? undefined;
+
     return (
       <SavedViewProvider store={store}>
-        <DataViewer tableMetadata={tableMetadata} appUri={appUri} />
+        <DataViewer
+          tableMetadata={tableMetadata}
+          appUri={appUri}
+          initialViewId={viewId}
+        />
       </SavedViewProvider>
     );
   };
 
+  // Saved views list component (used inside ModulePage)
+  const SavedViewsList = ({
+    explorerFullPath,
+  }: {
+    explorerFullPath: string;
+  }) => {
+    const { views, deleteView } = useSavedViews();
+    const navigate = useNavigate();
+
+    const handleOpenView = (viewId: string) => {
+      navigate(`${explorerFullPath}?viewId=${viewId}`);
+    };
+
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <LayoutGrid className="size-5" />
+            保存済みビュー
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {views.length === 0 ? (
+            <div className="py-8 text-center">
+              <div className="text-muted-foreground mb-4">
+                保存されたビューはありません
+              </div>
+              <Link to={explorerFullPath}>
+                <Button variant="outline">
+                  <Database className="mr-2 size-4" />
+                  Data View Explorer を開く
+                </Button>
+              </Link>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {views.map((savedView) => (
+                <div
+                  key={savedView.id}
+                  className="hover:bg-muted flex cursor-pointer items-center justify-between rounded-lg border p-4 transition-colors"
+                  onClick={() => handleOpenView(savedView.id)}
+                >
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{savedView.name}</span>
+                      <Badge variant="secondary">{savedView.tableName}</Badge>
+                    </div>
+                    <div className="text-muted-foreground mt-1 flex items-center gap-4 text-sm">
+                      <span className="flex items-center gap-1">
+                        <Filter className="size-3" />
+                        {savedView.filters.length} フィルター
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Columns className="size-3" />
+                        {savedView.selectedFields.length} カラム
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="size-3" />
+                        {savedView.createdAt.toLocaleString()}
+                      </span>
+                    </div>
+                    {savedView.filters.length > 0 && (
+                      <div className="mt-2 flex flex-wrap gap-1">
+                        {savedView.filters.map((filter) => (
+                          <Badge
+                            key={filter.field}
+                            variant="outline"
+                            className="text-xs"
+                          >
+                            {filter.field}=
+                            {typeof filter.value === "boolean"
+                              ? filter.value
+                                ? "true"
+                                : "false"
+                              : filter.value}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deleteView(savedView.id);
+                    }}
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    );
+  };
+
   // Create the module page component
+  const explorerFullPath = `/${basePath}/${explorerPath}`;
+
   const ModulePage = () => {
     return (
-      <div className="space-y-4">
-        <h1 className="text-2xl font-bold">{title}</h1>
-        <p className="text-muted-foreground">
-          データビューでテーブルを探索できます。
-        </p>
-      </div>
+      <SavedViewProvider store={store}>
+        <div className="space-y-6">
+          <SavedViewsList explorerFullPath={explorerFullPath} />
+        </div>
+      </SavedViewProvider>
     );
   };
 

package/src/component/data-table.tsx

@@ -23,7 +23,7 @@ import type {
   TableMetadataMap,
   ExpandedRelationFields,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../utils/query-builder";
+import { formatFieldValue } from "../graphql/query-builder";
 import type { SortState } from "./hooks/use-table-data";
 import { useRelationData } from "./hooks/use-relation-data";
 import { RelationContent } from "./relation-content";

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

@@ -7,7 +7,7 @@ import type {
   TableMetadataMap,
   FieldMetadata,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../utils/query-builder";
+import { formatFieldValue } from "../graphql/query-builder";
 import { TableSelector } from "./table-selector";
 import { ColumnSelector } from "./column-selector";
 import { DataTable } from "./data-table";

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

@@ -7,7 +7,7 @@ import type {
 import {
   createGraphQLClient,
   executeQuery,
-} from "../../providers/graphql-client";
+} from "../../graphql/graphql-client";
 
 /**
  * Cache entry for relation data

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

@@ -7,12 +7,12 @@ import type {
 import {
   createGraphQLClient,
   executeQuery,
-} from "../../providers/graphql-client";
+} from "../../graphql/graphql-client";
 import {
   buildListQuery,
   type RelationTotalInfo,
   type ExpandedRelationInfo,
-} from "../../utils/query-builder";
+} from "../../graphql/query-builder";
 import type { SearchFilters } from "../types";
 
 export interface SortState {

package/src/component/relation-content.tsx

@@ -14,7 +14,7 @@ import type {
   RelationMetadata,
   FieldMetadata,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../utils/query-builder";
+import { formatFieldValue } from "../graphql/query-builder";
 import type { RelationDataResult } from "./hooks/use-relation-data";
 
 interface RelationContentProps {

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

@@ -16,8 +16,8 @@ import type {
   TableMetadataMap,
   FieldMetadata,
 } from "../generator/metadata-generator";
-import { createGraphQLClient, executeQuery } from "../providers/graphql-client";
-import { formatFieldValue } from "../utils/query-builder";
+import { createGraphQLClient, executeQuery } from "../graphql/graphql-client";
+import { formatFieldValue } from "../graphql/query-builder";
 import { ColumnSelector } from "./column-selector";
 import { useColumnState } from "./hooks/use-column-state";
 

package/src/graphql/index.ts

@@ -0,0 +1,6 @@
+/**
+ * GraphQL utilities and client
+ */
+
+export * from "./graphql-client";
+export * from "./query-builder";

package/src/graphql/query-builder.test.ts

@@ -0,0 +1,238 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildListQuery,
+  getDefaultSelectedFields,
+  getSelectableFields,
+  formatFieldValue,
+} from "./query-builder";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  RelationMetadata,
+} from "../generator/metadata-generator";
+
+describe("query-builder", () => {
+  describe("buildListQuery", () => {
+    it("should build a basic list query", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name", "status", "createdAt"],
+      });
+
+      // gql-query-builder outputs with spaces, so we use regex patterns
+      expect(query).toMatch(/query\s+TaskList\s*\(\$query:\s*TaskQueryInput\)/);
+      expect(query).toContain("tasks(query: $query)");
+      expect(query).toContain("name");
+      expect(query).toContain("status");
+      expect(query).toContain("createdAt");
+      expect(query).toContain("pageInfo");
+      expect(query).toContain("hasNextPage");
+      expect(query).toContain("endCursor");
+    });
+
+    it("should include orderBy when specified", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        orderBy: { field: "createdAt", direction: "Desc" },
+      });
+
+      // Variable should include order with array type
+      expect(query).toMatch(/\$order:\s*\[TaskOrderInput!\]/);
+      // Operation should use variable reference
+      expect(query).toContain("order: $order");
+    });
+
+    it("should include pagination arguments", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        first: 10,
+        after: "cursor123",
+      });
+
+      // Variables should include first and after
+      expect(query).toMatch(/\$first:\s*Int/);
+      expect(query).toMatch(/\$after:\s*String/);
+      // Operation should use variable references
+      expect(query).toContain("first: $first");
+      expect(query).toContain("after: $after");
+    });
+
+    it("should include oneToMany relation totals", () => {
+      const relation: RelationMetadata = {
+        fieldName: "taskAssignments",
+        targetTable: "taskAssignment",
+        relationType: "oneToMany",
+        foreignKeyField: "taskId",
+      };
+
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        oneToManyRelationTotals: [
+          { relation, targetPluralForm: "taskAssignments" },
+        ],
+      });
+
+      expect(query).toContain("taskAssignments(first: 0)");
+      expect(query).toContain("total");
+    });
+
+    it("should include expanded manyToOne relations", () => {
+      const relation: RelationMetadata = {
+        fieldName: "user",
+        targetTable: "user",
+        relationType: "manyToOne",
+        foreignKeyField: "userId",
+      };
+
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        expandedManyToOneRelations: [
+          { relation, selectedFields: ["email", "displayName"] },
+        ],
+      });
+
+      expect(query).toContain("user {");
+      expect(query).toContain("email");
+      expect(query).toContain("displayName");
+    });
+
+    it("should handle PascalCase conversion for table names", () => {
+      const query = buildListQuery({
+        tableName: "taskAssignment",
+        pluralForm: "taskAssignments",
+        selectedFields: ["id"],
+      });
+
+      expect(query).toMatch(
+        /query\s+TaskAssignmentList\s*\(\$query:\s*TaskAssignmentQueryInput\)/,
+      );
+    });
+  });
+
+  describe("getDefaultSelectedFields", () => {
+    it("should exclude nested and array fields", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "name", type: "string", required: true },
+          { name: "metadata", type: "nested", required: false },
+          { name: "tags", type: "array", required: false },
+        ],
+      };
+
+      const fields = getDefaultSelectedFields(table);
+      expect(fields).toEqual(["name"]);
+    });
+
+    it("should exclude id fields", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "userId", type: "uuid", required: false },
+          { name: "status", type: "string", required: true },
+        ],
+      };
+
+      const fields = getDefaultSelectedFields(table);
+      expect(fields).toEqual(["name", "status"]);
+    });
+  });
+
+  describe("getSelectableFields", () => {
+    it("should return all fields except nested types", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "metadata", type: "nested", required: false },
+          { name: "count", type: "number", required: false },
+        ],
+      };
+
+      const fields = getSelectableFields(table);
+      expect(fields.map((f) => f.name)).toEqual(["id", "name", "count"]);
+    });
+  });
+
+  describe("formatFieldValue", () => {
+    it("should return '-' for null or undefined", () => {
+      const field: FieldMetadata = {
+        name: "test",
+        type: "string",
+        required: false,
+      };
+      expect(formatFieldValue(null, field)).toBe("-");
+      expect(formatFieldValue(undefined, field)).toBe("-");
+    });
+
+    it("should format boolean as Japanese text", () => {
+      const field: FieldMetadata = {
+        name: "active",
+        type: "boolean",
+        required: false,
+      };
+      expect(formatFieldValue(true, field)).toBe("はい");
+      expect(formatFieldValue(false, field)).toBe("いいえ");
+    });
+
+    it("should format number with locale", () => {
+      const field: FieldMetadata = {
+        name: "count",
+        type: "number",
+        required: false,
+      };
+      expect(formatFieldValue(1234567, field)).toBe("1,234,567");
+    });
+
+    it("should truncate UUID", () => {
+      const field: FieldMetadata = { name: "id", type: "uuid", required: true };
+      const uuid = "550e8400-e29b-41d4-a716-446655440000";
+      expect(formatFieldValue(uuid, field)).toBe("550e8400...");
+    });
+
+    it("should format array values", () => {
+      const field: FieldMetadata = {
+        name: "tags",
+        type: "array",
+        required: false,
+      };
+      expect(formatFieldValue(["a", "b", "c"], field)).toBe("a, b, c");
+    });
+
+    it("should format time as string", () => {
+      const field: FieldMetadata = {
+        name: "startTime",
+        type: "time",
+        required: false,
+      };
+      expect(formatFieldValue("14:30:00", field)).toBe("14:30:00");
+    });
+
+    it("should return string as-is for string type", () => {
+      const field: FieldMetadata = {
+        name: "name",
+        type: "string",
+        required: true,
+      };
+      expect(formatFieldValue("Hello World", field)).toBe("Hello World");
+    });
+  });
+});

package/src/{utils → graphql}/query-builder.ts

@@ -1,3 +1,4 @@
+import { QueryBuilder } from "raku-ql";
 import type {
   TableMetadata,
   FieldMetadata,
@@ -65,63 +66,70 @@ export function buildListQuery(options: QueryOptions): string {
   // GraphQL type names need PascalCase
   const typeName = toPascalCase(tableName);
 
-  // Build order clause if specified
-  const orderArg = orderBy
-    ? `, order: [{ field: ${typeName}OrderFields.${orderBy.field}, direction: OrderDirection.${orderBy.direction} }]`
-    : "";
-
-  // Build pagination arguments
-  const firstArg = first !== undefined ? `, first: ${first}` : "";
-  const afterArg = after !== undefined ? `, after: "${after}"` : "";
-
-  // Build oneToMany relation total fields (fetching only total for display before expansion)
-  // These are nested connection queries that get total count for each parent record
-  const relationTotalFields =
-    oneToManyRelationTotals
-      ?.map((info) => {
-        return `${info.relation.fieldName}(first: 0) {
-              total
-            }`;
-      })
-      .join("\n            ") ?? "";
-
-  // Build expanded manyToOne relation fields (inline object fetching)
-  const expandedRelationFields =
-    expandedManyToOneRelations
-      ?.filter((info) => info.selectedFields.length > 0)
-      .map((info) => {
-        const nestedFields = info.selectedFields.join("\n              ");
-        return `${info.relation.fieldName} {
-              ${nestedFields}
-            }`;
-      })
-      .join("\n            ") ?? "";
-
-  // Format fields with proper indentation
-  const fieldsStr = selectedFields.join("\n            ");
-  let allFieldsStr = fieldsStr;
-  if (relationTotalFields) {
-    allFieldsStr = `${allFieldsStr}\n            ${relationTotalFields}`;
+  // Build variables definition
+  const variables: Record<string, string> = {
+    query: `${typeName}QueryInput`,
+  };
+
+  // Build operation arguments using variable references
+  const operationArgs: Record<string, string> = {
+    query: "$query",
+  };
+
+  if (orderBy) {
+    // Use a single order variable with the full array type
+    variables.order = `[${typeName}OrderInput!]`;
+    operationArgs.order = "$order";
   }
-  if (expandedRelationFields) {
-    allFieldsStr = `${allFieldsStr}\n            ${expandedRelationFields}`;
+
+  if (first !== undefined) {
+    variables.first = "Int";
+    operationArgs.first = "$first";
+  }
+
+  if (after !== undefined) {
+    variables.after = "String";
+    operationArgs.after = "$after";
   }
 
-  return `
-    query ${typeName}List($query: ${typeName}QueryInput) {
-      ${pluralForm}(query: $query${orderArg}${firstArg}${afterArg}) {
-        edges {
-          node {
-            ${allFieldsStr}
+  // Build the query using raku-ql
+  const builder = QueryBuilder.query(`${typeName}List`).variables(variables);
+
+  // Use operation method for root-level query with arguments
+  builder.operation(pluralForm, operationArgs, (op) => {
+    op.object("edges", (edges) => {
+      edges.object("node", (node) => {
+        // Add selected fields
+        node.fields(...(selectedFields as []));
+
+        // Add oneToMany relation totals with arguments
+        if (oneToManyRelationTotals) {
+          for (const info of oneToManyRelationTotals) {
+            node.object(info.relation.fieldName, { first: 0 }, (rel) => {
+              rel.fields("total");
+            });
           }
         }
-        pageInfo {
-          hasNextPage
-          endCursor
+
+        // Add expanded manyToOne relations
+        if (expandedManyToOneRelations) {
+          for (const info of expandedManyToOneRelations) {
+            if (info.selectedFields.length > 0) {
+              node.object(info.relation.fieldName, (rel) => {
+                rel.fields(...(info.selectedFields as []));
+              });
+            }
+          }
         }
-      }
-    }
-  `.trim();
+      });
+    });
+
+    op.object("pageInfo", (pageInfo) => {
+      pageInfo.fields("hasNextPage", "endCursor");
+    });
+  });
+
+  return builder.build();
 }
 
 /**