@izumisy-tailor/tailor-data-viewer 0.1.0

package/README.md

@@ -0,0 +1,255 @@
+# @tailor-platform/data-viewer
+
+A React component library for building data exploration interfaces with GraphQL backend support. Provides a tab-based spreadsheet-like UI for viewing and managing table data with relation navigation.
+
+## Features
+
+- **Tab-based Interface**: Excel-like sheet management with multiple tabs
+- **Table Selection**: Role-based access control for tables
+- **Column Selection**: Dynamic column visibility with manyToOne relation expansion
+- **Relation Navigation**: Expandable inline relations with "Open as Sheet" functionality
+- **Search & Filter**: AND-based filtering on string, number, boolean, and enum fields
+- **View Persistence**: Save and load views with filter and column configurations
+- **Sorting & Pagination**: Full cursor-based pagination support
+- **CSV Export**: Download current view as CSV
+- **Single Record View**: Detailed single record view with all relations
+
+## Installation
+
+```bash
+npm install @tailor-platform/data-viewer
+# or
+pnpm add @tailor-platform/data-viewer
+# or
+yarn add @tailor-platform/data-viewer
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+```bash
+npm install react react-dom
+```
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import { DataViewer, SavedViewProvider } from "@tailor-platform/data-viewer/component";
+import type { TableMetadataMap } from "@tailor-platform/data-viewer/generator";
+import "@tailor-platform/data-viewer/styles/theme.css";
+
+// Your table metadata (generated from Tailor Platform schema)
+const tableMetadata: TableMetadataMap = {
+  user: {
+    name: "user",
+    pluralForm: "users",
+    fields: [
+      { name: "id", type: "uuid", nullable: false },
+      { name: "name", type: "string", nullable: false },
+      { name: "email", type: "string", nullable: false },
+    ],
+    allowedRoles: ["admin", "viewer"],
+  },
+  // ... more tables
+};
+
+function App() {
+  return (
+    <SavedViewProvider>
+      <DataViewer
+        tableMetadata={tableMetadata}
+        userRoles={["admin"]}
+        appUri="https://your-app.tailor.tech/graphql"
+      />
+    </SavedViewProvider>
+  );
+}
+```
+
+### Using Individual Components
+
+```tsx
+import {
+  DataTable,
+  TableSelector,
+  ColumnSelector,
+  Pagination,
+  SearchFilterForm,
+  useTableData,
+  useColumnState,
+} from "@tailor-platform/data-viewer/component";
+```
+
+### Generating Table Metadata
+
+Use the metadata generator to create type-safe metadata from your Tailor Platform schema:
+
+```tsx
+import { generateTableMetadata } from "@tailor-platform/data-viewer/generator";
+
+// From your GraphQL schema types
+const metadata = generateTableMetadata(schemaTypes);
+```
+
+## API Reference
+
+### `<DataViewer />`
+
+Main component with tab-based interface.
+
+```tsx
+interface DataViewerProps {
+  /** Map of table name to metadata */
+  tableMetadata: TableMetadataMap;
+  /** User's roles for access control */
+  userRoles: string[];
+  /** GraphQL endpoint URI */
+  appUri: string;
+  /** Optional initial view ID to load */
+  initialViewId?: string;
+}
+```
+
+### `<SavedViewProvider />`
+
+Context provider for view persistence (localStorage-based).
+
+```tsx
+<SavedViewProvider>
+  <DataViewer {...props} />
+</SavedViewProvider>
+```
+
+### `<DataTable />`
+
+Core data table component with sortable columns and expandable relations.
+
+```tsx
+interface DataTableProps {
+  data: Record<string, unknown>[];
+  fields: FieldMetadata[];
+  selectedFields: string[];
+  sortState: SortState | null;
+  onSort: (field: string) => void;
+  loading?: boolean;
+  tableMetadata?: TableMetadata;
+  tableMetadataMap?: TableMetadataMap;
+  appUri?: string;
+  selectedRelations?: string[];
+  onOpenAsSheet?: (tableName: string, filterField: string, filterValue: string) => void;
+  onOpenSingleRecordAsSheet?: (tableName: string, recordId: string) => void;
+  expandedRelationFields?: ExpandedRelationFields;
+}
+```
+
+### Hooks
+
+#### `useTableData`
+
+Manages table data fetching with pagination, sorting, and filtering.
+
+```tsx
+const {
+  data,
+  loading,
+  error,
+  pagination,
+  sortState,
+  setSort,
+  nextPage,
+  previousPage,
+  resetPagination,
+  refetch,
+} = useTableData(appUri, table, selectedFields, selectedRelations, filters, metadataMap, expandedFields);
+```
+
+#### `useColumnState`
+
+Manages column visibility and relation field expansion.
+
+```tsx
+const {
+  selectedFields,
+  selectedRelations,
+  expandedRelationFields,
+  toggleField,
+  toggleRelation,
+  toggleExpandedRelationField,
+  selectAll,
+  deselectAll,
+} = useColumnState(fields, relations);
+```
+
+#### `useAccessibleTables`
+
+Filters tables based on user roles.
+
+```tsx
+const tables = useAccessibleTables(tableMetadataMap, userRoles);
+```
+
+## Types
+
+### TableMetadata
+
+```tsx
+interface TableMetadata {
+  name: string;
+  pluralForm: string;
+  description?: string;
+  fields: FieldMetadata[];
+  relations?: RelationMetadata[];
+  allowedRoles: string[];
+}
+```
+
+### FieldMetadata
+
+```tsx
+interface FieldMetadata {
+  name: string;
+  type: FieldType;
+  nullable: boolean;
+  enumValues?: string[];
+}
+
+type FieldType = "string" | "number" | "boolean" | "uuid" | "datetime" | "date" | "time" | "json" | "enum" | "nested" | "array";
+```
+
+### RelationMetadata
+
+```tsx
+interface RelationMetadata {
+  fieldName: string;
+  targetTable: string;
+  relationType: "manyToOne" | "oneToMany";
+  foreignKeyField: string;
+}
+```
+
+## Styling
+
+The library uses Tailwind CSS classes. Import the base theme or provide your own CSS variables:
+
+```css
+/* Option 1: Import included theme */
+@import "@tailor-platform/data-viewer/styles/theme.css";
+
+/* Option 2: Use with Tailor app-shell */
+@import "@tailor-platform/app-shell/theme.css";
+
+/* Option 3: Define your own CSS variables */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  /* ... see theme.css for full list */
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@izumisy-tailor/tailor-data-viewer",
+  "private": false,
+  "version": "0.1.0",
+  "description": "Flexible data viewer component for Tailor Platform",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./component": {
+      "default": "./src/component/index.ts"
+    },
+    "./generator": {
+      "default": "./src/generator/metadata-generator.ts"
+    },
+    "./styles": {
+      "default": "./src/styles/theme.css"
+    }
+  },
+  "dependencies": {
+    "graphql-request": "^6.1.0",
+    "lucide-react": "^0.468.0",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "type-check": "tsc -b"
+  }
+}

package/src/component/column-selector.tsx

@@ -0,0 +1,264 @@
+import { Columns3 } from "lucide-react";
+import { Checkbox } from "../ui/checkbox";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "../ui/dropdown-menu";
+import type {
+  FieldMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../types/table-metadata";
+
+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;
+}
+
+/**
+ * Column visibility selector with checkboxes
+ */
+export function ColumnSelector({
+  fields,
+  selectedFields,
+  onToggle,
+  onSelectAll,
+  onDeselectAll,
+  relations = [],
+  selectedRelations = [],
+  onToggleRelation,
+  tableMetadataMap,
+  expandedRelationFields = {},
+  onToggleExpandedRelationField,
+  isExpandedRelationFieldSelected,
+}: ColumnSelectorProps) {
+  // Filter out nested fields as they're not directly selectable
+  const selectableFields = fields.filter((field) => field.type !== "nested");
+
+  // Separate manyToOne and oneToMany relations
+  const manyToOneRelations = relations.filter(
+    (r) => r.relationType === "manyToOne",
+  );
+  const oneToManyRelations = relations.filter(
+    (r) => r.relationType === "oneToMany",
+  );
+
+  // Count expanded relation fields
+  const expandedFieldCount = Object.values(expandedRelationFields).reduce(
+    (sum, fields) => sum + fields.length,
+    0,
+  );
+
+  const totalSelectable =
+    selectableFields.length + relations.length + expandedFieldCount;
+  const totalSelected =
+    selectedFields.length + selectedRelations.length + expandedFieldCount;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1">
+          <Columns3 className="size-4" />
+          カラム選択 ({totalSelected}/{totalSelectable})
+        </Button>
+      </DropdownMenuTrigger>
+
+      <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>
+          <Button variant="ghost" size="sm" onClick={onDeselectAll}>
+            全解除
+          </Button>
+        </div>
+        <div className="max-h-80 overflow-auto p-2">
+          {/* Regular fields */}
+          <div className="space-y-1">
+            {selectableFields.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={selectedFields.includes(field.name)}
+                  onCheckedChange={() => onToggle(field.name)}
+                />
+                <span
+                  className="truncate"
+                  title={field.description ?? field.name}
+                >
+                  {field.name}
+                </span>
+                {field.required && (
+                  <span className="text-destructive text-xs">*</span>
+                )}
+              </label>
+            ))}
+          </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] ?? [];
+
+                    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>
+
+                        {/* 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"
+                                    >
+                                      <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>
+                              </div>
+                            </DropdownMenuSubContent>
+                          </DropdownMenuSub>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+
+          {/* OneToMany Relations (inline toggle only) */}
+          {oneToManyRelations.length > 0 && onToggleRelation && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="text-muted-foreground text-xs">
+                リレーション (1対多)
+              </DropdownMenuLabel>
+              <div className="space-y-1">
+                {oneToManyRelations.map((relation) => (
+                  <label
+                    key={relation.fieldName}
+                    className="hover:bg-accent flex 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">(N)</span>
+                  </label>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}