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

package/README.md

@@ -34,23 +34,61 @@ npm install react react-dom
 
 ## Usage
 
-### Basic Setup
+There are two ways to use Data Viewer:
 
-First, set up the metadata generator as described in [Generating Table Metadata](#generating-table-metadata). Then use the generated metadata in your React app:
+1. **AppShell Module** - Recommended for Tailor Platform apps
+2. **Standalone Component** - For custom React apps
+
+### AppShell Module (Recommended)
+
+For Tailor Platform apps using `@tailor-platform/app-shell`:
+
+```typescript
+// src/pages/data-view/index.ts
+import { createDataViewModule } from "@izumisy-tailor/tailor-data-viewer/app-shell";
+import { createIndexedDBStore } from "@izumisy-tailor/tailor-data-viewer/store/indexeddb";
+import { tableMetadata } from "./generated/table-metadata";
+
+export const dataViewModule = createDataViewModule({
+  tableMetadata,
+  appUri: import.meta.env.VITE_APP_URL,
+  store: createIndexedDBStore(),
+});
+```
+
+```typescript
+// src/app.tsx
+import { AppShell } from "@tailor-platform/app-shell";
+import { dataViewModule } from "./pages/data-view";
+
+export const App = () => (
+  <AppShell
+    modules={[dataViewModule]}
+  />
+);
+```
+
+For detailed options, see [AppShell Module Integration](./docs/app-shell-module.md).
+
+### Standalone Component
+
+For custom React apps, set up the metadata generator as described in [Generating Table Metadata](#generating-table-metadata). Then use the generated metadata:
 
 ```tsx
 import { DataViewer, SavedViewProvider } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createIndexedDBStore } from "@izumisy-tailor/tailor-data-viewer/store/indexeddb";
 import "@izumisy-tailor/tailor-data-viewer/styles/theme.css";
 
 // Import the generated metadata from your Tailor Platform SDK project
 import { tableMetadata } from "./generated/table-metadata";
 
+const store = createIndexedDBStore();
+
 function App() {
   return (
-    <SavedViewProvider>
+    <SavedViewProvider store={store}>
       <DataViewer
         tableMetadata={tableMetadata}
-        userRoles={["admin"]}
         appUri="https://your-app.tailor.tech/graphql"
       />
     </SavedViewProvider>
@@ -58,6 +96,8 @@ function App() {
 }
 ```
 
+For store options, see [Saved View Store](./docs/saved-view-store.md).
+
 ### Using Individual Components
 
 ```tsx

package/dist/generator/index.d.mts

@@ -52,6 +52,12 @@ interface TableMetadata {
  * Map of all tables
  */
 type TableMetadataMap = Record<string, TableMetadata>;
+/**
+ * Expanded relation fields configuration
+ * Key: relation field name (e.g., "task")
+ * Value: array of selected field names from the related table (e.g., ["name", "status"])
+ */
+type ExpandedRelationFields = Record<string, string[]>;
 /**
  * Intermediate type for processed table data
  */
@@ -167,4 +173,4 @@ declare const tableMetadataGenerator: {
   }): GeneratorResult;
 };
 //#endregion
-export { FieldMetadata, FieldType, RelationMetadata, TableMetadata, TableMetadataMap, tableMetadataGenerator as default, tableMetadataGenerator };
+export { ExpandedRelationFields, FieldMetadata, FieldType, RelationMetadata, TableMetadata, TableMetadataMap, tableMetadataGenerator as default, tableMetadataGenerator };

package/docs/app-shell-module.md

@@ -0,0 +1,151 @@
+# AppShell Module Integration
+
+Using the `createDataViewModule` factory function, you can easily integrate Data Viewer as a module into the Tailor Platform AppShell.
+
+## Overview
+
+- **Zero Configuration**: Integrate Data Viewer into AppShell with minimal setup
+- **Flexible Storage**: Save views to IndexedDB (local) or TailorDB (server)
+- **Runtime Permission Checks**: Uses server-side `gqlPermission` as Single Source of Truth
+
+## Basic Usage
+
+### IndexedDB Store (Local Storage)
+
+```typescript
+// src/pages/data-view/index.ts
+import { createDataViewModule } from "@izumisy-tailor/tailor-data-viewer/app-shell";
+import { createIndexedDBStore } from "@izumisy-tailor/tailor-data-viewer/store/indexeddb";
+import { tableMetadata } from "@tailor-platform/my-app/generated/table-metadata";
+
+export const dataViewModule = createDataViewModule({
+  tableMetadata,
+  appUri: import.meta.env.VITE_APP_URL,
+  store: createIndexedDBStore(),
+});
+```
+
+### TailorDB Store (Server Storage)
+
+```typescript
+// src/pages/data-view/index.ts
+import { createDataViewModule } from "@izumisy-tailor/tailor-data-viewer/app-shell";
+import { createTailorDBStore } from "@izumisy-tailor/tailor-data-viewer/store/tailordb";
+import { tableMetadata } from "@tailor-platform/my-app/generated/table-metadata";
+
+export const dataViewModule = createDataViewModule({
+  tableMetadata,
+  appUri: import.meta.env.VITE_APP_URL,
+  store: createTailorDBStore(),
+});
+```
+
+### Usage with AppShell
+
+```typescript
+// src/app.tsx
+import { AppShell } from "@tailor-platform/app-shell";
+import { dataViewModule } from "./pages/data-view";
+
+export const App = () => (
+  <AppShell
+    modules={[
+      dataViewModule,
+      // ...other modules
+    ]}
+  />
+);
+```
+
+## Configuration Options
+
+```typescript
+interface DataViewModuleConfig {
+  /** Table metadata (required) */
+  tableMetadata: TableMetadataMap;
+
+  /** GraphQL API URI (required) */
+  appUri: string;
+
+  /** Store implementation for view persistence (required) */
+  store: SavedViewStore | SavedViewStoreFactory;
+
+  /** Routing configuration (optional) */
+  path?: {
+    /** Module base path (default: "data-view") */
+    base?: string;
+    /** Explorer resource path (default: "explorer") */
+    explorer?: string;
+  };
+
+  /** Module meta information (optional) */
+  meta?: {
+    /** Title (default: "Data Viewer") */
+    title?: string;
+    /** Icon (default: <Database />) */
+    icon?: ReactNode;
+  };
+}
+```
+
+## Store Selection
+
+| Store | Features | Use Case |
+|-------|----------|----------|
+| **IndexedDB** | Local storage, instant availability | Development, personal use, offline support |
+| **TailorDB** | Server storage, team sharing | Production, team collaboration |
+
+### IndexedDB Store Options
+
+```typescript
+const store = createIndexedDBStore({
+  dbName: "my-app-data-viewer",  // default: "data-viewer"
+  storeName: "saved-views",      // default: "savedViews"
+});
+```
+
+### TailorDB Store Setup
+
+When using TailorDB Store, you need the `DataViewerSavedView` table in your Tailor Platform.
+
+```typescript
+// tailor.config.ts
+import { defineConfig } from "@tailor-platform/sdk";
+
+export default defineConfig({
+  name: "my-app",
+  db: {
+    "my-db": {
+      files: [
+        "db/**/*.ts",
+        "node_modules/@izumisy-tailor/tailor-data-viewer/src/store/tailordb/schema.ts",
+      ],
+    },
+  },
+});
+```
+
+## Custom Store Implementation
+
+To use your own persistence backend, implement the `SavedViewStore` interface:
+
+```typescript
+import type { SavedViewStore } from "@izumisy-tailor/tailor-data-viewer/store/indexeddb";
+
+const customStore: SavedViewStore = {
+  listViews: async () => { /* implementation */ },
+  saveView: async (view) => { /* implementation */ },
+  deleteView: async (viewId) => { /* implementation */ },
+  getView: async (viewId) => { /* implementation */ },
+};
+
+// Or implement as a Factory (if you need appUri)
+const customStoreFactory = (config: { appUri: string }) => ({
+  listViews: async () => { /* can use config.appUri */ },
+  // ...
+});
+```
+
+## Related Documentation
+
+- [Saved View Store](./saved-view-store.md) - Detailed store design and implementation

package/docs/saved-view-store.md

@@ -0,0 +1,155 @@
+# Saved View Store
+
+A storage system for persisting view configurations (selected columns, filters, sort order, etc.).
+
+## Overview
+
+Data Viewer allows users to save and load view configurations. Two store implementations are provided:
+
+- **IndexedDB Store**: Saves to browser local storage
+- **TailorDB Store**: Saves to Tailor Platform database
+
+## SavedViewStore Interface
+
+```typescript
+interface SavedViewStore {
+  /** Get list of saved views */
+  listViews(): Promise<SavedView[]>;
+
+  /** Save a view (create or update) */
+  saveView(view: SavedViewInput): Promise<SavedView>;
+
+  /** Delete a view */
+  deleteView(viewId: string): Promise<void>;
+
+  /** Get a specific view */
+  getView(viewId: string): Promise<SavedView | null>;
+}
+```
+
+## SavedView Structure
+
+```typescript
+interface SavedView {
+  id: string;
+  name: string;
+  tableName: string;
+  columns: string[];
+  filters: SearchFilters;
+  sortOrder: SortOrder[];
+  selectedRelations: string[];
+  expandedRelationFields: ExpandedRelationFields;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface SortOrder {
+  field: string;
+  direction: "asc" | "desc";
+}
+```
+
+## IndexedDB Store
+
+Saves locally using browser IndexedDB. A lightweight implementation using the [idb](https://github.com/jakearchibald/idb) library.
+
+### Features
+
+- Not shared across devices
+- Works offline
+- Ready to use immediately (no server setup required)
+
+### Usage
+
+```typescript
+import { createIndexedDBStore } from "@izumisy-tailor/tailor-data-viewer/store/indexeddb";
+
+// Default configuration
+const store = createIndexedDBStore();
+
+// Custom configuration
+const store = createIndexedDBStore({
+  dbName: "my-app-data-viewer",  // default: "data-viewer"
+  storeName: "saved-views",      // default: "savedViews"
+});
+```
+
+## TailorDB Store
+
+Saves to server using Tailor Platform database.
+
+### Features
+
+- Shareable across team
+- Per-user permission management
+- Synced across devices
+
+### Setup
+
+1. **Add schema to tailor.config.ts**
+
+```typescript
+// tailor.config.ts
+import { defineConfig } from "@tailor-platform/sdk";
+
+export default defineConfig({
+  name: "my-app",
+  db: {
+    "my-db": {
+      files: [
+        "db/**/*.ts",
+        "node_modules/@izumisy-tailor/tailor-data-viewer/src/store/tailordb/schema.ts",
+      ],
+    },
+  },
+});
+```
+
+2. **Use the store**
+
+```typescript
+import { createTailorDBStore } from "@izumisy-tailor/tailor-data-viewer/store/tailordb";
+
+// appUri is automatically passed from createDataViewModule
+const store = createTailorDBStore();
+```
+
+### Schema Details
+
+The `DataViewerSavedView` table has the following fields:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `name` | string | View name |
+| `tableName` | string (indexed) | Target table name |
+| `columns` | string[] | Selected columns |
+| `filters` | string (JSON) | Filter conditions |
+| `sortOrder` | string (JSON) | Sort order |
+| `selectedRelations` | string[] | Selected relations |
+| `expandedRelationFields` | string (JSON) | Expanded relation fields |
+| `isDefault` | boolean | Whether this is the default view |
+| `createdBy` | uuid | Creator (set automatically via hooks) |
+| `createdAt` / `updatedAt` | datetime | Timestamps |
+
+### Permissions
+
+- **create**: Logged-in users only
+- **read/update/delete**: Creator only (restricted by `createdBy`)
+
+## SavedViewStoreFactory
+
+When a store needs configuration like `appUri`, use the Factory pattern:
+
+```typescript
+type SavedViewStoreFactory = (config: { appUri: string }) => SavedViewStore;
+```
+
+When you pass a Factory to `createDataViewModule`, it internally calls the factory with `appUri` as an argument:
+
+```typescript
+// TailorDB Store returns a Factory
+const storeFactory = createTailorDBStore();
+
+// Internally in createDataViewModule, it's called like:
+const store = storeFactory({ appUri: "https://..." });
+```

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [
     "src",
     "dist",
-    "API.md"
+    "docs"
   ],
   "exports": {
     "./component": {
@@ -19,6 +19,18 @@
     },
     "./styles": {
       "default": "./src/styles/theme.css"
+    },
+    "./app-shell": {
+      "default": "./src/app-shell/index.ts"
+    },
+    "./store/indexeddb": {
+      "default": "./src/store/indexeddb.ts"
+    },
+    "./store/tailordb": {
+      "default": "./src/store/tailordb/index.ts"
+    },
+    "./store/tailordb/schema": {
+      "default": "./src/store/tailordb/schema.ts"
     }
   },
   "dependencies": {
@@ -32,14 +44,27 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql-request": "^6.1.0",
+    "idb": "^8.0.3",
     "lucide-react": "^0.468.0",
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
+    "@tailor-platform/app-shell": ">=0.20.0",
+    "@tailor-platform/sdk": "^1.6.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@tailor-platform/app-shell": {
+      "optional": true
+    },
+    "@tailor-platform/sdk": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@tailor-platform/app-shell": "^0.24.0",
+    "@tailor-platform/sdk": "^1.6.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",

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

@@ -0,0 +1,84 @@
+import { defineModule, defineResource } from "@tailor-platform/app-shell";
+import { Database } 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";
+
+/**
+ * Create a DataView module for use with AppShell
+ *
+ * @example
+ * ```tsx
+ * import { createDataViewModule } from "@izumisy-tailor/tailor-data-viewer/app-shell";
+ * import { createIndexedDBStore } from "@izumisy-tailor/tailor-data-viewer/store/indexeddb";
+ * import { tableMetadata } from "@tailor-platform/my-app/generated/table-metadata";
+ *
+ * export const dataViewModule = createDataViewModule({
+ *   tableMetadata,
+ *   appUri: import.meta.env.VITE_APP_URL,
+ *   store: createIndexedDBStore(),
+ * });
+ * ```
+ */
+export function createDataViewModule(config: DataViewModuleConfig) {
+  const {
+    tableMetadata,
+    appUri,
+    store: storeOrFactory,
+    path = {},
+    meta = {},
+  } = config;
+
+  const basePath = path.base ?? "data-view";
+  const explorerPath = path.explorer ?? "explorer";
+  const title = meta.title ?? "Data Viewer";
+  const icon = meta.icon ?? <Database />;
+
+  // Resolve store (call factory if needed)
+  const store = isStoreFactory(storeOrFactory)
+    ? storeOrFactory({ appUri })
+    : storeOrFactory;
+
+  // Create the explorer resource page component
+  const ExplorerPage = () => {
+    return (
+      <SavedViewProvider store={store}>
+        <DataViewer tableMetadata={tableMetadata} appUri={appUri} />
+      </SavedViewProvider>
+    );
+  };
+
+  // Create the module page component
+  const ModulePage = () => {
+    return (
+      <div className="space-y-4">
+        <h1 className="text-2xl font-bold">{title}</h1>
+        <p className="text-muted-foreground">
+          データビューでテーブルを探索できます。
+        </p>
+      </div>
+    );
+  };
+
+  // Define the explorer resource
+  const explorerResource = defineResource({
+    path: explorerPath,
+    component: ExplorerPage,
+    meta: {
+      title: "Explorer",
+      breadcrumbTitle: () => "Explorer",
+    },
+  });
+
+  // Define and return the module
+  return defineModule({
+    path: basePath,
+    component: ModulePage,
+    meta: {
+      title,
+      icon,
+    },
+    resources: [explorerResource],
+  });
+}

package/src/app-shell/index.ts

@@ -0,0 +1,2 @@
+export { createDataViewModule } from "./create-data-view-module";
+export type { DataViewModuleConfig } from "./types";

package/src/app-shell/types.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import type { TableMetadataMap } from "../generator/metadata-generator";
+import type { SavedViewStore, SavedViewStoreFactory } from "../store/types";
+
+/**
+ * Configuration for creating a DataView module
+ */
+export interface DataViewModuleConfig {
+  /** Table metadata (required) */
+  tableMetadata: TableMetadataMap;
+
+  /** GraphQL API URI (required) */
+  appUri: string;
+
+  /** Saved view store implementation (required) */
+  store: SavedViewStore | SavedViewStoreFactory;
+
+  /** Routing configuration */
+  path?: {
+    /** Module base path (default: "data-view") */
+    base?: string;
+    /** Explorer resource path (default: "explorer") */
+    explorer?: string;
+  };
+
+  /** Module meta information */
+  meta?: {
+    /** Module title (default: "Data Viewer") */
+    title?: string;
+    /** Module icon (default: <Database />) */
+    icon?: ReactNode;
+  };
+}
+
+/**
+ * Type guard to check if store is a factory function
+ */
+export function isStoreFactory(
+  store: SavedViewStore | SavedViewStoreFactory,
+): store is SavedViewStoreFactory {
+  return typeof store === "function";
+}

package/src/component/column-selector.tsx

@@ -1,6 +1,6 @@
 import { Columns3 } from "lucide-react";
-import { Checkbox } from "../ui/checkbox";
-import { Button } from "../ui/button";
+import { Checkbox } from "./ui/checkbox";
+import { Button } from "./ui/button";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -10,13 +10,13 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSeparator,
   DropdownMenuLabel,
-} from "../ui/dropdown-menu";
+} from "./ui/dropdown-menu";
 import type {
   FieldMetadata,
   RelationMetadata,
   TableMetadataMap,
   ExpandedRelationFields,
-} from "../types/table-metadata";
+} from "../generator/metadata-generator";
 
 interface ColumnSelectorProps {
   fields: FieldMetadata[];

package/src/component/data-table.tsx

@@ -15,14 +15,14 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "../ui/table";
+} from "./ui/table";
 import type {
   FieldMetadata,
   TableMetadata,
   RelationMetadata,
   TableMetadataMap,
   ExpandedRelationFields,
-} from "../types/table-metadata";
+} from "../generator/metadata-generator";
 import { formatFieldValue } from "../utils/query-builder";
 import type { SortState } from "./hooks/use-table-data";
 import { useRelationData } from "./hooks/use-relation-data";

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

@@ -1,12 +1,12 @@
 import { useState, useCallback, useMemo } from "react";
 import { RefreshCw, Download } from "lucide-react";
-import { Alert, AlertDescription } from "../ui/alert";
-import { Button } from "../ui/button";
+import { Alert, AlertDescription } from "./ui/alert";
+import { Button } from "./ui/button";
 import type {
   TableMetadata,
   TableMetadataMap,
   FieldMetadata,
-} from "../types/table-metadata";
+} from "../generator/metadata-generator";
 import { formatFieldValue } from "../utils/query-builder";
 import { TableSelector } from "./table-selector";
 import { ColumnSelector } from "./column-selector";