@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/collection_editor/useJsonCollectionsConfigController.tsx

@@ -0,0 +1,286 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { EngineProperties, CollectionConfig, NavigationGroupMapping, Property } from "@rebasepro/types";
+import type {
+    CollectionsConfigController,
+    SaveCollectionParams,
+    UpdateCollectionParams,
+    DeleteCollectionParams,
+    SavePropertyParams,
+    DeletePropertyParams,
+    UpdatePropertiesOrderParams,
+    UpdateKanbanColumnsOrderParams,
+} from "./types/config_controller";
+import type { JsonCollectionStore, SerializableCollectionConfig } from "./serializable_types";
+import { toSerializableCollectionConfig, toSerializableProperty, fromSerializableCollectionConfig } from "./serializable_utils";
+
+export interface UseJsonCollectionsConfigControllerOptions {
+    /**
+     * The store adapter for persisting/loading collections.
+     */
+    store: JsonCollectionStore;
+
+    /**
+     * If true, the configuration cannot be modified.
+     */
+    readOnly?: boolean;
+
+    /**
+     * If true, collections will be loaded from the store on mount.
+     * Defaults to true.
+     */
+    autoLoad?: boolean;
+}
+
+/**
+ * A `CollectionsConfigController` implementation that persists collection
+ * configurations as JSON via a pluggable `JsonCollectionStore` adapter.
+ *
+ * Use this when you want to store collection schemas in a database, API,
+ * localStorage, or any other JSON-compatible backend — as opposed to the
+ * default code-based persistence.
+ *
+ * @example
+ * ```tsx
+ * const store: JsonCollectionStore = {
+ *     load: async () => { const res = await fetch('/api/schemas'); return res.json(); },
+ *     save: async (slug, data) => { await fetch(`/api/schemas/${slug}`, { method: 'PUT', body: JSON.stringify(data) }); },
+ *     delete: async (slug) => { await fetch(`/api/schemas/${slug}`, { method: 'DELETE' }); },
+ * };
+ *
+ * const configController = useJsonCollectionsConfigController({ store });
+ * ```
+ */
+export function useJsonCollectionsConfigController({
+    store,
+    readOnly = false,
+    autoLoad = true,
+}: UseJsonCollectionsConfigControllerOptions): CollectionsConfigController {
+    const [collections, setCollections] = useState<CollectionConfig[]>([]);
+    const [loading, setLoading] = useState(autoLoad);
+    const [navigationEntries, setNavigationEntries] = useState<NavigationGroupMapping[]>([]);
+
+    // Keep store ref stable to avoid stale closures in callbacks
+    const storeRef = useRef(store);
+    storeRef.current = store;
+
+    // ── Load on mount ─────────────────────────────────────────────────
+    useEffect(() => {
+        if (!autoLoad) return;
+        let cancelled = false;
+
+        (async () => {
+            try {
+                const [serialized, navEntries] = await Promise.all([
+                    storeRef.current.load(),
+                    storeRef.current.loadNavigationEntries?.() ?? Promise.resolve([]),
+                ]);
+                if (cancelled) return;
+                setCollections(serialized.map(fromSerializableCollectionConfig));
+                setNavigationEntries(navEntries);
+            } catch (e) {
+                console.error("useJsonCollectionsConfigController: failed to load collections", e);
+            } finally {
+                if (!cancelled) setLoading(false);
+            }
+        })();
+
+        return () => { cancelled = true; };
+    }, [autoLoad]);
+
+    // ── Helpers ────────────────────────────────────────────────────────
+
+    /**
+     * Update local state and persist a collection to the store.
+     */
+    const persistCollection = useCallback(async (collection: CollectionConfig) => {
+        const serializable = toSerializableCollectionConfig(collection);
+        await storeRef.current.save(collection.slug, serializable);
+    }, []);
+
+    /**
+     * Find collection by id (slug).
+     */
+    const getCollection = useCallback((id: string): CollectionConfig => {
+        const found = collections.find(c => c.slug === id);
+        if (found) return found;
+        throw new Error(`Collection "${id}" not found`);
+    }, [collections]);
+
+    // ── CRUD operations ───────────────────────────────────────────────
+
+    const saveCollection = useCallback(async <M extends Record<string, unknown>>(
+        { id, collectionData }: SaveCollectionParams<M>
+    ) => {
+        const collection = collectionData as CollectionConfig;
+        await persistCollection(collection);
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === id);
+            if (idx >= 0) {
+                const next = [...prev];
+                next[idx] = collection;
+                return next;
+            }
+            return [...prev, collection];
+        });
+    }, [persistCollection]);
+
+    const updateCollection = useCallback(async <M extends Record<string, unknown>>(
+        { id, collectionData, previousId }: UpdateCollectionParams<M>
+    ) => {
+        setCollections(prev => {
+            const lookupId = previousId ?? id;
+            const idx = prev.findIndex(c => c.slug === lookupId);
+            if (idx < 0) return prev;
+
+            const merged = { ...prev[idx], ...collectionData } as CollectionConfig;
+            const next = [...prev];
+            next[idx] = merged;
+
+            // Persist async — fire-and-forget with error logging
+            persistCollection(merged).catch(e =>
+                console.error("useJsonCollectionsConfigController: failed to update collection", e)
+            );
+
+            // If slug changed, clean up the old entry in the store
+            if (previousId && previousId !== id) {
+                storeRef.current.delete(previousId).catch(e =>
+                    console.error("useJsonCollectionsConfigController: failed to delete old slug", e)
+                );
+            }
+
+            return next;
+        });
+    }, [persistCollection]);
+
+    const deleteCollection = useCallback(async ({ id }: DeleteCollectionParams) => {
+        await storeRef.current.delete(id);
+        setCollections(prev => prev.filter(c => c.slug !== id));
+    }, []);
+
+    const saveProperty = useCallback(async ({
+        path,
+        propertyKey,
+        property,
+        newPropertiesOrder,
+    }: SavePropertyParams) => {
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === path);
+            if (idx < 0) return prev;
+
+            const collection = { ...prev[idx] };
+            collection.properties = {
+                ...collection.properties,
+                [propertyKey]: property,
+            } as EngineProperties;
+            if (newPropertiesOrder) {
+                collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
+            }
+
+            const next = [...prev];
+            next[idx] = collection as CollectionConfig;
+
+            persistCollection(next[idx]).catch(e =>
+                console.error("useJsonCollectionsConfigController: failed to save property", e)
+            );
+
+            return next;
+        });
+    }, [persistCollection]);
+
+    const deleteProperty = useCallback(async ({
+        path,
+        propertyKey,
+        newPropertiesOrder,
+    }: DeletePropertyParams) => {
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === path);
+            if (idx < 0) return prev;
+
+            const collection = { ...prev[idx] };
+            const { [propertyKey]: _removed, ...remaining } = collection.properties;
+            collection.properties = remaining;
+            if (newPropertiesOrder) {
+                collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
+            }
+
+            const next = [...prev];
+            next[idx] = collection as CollectionConfig;
+
+            persistCollection(next[idx]).catch(e =>
+                console.error("useJsonCollectionsConfigController: failed to delete property", e)
+            );
+
+            return next;
+        });
+    }, [persistCollection]);
+
+    const updatePropertiesOrder = useCallback(async ({
+        collection,
+        newPropertiesOrder,
+    }: UpdatePropertiesOrderParams) => {
+        const updated = {
+            ...collection,
+            propertiesOrder: newPropertiesOrder,
+        } as CollectionConfig;
+
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === collection.slug);
+            if (idx < 0) return prev;
+            const next = [...prev];
+            next[idx] = updated;
+            return next;
+        });
+
+        await persistCollection(updated);
+    }, [persistCollection]);
+
+    const updateKanbanColumnsOrder = useCallback(async ({
+        collection,
+        kanbanColumnProperty,
+        newColumnsOrder,
+    }: UpdateKanbanColumnsOrderParams) => {
+        // Kanban column order is stored in the enum order of the column property.
+        // For JSON persistence, we store it as-is — the view layer reads enum order.
+        // This is a no-op for now; the kanban order is determined by the enum
+        // definition on the property itself.
+    }, []);
+
+    const saveNavigationEntriesHandler = useCallback(async (entries: NavigationGroupMapping[]) => {
+        setNavigationEntries(entries);
+        if (storeRef.current.saveNavigationEntries) {
+            await storeRef.current.saveNavigationEntries(entries);
+        }
+    }, []);
+
+    // ── Return controller ─────────────────────────────────────────────
+    return useMemo<CollectionsConfigController>(() => ({
+        loading,
+        readOnly,
+        readOnlyReason: readOnly ? "Configuration is read-only." : undefined,
+        collections,
+        getCollection,
+        saveCollection,
+        updateCollection,
+        deleteCollection,
+        saveProperty,
+        deleteProperty,
+        updatePropertiesOrder,
+        updateKanbanColumnsOrder,
+        navigationEntries,
+        saveNavigationEntries: saveNavigationEntriesHandler,
+    }), [
+        loading,
+        readOnly,
+        collections,
+        getCollection,
+        saveCollection,
+        updateCollection,
+        deleteCollection,
+        saveProperty,
+        deleteProperty,
+        updatePropertiesOrder,
+        updateKanbanColumnsOrder,
+        navigationEntries,
+        saveNavigationEntriesHandler,
+    ]);
+}

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -1,12 +1,12 @@
 import { CollectionsConfigController, SaveCollectionParams, UpdateCollectionParams, DeleteCollectionParams, SavePropertyParams, DeletePropertyParams, UpdatePropertiesOrderParams } from "./types/config_controller";
