@rebasepro/core 0.0.1-canary.0

package/src/routes/RebaseRoute.tsx

@@ -0,0 +1,255 @@
+import { Blocker, useBlocker, useLocation } from "react-router";
+import { EntityEditView } from "../core/EntityEditView";
+import { useCollectionRegistryController, useCMSUrlController } from "../hooks";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { EntityCollectionView, NotFoundPage } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+import { EntityCollection } from "@rebasepro/types";
+import {
+    getNavigationEntriesFromPath,
+    NavigationViewCollectionInternal, NavigationViewEntityCustomInternal,
+    NavigationViewInternal,
+    toArray
+} from "@rebasepro/common";
+
+export function RebaseRoute() {
+
+    const location = useLocation();
+    const collectionRegistry = useCollectionRegistryController();
+    const cmsUrlController = useCMSUrlController();
+    const breadcrumbs = useBreadcrumbsController();
+
+    const hash = location.hash;
+    const isSidePanel = hash.includes("#side");
+    const isNew = hash.includes("#new") || hash.includes("#new_side");
+    const isCopy = hash.includes("#copy");
+
+    const pathname = location.pathname;
+    const navigationPath = cmsUrlController.urlPathToDataPath(pathname);
+
+    const navigationEntries = getNavigationEntriesFromPath({
+        path: navigationPath,
+        collections: collectionRegistry.collections ?? []
+    });
+
+    useEffect(() => {
+        const lastEntry = navigationEntries[navigationEntries.length - 1];
+        const isViewingCollection = lastEntry?.type === "collection";
+
+        breadcrumbs.set({
+            breadcrumbs: navigationEntries.map((entry, index) => {
+                const isLastEntry = index === navigationEntries.length - 1;
+
+                if (entry.type === "entity") {
+                    return ({
+                        title: String(entry.entityId),
+                        url: cmsUrlController.buildUrlCollectionPath(entry.path)
+                        // count: undefined (not applicable for entities)
+                    });
+                } else if (entry.type === "custom_view") {
+                    return ({
+                        title: entry.view.name,
+                        url: cmsUrlController.buildUrlCollectionPath(entry.path)
+                        // count: undefined (not applicable for custom views)
+                    });
+                } else if (entry.type === "collection") {
+                    // Only show count badge (loading state) when viewing this collection directly
+                    // Don't show count for parent collections when viewing an entity
+                    const showCount = isLastEntry && isViewingCollection;
+                    return ({
+                        title: entry.collection.name,
+                        url: cmsUrlController.buildUrlCollectionPath(entry.path),
+                        id: entry.path,
+                        ...(showCount ? { count: null } : {}) // null = loading, undefined = no badge
+                    });
+                } else {
+                    throw new Error("Unexpected navigation entry type");
+                }
+            })
+        });
+    }, [navigationEntries.map(entry => entry.path).join(",")]);
+
+    if (isNew) {
+        return <EntityFullScreenRoute
+            pathname={pathname}
+            navigationEntries={navigationEntries}
+            isNew={true}
+            isCopy={false}
+        />;
+    }
+
+    if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
+        let collection: EntityCollection<any> | undefined;
+        collection = collectionRegistry.getCollection(navigationEntries[0].id);
+        if (!collection)
+            collection = collectionRegistry.getCollection(navigationEntries[0].slug);
+        if (!collection)
+            return null;
+        return <EntityCollectionView
+            key={`collection_view_${collection.slug}`}
+            parentCollectionIds={[]}
+            path={collection.slug}
+            updateUrl={true}
+            {...collection}
+            Actions={toArray(collection.Actions)} />
+    }
+
+    if (isSidePanel) {
+        const lastCollectionEntry = [...navigationEntries].reverse().find((entry: any) => entry.type === "collection");
+        if (lastCollectionEntry) {
+            let collection: EntityCollection<any> | undefined;
+            const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
+            collection = collectionRegistry.getCollection(firstEntry.id);
+            if (!collection)
+                collection = collectionRegistry.getCollection(firstEntry.slug);
+            if (!collection)
+                return null;
+            return <EntityCollectionView
+                key={`collection_view_${collection.slug}`}
+                parentCollectionIds={[]}
+                path={collection.slug}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)} />;
+        }
+    }
+
+    return <EntityFullScreenRoute
+        pathname={pathname}
+        navigationEntries={navigationEntries}
+        isNew={isNew}
+        isCopy={isCopy}
+    />;
+
+}
+
+function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined) {
+    if (isNew) {
+        return undefined;
+    } else if (lastCustomView) {
+        if (lastCustomView.type === "custom_view") {
+            return lastCustomView.view.key;
+        } else if (lastCustomView.type === "collection") {
+            return lastCustomView.id ?? lastCustomView.slug;
+        }
+    }
+    return undefined;
+}
+
+function EntityFullScreenRoute({
+    pathname,
+    navigationEntries,
+    isNew,
+    isCopy
+}: {
+    pathname: string;
+    navigationEntries: NavigationViewInternal[],
+    isNew: boolean,
+    isCopy: boolean
+}) {
+
+    const collectionRegistry = useCollectionRegistryController();
+    const cmsUrlController = useCMSUrlController();
+    const navigate = useNavigate();
+
+    const navigationPath = cmsUrlController.urlPathToDataPath(pathname);
+
+    // is navigating away blocked
+    const blocked = useRef(false);
+
+    const lastEntityEntry = [...navigationEntries].reverse().find((entry: any) => entry.type === "entity");
+    const navigationEntriesAfterEntity = lastEntityEntry ? navigationEntries.slice(navigationEntries.indexOf(lastEntityEntry) + 1) : [];
+
+    const lastCustomView = [...navigationEntriesAfterEntity].reverse().find(
+        (entry: any) => entry.type === "custom_view" || entry.type === "collection"
+    ) as NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined;
+
+    const entityId = (lastEntityEntry as any)?.entityId;
+
+    const urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
+    const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
+
+    const parentCollectionIds = collectionRegistry.getParentCollectionIds(navigationPath);
+    useEffect(() => {
+        if (urlTab !== selectedTab) {
+            setSelectedTab(urlTab);
+        }
+    }, [urlTab]);
+
+    const basePath = !entityId || isNew
+        ? pathname
+        : pathname.substring(0, pathname.lastIndexOf(`/${entityId}`));
+
+    const entityPath = basePath + `/${entityId}`;
+
+    let blocker: Blocker | undefined = undefined;
+    try {
+        blocker = useBlocker(({
+            nextLocation
+        }) => {
+            if (nextLocation.pathname.startsWith(entityPath))
+                return false;
+            return blocked.current;
+        });
+    } catch (e) {
+        // console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const lastCollectionEntry = [...navigationEntries].reverse().find((entry: any) => entry.type === "collection");
+
+    if (isNew && !lastCollectionEntry) {
+        throw new Error("INTERNAL: No collection found in the navigation");
+    }
+
+    if (!isNew && !lastEntityEntry) {
+        return <NotFoundPage />;
+    }
+
+    const collection = isNew ? (lastCollectionEntry as any)!.collection : (lastEntityEntry as any)!.parentCollection;
+    const fullIdPath = isNew ? lastCollectionEntry!.slug : lastEntityEntry!.slug;
+    const collectionPath = cmsUrlController.resolveDatabasePathsFrom(fullIdPath);
+    return <>
+        <EntityEditView
+            key={collection.slug + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+            entityId={isNew ? undefined : entityId}
+            collection={collection}
+            layout={"full_screen"}
+            path={collectionPath}
+            copy={isCopy}
+            selectedTab={selectedTab ?? undefined}
+            onValuesModified={(modified) => blocked.current = modified}
+            onSaved={(params) => {
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}`, { replace: true });
+                }
+            }}
+            onTabChange={(params) => {
+                setSelectedTab(params.selectedTab);
+                if (isNew) {
+                    return;
+                }
+                const newSelectedTab = params.selectedTab;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${entityId}`, { replace: true });
+                }
+            }}
+            parentCollectionIds={parentCollectionIds}
+        />
+
+        <UnsavedChangesDialog
+            open={blocker?.state === "blocked"}
+            handleOk={() => blocker?.proceed?.()}
+            handleCancel={() => blocker?.reset?.()}
+            body={"You have unsaved changes in this entity."} />
+
+    </>;
+}

