@izumisy-tailor/tailor-data-viewer 0.1.2 → 0.1.3

package/API.md

@@ -0,0 +1,137 @@
+# API Reference
+
+## Components
+
+### `<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;
+}
+```

package/README.md

@@ -36,25 +36,14 @@ npm install react react-dom
 
 ### Basic Setup
 
+First, set up the metadata generator as described in [Generating Table Metadata](#generating-table-metadata). Then use the generated metadata in your React app:
+
 ```tsx
 import { DataViewer, SavedViewProvider } from "@izumisy-tailor/tailor-data-viewer/component";
-import type { TableMetadataMap } from "@izumisy-tailor/tailor-data-viewer/generator";
 import "@izumisy-tailor/tailor-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
-};
+// Import the generated metadata from your Tailor Platform SDK project
+import { tableMetadata } from "./generated/table-metadata";
 
 function App() {
   return (
@@ -85,150 +74,44 @@ import {
 
 ### Generating Table Metadata
 
-Use the metadata generator to create type-safe metadata from your Tailor Platform schema:
-
-```tsx
-import { generateTableMetadata } from "@izumisy-tailor/tailor-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
+This library includes a custom generator for [Tailor Platform SDK](https://www.npmjs.com/package/@tailor-platform/sdk) that automatically generates table metadata from your TailorDB schema.
 
-#### `useTableData`
+#### Setup
 
-Manages table data fetching with pagination, sorting, and filtering.
+1. Install the generator package in your Tailor Platform SDK project:
 
-```tsx
-const {
-  data,
-  loading,
-  error,
-  pagination,
-  sortState,
-  setSort,
-  nextPage,
-  previousPage,
-  resetPagination,
-  refetch,
-} = useTableData(appUri, table, selectedFields, selectedRelations, filters, metadataMap, expandedFields);
+```bash
+npm install @izumisy-tailor/tailor-data-viewer
 ```
 
-#### `useColumnState`
-
-Manages column visibility and relation field expansion.
+2. Configure the generator in your `tailor.config.ts`:
 
-```tsx
-const {
-  selectedFields,
-  selectedRelations,
-  expandedRelationFields,
-  toggleField,
-  toggleRelation,
-  toggleExpandedRelationField,
-  selectAll,
-  deselectAll,
-} = useColumnState(fields, relations);
-```
-
-#### `useAccessibleTables`
+```typescript
+import { defineConfig, defineGenerators } from "@tailor-platform/sdk";
+import tableMetadataGenerator from "@izumisy-tailor/tailor-data-viewer/generator";
 
-Filters tables based on user roles.
+export const generators = defineGenerators(
+  tableMetadataGenerator,
+  // ... other generators
+);
 
-```tsx
-const tables = useAccessibleTables(tableMetadataMap, userRoles);
+export default defineConfig({
+  name: "my-app",
+  // ... your config
+});
 ```
 
-## Types
-
-### TableMetadata
+3. Run the generator:
 
-```tsx
-interface TableMetadata {
-  name: string;
-  pluralForm: string;
-  description?: string;
-  fields: FieldMetadata[];
-  relations?: RelationMetadata[];
-  allowedRoles: string[];
-}
+```bash
+tailor-sdk generate
 ```
 
-### FieldMetadata
-
-```tsx
-interface FieldMetadata {
-  name: string;
-  type: FieldType;
-  nullable: boolean;
-  enumValues?: string[];
-}
+This will generate a `src/generated/table-metadata.ts` file containing type-safe metadata for all your TailorDB types, including fields, relations, and role-based access control settings.
 
-type FieldType = "string" | "number" | "boolean" | "uuid" | "datetime" | "date" | "time" | "json" | "enum" | "nested" | "array";
-```
-
-### RelationMetadata
+## API Reference
 
-```tsx
-interface RelationMetadata {
-  fieldName: string;
-  targetTable: string;
-  relationType: "manyToOne" | "oneToMany";
-  foreignKeyField: string;
-}
-```
+See [API.md](API.md) for detailed API documentation including components, hooks, and types.
 
 ## Styling
 

package/dist/generator/index.d.mts

@@ -0,0 +1,170 @@
+//#region src/generator/metadata-generator.d.ts
+/**
+ * Field type mapping for Data View
+ */
+type FieldType = "string" | "number" | "boolean" | "uuid" | "datetime" | "date" | "time" | "enum" | "array" | "nested";
+/**
+ * Metadata for a single field
+ */
+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
+ */
+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
+ */
+interface TableMetadata {
+  name: string;
+  pluralForm: string;
+  description?: string;
+  readAllowedRoles: string[];
+  fields: FieldMetadata[];
+  /** Relations (manyToOne and oneToMany) */
+  relations?: RelationMetadata[];
+}
+/**
+ * Map of all tables
+ */
+type TableMetadataMap = Record<string, TableMetadata>;
+/**
+ * Intermediate type for processed table data
+ */
+interface ProcessedTable {
+  name: string;
+  pluralForm: string;
+  originalName: string;
+  description?: string;
+  readAllowedRoles: string[];
+  fields: FieldMetadata[];
+  relations: RelationMetadata[];
+}
+/**
+ * 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
+ */
+declare const tableMetadataGenerator: {
+  id: string;
+  description: string;
+  dependencies: ("tailordb" | "resolver" | "executor")[];
+  processType({
+    type
+  }: {
+    type: ParsedTailorDBType;
+  }): ProcessedTable;
+  processResolver(): null;
+  processExecutor(): null;
+  processTailorDBNamespace({
+    types
+  }: {
+    types: Record<string, ProcessedTable>;
+  }): ProcessedTable[];
+  aggregate({
+    input
+  }: {
+    input: GeneratorInput;
+  }): GeneratorResult;
+};
+//#endregion
+export { FieldMetadata, FieldType, RelationMetadata, TableMetadata, TableMetadataMap, tableMetadataGenerator as default, tableMetadataGenerator };

package/dist/generator/index.mjs

@@ -0,0 +1,161 @@
+//#region src/generator/metadata-generator.ts
+/**
+* Map TailorDB field type to FieldType
+*/
+function mapFieldType(tailorType, isArray) {
+	const mappedType = {
+		string: "string",
+		integer: "number",
+		float: "number",
+		boolean: "boolean",
+		uuid: "uuid",
+		datetime: "datetime",
+		date: "date",
+		time: "time",
+		enum: "enum",
+		nested: "nested"
+	}[tailorType] ?? "string";
+	if (isArray) return {
+		type: "array",
+		arrayItemType: mappedType
+	};
+	return { type: mappedType };
+}
+/**
+* Convert PascalCase to camelCase
+*/
+function toCamelCase(str) {
+	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) {
+	if (!gqlPermission) return [];
+	const roles = /* @__PURE__ */ new Set();
+	for (const policy of gqlPermission) {
+		if (policy.permit !== "allow") continue;
+		const actions = policy.actions;
+		if (!actions.includes("all") && !actions.includes("read")) continue;
+		for (const condition of policy.conditions) {
+			if (!Array.isArray(condition) || condition.length < 3) continue;
+			const [left, operator, right] = condition;
+			if (typeof left === "string" && operator === "in" && typeof right === "object" && right !== null && "user" in right && right.user === "roles") roles.add(left);
+			if (typeof right === "string" && operator === "in" && typeof left === "object" && left !== null && "user" in left && left.user === "roles") roles.add(right);
+		}
+	}
+	return Array.from(roles);
+}
+/**
+* Custom generator that extracts table metadata for Data View
+*/
+const tableMetadataGenerator = {
+	id: "table-metadata",
+	description: "Generates table metadata for Data View including field definitions and read permissions",
+	dependencies: ["tailordb"],
+	processType({ type }) {
+		const fields = [];
+		const relations = [];
+		for (const [fieldName, field] of Object.entries(type.fields)) {
+			const config = field.config;
+			const { type: fieldType, arrayItemType } = mapFieldType(config.type, config.array);
+			const fieldMetadata = {
+				name: fieldName,
+				type: fieldType,
+				required: config.required ?? false,
+				description: config.description
+			};
+			if (config.allowedValues && config.allowedValues.length > 0) fieldMetadata.enumValues = config.allowedValues.map((v) => typeof v === "string" ? v : v.value);
+			if (arrayItemType) fieldMetadata.arrayItemType = arrayItemType;
+			const rawRelation = config.rawRelation;
+			const isManyToOneRelation = rawRelation && (rawRelation.type === "manyToOne" || rawRelation.type === "n-1" || rawRelation.type === "oneToOne" || rawRelation.type === "1-1") && rawRelation.toward;
+			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);
+				fieldMetadata.relation = {
+					fieldName: relationFieldName,
+					targetTable: targetTableName
+				};
+				relations.push({
+					fieldName: relationFieldName,
+					targetTable: targetTableName,
+					relationType: "manyToOne",
+					foreignKeyField: fieldName,
+					backwardFieldName: rawRelation.backward,
+					isOneToOne
+				});
+			}
+			fields.push(fieldMetadata);
+		}
+		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 }) {
+		return Object.values(types);
+	},
+	aggregate({ input }) {
+		const allTables = input.tailordb.flatMap((ns) => ns.types);
+		const tableByOriginalName = /* @__PURE__ */ new Map();
+		for (const table of allTables) tableByOriginalName.set(table.originalName, table);
+		for (const table of allTables) for (const relation of table.relations) if (relation.relationType === "manyToOne") {
+			if (relation.isOneToOne) continue;
+			const targetTable = tableByOriginalName.get(relation.targetTable.charAt(0).toUpperCase() + relation.targetTable.slice(1));
+			if (targetTable) {
+				const oneToManyFieldName = relation.backwardFieldName ?? table.pluralForm;
+				if (!targetTable.relations.some((r) => r.relationType === "oneToMany" && r.fieldName === oneToManyFieldName)) targetTable.relations.push({
+					fieldName: oneToManyFieldName,
+					targetTable: table.name,
+					relationType: "oneToMany",
+					foreignKeyField: relation.foreignKeyField
+				});
+			}
+		}
+		const metadataMap = {};
+		for (const table of allTables) {
+			const { originalName, ...tableWithoutOriginalName } = table;
+			metadataMap[table.name] = tableWithoutOriginalName;
+		}
+		return { files: [{
+			path: "src/generated/table-metadata.ts",
+			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];
+`
+		}] };
+	}
+};
+var metadata_generator_default = tableMetadataGenerator;
+
+//#endregion
+export { metadata_generator_default as default, tableMetadataGenerator };

package/package.json

@@ -1,25 +1,27 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.3",
+  "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [
-    "src"
+    "src",
+    "dist",
+    "API.md"
   ],
   "exports": {
     "./component": {
       "default": "./src/component/index.ts"
     },
     "./generator": {
-      "default": "./src/generator/metadata-generator.ts"
+      "types": "./dist/generator/index.d.mts",
+      "default": "./dist/generator/index.mjs"
     },
     "./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",
@@ -29,6 +31,8 @@
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "graphql-request": "^6.1.0",
+    "lucide-react": "^0.468.0",
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
@@ -36,12 +40,15 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0"
+    "tsdown": "^0.20.1",
+    "typescript": "^5.9.3"
   },
   "scripts": {
+    "build": "tsdown",
     "type-check": "tsc -b"
   }
 }