@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/table-selector.tsx

@@ -0,0 +1,102 @@
+import { Database } from "lucide-react";
+import type { TableMetadata } from "../types/table-metadata";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+interface TableSelectorProps {
+  tables: TableMetadata[];
+  selectedTable: TableMetadata | null;
+  onSelect: (table: TableMetadata) => void;
+  centered?: boolean;
+}
+
+/**
+ * Dropdown selector for choosing a table to view
+ */
+export function TableSelector({
+  tables,
+  selectedTable,
+  onSelect,
+  centered = false,
+}: TableSelectorProps) {
+  const handleValueChange = (tableName: string) => {
+    const table = tables.find((t) => t.name === tableName);
+    if (table) {
+      onSelect(table);
+    }
+  };
+
+  // Empty state: show centered dropdown with icon and description
+  if (centered) {
+    return (
+      <div className="flex flex-col items-center space-y-4">
+        <div className="text-center">
+          <Database className="text-muted-foreground mx-auto mb-2 h-10 w-10" />
+          <h3 className="text-lg font-semibold">テーブルを選択</h3>
+          <p className="text-muted-foreground text-sm">
+            閲覧するテーブルを選択してください
+          </p>
+        </div>
+        <Select
+          value={selectedTable?.name ?? ""}
+          onValueChange={handleValueChange}
+        >
+          <SelectTrigger className="w-[400px]">
+            <SelectValue placeholder="テーブルを選択..." />
+          </SelectTrigger>
+          <SelectContent className="max-h-[400px]">
+            {tables.map((table) => (
+              <SelectItem
+                key={table.name}
+                value={table.name}
+                className="flex flex-col items-start py-2"
+              >
+                <div className="flex w-full flex-col gap-0.5">
+                  <span className="font-medium">{table.name}</span>
+                  {table.description && (
+                    <span className="text-muted-foreground text-xs">
+                      {table.description}
+                    </span>
+                  )}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-muted-foreground text-sm font-medium">
+        テーブル:
+      </label>
+      <Select
+        value={selectedTable?.name ?? ""}
+        onValueChange={handleValueChange}
+      >
+        <SelectTrigger className="w-[250px]">
+          <SelectValue placeholder="テーブルを選択..." />
+        </SelectTrigger>
+        <SelectContent>
+          {tables.map((table) => (
+            <SelectItem key={table.name} value={table.name}>
+              {table.name}
+              {table.description && (
+                <span className="text-muted-foreground ml-2 text-xs">
+                  ({table.description})
+                </span>
+              )}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/component/types.ts

@@ -0,0 +1,20 @@
+import type { FieldType } from "../types/table-metadata";
+
+/**
+ * Search filter condition for a single field
+ */
+export interface SearchFilter {
+  /** Field name to filter */
+  field: string;
+  /** Field type (determines UI input type and query format) */
+  fieldType: FieldType;
+  /** Filter value (string for string/number/enum, boolean for boolean) */
+  value: string | boolean;
+  /** Enum values (if fieldType is "enum") */
+  enumValues?: readonly string[];
+}
+
+/**
+ * Search filters state - a collection of filters to be applied with AND logic
+ */
+export type SearchFilters = SearchFilter[];

package/src/component/view-save-load.tsx

@@ -0,0 +1,112 @@
+import { useState, useCallback } from "react";
+import { Save, Filter, Columns } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import type { ExpandedRelationFields } from "../types/table-metadata";
+import { useSavedViews, type SaveViewInput } from "./saved-view-context";
+import type { SearchFilters } from "./types";
+
+interface ViewSaveProps {
+  tableName: string;
+  filters: SearchFilters;
+  selectedFields: string[];
+  selectedRelations: string[];
+  expandedRelationFields: ExpandedRelationFields;
+}
+
+/**
+ * View save control
+ * Allows saving views (filters + column selections)
+ */
+export function ViewSave({
+  tableName,
+  filters,
+  selectedFields,
+  selectedRelations,
+  expandedRelationFields,
+}: ViewSaveProps) {
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
+  const [viewName, setViewName] = useState("");
+
+  const { saveView } = useSavedViews();
+
+  const handleSaveView = useCallback(() => {
+    if (!viewName.trim()) return;
+
+    const input: SaveViewInput = {
+      name: viewName.trim(),
+      tableName,
+      filters,
+      selectedFields,
+      selectedRelations,
+      expandedRelationFields,
+    };
+    saveView(input);
+    setViewName("");
+    setSaveDialogOpen(false);
+  }, [
+    viewName,
+    tableName,
+    filters,
+    selectedFields,
+    selectedRelations,
+    expandedRelationFields,
+    saveView,
+  ]);
+
+  const canSave = filters.length > 0 || selectedFields.length > 0;
+
+  return (
+    <Dialog open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" disabled={!canSave}>
+          <Save className="mr-1 size-3" />
+          ビュー保存
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>ビューを保存</DialogTitle>
+          <DialogDescription>
+            現在の検索条件とカラム選択に名前を付けて保存します。
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <Input
+            placeholder="ビューの名前"
+            value={viewName}
+            onChange={(e) => setViewName(e.target.value)}
+          />
+          <div className="text-muted-foreground space-y-1 text-sm">
+            <div>テーブル: {tableName}</div>
+            <div className="flex items-center gap-1">
+              <Filter className="size-3" />
+              フィルター数: {filters.length}
+            </div>
+            <div className="flex items-center gap-1">
+              <Columns className="size-3" />
+              選択カラム数: {selectedFields.length}
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setSaveDialogOpen(false)}>
+            キャンセル
+          </Button>
+          <Button onClick={handleSaveView} disabled={!viewName.trim()}>
+            保存
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/generator/metadata-generator.ts

@@ -0,0 +1,461 @@
+/**
+ * Field type mapping for Data View
+ */
+export type FieldType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "uuid"
+  | "datetime"
+  | "date"
+  | "time"
+  | "enum"
+  | "array"
+  | "nested";
+
+/**
+ * Metadata for a single field
+ */
+export interface FieldMetadata {
+  name: string;
+  type: FieldType;
+  required: boolean;
+  enumValues?: readonly string[];
+  arrayItemType?: FieldType;
+  description?: string;
+  /** manyToOne relation info (if this field is a foreign key) */
+  relation?: {
+    /** GraphQL field name for the related object (e.g., "task") */
+    fieldName: string;
+    /** Target table name in camelCase (e.g., "task") */
+    targetTable: string;
+  };
+}
+
+/**
+ * Metadata for a relation
+ */
+export interface RelationMetadata {
+  /** GraphQL field name (e.g., "task" for manyToOne, "taskAssignments" for oneToMany) */
+  fieldName: string;
+  /** Target table name in camelCase (e.g., "task", "taskAssignment") */
+  targetTable: string;
+  /** Relation type */
+  relationType: "manyToOne" | "oneToMany";
+  /** For manyToOne: the FK field name (e.g., "taskId"). For oneToMany: the FK field on the child table */
+  foreignKeyField: string;
+  /** For manyToOne: the backward field name on the target type (used to generate oneToMany relation) */
+  backwardFieldName?: string;
+  /** True if this is a oneToOne relation (no inverse oneToMany should be generated) */
+  isOneToOne?: boolean;
+}
+
+/**
+ * Metadata for a single table
+ */
+export interface TableMetadata {
+  name: string;
+  pluralForm: string;
+  description?: string;
+  readAllowedRoles: string[];
+  fields: FieldMetadata[];
+  /** Relations (manyToOne and oneToMany) */
+  relations?: RelationMetadata[];
+}
+
+/**
+ * Map of all tables
+ */
+export type TableMetadataMap = Record<string, TableMetadata>;
+
+/**
+ * Intermediate type for processed table data
+ */
+interface ProcessedTable {
+  name: string;
+  pluralForm: string;
+  originalName: string; // PascalCase name for relation lookup
+  description?: string;
+  readAllowedRoles: string[];
+  fields: FieldMetadata[];
+  relations: RelationMetadata[];
+}
+
+/**
+ * Map TailorDB field type to FieldType
+ */
+function mapFieldType(
+  tailorType: string,
+  isArray?: boolean,
+): { type: FieldType; arrayItemType?: FieldType } {
+  const typeMap: Record<string, FieldType> = {
+    string: "string",
+    integer: "number",
+    float: "number",
+    boolean: "boolean",
+    uuid: "uuid",
+    datetime: "datetime",
+    date: "date",
+    time: "time",
+    enum: "enum",
+    nested: "nested",
+  };
+
+  const mappedType = typeMap[tailorType] ?? "string";
+
+  if (isArray) {
+    return { type: "array", arrayItemType: mappedType };
+  }
+
+  return { type: mappedType };
+}
+
+/**
+ * Convert PascalCase to camelCase
+ */
+function toCamelCase(str: string): string {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+/**
+ * Extract allowed roles from gql permission policies
+ * Only extracts roles from 'read' action policies with 'allow' permit
+ */
+function extractReadAllowedRoles(
+  gqlPermission?: readonly {
+    conditions: readonly unknown[];
+    actions: readonly ["all"] | readonly string[];
+    permit: "allow" | "deny";
+    description?: string;
+  }[],
+): string[] {
+  if (!gqlPermission) return [];
+
+  const roles = new Set<string>();
+
+  for (const policy of gqlPermission) {
+    // Only process 'allow' policies that include 'read' action
+    if (policy.permit !== "allow") continue;
+    const actions = policy.actions as readonly string[];
+    if (!actions.includes("all") && !actions.includes("read")) continue;
+
+    // Extract roles from conditions
+    for (const condition of policy.conditions) {
+      if (!Array.isArray(condition) || condition.length < 3) continue;
+
+      const [left, operator, right] = condition;
+
+      // Check for pattern: ["ROLE_NAME", "in", { user: "roles" }]
+      if (
+        typeof left === "string" &&
+        operator === "in" &&
+        typeof right === "object" &&
+        right !== null &&
+        "user" in right &&
+        (right as { user: string }).user === "roles"
+      ) {
+        roles.add(left);
+      }
+
+      // Check for pattern: [{ user: "roles" }, "in", "ROLE_NAME"] (reversed)
+      if (
+        typeof right === "string" &&
+        operator === "in" &&
+        typeof left === "object" &&
+        left !== null &&
+        "user" in left &&
+        (left as { user: string }).user === "roles"
+      ) {
+        roles.add(right);
+      }
+    }
+  }
+
+  return Array.from(roles);
+}
+
+/**
+ * Parsed field type from TailorDB
+ */
+interface ParsedFieldConfig {
+  type: string;
+  required?: boolean;
+  description?: string;
+  allowedValues?: ({ value: string } | string)[];
+  array?: boolean;
+  /** Raw relation configuration from TailorDB SDK */
+  rawRelation?: {
+    type: "manyToOne" | "n-1" | "oneToOne" | "1-1" | "keyOnly";
+    toward: {
+      /** Target type name (PascalCase) */
+      type: string;
+      /** GraphQL field alias for the relation */
+      as?: string;
+    };
+    /** Backward relation field name on the target type */
+    backward?: string;
+  };
+  /** Foreign key info */
+  foreignKey?: boolean;
+  foreignKeyType?: string;
+  foreignKeyField?: string;
+}
+
+/**
+ * Parsed field from TailorDB
+ */
+interface ParsedField {
+  name: string;
+  config: ParsedFieldConfig;
+}
+
+/**
+ * Parsed TailorDB type
+ */
+interface ParsedTailorDBType {
+  name: string;
+  pluralForm: string;
+  description?: string;
+  fields: Record<string, ParsedField>;
+  permissions: {
+    gql?: readonly GqlPermissionPolicy[];
+  };
+}
+
+/**
+ * GQL permission policy
+ */
+interface GqlPermissionPolicy {
+  conditions: readonly unknown[];
+  actions: readonly ["all"] | readonly string[];
+  permit: "allow" | "deny";
+  description?: string;
+}
+
+/**
+ * Generator input structure
+ */
+interface GeneratorInput {
+  tailordb: {
+    types: ProcessedTable[];
+  }[];
+}
+
+/**
+ * Generator result file
+ */
+interface GeneratorResultFile {
+  path: string;
+  content: string;
+  skipIfExists?: boolean;
+  executable?: boolean;
+}
+
+/**
+ * Generator result
+ */
+interface GeneratorResult {
+  files: GeneratorResultFile[];
+  errors?: string[];
+}
+
+/**
+ * Custom generator that extracts table metadata for Data View
+ */
+export const tableMetadataGenerator = {
+  id: "table-metadata",
+  description:
+    "Generates table metadata for Data View including field definitions and read permissions",
+  dependencies: ["tailordb"] as ("tailordb" | "resolver" | "executor")[],
+
+  processType({ type }: { type: ParsedTailorDBType }): ProcessedTable {
+    const fields: FieldMetadata[] = [];
+    const relations: RelationMetadata[] = [];
+
+    // Process each field
+    for (const [fieldName, field] of Object.entries(type.fields)) {
+      const config = field.config;
+
+      const { type: fieldType, arrayItemType } = mapFieldType(
+        config.type,
+        config.array,
+      );
+
+      const fieldMetadata: FieldMetadata = {
+        name: fieldName,
+        type: fieldType,
+        required: config.required ?? false,
+        description: config.description,
+      };
+
+      // Add enum values if present
+      if (config.allowedValues && config.allowedValues.length > 0) {
+        fieldMetadata.enumValues = config.allowedValues.map((v) =>
+          typeof v === "string" ? v : v.value,
+        );
+      }
+
+      // Add array item type if it's an array field
+      if (arrayItemType) {
+        fieldMetadata.arrayItemType = arrayItemType;
+      }
+
+      // Extract manyToOne relation info from rawRelation
+      // Include: manyToOne, n-1, oneToOne, 1-1 (all are treated as manyToOne for data view purposes)
+      const rawRelation = config.rawRelation;
+      const isManyToOneRelation =
+        rawRelation &&
+        (rawRelation.type === "manyToOne" ||
+          rawRelation.type === "n-1" ||
+          rawRelation.type === "oneToOne" ||
+          rawRelation.type === "1-1") &&
+        rawRelation.toward;
+
+      // Check if this is a oneToOne relation (no inverse oneToMany should be generated)
+      const isOneToOne =
+        rawRelation?.type === "oneToOne" || rawRelation?.type === "1-1";
+
+      if (isManyToOneRelation && rawRelation.toward) {
+        const targetTableName = toCamelCase(rawRelation.toward.type);
+        const relationFieldName =
+          rawRelation.toward.as ?? toCamelCase(rawRelation.toward.type);
+
+        // Add relation info to the field
+        fieldMetadata.relation = {
+          fieldName: relationFieldName,
+          targetTable: targetTableName,
+        };
+
+        // Add to relations array (include backward field name for oneToMany generation)
+        relations.push({
+          fieldName: relationFieldName,
+          targetTable: targetTableName,
+          relationType: "manyToOne",
+          foreignKeyField: fieldName,
+          backwardFieldName: rawRelation.backward,
+          isOneToOne,
+        });
+      }
+
+      fields.push(fieldMetadata);
+    }
+
+    // Extract read allowed roles from gql permission
+    const readAllowedRoles = extractReadAllowedRoles(type.permissions.gql);
+
+    return {
+      name: toCamelCase(type.name),
+      pluralForm: toCamelCase(type.pluralForm),
+      originalName: type.name,
+      description: type.description,
+      readAllowedRoles,
+      fields,
+      relations,
+    };
+  },
+
+  processResolver() {
+    return null;
+  },
+
+  processExecutor() {
+    return null;
+  },
+
+  processTailorDBNamespace({
+    types,
+  }: {
+    types: Record<string, ProcessedTable>;
+  }): ProcessedTable[] {
+    return Object.values(types);
+  },
+
+  aggregate({ input }: { input: GeneratorInput }): GeneratorResult {
+    // Collect all tables from all namespaces
+    const allTables = input.tailordb.flatMap((ns) => ns.types);
+
+    // Build a map of originalName -> table for relation lookup
+    const tableByOriginalName = new Map<string, ProcessedTable>();
+    for (const table of allTables) {
+      tableByOriginalName.set(table.originalName, table);
+    }
+
+    // Second pass: Add oneToMany relations by inverting manyToOne relations
+    for (const table of allTables) {
+      for (const relation of table.relations) {
+        if (relation.relationType === "manyToOne") {
+          // Skip oneToOne relations - they don't have a oneToMany inverse
+          // (GraphQL generates a single object field, not a connection)
+          if (relation.isOneToOne) {
+            continue;
+          }
+
+          // Find the target table and add the inverse oneToMany relation
+          const targetTable = tableByOriginalName.get(
+            // Convert camelCase back to PascalCase for lookup
+            relation.targetTable.charAt(0).toUpperCase() +
+              relation.targetTable.slice(1),
+          );
+          if (targetTable) {
+            // Use backward field name if specified, otherwise fall back to plural form
+            const oneToManyFieldName =
+              relation.backwardFieldName ?? table.pluralForm;
+            const alreadyExists = targetTable.relations.some(
+              (r) =>
+                r.relationType === "oneToMany" &&
+                r.fieldName === oneToManyFieldName,
+            );
+            if (!alreadyExists) {
+              targetTable.relations.push({
+                fieldName: oneToManyFieldName,
+                targetTable: table.name,
+                relationType: "oneToMany",
+                foreignKeyField: relation.foreignKeyField,
+              });
+            }
+          }
+        }
+      }
+    }
+
+    // Build the metadata map (excluding originalName and backwardFieldName from output)
+    const metadataMap: TableMetadataMap = {};
+    for (const table of allTables) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { originalName, ...tableWithoutOriginalName } = table;
+      metadataMap[table.name] = tableWithoutOriginalName;
+    }
+
+    // Generate the TypeScript content
+    const content = `// This file is auto-generated by table-metadata-generator
+// Do not edit manually
+
+import type {
+  FieldType,
+  FieldMetadata,
+  RelationMetadata,
+  TableMetadata,
+  TableMetadataMap,
+} from "../../generator/table-metadata-generator";
+
+export type { FieldType, FieldMetadata, RelationMetadata, TableMetadata, TableMetadataMap };
+
+export const tableMetadata: TableMetadataMap = ${JSON.stringify(metadataMap, null, 2)} as const;
+
+export const tableNames = ${JSON.stringify(Object.keys(metadataMap), null, 2)} as const;
+
+export type TableName = (typeof tableNames)[number];
+`;
+
+    return {
+      files: [
+        {
+          path: "src/generated/table-metadata.ts",
+          content,
+        },
+      ],
+    };
+  },
+};
+
+export default tableMetadataGenerator;

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}