@izumisy-tailor/tailor-data-viewer 0.1.30 → 0.1.32

package/README.md

@@ -45,12 +45,16 @@ For Tailor Platform apps using `@tailor-platform/app-shell`:
 
 ```typescript
 // src/shared/data-viewer.ts
-import { createDataViewer } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createDataViewer, createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
 import { tableMetadata } from "./generated/table-metadata";
 
+const fetcher = createDefaultFetcher({
+  endpoint: import.meta.env.VITE_APP_URL,
+});
+
 export const DataViewer = createDataViewer({
   metadata: tableMetadata,
-  appUri: import.meta.env.VITE_APP_URL,
+  fetcher,
 });
 ```
 
@@ -80,28 +84,47 @@ export const App = () => (
 
 For detailed options, see [AppShell Module Integration](./docs/app-shell-module.md).
 
-### Standalone Component
+### Standalone Explorer View
 
-For custom React apps, set up the metadata generator as described in [Generating Table Metadata](#generating-table-metadata). Then use the generated metadata:
+For custom React apps without AppShell, use `DataViewer.ExplorerView`. This provides a tab-based UI where users can select tables, create filters, and save views:
 
 ```tsx
-import { DataViewer, SavedViewProvider } from "@izumisy-tailor/tailor-data-viewer/component";
+// src/lib/data-viewer.ts (create once per app)
+import { createDataViewer, createDefaultFetcher } 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();
+const fetcher = createDefaultFetcher({
+  endpoint: "https://your-app.tailor.tech/graphql",
+});
+
+export const DataViewer = createDataViewer({
+  metadata: tableMetadata,
+  fetcher,
+});
+
+export const savedViewStore = createIndexedDBStore();
+```
+
+```tsx
+// src/App.tsx
+import "@izumisy-tailor/tailor-data-viewer/styles/theme.css";
+import { DataViewer, savedViewStore } from "./lib/data-viewer";
 
 function App() {
   return (
-    <SavedViewProvider store={store}>
-      <DataViewer
-        metadata={tableMetadata}
-        appUri="https://your-app.tailor.tech/graphql"
-      />
-    </SavedViewProvider>
+    <DataViewer.ExplorerView savedViewStore={savedViewStore} />
+  );
+}
+
+// With initial view loaded from URL
+function AppWithViewId() {
+  const viewId = useSearchParams().get("viewId") ?? undefined;
+  return (
+    <DataViewer.ExplorerView 
+      savedViewStore={savedViewStore} 
+      initialViewId={viewId}
+    />
   );
 }
 ```
@@ -110,16 +133,20 @@ For store options, see [Saved View Store](./docs/saved-view-store.md).
 
 ### Compositional API
 
-For more control over the UI layout and behavior, use the compositional (compound component) API:
+For more control over the UI layout and behavior, use the compositional (compound component) API with `createDataViewer`:
 
 ```tsx
 // src/shared/data-viewer.ts
-import { createDataViewer } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createDataViewer, createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
 import { tableMetadata } from "./generated/table-metadata";
 
+const fetcher = createDefaultFetcher({
+  endpoint: "https://your-app.tailor.tech",
+});
+
 export const DataViewer = createDataViewer({
   metadata: tableMetadata,
-  appUri: "https://your-app.tailor.tech",
+  fetcher,
 });
 ```
 

package/docs/API.md

@@ -4,21 +4,100 @@
 
 ### `createDataViewer`
 
-Creates a DataViewer instance with fixed metadata and appUri. Call this once per app and share the instance across pages.
+Creates a DataViewer instance with fixed metadata and fetcher. Call this once per app and share the instance across pages.
 
 ```tsx
-import { createDataViewer } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createDataViewer, createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
+
+const fetcher = createDefaultFetcher({
+  endpoint: "https://your-app.tailor.tech",
+});
 
 const DataViewer = createDataViewer({
   metadata: tableMetadata,
-  appUri: "https://your-app.tailor.tech",
+  fetcher,
 });
 
 // Returns:
 // - DataViewer.TableDataProvider - Root provider for table data
 // - DataViewer.ToolbarProvider - Toolbar state provider
 // - DataViewer.metadata - The metadata passed to createDataViewer
-// - DataViewer.appUri - The appUri passed to createDataViewer
+// - DataViewer.fetcher - The fetcher passed to createDataViewer
+```
+
+## GraphQL Fetcher
+
+### `GraphQLFetcher`
+
+Interface for GraphQL data fetching. Implement this interface to use your own GraphQL client.
+
+```tsx
+interface GraphQLFetcher {
+  execute: <T = unknown>(
+    query: string,
+    variables?: Record<string, unknown>,
+    options?: GraphQLFetcherOptions,
+  ) => Promise<GraphQLFetcherResult<T>>;
+}
+
+interface GraphQLFetcherOptions {
+  signal?: AbortSignal;
+}
+
+interface GraphQLFetcherResult<T> {
+  data: T | null;
+  errors?: GraphQLError[];
+}
+```
+
+### `createDefaultFetcher`
+
+Creates a default GraphQL fetcher using `graphql-request`.
+
+```tsx
+import { createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
+
+const fetcher = createDefaultFetcher({
+  endpoint: "https://your-app.tailor.tech/graphql",
+  headers: { "X-Custom-Header": "value" },  // optional
+  credentials: "include",                    // optional, default: "include"
+});
+```
+
+### `createUrqlFetcher`
+
+Creates a GraphQL fetcher from an existing urql Client.
+
+```tsx
+import { createClient } from "@urql/core";
+import { createUrqlFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
+
+const urqlClient = createClient({
+  url: "https://your-app.tailor.tech/graphql",
+  fetchOptions: {
+    headers: { "Authorization": "Bearer token" },
+  },
+});
+
+const fetcher = createUrqlFetcher({ client: urqlClient });
+```
+
+### Custom Fetcher Implementation
+
+You can implement your own fetcher for any GraphQL client:
+
+```tsx
+const customFetcher: GraphQLFetcher = {
+  execute: async (query, variables, options) => {
+    const response = await fetch("/graphql", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query, variables }),
+      signal: options?.signal,
+    });
+    return response.json();
+  },
+};
 ```
 
 ## Components
@@ -31,8 +110,8 @@ Main component with tab-based interface (for AppShell integration).
 interface DataViewerProps {
   /** Map of table name to metadata */
   tableMetadata: TableMetadataMap;
-  /** GraphQL endpoint URI */
-  appUri: string;
+  /** GraphQL fetcher for data fetching */
+  fetcher: GraphQLFetcher;
   /** Optional initial view ID to load */
   initialViewId?: string;
 }
@@ -88,7 +167,7 @@ const {
   previousPage,
   resetPagination,
   refetch,
-} = useTableData(appUri, table, selectedFields, selectedRelations, filters, metadataMap, expandedFields);
+} = useTableData(fetcher, table, selectedFields, selectedRelations, filters, metadataMap, expandedFields);
 ```
 
 ### `useColumnState`

package/docs/app-shell-module.md

@@ -14,12 +14,16 @@ First, create a shared DataViewer instance:
 
 ```typescript
 // src/shared/data-viewer.ts
-import { createDataViewer } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createDataViewer, createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
 import { tableMetadata } from "@tailor-platform/my-app/generated/table-metadata";
 
+const fetcher = createDefaultFetcher({
+  endpoint: import.meta.env.VITE_APP_URL,
+});
+
 export const DataViewer = createDataViewer({
   metadata: tableMetadata,
-  appUri: import.meta.env.VITE_APP_URL,
+  fetcher,
 });
 ```
 

package/docs/compositional-api.md

@@ -18,12 +18,16 @@ First, create a shared DataViewer instance (once per app):
 
 ```tsx
 // src/shared/data-viewer.ts
-import { createDataViewer } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createDataViewer, createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
 import { tableMetadata } from "./generated/table-metadata";
 
+const fetcher = createDefaultFetcher({
+  endpoint: "https://your-app.tailor.tech",
+});
+
 export const DataViewer = createDataViewer({
   metadata: tableMetadata,
-  appUri: "https://your-app.tailor.tech",
+  fetcher,
 });
 ```
 
@@ -70,21 +74,25 @@ function MyDataViewer() {
 
 ### createDataViewer
 
-Factory function to create a DataViewer instance with fixed metadata and appUri. Call this once per app and share the instance across pages.
+Factory function to create a DataViewer instance with fixed metadata and fetcher. Call this once per app and share the instance across pages.
 
 ```tsx
-import { createDataViewer } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createDataViewer, createDefaultFetcher } from "@izumisy-tailor/tailor-data-viewer/component";
+
+const fetcher = createDefaultFetcher({
+  endpoint: "https://your-app.tailor.tech",
+});
 
 const DataViewer = createDataViewer({
   metadata: tableMetadata,  // Generated from TailorDB schema
-  appUri: "https://your-app.tailor.tech",
+  fetcher,
 });
 
 // Returns:
 // - DataViewer.TableDataProvider - Root provider for table data
 // - DataViewer.ToolbarProvider - Toolbar state provider
 // - DataViewer.metadata - The metadata passed to createDataViewer
