@rebasepro/app 0.0.1-canary.4829d6e

package/src/util/constants.ts

@@ -0,0 +1,7 @@
+export const STUDIO_NAVIGATION_GROUPS = [
+    "Database",
+    "Compute",
+    "API",
+    "Storage",
+    "Access Control"
+];

package/src/util/createFormexStub.tsx

@@ -0,0 +1,66 @@
+import { FormexController } from "@rebasepro/forms";
+
+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,239 @@
+import { EntityReference, EntityRelation, GeoPoint, Vector } from "@rebasepro/types";
+import { isObject, isPlainObject } from "@rebasepro/utils";
+
+// 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(this: Record<string, unknown>, key: string): unknown {
+
+    const value = this[key];
+
+    // Handle Date objects
+    if (value instanceof Date) {
+        return {
+            __type: "Date",
+            value: value.toISOString()
+        };
+    }
+
+    // Handle EntityReference
+    if (value instanceof EntityReference) {
+        return {
+            __type: "EntityReference",
+            id: value.id,
+            path: value.path,
+            driver: value.driver,
+            databaseId: value.databaseId
+        };
+    }
+
+    if (value instanceof EntityRelation) {
+        return {
+            __type: "EntityRelation",
+            id: value.id,
+            path: value.path,
+            data: value.data
+        };
+    }
+
+    // Handle GeoPoint
+    if (value instanceof GeoPoint) {
+        return {
+            __type: "GeoPoint",
+            latitude: value.latitude,
+            longitude: value.longitude
+        };
+    }
+
+    // Handle Vector
+    if (value instanceof Vector) {
+        return {
+            __type: "Vector",
+            value: value.value
+        };
+    }
+
+    return value;
+}
+
+// Define custom reviver for JSON.parse
+function customReviver(_key: string, value: unknown): unknown {
+    if (value && typeof value === "object" && "__type" in value) {
+        const record = value as Record<string, unknown>;
+        switch (record.__type) {
+            case "date":
+            case "Date":
+                return new Date(record.value as string);
+            case "reference":
+            case "EntityReference":
+                return new EntityReference({
+                    id: record.id as string,
+                    path: record.path as string,
+                    driver: record.driver as string | undefined,
+                    databaseId: record.databaseId as string | undefined
+                });
+            case "relation":
+            case "EntityRelation":
+                return new EntityRelation(record.id as string, record.path as string, record.data as Record<string, unknown> | undefined);
+            case "GeoPoint":
+                return new GeoPoint(record.latitude as number, record.longitude as number);
+            case "Vector":
+                return new Vector(record.value as number[]);
+            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);
+}
+
+
+/**
+ * Retrieves a 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 a 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
+            );
+        }
+    }
+}
+
+
+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,22 @@
+const iconSynonyms: Record<string, string> = {};
+import { iconKeys } from "@rebasepro/ui";
+import Fuse from "fuse.js";
+
+
+const map = iconKeys
+    .map((importName) => {
+        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"]
+})
+
+

package/src/util/icons.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import {
+    cls,
+    colorClassesMapping,
+    coolIconKeys,
+    IconColor,
+    iconKeys,
+    iconSize,
+    lucideIcons
+} from "@rebasepro/ui";
+import { deepEqual as equal } from "fast-equals"
+import { hashString, slugify } from "@rebasepro/utils";
+
+// iconKeys are now PascalCase strings (e.g. "ShoppingCart", "Users")
+const iconKeysMap: Record<string, string> = iconKeys.reduce((acc: Record<string, string>, key) => {
+    // Also add lowercase versions and snake_case versions to support legacy lookups
+    const lower = key.toLowerCase();
+    const snake = key.replace(/([A-Z])/g, "_$1").toLowerCase().replace(/^_/, "");
+    acc[lower] = key;
+    acc[snake] = key;
+    acc[key] = key;
+    return acc;
+}, {});
+
+function toPascalCase(str: string): string {
+    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+
+/**
+ * Resolve a Lucide icon component by string key.
+ * Tries direct match, PascalCase conversion, and falls back to CircleAlert.
+ */
+function resolveIcon(iconKey: string): React.ComponentType<{ size?: number; className?: string }> | null {
+    const iconsMap = lucideIcons as Record<string, React.ComponentType<{ size?: number; className?: string }> | undefined>;
+    let icon = iconsMap[iconKey];
+    if (!icon) {
+        icon = iconsMap[toPascalCase(iconKey)];
+    }
+    if (!icon) {
+        icon = iconsMap.CircleAlert;
+    }
+    return icon ?? null;
+}
+
+/**
+ * Render an icon element from a string key or existing React element.
+ * This resolves the icon from the lucide-react icons map directly.
+ */
+export function getIcon(iconKey?: string | React.ReactNode,
+    className?: string,
+    color?: IconColor,
+    size?: "smallest" | "small" | "medium" | "large" | number): React.ReactElement | undefined {
+
+    if (React.isValidElement(iconKey)) {
+        return iconKey;
+    }
+
+    if (!iconKey) return undefined;
+    if (typeof iconKey === "string") {
+        const lowerKey = iconKey.toLowerCase();
+        const slugifiedKey = slugify(iconKey).replace(/-/g, "_");
+
+        const mappedKey = iconKeysMap[iconKey] || iconKeysMap[lowerKey] || iconKeysMap[slugifiedKey];
+
+        if (!mappedKey) {
+            return undefined;
+        }
+
+        const LucideIcon = resolveIcon(mappedKey);
+        if (!LucideIcon) return undefined;
+
+        const sizeInPx = typeof size === "number" ? size : iconSize[size ?? "medium"];
+        return <LucideIcon
+            size={sizeInPx}
+            className={cls(
+                color ? colorClassesMapping[color] : "",
+                "select-none shrink-0",
+                className
+            )}
+        />;
+    }
+
+    console.warn("Invalid icon key provided:", iconKey);
+    return undefined;
+}
+
+export type IconViewProps = {
+    slug: string;
+    name: string;
+    singularName?: string;
+    group?: string;
+    icon?: string | React.ReactNode;
+}
+
+export const IconForView = React.memo(
+    function IconForView({
+        collectionOrView,
+        className,
+        color,
+        size = "medium"
+    }: {
+        collectionOrView?: IconViewProps,
+        color?: IconColor,
+        className?: string,
+        size?: "smallest" | "small" | "medium" | "large" | number,
+    }): React.ReactElement {
+        if (!collectionOrView) return <></>;
+        const icon = getIcon(collectionOrView.icon, className, color, size);
+        if (collectionOrView?.icon && icon)
+            return icon;
+
+        let pathname = slugify(("singularName" in collectionOrView ? collectionOrView.singularName : undefined) ?? collectionOrView.name).replace(/-/g, "_");
+
+        let key: string | undefined;
+        if (pathname in iconKeysMap)
+            key = iconKeysMap[pathname];
+
+        if (!key) {
+            pathname = slugify(collectionOrView.slug).replace(/-/g, "_");
+            if (pathname in iconKeysMap)
+                key = iconKeysMap[pathname];
+        }
+
+        const iconsCount = coolIconKeys.length;
+
+        if (!key)
+            key = coolIconKeys[hashString(collectionOrView.slug) % iconsCount];
+
+        const LucideIcon = resolveIcon(key);
+        if (!LucideIcon) return <></>;
+
+        const sizeInPx = typeof size === "number" ? size : iconSize[size];
+        return <LucideIcon
+            size={sizeInPx}
+            className={cls(
+                color ? colorClassesMapping[color] : "",
+                "select-none shrink-0",
+                className
+            )}
+        />;
+    }, (prevProps, nextProps) => {
+        return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon) &&
+            prevProps.collectionOrView?.name === nextProps.collectionOrView?.name &&
+            prevProps.collectionOrView?.slug === nextProps.collectionOrView?.slug &&
+            prevProps.collectionOrView?.singularName === nextProps.collectionOrView?.singularName &&
+            equal(prevProps.color, nextProps.color) &&
+            prevProps.className === nextProps.className &&
+            prevProps.size === nextProps.size;
+    });