-import { EntityCollection, Properties } from "@rebasepro/types";
+import { CollectionConfig, Properties } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
 
 
-import React, { useMemo } from "react";
+import React, { useMemo, useRef } from "react";
 export function useLocalCollectionsConfigController(
     clientOrUrl: any,
-    baseCollections: EntityCollection[] = [],
+    baseCollections: CollectionConfig[] = [],
     options?: {
         readOnly?: boolean;
         getAuthToken?: () => Promise<string | null>;
@@ -14,11 +14,15 @@ export function useLocalCollectionsConfigController(
 ): CollectionsConfigController {
 
     const parsedCollections = baseCollections;
+    
+    // Store latest options in a ref to prevent stale closures in the `request` function
+    // due to useMemo caching the saveCollection function.
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
 
     const request = async (endpoint: string, payload: Record<string, unknown>) => {
-        console.log("dispatching dev server request", endpoint, payload);
         try {
-            let token = options?.getAuthToken ? await options.getAuthToken() : null;
+            let token = optionsRef.current?.getAuthToken ? await optionsRef.current.getAuthToken() : null;
             let baseUrl = typeof clientOrUrl === "string" ? clientOrUrl : "";
 
             if (typeof clientOrUrl === "object" && clientOrUrl !== null) {
@@ -38,7 +42,6 @@ export function useLocalCollectionsConfigController(
                 headers,
                 body: JSON.stringify(payload)
             });
-            console.log("dev server response", endpoint, response.status);
             if (!response.ok) {
                 const text = await response.text();
                 let err: Record<string, unknown> = {};
@@ -70,7 +73,7 @@ export function useLocalCollectionsConfigController(
         readOnlyReason: "Local collection editing is only available in development mode.",
         collections: parsedCollections,
         getCollection: (id: string) => {
-            const found = parsedCollections.find(c => (c as EntityCollection & { id?: string }).id === id || c.slug === id);
+            const found = parsedCollections.find(c => (c as CollectionConfig & { id?: string }).id === id || c.slug === id);
             if (found) return found;
             throw Error(`Collection ${id} not found in local mode`);
         },
@@ -106,7 +109,7 @@ collectionData: { propertiesOrder: newPropertiesOrder } });
         },
 
         updatePropertiesOrder: async ({ collection, fullPath, newPropertiesOrder }: UpdatePropertiesOrderParams) => {
-            const collectionId = (collection as EntityCollection & { id?: string }).id || fullPath.split("/").pop();
+            const collectionId = (collection as CollectionConfig & { id?: string }).id || fullPath.split("/").pop();
             await request("/collection/save", { collectionId,
 collectionData: { propertiesOrder: newPropertiesOrder } });
         },

package/src/collection_editor/useSafeSnackbarController.ts

@@ -0,0 +1,9 @@
+import { useSnackbarController } from "@rebasepro/app";
+
+export function useSafeSnackbarController(): ReturnType<typeof useSnackbarController> | undefined {
+    try {
+        return useSnackbarController();
+    } catch {
+        return undefined;
+    }
+}

package/src/collection_editor/validateCollectionJson.ts

@@ -1,4 +1,5 @@
-import { EntityCollection } from "@rebasepro/types";
+import { DataType, CollectionConfig } from "@rebasepro/types";
+
 
 /**
  * Valid dataType values for properties
@@ -10,11 +11,13 @@ const VALID_DATA_TYPES = [
     "date",
     "geopoint",
     "reference",
+    "relation",
     "array",
-    "map"
+    "map",
+    "vector",
+    "binary"
 ] as const;
 
-type DataType = typeof VALID_DATA_TYPES[number];
 
 /**
  * Validation error with path and message
@@ -30,7 +33,7 @@ export interface CollectionValidationError {
 export interface CollectionValidationResult {
     valid: boolean;
     errors: CollectionValidationError[];
-    collection?: EntityCollection;
+    collection?: CollectionConfig;
 }
 
 /**
@@ -49,16 +52,16 @@ function validateProperty(
         return;
     }
 
-    // Check dataType
-    if (!property.dataType) {
+    // Check type
+    if (!property.type) {
         errors.push({
-            path: `${path}.dataType`,
+            path: `${path}.type`,
             message: "Required field is missing"
         });
-    } else if (!VALID_DATA_TYPES.includes(property.dataType as DataType)) {
+    } else if (!VALID_DATA_TYPES.includes(property.type as DataType)) {
         errors.push({
-            path: `${path}.dataType`,
-            message: `Invalid value "${property.dataType}", expected one of: ${VALID_DATA_TYPES.join(", ")}`
+            path: `${path}.type`,
+            message: `Invalid value "${property.type}", expected one of: ${VALID_DATA_TYPES.join(", ")}`
         });
     }
 
@@ -71,14 +74,14 @@ function validateProperty(
     }
 
     // Validate array "of" property
-    if (property.dataType === "array") {
+    if (property.type === "array") {
         if (property.of) {
             if (Array.isArray(property.of)) {
                 property.of.forEach((ofProp: Record<string, unknown>, index: number) => {
                     validateProperty(ofProp, `${path}.of[${index}]`, errors);
                 });
             } else {
-                validateProperty(property.of as unknown as Record<string, unknown>, `${path}.of`, errors);
+                validateProperty(property.of as Record<string, unknown>, `${path}.of`, errors);
             }
         }
         // oneOf validation
@@ -88,19 +91,19 @@ function validateProperty(
                     path: `${path}.oneOf`,
                     message: "Must be an object"
                 });
-            } else if ((property.oneOf as unknown as Record<string, unknown>).properties) {
-                validateProperties((property.oneOf as unknown as Record<string, unknown>).properties as unknown as Record<string, unknown>, `${path}.oneOf.properties`, errors);
+            } else if ((property.oneOf as Record<string, unknown>).properties) {
+                validateProperties((property.oneOf as Record<string, unknown>).properties as Record<string, unknown>, `${path}.oneOf.properties`, errors);
             }
         }
     }
 
     // Validate map properties
-    if (property.dataType === "map" && property.properties) {
-        validateProperties(property.properties as unknown as Record<string, unknown>, `${path}.properties`, errors);
+    if (property.type === "map" && property.properties) {
+        validateProperties(property.properties as Record<string, unknown>, `${path}.properties`, errors);
     }
 
     // Validate reference path
-    if (property.dataType === "reference") {
+    if (property.type === "reference") {
         if (property.path !== undefined && typeof property.path !== "string") {
             errors.push({
                 path: `${path}.path`,
@@ -109,8 +112,92 @@ function validateProperty(
         }
     }
 
+    // Validate relation property
+    if (property.type === "relation") {
+        if (property.target !== undefined && typeof property.target !== "string" && typeof property.target !== "function") {
+            errors.push({
+                path: `${path}.target`,
+                message: "Must be a string (collection slug) or a function"
+            });
+        }
+        if (property.cardinality !== undefined && property.cardinality !== "one" && property.cardinality !== "many") {
+            errors.push({
+                path: `${path}.cardinality`,
+                message: "Must be either 'one' or 'many'"
+            });
+        }
+        if (property.direction !== undefined && property.direction !== "owning" && property.direction !== "inverse") {
+            errors.push({
+                path: `${path}.direction`,
+                message: "Must be either 'owning' or 'inverse'"
+            });
+        }
+        if (property.localKey !== undefined && typeof property.localKey !== "string") {
+            errors.push({
+                path: `${path}.localKey`,
+                message: "Must be a string"
+            });
+        }
+        if (property.foreignKeyOnTarget !== undefined && typeof property.foreignKeyOnTarget !== "string") {
+            errors.push({
+                path: `${path}.foreignKeyOnTarget`,
+                message: "Must be a string"
+            });
+        }
+        if (property.through !== undefined) {
+            if (typeof property.through !== "object" || property.through === null) {
+                errors.push({
+                    path: `${path}.through`,
+                    message: "Must be an object"
+                });
+            } else {
+                const throughObj = property.through as Record<string, unknown>;
+                if (throughObj.table !== undefined && typeof throughObj.table !== "string") {
+                    errors.push({
+                        path: `${path}.through.table`,
+                        message: "Must be a string"
+                    });
+                }
+                if (throughObj.sourceColumn !== undefined && typeof throughObj.sourceColumn !== "string") {
+                    errors.push({
+                        path: `${path}.through.sourceColumn`,
+                        message: "Must be a string"
+                    });
+                }
+                if (throughObj.targetColumn !== undefined && typeof throughObj.targetColumn !== "string") {
+                    errors.push({
+                        path: `${path}.through.targetColumn`,
+                        message: "Must be a string"
+                    });
+                }
+            }
+        }
+        if (property.onUpdate !== undefined && typeof property.onUpdate !== "string") {
+            errors.push({
+                path: `${path}.onUpdate`,
+                message: "Must be a string"
+            });
+        }
+        if (property.onDelete !== undefined && typeof property.onDelete !== "string") {
+            errors.push({
+                path: `${path}.onDelete`,
+                message: "Must be a string"
+            });
+        }
+    }
+
+    // Validate vector property
+    if (property.type === "vector") {
+        if (property.dimensions !== undefined && (typeof property.dimensions !== "number" || isNaN(property.dimensions) || property.dimensions <= 0)) {
+            errors.push({
+                path: `${path}.dimensions`,
+                message: "Must be a positive number"
+            });
+        }
+    }
+
     // Validate storage config for string
-    if (property.dataType === "string" && property.storage) {
+    if (property.type === "string" && property.storage) {
         if (typeof property.storage !== "object") {
             errors.push({
                 path: `${path}.storage`,
@@ -147,7 +234,7 @@ function validateProperties(
     }
 
     for (const [key, property] of Object.entries(properties)) {
-        validateProperty(property as unknown as Record<string, unknown>, `${path}.${key}`, errors);
+        validateProperty(property as Record<string, unknown>, `${path}.${key}`, errors);
     }
 }
 
@@ -260,8 +347,8 @@ function validateOptionalFields(
                 path: "kanban",
                 message: "Must be an object"
             });
-        } else if ((collection.kanban as unknown as Record<string, unknown>).columnProperty !== undefined &&
-            typeof (collection.kanban as unknown as Record<string, unknown>).columnProperty !== "string") {
+        } else if ((collection.kanban as Record<string, unknown>).columnProperty !== undefined &&
+            typeof (collection.kanban as Record<string, unknown>).columnProperty !== "string") {
             errors.push({
                 path: "kanban.columnProperty",
                 message: "Must be a string"
@@ -316,7 +403,7 @@ function validateCollectionObject(
 
     // Properties validation
     if (collection.properties !== undefined) {
-        validateProperties(collection.properties as unknown as Record<string, unknown>, "properties", errors);
+        validateProperties(collection.properties as Record<string, unknown>, "properties", errors);
     }
 
     // Optional fields
@@ -369,11 +456,11 @@ export function validateCollectionJson(jsonString: string): CollectionValidation
         };
     }
 
-    validateCollectionObject(parsed as unknown as Record<string, unknown>, errors);
+    validateCollectionObject(parsed as Record<string, unknown>, errors);
 
     return {
         valid: errors.length === 0,
         errors,
-        collection: errors.length === 0 ? parsed as unknown as EntityCollection : undefined
+        collection: errors.length === 0 ? parsed as unknown as CollectionConfig : undefined
     };
 }

package/src/collection_editor_ui.ts

@@ -13,3 +13,9 @@ export type { CollectionStudioViewProps } from "./collection_editor/ui/collectio
 
 export { CollectionsStudioView } from "./collection_editor/ui/collection_editor/CollectionsStudioView";
 export type { CollectionsStudioViewProps } from "./collection_editor/ui/collection_editor/CollectionsStudioView";
+
+export { RouterCollectionStudioView } from "./collection_editor/ui/collection_editor/RouterCollectionStudioView";
+export type { RouterCollectionStudioViewProps } from "./collection_editor/ui/collection_editor/RouterCollectionStudioView";
+
+export { RouterCollectionsStudioView } from "./collection_editor/ui/collection_editor/RouterCollectionsStudioView";
+export type { RouterCollectionsStudioViewProps } from "./collection_editor/ui/collection_editor/RouterCollectionsStudioView";

package/src/components/AdminModeSyncer.tsx

@@ -2,8 +2,8 @@ import type { AppView } from "@rebasepro/types";
 import React, { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 ;
-import { useUrlController } from "../hooks";
-import { useAdminModeController } from "@rebasepro/core";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useAdminModeController } from "@rebasepro/app";
 export interface AdminModeSyncerProps {
     /**
      * Map of views designated as 'Studio' views.