@izumisy-tailor/tailor-data-viewer 0.1.20 → 0.1.22

package/src/component/column-selector.tsx

@@ -11,64 +11,36 @@ import {
   DropdownMenuSeparator,
   DropdownMenuLabel,
 } from "./ui/dropdown-menu";
-import type {
-  FieldMetadata,
-  RelationMetadata,
-  TableMetadataMap,
-  ExpandedRelationFields,
-} from "../generator/metadata-generator";
-
-interface ColumnSelectorProps {
-  fields: FieldMetadata[];
-  selectedFields: string[];
-  onToggle: (fieldName: string) => void;
-  onSelectAll: () => void;
-  onDeselectAll: () => void;
-  /** Relations for the current table */
-  relations?: RelationMetadata[];
-  /** Currently selected relation field names */
-  selectedRelations?: string[];
-  /** Toggle relation visibility */
-  onToggleRelation?: (fieldName: string) => void;
-  /** Table metadata map for relation field lookups */
-  tableMetadataMap?: TableMetadataMap;
-  /** Expanded relation fields (manyToOne fields shown as inline columns) */
-  expandedRelationFields?: ExpandedRelationFields;
-  /** Toggle a field within an expanded relation */
-  onToggleExpandedRelationField?: (
-    relationFieldName: string,
-    fieldName: string,
-  ) => void;
-  /** Check if a field is selected within an expanded relation */
-  isExpandedRelationFieldSelected?: (
-    relationFieldName: string,
-    fieldName: string,
-  ) => boolean;
-  /** Controlled open state */
-  open?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (open: boolean) => void;
-}
+import { useDataViewer } from "./contexts";
+import { useToolbar } from "./contexts";
 
 /**
  * Column visibility selector with checkboxes
+ * Must be used within DataViewer.Root and DataViewer.Toolbar context
  */