-// - DataViewer.appUri - The appUri passed to createDataViewer
+// - DataViewer.fetcher - The fetcher passed to createDataViewer
 ```
 
 ### DataViewer.TableDataProvider

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.30",
+  "version": "0.1.32",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

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

@@ -13,6 +13,7 @@ import {
   Columns,
   LayoutGrid,
 } from "lucide-react";
+import type { TableMetadataMap } from "../generator/metadata-generator";
 import type { DataViewModuleConfig } from "./types";
 import { isStoreFactory } from "./types";
 import { DataViewer as DataViewerComponent } from "../component/data-viewer";
@@ -45,7 +46,9 @@ import { Badge } from "../component/ui/badge";
  * });
  * ```
  */
-export function createDataViewModule(config: DataViewModuleConfig) {
+export function createDataViewModule<
+  TMetadata extends TableMetadataMap = TableMetadataMap,
+>(config: DataViewModuleConfig<TMetadata>) {
   const {
     dataViewer,
     savedViewStore: storeOrFactory,
@@ -53,7 +56,7 @@ export function createDataViewModule(config: DataViewModuleConfig) {
     meta = {},
   } = config;
 
-  const { metadata: tableMetadata, appUri } = dataViewer;
+  const { metadata: tableMetadata, fetcher } = dataViewer;
 
   const basePath = path.base ?? "data-view";
   const explorerPath = path.explorer ?? "explorer";
@@ -62,7 +65,7 @@ export function createDataViewModule(config: DataViewModuleConfig) {
 
   // Resolve store (call factory if needed)
   const store = isStoreFactory(storeOrFactory)
-    ? storeOrFactory({ appUri })
+    ? storeOrFactory({ fetcher })
     : storeOrFactory;
 
   // Create the explorer resource page component
@@ -74,7 +77,7 @@ export function createDataViewModule(config: DataViewModuleConfig) {
       <SavedViewProvider store={store}>
         <DataViewerComponent
           metadata={tableMetadata}
-          appUri={appUri}
+          fetcher={fetcher}
           initialViewId={viewId}
         />
       </SavedViewProvider>

package/src/component/column-selector.test.tsx

@@ -11,6 +11,7 @@ import type {
 import { DataViewerProvider } from "./contexts";
 import { ToolbarProvider } from "./contexts";
 import type { ReactNode } from "react";
+import { createMockFetcher } from "../tests/helper";
 
 const mockFields: FieldMetadata[] = [
   { name: "id", type: "uuid", required: true, description: "ID" },
@@ -48,7 +49,7 @@ function TestWrapper({
 }: WrapperProps) {
   return (
     <DataViewerProvider
-      appUri="https://example.com"
+      fetcher={createMockFetcher()}
       tableName={tableMetadata.name}
       metadata={metadata}
       initialData={{

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

@@ -4,6 +4,7 @@ import {
   type DataViewerProviderProps,
 } from "./data-viewer-context";
 import type { TableMetadataMap } from "../../generator/metadata-generator";
+import { createMockFetcher } from "../../tests/helper";
 
 // =============================================================================
 // Mock metadata with `as const` for type-safe tests
@@ -135,14 +136,14 @@ describe("DataViewerProvider type safety", () => {
         children: null,
         tableName: "user",
         metadata: mockMetadata,
-        appUri: "https://example.com",
+        fetcher: createMockFetcher(),
       };
 
       const postProps: DataViewerProviderProps<MockMetadata, "post"> = {
         children: null,
         tableName: "post",
         metadata: mockMetadata,
-        appUri: "https://example.com",
+        fetcher: createMockFetcher(),
       };
 
       expect(userProps.tableName).toBe("user");

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

@@ -11,6 +11,7 @@ import type {
   TableMetadataMap,
   ExpandedRelationFields,
 } from "../../generator/metadata-generator";
+import type { GraphQLFetcher } from "../../graphql/fetcher";
 import { useColumnState } from "../hooks/use-column-state";
 import type { SearchFilters } from "../types";
 import type { SortState } from "../hooks/use-table-data";
@@ -71,7 +72,7 @@ export interface DataViewerContextValue {
   // Metadata
   tableMetadata: TableMetadata | null;
   metadata: TableMetadataMap;
-  appUri: string;
+  fetcher: GraphQLFetcher;
 
   // Column state
   selectedFields: string[];
@@ -148,8 +149,8 @@ export interface DataViewerProviderProps<
   tableName: TTableName;
   /** All table metadata (generated from TailorDB schema) */
   metadata: TMetadata;
-  /** App URI for GraphQL endpoint */
-  appUri: string;
+  /** GraphQL fetcher for data fetching */
+  fetcher: GraphQLFetcher;
   /** Initial data for filters, selected fields, and relations (type-safe when metadata is `as const`) */
   initialData?: DataViewerInitialData<TMetadata, TTableName>;
 }
@@ -165,7 +166,7 @@ export function DataViewerProvider<
   children,
   tableName,
   metadata,
-  appUri,
+  fetcher,
   initialData,
 }: DataViewerProviderProps<TMetadata, TTableName>) {
   // Get table metadata from the map
@@ -213,7 +214,7 @@ export function DataViewerProvider<
     () => ({
       tableMetadata,
       metadata,
-      appUri,
+      fetcher,
       selectedFields: columnState.selectedFields,
       toggleField: columnState.toggleField,
       selectAllFields: columnState.selectAll,
@@ -234,7 +235,7 @@ export function DataViewerProvider<
     [
       tableMetadata,
       metadata,
-      appUri,
+      fetcher,
       columnState.selectedFields,
       columnState.toggleField,
       columnState.selectAll,

package/src/component/contexts/table-data-context.tsx

@@ -9,6 +9,7 @@ import type {
   TableMetadataMap,
   ExpandedRelationFields,
 } from "../../generator/metadata-generator";
+import type { GraphQLFetcher } from "../../graphql/fetcher";
 import {
   useTableData,
   type SortState,
@@ -54,8 +55,8 @@ export interface TableDataProviderProps<
   tableName: TTableName;
   /** All table metadata (generated from TailorDB schema) */
   metadata: TMetadata;
-  /** App URI for GraphQL endpoint */
-  appUri: string;
+  /** GraphQL fetcher for data fetching */
+  fetcher: GraphQLFetcher;
   /** Initial data for filters, selected fields, and relations (type-safe when metadata is `as const`) */
   initialData?: DataViewerInitialData<TMetadata, TTableName>;
 }
@@ -71,14 +72,14 @@ export function TableDataProvider<
   children,
   tableName,
   metadata,
-  appUri,
+  fetcher,
   initialData,
 }: TableDataProviderProps<TMetadata, TTableName>) {
   return (
     <DataViewerProvider
       tableName={tableName}
       metadata={metadata}
-      appUri={appUri}
+      fetcher={fetcher}
       initialData={initialData}
     >
       <TableDataProviderInner>{children}</TableDataProviderInner>
@@ -92,7 +93,7 @@ export function TableDataProvider<
  */
 function TableDataProviderInner({ children }: { children: ReactNode }) {
   const {
-    appUri,
+    fetcher,
     tableMetadata,
     metadata,
     selectedFields,
@@ -105,7 +106,7 @@ function TableDataProviderInner({ children }: { children: ReactNode }) {
 
   // Fetch table data
   const tableData = useTableData(
-    appUri,
+    fetcher,
     tableMetadata,
     selectedFields,
     selectedRelations,

package/src/component/create-data-viewer.tsx

@@ -1,8 +1,12 @@
 import type { ReactNode } from "react";
 import type { TableMetadataMap } from "../generator/metadata-generator";
+import type { GraphQLFetcher } from "../graphql/fetcher";
+import type { SavedViewStore, SavedViewStoreFactory } from "../store/types";
 import { type DataViewerInitialData } from "./contexts/data-viewer-context";
 import { TableDataProvider } from "./contexts/table-data-context";
 import { ToolbarProvider } from "./contexts/toolbar-context";
+import { SavedViewProvider } from "./saved-view-context";
+import { DataViewer as DataViewerExplorer } from "./data-viewer";
 
 /**
  * Configuration for createDataViewer factory
@@ -10,8 +14,8 @@ import { ToolbarProvider } from "./contexts/toolbar-context";
 export interface CreateDataViewerConfig<TMetadata extends TableMetadataMap> {
   /** All table metadata (generated from TailorDB schema) */
   metadata: TMetadata;
-  /** App URI for GraphQL endpoint */
-  appUri: string;
+  /** GraphQL fetcher for data fetching */
+  fetcher: GraphQLFetcher;
 }
 
 /**
@@ -35,6 +39,20 @@ export interface DataViewerToolbarProviderProps {
   children: ReactNode;
 }
 
+/**
+ * Props for DataViewer.ExplorerView (tab-based UI)
+ */
+export interface ExplorerViewProps {
+  /**
+   * Saved view store for persisting views.
+   * Can be a store instance or a factory function that receives the fetcher.
+   * If not provided, views won't be persisted.
+   */
+  savedViewStore?: SavedViewStore | SavedViewStoreFactory;
+  /** Initial view ID to load on mount */
+  initialViewId?: string;
+}
+
 /**
  * Return type of createDataViewer factory
  */
@@ -53,29 +71,39 @@ export interface DataViewer<TMetadata extends TableMetadataMap> {
    */
   ToolbarProvider: (props: DataViewerToolbarProviderProps) => ReactNode;
 
+  /**
+   * Tab-based explorer view component - provides a full-featured data exploration UI
+   * with multiple tabs, table selection, and saved views support
+   */
+  ExplorerView: (props: ExplorerViewProps) => ReactNode;
+
   /**
    * The metadata passed to createDataViewer
    */
   metadata: TMetadata;
 
   /**
-   * The appUri passed to createDataViewer
+   * The fetcher passed to createDataViewer
    */
-  appUri: string;
+  fetcher: GraphQLFetcher;
 }
 
 /**
- * Factory function to create a DataViewer instance with fixed metadata and appUri
+ * Factory function to create a DataViewer instance with fixed metadata and fetcher
  *
  * @example
  * ```tsx
  * // src/lib/data-viewer.ts (create once per app)
- * import { createDataViewer } from "@tailor-platform/data-viewer";
+ * import { createDataViewer, createDefaultFetcher } from "@tailor-platform/data-viewer";
  * import { tableMetadata } from "./generated/metadata";
  *
+ * const fetcher = createDefaultFetcher({
+ *   endpoint: import.meta.env.VITE_APP_URL,
+ * });
+ *
  * export const DataViewer = createDataViewer({
  *   metadata: tableMetadata,
- *   appUri: import.meta.env.VITE_APP_URL,
+ *   fetcher,
  * });
  *
  * // pages/suppliers/page.tsx (use in each page)
@@ -99,9 +127,9 @@ export interface DataViewer<TMetadata extends TableMetadataMap> {
 export function createDataViewer<TMetadata extends TableMetadataMap>(
   config: CreateDataViewerConfig<TMetadata>,
 ): DataViewer<TMetadata> {
-  const { metadata, appUri } = config;
+  const { metadata, fetcher } = config;
 
-  // TableDataProvider with fixed metadata and appUri
+  // TableDataProvider with fixed metadata and fetcher
   function TableDataProviderWrapper<
     TTableName extends keyof TMetadata & string,
   >({
@@ -112,7 +140,7 @@ export function createDataViewer<TMetadata extends TableMetadataMap>(
     return (
       <TableDataProvider
         metadata={metadata}
-        appUri={appUri}
+        fetcher={fetcher}
         tableName={tableName}
         initialData={initialData}
       >
@@ -128,10 +156,41 @@ export function createDataViewer<TMetadata extends TableMetadataMap>(
     return <ToolbarProvider>{children}</ToolbarProvider>;
   }
 
+  // ExplorerView - tab-based UI with saved views support
+  function ExplorerViewWrapper({
+    savedViewStore,
+    initialViewId,
+  }: ExplorerViewProps): ReactNode {
+    // Resolve store (call factory if needed)
+    const store = savedViewStore
+      ? typeof savedViewStore === "function"
+        ? savedViewStore({ fetcher })
+        : savedViewStore
+      : undefined;
+
+    const explorerContent = (
+      <DataViewerExplorer
+        metadata={metadata}
+        fetcher={fetcher}
+        initialViewId={initialViewId}
+      />
+    );
+
+    // Wrap with SavedViewProvider only if store is provided
+    if (store) {
+      return (
+        <SavedViewProvider store={store}>{explorerContent}</SavedViewProvider>
+      );
+    }
+
+    return explorerContent;
+  }
+
   return {
     TableDataProvider: TableDataProviderWrapper,
     ToolbarProvider: ToolbarProviderWrapper,
+    ExplorerView: ExplorerViewWrapper,
     metadata,
-    appUri,
+    fetcher,
   };
 }