package/src/routes/index.ts

@@ -0,0 +1,2 @@
+export * from "./CustomCMSRoute";
+export * from "./RebaseRoute";

package/src/util/createFormexStub.tsx

@@ -0,0 +1,66 @@
+import { FormexController } from "@rebasepro/formex";
+
+export function createFormexStub<T extends object>(values: T): FormexController<T> {
+    const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
+
+    return {
+        debugId: "",
+        values,
+        initialValues: values,
+        touched: {} as Record<string, boolean>,
+        dirty: false,
+        errors: {} as Record<string, string>,
+        submitCount: 0,
+        isSubmitting: false,
+        isValidating: false,
+        version: 0,
+        canUndo: false,
+        canRedo: false,
+
+        setValues: () => {
+            throw new Error(errorMessage);
+        },
+        setTouched(touched: Record<string, boolean>): void {
+            throw new Error(errorMessage);
+        },
+        setFieldValue: () => {
+            throw new Error(errorMessage);
+        },
+        setFieldTouched: () => {
+            throw new Error(errorMessage);
+        },
+        setDirty: () => {
+            throw new Error(errorMessage);
+        },
+        setSubmitCount: () => {
+            throw new Error(errorMessage);
+        },
+        setFieldError: () => {
+            throw new Error(errorMessage);
+        },
+        handleChange: () => {
+            throw new Error(errorMessage);
+        },
+        handleBlur: () => {
+            throw new Error(errorMessage);
+        },
+        handleSubmit: () => {
+            throw new Error(errorMessage);
+        },
+        validate: () => {
+            throw new Error(errorMessage);
+        },
+        resetForm: () => {
+            throw new Error(errorMessage);
+        },
+        setSubmitting: () => {
+            throw new Error(errorMessage);
+        },
+        undo: () => {
+            throw new Error(errorMessage);
+        },
+        redo: () => {
+            throw new Error(errorMessage);
+        }
+    };
+}