-export function ColumnSelector({
-  fields,
-  selectedFields,
-  onToggle,
-  onSelectAll,
-  onDeselectAll,
-  relations = [],
-  selectedRelations = [],
-  onToggleRelation,
-  tableMetadataMap,
-  expandedRelationFields = {},
-  onToggleExpandedRelationField,
-  isExpandedRelationFieldSelected,
-  open,
-  onOpenChange,
-}: ColumnSelectorProps) {
+export function ColumnSelector() {
+  const {
+    tableMetadata,
+    metadata,
+    selectedFields,
+    toggleField,
+    selectAllFields,
+    deselectAllFields,
+    selectedRelations,
+    toggleRelation,
+    expandedRelationFields,
+    toggleExpandedRelationField,
+    isExpandedRelationFieldSelected,
+  } = useDataViewer();
+  const { activePanel, setActivePanel } = useToolbar();
+
+  const fields = tableMetadata?.fields ?? [];
+  const relations = tableMetadata?.relations ?? [];
+
+  const open = activePanel === "column";
+  const onOpenChange = (isOpen: boolean) =>
+    setActivePanel(isOpen ? "column" : null);
+
   // Filter out nested fields as they're not directly selectable
   const selectableFields = fields.filter((field) => field.type !== "nested");
 
@@ -102,10 +74,10 @@ export function ColumnSelector({
 
       <DropdownMenuContent align="start" className="w-64">
         <div className="flex gap-1 border-b px-2 py-1.5">
-          <Button variant="ghost" size="sm" onClick={onSelectAll}>
+          <Button variant="ghost" size="sm" onClick={selectAllFields}>
             全選択
           </Button>
-          <Button variant="ghost" size="sm" onClick={onDeselectAll}>
+          <Button variant="ghost" size="sm" onClick={deselectAllFields}>
             全解除
           </Button>
         </div>
@@ -119,7 +91,7 @@ export function ColumnSelector({
               >
                 <Checkbox
                   checked={selectedFields.includes(field.name)}
-                  onCheckedChange={() => onToggle(field.name)}
+                  onCheckedChange={() => toggleField(field.name)}
                 />
                 <span
                   className="truncate"
@@ -135,108 +107,103 @@ export function ColumnSelector({
           </div>
 
           {/* ManyToOne Relations with submenu for field expansion */}
-          {manyToOneRelations.length > 0 &&
-            onToggleRelation &&
-            tableMetadataMap && (
-              <>
-                <DropdownMenuSeparator />
-                <DropdownMenuLabel className="text-muted-foreground text-xs">
-                  リレーション (1対1)
-                </DropdownMenuLabel>
-                <div className="space-y-1">
-                  {manyToOneRelations.map((relation) => {
-                    const targetTable = tableMetadataMap[relation.targetTable];
-                    const targetFields =
-                      targetTable?.fields.filter(
-                        (f) => f.type !== "nested" && f.name !== "id",
-                      ) ?? [];
-                    const selectedExpandedFields =
-                      expandedRelationFields[relation.fieldName] ?? [];
+          {manyToOneRelations.length > 0 && metadata && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="text-muted-foreground text-xs">
+                リレーション (1対1)
+              </DropdownMenuLabel>
+              <div className="space-y-1">
+                {manyToOneRelations.map((relation) => {
+                  const targetTable = metadata[relation.targetTable];
+                  const targetFields =
+                    targetTable?.fields.filter(
+                      (f) => f.type !== "nested" && f.name !== "id",
+                    ) ?? [];
+                  const selectedExpandedFields =
+                    expandedRelationFields[relation.fieldName] ?? [];
 
-                    return (
-                      <div
-                        key={relation.fieldName}
-                        className="flex items-center gap-1"
-                      >
-                        {/* Inline toggle checkbox */}
-                        <label className="hover:bg-accent flex flex-1 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-sm">
-                          <Checkbox
-                            checked={selectedRelations.includes(
-                              relation.fieldName,
-                            )}
-                            onCheckedChange={() =>
-                              onToggleRelation(relation.fieldName)
-                            }
-                          />
-                          <span className="truncate" title={relation.fieldName}>
-                            {relation.fieldName}
-                          </span>
-                          <span className="text-muted-foreground text-xs">
-                            (1)
-                          </span>
-                        </label>
+                  return (
+                    <div
+                      key={relation.fieldName}
+                      className="flex items-center gap-1"
+                    >
+                      {/* Inline toggle checkbox */}
+                      <label className="hover:bg-accent flex flex-1 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-sm">
+                        <Checkbox
+                          checked={selectedRelations.includes(
+                            relation.fieldName,
+                          )}
+                          onCheckedChange={() =>
+                            toggleRelation(relation.fieldName)
+                          }
+                        />
+                        <span className="truncate" title={relation.fieldName}>
+                          {relation.fieldName}
+                        </span>
+                        <span className="text-muted-foreground text-xs">
+                          (1)
+                        </span>
+                      </label>
 
-                        {/* Submenu for field expansion */}
-                        {targetTable && onToggleExpandedRelationField && (
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger className="h-7 px-2">
-                              <Columns3 className="size-3" />
-                              {selectedExpandedFields.length > 0 && (
-                                <span className="text-muted-foreground ml-1 text-xs">
-                                  ({selectedExpandedFields.length})
-                                </span>
-                              )}
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuSubContent className="w-56">
-                              <DropdownMenuLabel className="text-muted-foreground text-xs">
-                                {relation.targetTable}{" "}
-                                のフィールドを列として展開
-                              </DropdownMenuLabel>
-                              <DropdownMenuSeparator />
-                              <div className="max-h-60 overflow-auto p-1">
-                                <div className="space-y-1">
-                                  {targetFields.map((field) => (
-                                    <label
-                                      key={field.name}
-                                      className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-sm"
+                      {/* Submenu for field expansion */}
+                      {targetTable && (
+                        <DropdownMenuSub>
+                          <DropdownMenuSubTrigger className="h-7 px-2">
+                            <Columns3 className="size-3" />
+                            {selectedExpandedFields.length > 0 && (
+                              <span className="text-muted-foreground ml-1 text-xs">
+                                ({selectedExpandedFields.length})
+                              </span>
+                            )}
+                          </DropdownMenuSubTrigger>
+                          <DropdownMenuSubContent className="w-56">
+                            <DropdownMenuLabel className="text-muted-foreground text-xs">
+                              {relation.targetTable} のフィールドを列として展開
+                            </DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <div className="max-h-60 overflow-auto p-1">
+                              <div className="space-y-1">
+                                {targetFields.map((field) => (
+                                  <label
+                                    key={field.name}
+                                    className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-sm"
+                                  >
+                                    <Checkbox
+                                      checked={isExpandedRelationFieldSelected(
+                                        relation.fieldName,
+                                        field.name,
+                                      )}
+                                      onCheckedChange={() =>
+                                        toggleExpandedRelationField(
+                                          relation.fieldName,
+                                          field.name,
+                                        )
+                                      }
+                                      className="size-3.5"
+                                    />
+                                    <span
+                                      className="truncate"
+                                      title={field.description ?? field.name}
                                     >
-                                      <Checkbox
-                                        checked={
-                                          isExpandedRelationFieldSelected?.(
-                                            relation.fieldName,
-                                            field.name,
-                                          ) ?? false
-                                        }
-                                        onCheckedChange={() =>
-                                          onToggleExpandedRelationField(
-                                            relation.fieldName,
-                                            field.name,
-                                          )
-                                        }
-                                        className="size-3.5"
-                                      />
-                                      <span
-                                        className="truncate"
-                                        title={field.description ?? field.name}
-                                      >
-                                        {field.name}
-                                      </span>
-                                    </label>
-                                  ))}
-                                </div>
+                                      {field.name}
+                                    </span>
+                                  </label>
+                                ))}
                               </div>
-                            </DropdownMenuSubContent>
-                          </DropdownMenuSub>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              </>
-            )}
+                            </div>
+                          </DropdownMenuSubContent>
+                        </DropdownMenuSub>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </>
+          )}
 
           {/* OneToMany Relations (inline toggle only) */}
-          {oneToManyRelations.length > 0 && onToggleRelation && (
+          {oneToManyRelations.length > 0 && (
             <>
               <DropdownMenuSeparator />
               <DropdownMenuLabel className="text-muted-foreground text-xs">
@@ -250,9 +217,7 @@ export function ColumnSelector({
                   >
                     <Checkbox
                       checked={selectedRelations.includes(relation.fieldName)}
-                      onCheckedChange={() =>
-                        onToggleRelation(relation.fieldName)
-                      }
+                      onCheckedChange={() => toggleRelation(relation.fieldName)}
                     />
                     <span className="truncate" title={relation.fieldName}>
                       {relation.fieldName}

package/src/component/contexts/data-viewer-context.test.tsx

@@ -0,0 +1,191 @@
+import { describe, it, expect } from "vitest";
+import {
+  type DataViewerInitialData,
+  type DataViewerProviderProps,
+} from "./data-viewer-context";
+import type { TableMetadataMap } from "../../generator/metadata-generator";
+
+// =============================================================================
+// Mock metadata with `as const` for type-safe tests
+// =============================================================================
+
+const mockMetadata = {
+  user: {
+    name: "user",
+    pluralForm: "users",
+    readAllowedRoles: ["admin"],
+    fields: [
+      { name: "id", type: "uuid", required: true },
+      { name: "name", type: "string", required: true },
+      { name: "email", type: "string", required: true },
+      {
+        name: "role",
+        type: "enum",
+        required: true,
+        enumValues: ["admin", "member"],
+      },
+    ],
+    relations: [
+      {
+        fieldName: "posts",
+        targetTable: "post",
+        relationType: "oneToMany",
+        foreignKeyField: "authorId",
+      },
+    ],
+  },
+  post: {
+    name: "post",
+    pluralForm: "posts",
+    readAllowedRoles: ["admin", "member"],
+    fields: [
+      { name: "id", type: "uuid", required: true },
+      { name: "title", type: "string", required: true },
+      { name: "content", type: "string", required: false },
+      { name: "authorId", type: "uuid", required: true },
+    ],
+    relations: [
+      {
+        fieldName: "author",
+        targetTable: "user",
+        relationType: "manyToOne",
+        foreignKeyField: "authorId",
+      },
+      {
+        fieldName: "comments",
+        targetTable: "comment",
+        relationType: "oneToMany",
+        foreignKeyField: "postId",
+      },
+    ],
+  },
+  comment: {
+    name: "comment",
+    pluralForm: "comments",
+    readAllowedRoles: ["admin", "member"],
+    fields: [
+      { name: "id", type: "uuid", required: true },
+      { name: "body", type: "string", required: true },
+      { name: "postId", type: "uuid", required: true },
+    ],
+    relations: [
+      {
+        fieldName: "post",
+        targetTable: "post",
+        relationType: "manyToOne",
+        foreignKeyField: "postId",
+      },
+    ],
+  },
+} as const;
+
+type MockMetadata = typeof mockMetadata;
+
+// =============================================================================
+// Type-level tests for type safety
+// These tests verify that the types compile correctly.
+// If the types are incorrect, TypeScript will fail to compile this file.
+// =============================================================================
+
+describe("DataViewerProvider type safety", () => {
+  describe("type-level tests (compile-time checks)", () => {
+    it("should correctly extract field names from metadata", () => {
+      // These are compile-time checks - if they compile, the types are correct
+      // TypeScript will error if invalid field names are used
+
+      // Valid user fields
+      const userInitialData: DataViewerInitialData<MockMetadata, "user"> = {
+        selectedFields: ["id", "name", "email", "role"],
+      };
+
+      // Valid post fields
+      const postInitialData: DataViewerInitialData<MockMetadata, "post"> = {
+        selectedFields: ["id", "title", "content", "authorId"],
+      };
+
+      // Valid comment fields
+      const commentInitialData: DataViewerInitialData<MockMetadata, "comment"> =
+        {
+          selectedFields: ["id", "body", "postId"],
+        };
+
+      expect(userInitialData.selectedFields).toHaveLength(4);
+      expect(postInitialData.selectedFields).toHaveLength(4);
+      expect(commentInitialData.selectedFields).toHaveLength(3);
+    });
+
+    it("should correctly extract relation names from metadata", () => {
+      // User has "posts" relation
+      const userInitialData: DataViewerInitialData<MockMetadata, "user"> = {
+        selectedRelations: ["posts"],
+      };
+
+      // Post has "author" and "comments" relations
+      const postInitialData: DataViewerInitialData<MockMetadata, "post"> = {
+        selectedRelations: ["author", "comments"],
+      };
+
+      expect(userInitialData.selectedRelations).toEqual(["posts"]);
+      expect(postInitialData.selectedRelations).toEqual(["author", "comments"]);
+    });
+
+    it("should correctly type tableName in props", () => {
+      // Valid table names
+      const userProps: DataViewerProviderProps<MockMetadata, "user"> = {
+        children: null,
+        tableName: "user",
+        metadata: mockMetadata,
+        appUri: "https://example.com",
+      };
+
+      const postProps: DataViewerProviderProps<MockMetadata, "post"> = {
+        children: null,
+        tableName: "post",
+        metadata: mockMetadata,
+        appUri: "https://example.com",
+      };
+
+      expect(userProps.tableName).toBe("user");
+      expect(postProps.tableName).toBe("post");
+    });
+
+    it("should allow valid field names in initialData", () => {
+      // This should compile without errors
+      const validInitialData: DataViewerInitialData<MockMetadata, "user"> = {
+        selectedFields: ["id", "name", "email"],
+        selectedRelations: ["posts"],
+      };
+
+      expect(validInitialData.selectedFields).toEqual(["id", "name", "email"]);
+    });
+
+    it("should allow valid expanded relation fields", () => {
+      // Post has relations: author (-> user) and comments (-> comment)
+      const validInitialData: DataViewerInitialData<MockMetadata, "post"> = {
+        selectedFields: ["title", "content"],
+        selectedRelations: ["author", "comments"],
+        expandedRelationFields: {
+          author: ["name", "email"], // user fields
+        },
+      };
+
+      expect(validInitialData.expandedRelationFields?.author).toEqual([
+        "name",
+        "email",
+      ]);
+    });
+
+    it("should work with regular TableMetadataMap (non-const)", () => {
+      // When using regular TableMetadataMap (not `as const`), it should accept any string
+      type RegularInitialData = DataViewerInitialData<TableMetadataMap, string>;
+
+      // Should accept any string array
+      const initialData: RegularInitialData = {
+        selectedFields: ["anyField", "anotherField"],
+        selectedRelations: ["anyRelation"],
+      };
+
+      expect(initialData.selectedFields).toBeDefined();
+    });
+  });
+});