package/src/util/index.ts

@@ -0,0 +1,12 @@
+
+export * from "./icon_list";
+
+export * from "./icons";
+export * from "./createFormexStub";
+export * from "./entity_cache";
+
+export * from "./useStorageUploadController";
+
+export * from "./previews";
+export * from "./enums";
+export * from "./constants";

package/src/util/previews.ts

@@ -0,0 +1,105 @@
+import type { CollectionConfig, Property, PropertyConfig } from "@rebasepro/types";
+import { AuthController } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+
+function isReferenceProperty(property: Property) {
+    if (!property) return null;
+    if (property.type === "reference") return true;
+    if (property.type === "array") {
+        if (Array.isArray(property.of)) return false;
+        else return property.of?.type === "reference";
+    }
+    return false;
+}
+
+function isRelationProperty(property: Property) {
+    if (!property) return null;
+    if (property.type === "relation") return true;
+    if (property.type === "array") {
+        if (Array.isArray(property.of)) return false;
+        else return property.of?.type === "relation";
+    }
+    return false;
+}
+
+function isHiddenProperty(property: Property | undefined): boolean {
+    if (!property) return false;
+    return Boolean(property.ui?.hideFromCollection);
+}
+
+/**
+ * Returns true when the property holds file-storage content (single image,
+ * array of images, generic upload, …).  These properties are rendered by the
+ * dedicated image-slot and should NOT appear as regular preview columns.
+ */
+function isStorageProperty(property: Property | undefined): boolean {
+    if (!property) return false;
+    // Single string with storage config
+    if (property.type === "string" && property.storage) return true;
+    // String displayed as image URL
+    if (property.type === "string" && property.ui?.url === "image") return true;
+    // Array whose inner element has storage config or image URL
+    if (property.type === "array" && property.of && !Array.isArray(property.of)) {
+        const inner = property.of;
+        if (inner.type === "string" && (inner.storage || inner.ui?.url === "image")) return true;
+    }
+    return false;
+}
+
+export function getEntityPreviewKeys(
+    authController: AuthController,
+    targetCollection: CollectionConfig<any>,
+    fields: Record<string, PropertyConfig>,
+    previewProperties?: string[],
+    limit = 3) {
+    const allProperties = Object.keys(targetCollection.properties);
+    let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
+    if (!listProperties && targetCollection.previewProperties) {
+        listProperties = targetCollection.previewProperties?.filter(p => allProperties.includes(p as string));
+    }
+    if (listProperties && listProperties.length > 0) {
+        return listProperties;
+    } else {
+        listProperties = (targetCollection.propertiesOrder as string[]) || allProperties;
+        return listProperties
+            .filter(key => {
+                const prop = targetCollection.properties[key];
+                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as { isId?: boolean }).isId);
+                return !isIdProp && key !== "id";
+            })
+            .filter(key => {
+                const property = targetCollection.properties[key];
+                return property && !isPropertyBuilder(property) && !isReferenceProperty(property) && !isRelationProperty(property) && !isHiddenProperty(property) && !isStorageProperty(property as Property);
+            }).slice(0, limit);
+    }
+}
+
+export function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: CollectionConfig<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined {
+    if (collection.titleProperty) {
+        return collection.titleProperty as string;
+    }
+
+    const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
+    let firstStringCandidate: string | undefined;
+
+    for (const key of orderToSearch) {
+        const property = collection.properties[key];
+        if (property && !isPropertyBuilder(property)) {
+            const prop = property as Property;
+            if (isHiddenProperty(prop)) {
+                continue;
+            }
+            if (prop.type === "string" && !prop.ui?.multiline && !prop.ui?.markdown && !prop.storage && !prop.isId) {
+                if (!firstStringCandidate) {
+                    firstStringCandidate = key;
+                }
+                const lowerKey = key.toLowerCase();
+                if (["name", "title", "label", "displayname", "username"].includes(lowerKey)) {
+                    return key; // Immediate return if it's a strong title candidate
+                }
+            }
+        }
+    }
+    return firstStringCandidate;
+}
+