package/src/util/entity_cache.ts

@@ -0,0 +1,267 @@
+import { isObject, isPlainObject } from "@rebasepro/common";
+import { EntityReference, EntityRelation, GeoPoint, Vector } from "@rebasepro/types";
+
+// Define a unique prefix for entity keys in sessionStorage to avoid key collisions
+const LOCAL_STORAGE_PREFIX = "entity_cache::";
+
+// In-memory cache to store entities for quick access
+const entityCache: Map<string, object> = new Map();
+
+// Check `sessionStorage` availability once during initialization
+const isSessionStorageAvailable = typeof sessionStorage !== "undefined";
+
+// Define custom replacer for JSON.stringify
+function customReplacer(key: string): any {
+
+    // @ts-ignore
+    const value = this[key];
+
+    // Handle Date objects
+    // @ts-ignore
+    if (value instanceof Date) {
+        return {
+            __type: "Date",
+            value: value.toISOString()
+        };
+    }
+
+    // Handle EntityReference
+    // @ts-ignore
+    if (value instanceof EntityReference) {
+        return {
+            __type: "EntityReference",
+            id: value.id,
+            path: value.path,
+            datasource: value.datasource,
+            databaseId: value.databaseId
+        };
+    }
+
+    if (value instanceof EntityRelation) {
+        return {
+            __type: "EntityRelation",
+            id: value.id,
+            path: value.path
+        };
+    }
+
+    // Handle GeoPoint
+    // @ts-ignore
+    if (value instanceof GeoPoint) {
+        return {
+            __type: "GeoPoint",
+            latitude: value.latitude,
+            longitude: value.longitude
+        };
+    }
+
+    // Handle Vector
+    // @ts-ignore
+    if (value instanceof Vector) {
+        return {
+            __type: "Vector",
+            value: value.value
+        };
+    }
+
+    return value;
+}
+
+// Define custom reviver for JSON.parse
+function customReviver(key: string, value: any): any {
+    if (value && typeof value === "object" && "__type" in value) {
+        switch (value.__type) {
+            case "Date":
+                return new Date(value.value);
+            case "EntityReference":
+                return new EntityReference({
+                    id: value.id,
+                    path: value.path,
+                    datasource: value.datasource,
+                    databaseId: value.databaseId
+                });
+            case "EntityRelation":
+                return new EntityRelation(value.id, value.path);
+            case "GeoPoint":
+                return new GeoPoint(value.latitude, value.longitude);
+            case "Vector":
+                return new Vector(value.value);
+            default:
+                return value;
+        }
+    }
+    return value;
+}
+
+// Initialize the in-memory cache by loading entities from `sessionStorage`
+if (isSessionStorageAvailable) {
+    try {
+        // Iterate over all keys in sessionStorage to find those with the specified prefix
+        for (let i = 0; i < sessionStorage.length; i++) {
+            const fullKey = sessionStorage.key(i);
+            if (fullKey && fullKey.startsWith(LOCAL_STORAGE_PREFIX)) {
+                const path = fullKey.substring(LOCAL_STORAGE_PREFIX.length);
+                const entityString = sessionStorage.getItem(fullKey);
+                if (entityString) {
+                    try {
+                        const entity: object = JSON.parse(entityString, customReviver);
+                        entityCache.set(path, entity);
+                    } catch (parseError) {
+                        console.error(
+                            `Failed to parse entity for path "${path}" from sessionStorage:`,
+                            parseError
+                        );
+                    }
+                }
+            }
+        }
+    } catch (error) {
+        console.error("Error accessing sessionStorage during initialization:", error);
+    }
+}
+
+/**
+ * Saves data to the in-memory cache and persists it individually in `sessionStorage`.
+ * @param path - The unique path/key for the data.
+ * @param data - The data to cache and persist.
+ */
+export function saveEntityToCache(path: string, data: object): void {
+    // Persist the data individually in sessionStorage
+    if (isSessionStorageAvailable) {
+        try {
+            const key = LOCAL_STORAGE_PREFIX + path;
+
+            const entityString = JSON.stringify(data, customReplacer);
+            sessionStorage.setItem(key, entityString);
+        } catch (error) {
+            console.error(
+                `Failed to save entity for path "${path}" to sessionStorage:`,
+                error
+            );
+        }
+    }
+}
+
+export function removeEntityFromMemoryCache(path: string): void {
+    entityCache.delete(path);
+}
+
+export function saveEntityToMemoryCache(path: string, data: object): void {
+    entityCache.set(path, data);
+}
+
+export function getEntityFromMemoryCache(path: string): object | undefined {
+    return entityCache.get(path);
+}
+
+export function hasEntityInCache(path: string): boolean {
+    return entityCache.has(path);
+}
+
+/**
+ * Retrieves an entity from the in-memory cache or `sessionStorage`.
+ * If the entity is not in the cache but exists in `sessionStorage`, it loads it into the cache.
+ * @param path - The unique path/key for the entity.
+ * @returns The cached entity or `undefined` if not found.
+ */
+export function getEntityFromCache(path: string): object | undefined {
+
+    // If not in the cache, attempt to load it from sessionStorage
+    if (isSessionStorageAvailable) {
+        try {
+            const key = LOCAL_STORAGE_PREFIX + path;
+            const entityString = sessionStorage.getItem(key);
+            if (entityString) {
+                const entity: object = JSON.parse(entityString, customReviver);
+                return entity;
+            }
+        } catch (error) {
+            console.error(
+                `Failed to load entity for path "${path}" from sessionStorage:`,
+                error
+            );
+        }
+    }
+
+    // Entity not found
+    return undefined;
+}
+
+/**
+ * Removes an entity from both the in-memory cache and `sessionStorage`.
+ * @param path - The unique path/key for the entity to remove.
+ */
+export function removeEntityFromCache(path: string): void {
+
+    console.debug("Removing entity from cache", path);
+
+    // Remove from the in-memory cache
+    entityCache.delete(path);
+
+    // Remove from sessionStorage
+    if (isSessionStorageAvailable) {
+        try {
+            const key = LOCAL_STORAGE_PREFIX + path;
+            sessionStorage.removeItem(key);
+        } catch (error) {
+            console.error(
+                `Failed to remove entity for path "${path}" from sessionStorage:`,
+                error
+            );
+        }
+    }
+}
+
+/**
+ * Clears the entire in-memory cache and removes all related entities from `sessionStorage`.
+ */
+export function clearEntityCache(): void {
+    // Clear the in-memory cache
+    entityCache.clear();
+
+    // Remove all entities with the specified prefix from sessionStorage
+    if (isSessionStorageAvailable) {
+        try {
+            const keysToRemove: string[] = [];
+            for (let i = 0; i < sessionStorage.length; i++) {
+                const fullKey = sessionStorage.key(i);
+                if (fullKey && fullKey.startsWith(LOCAL_STORAGE_PREFIX)) {
+                    keysToRemove.push(fullKey);
+                }
+            }
+
+            // Remove the keys after collecting them to avoid issues while iterating
+            keysToRemove.forEach((key) => sessionStorage.removeItem(key));
+        } catch (error) {
+            console.error("Failed to clear entity cache from sessionStorage:", error);
+        }
+    }
+}
+
+export function flattenKeys(obj: Record<string, unknown> | unknown[], prefix = "", result: string[] = []): string[] {
+
+    if (isObject(obj) || Array.isArray(obj)) {
+        const plainObject = isPlainObject(obj);
+        if (!plainObject && prefix) {
+            result.push(prefix);
+        } else {
+            const record = obj as Record<string, unknown>;
+            for (const key in record) {
+                if (Object.prototype.hasOwnProperty.call(record, key)) {
+                    const newKey = prefix
+                        ? Array.isArray(obj)
+                            ? `${prefix}[${key}]`
+                            : `${prefix}.${key}`
+                        : key;
+                    const val = record[key];
+                    if (isObject(val) || Array.isArray(val)) {
+                        flattenKeys(val as Record<string, unknown> | unknown[], newKey, result);
+                    } else {
+                        result.push(newKey);
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}

package/src/util/enums.ts

@@ -0,0 +1,32 @@
+import { EnumValueConfig } from "@rebasepro/types";
+import { CHIP_COLORS, ChipColorScheme, getColorSchemeForSeed } from "@rebasepro/ui";
+import { getLabelOrConfigFrom } from "@rebasepro/common";
+
+export function getColorScheme(enumValues: EnumValueConfig[], key: string | number): ChipColorScheme | undefined {
+    const labelOrConfig = getLabelOrConfigFrom(enumValues, key);
+    if (!labelOrConfig?.color)
+        return getColorSchemeForSeed(key.toString());
+    if (typeof labelOrConfig === "object" && "color" in labelOrConfig) {
+        if (typeof labelOrConfig.color === "string")
+            return CHIP_COLORS[labelOrConfig.color];
+        if (typeof labelOrConfig.color === "object")
+            return labelOrConfig.color;
+    }
+    return undefined;
+}
+
+export function isEnumValueDisabled(labelOrConfig?: string | EnumValueConfig) {
+    return typeof labelOrConfig === "object" && (labelOrConfig as EnumValueConfig).disabled;
+}
+
+export function buildEnumLabel(
+    labelOrConfig?: string | EnumValueConfig
+): string | undefined {
+    if (labelOrConfig === undefined)
+        return undefined;
+    if (typeof labelOrConfig === "object") {
+        return labelOrConfig.label;
+    } else {
+        return labelOrConfig;
+    }
+}

package/src/util/icon_list.ts

@@ -0,0 +1,23 @@
+import { iconSynonyms } from "./icon_synonyms";
+import { iconKeys } from "@rebasepro/ui";
+import Fuse from "fuse.js";
+
+
+const map = iconKeys
+    .map((importName) => {
+        // @ts-ignore
+        const iconSynonym = importName in iconSynonyms ? iconSynonyms[importName] : "";
+        return {
+            key: importName,
+            synonyms: iconSynonym,
+        }
+    });
+export const iconsSearch = new Fuse(map, {
+    isCaseSensitive: false,
+    shouldSort: true,
+    ignoreLocation: true,
+    distance: 0,
+    keys: ["key", "synonyms"]
+})
+
+