@rebasepro/core 0.0.1-canary.0

package/src/util/icons.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { coolIconKeys, Icon, IconColor, iconKeys } from "@rebasepro/ui";
+import { deepEqual as equal } from "fast-equals"
+
+import { hashString, slugify } from "@rebasepro/common";
+
+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 usedIconKey = slugify(iconKey);
+        if (!(usedIconKey in iconKeysMap)) {
+            return undefined;
+        }
+        return usedIconKey in iconKeysMap ?
+            <Icon iconKey={usedIconKey} size={size} className={className} color={color} /> : undefined;
+    }
+
+    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);
+
+        let key: string | undefined;
+        if (pathname in iconKeysMap)
+            key = pathname;
+
+        if (!key) {
+            pathname = slugify(collectionOrView.slug);
+            if (pathname in iconKeysMap)
+                key = pathname;
+        }
+
+        const iconsCount = coolIconKeys.length;
+
+        if (!key)
+            key = coolIconKeys[hashString(collectionOrView.slug) % iconsCount];
+
+        return <Icon iconKey={key} size={size} className={className} color={color} />;
+    }, (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;
+    });
+
+const iconKeysMap: Record<string, string> = iconKeys.reduce((acc: Record<string, string>, key) => {
+    acc[key] = key;
+    return acc;
+}, {});

package/src/util/index.ts

@@ -0,0 +1,11 @@
+export * from "./property_utils";
+export * from "./icon_list";
+export * from "./icon_synonyms";
+export * from "./icons";
+export * from "./createFormexStub";
+export * from "./entity_cache";
+export * from "./useDebouncedCallback";
+export * from "./useStorageUploadController";
+export * from "./useTraceUpdate";
+export * from "./previews";
+export * from "./enums";

package/src/util/previews.ts

@@ -0,0 +1,50 @@
+import { AuthController, EntityCollection, Property, PropertyConfig } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+import { isReferenceProperty, isRelationProperty } from "./property_utils";
+import { getFieldConfig } from "../core";
+
+export function getEntityPreviewKeys(
+    authController: AuthController,
+    targetCollection: EntityCollection<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 = allProperties;
+        return listProperties
+            .filter(key => {
+                const prop = targetCollection.properties[key];
+                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as any).isId);
+                return !isIdProp && key !== "id";
+            })
+            .filter(key => {
+                const property = targetCollection.properties[key];
+                return property && !isPropertyBuilder(property) && !isReferenceProperty(property) && !isRelationProperty(property);
+            }).slice(0, limit);
+    }
+}
+
+export function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined {
+    if (collection.titleProperty) {
+        return collection.titleProperty as string;
+    }
+    // find first text field property
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (!isPropertyBuilder(property)) {
+            const field = getFieldConfig(property as Property, propertyConfigs);
+            if (field?.key === "text_field") {
+                return key;
+            }
+        }
+    }
+    return undefined;
+}
+

package/src/util/property_utils.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+
+import { EntityCollection, Properties, Property, PropertyConfig, } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+import { CircleIcon, FunctionsIcon } from "@rebasepro/ui";
+import { getFieldConfig } from "../core";
+
+export 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;
+}
+
+export 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;
+}
+
+export function getIconForWidget(widget: PropertyConfig | undefined,
+    size: "smallest" | "small" | "medium" | "large" | number) {
+    const Icon = widget?.Icon ?? CircleIcon;
+    return <Icon size={size} />;
+}
+
+export function getIconForProperty(
+    property: Property,
+    size: "smallest" | "small" | "medium" | "large" | number = "small",
+    fields: Record<string, PropertyConfig> = {}
+): React.ReactNode {
+
+    if (isPropertyBuilder(property)) {
+        return <FunctionsIcon size={size} />;
+    } else {
+        const widget = getFieldConfig(property, fields);
+        return getIconForWidget(widget, size);
+    }
+}
+
+/**
+ * Get a property in a property tree from a path like
+ * `address.street`
+ * @param properties
+ * @param path
+ */
+export function getPropertyInPath(properties: Properties, path: string): Property | undefined {
+    if (typeof properties === "object") {
+        if (path in properties) {
+            // @ts-ignore
+            return properties[path as keyof typeof properties];
+        }
+        if (path.includes(".")) {
+            const pathSegments = path.split(".");
+            // @ts-ignore
+            const childProperty = properties[pathSegments[0] as keyof typeof properties];
+            if (typeof childProperty === "object" && childProperty.type === "map" && childProperty.properties) {
+                // @ts-ignore
+                return getPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."))
+            }
+        }
+    }
+    return undefined;
+}
+
+export function getResolvedPropertyInPath(properties: Record<string, Property>, path: string): Property | undefined {
+    if (typeof properties === "object") {
+        if (path in properties) {
+            return properties[path];
+        }
+        if (path.includes(".")) {
+            const pathSegments = path.split(".");
+            const childProperty = properties[pathSegments[0]];
+            if (childProperty.type === "map" && childProperty.properties) {
+                return getResolvedPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."))
+            }
+        }
+    }
+    return undefined;
+}
+
+// replace the dot notation with brackets
+// address.street => address[street]
+export function getBracketNotation(path: string): string {
+    return path.replace(/\.([^.]*)/g, "[$1]");
+}
+
+/**
+ * Get properties sorted by their order, but include ALL properties.
+ * Nested keys (like "data.mode") in propertiesOrder are ignored - they're for column ordering.
+ * @param properties
+ * @param propertiesOrder
+ */
+export function getPropertiesWithPropertiesOrder(properties: Properties, propertiesOrder?: string[]): Properties {
+    if (!propertiesOrder) return properties;
+
+    const propertyKeys = Object.keys(properties);
+
+    // Filter propertiesOrder to only include top-level keys (no dots) that exist
+    const validOrderKeys = (propertiesOrder as string[]).filter(
+        key => !key.includes(".") && properties[key]
+    );
+
+    const result: Properties = {};
+
+    // First add properties in the specified order
+    validOrderKeys.forEach(key => {
+        const property = properties[key];
+        if (typeof property === "object" && property.type === "map" && (property as any).properties) {
+            result[key] = {
+                ...property,
+                properties: getPropertiesWithPropertiesOrder((property as any).properties, (property as any).propertiesOrder ?? [])
+            } as any;
+        } else if (property) {
+            result[key] = property;
+        }
+    });
+
+    // Then add any missing properties (so they don't disappear!)
+    propertyKeys.forEach(key => {
+        if (!result[key]) {
+            const property = properties[key];
+            if (typeof property === "object" && property.type === "map" && (property as any).properties) {
+                result[key] = {
+                    ...property,
+                    properties: getPropertiesWithPropertiesOrder((property as any).properties, (property as any).propertiesOrder ?? [])
+                } as any;
+            } else if (property) {
+                result[key] = property;
+            }
+        }
+    });
+
+    return result;
+}
+
+export function getDefaultPropertiesOrder(collection: EntityCollection<any>): string[] {
+    if (collection.propertiesOrder) return collection.propertiesOrder;
+    return [...Object.keys(collection.properties), ...(collection.additionalFields ?? []).map(field => field.key)];
+}

package/src/util/useDebouncedCallback.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
+
+    const pendingUpdate = React.useRef(false);
+    const performUpdate = () => {
+        callback();
+        pendingUpdate.current = false;
+    };
+
+    const handlerRef = React.useRef<number | undefined>(undefined);
+
+    React.useEffect(
+        () => {
+            pendingUpdate.current = true;
+            clearTimeout(handlerRef.current);
+            handlerRef.current = setTimeout(performUpdate, timeoutMs) as any;
+            return () => {
+                if (immediate)
+                    performUpdate();
+            };
+        },
+        [immediate, value]
+    );
+}

package/src/util/useStorageUploadController.tsx

@@ -0,0 +1,342 @@
+import Compressor from "compressorjs";
+import { deepEqual as equal } from "fast-equals";
+
+import {
+    ArrayProperty,
+    EntityValues,
+    ImageResize,
+    PreviewSize,
+    Property,
+    StorageConfig,
+    StorageSource,
+    StringProperty
+} from "@rebasepro/types";
+import { useCallback, useEffect, useState } from "react";
+import { randomString, resolveStorageFilenameString, resolveStoragePathString } from "@rebasepro/common";
+import { useAuthController } from "../hooks";
+
+/**
+ * Internal representation of an item in the storage
+ * It can have two states, having a storagePathOrDownloadUrl set,
+ * which means the file has been uploaded, and it is rendered as a preview
+ * Or have a pending file being uploaded.
+ */
+export interface StorageFieldItem {
+    id: number; // generated on the fly for internal use only
+    storagePathOrDownloadUrl?: string;
+    file?: File;
+    fileName?: string;
+    metadata?: any,
+    size: PreviewSize
+}
+
+export function useStorageUploadController<M extends object>({
+    entityId,
+    entityValues,
+    path,
+    value,
+    property,
+    propertyKey,
+    storageSource,
+    disabled,
+    onChange
+}:
+    {
+        entityId?: string | number,
+        entityValues: EntityValues<M>,
+        value: string | string[] | null;
+        path?: string,
+        propertyKey: string,
+        property: StringProperty | ArrayProperty | StringProperty | ArrayProperty,
+        storageSource: StorageSource,
+        disabled: boolean,
+        onChange: (value: string | string[] | null) => void
+    }) {
+
+    const authController = useAuthController();
+    const storage: StorageConfig | undefined = property.type === "string"
+        ? property.storage
+        : property.type === "array" &&
+            (property.of as Property).type === "string"
+            ? (property.of as StringProperty).storage
+            : undefined;
+
+    const multipleFilesSupported = property.type === "array";
+
+    if (!storage)
+        throw Error("Storage meta must be specified");
+
+    const processFile = storage?.processFile;
+
+    const metadata: Record<string, any> | undefined = storage?.metadata;
+    const size = multipleFilesSupported ? "medium" : "large";
+
+    // Support both new imageResize and deprecated imageCompression
+    const imageResize = storage?.imageResize;
+    const legacyCompression = storage?.imageCompression;
+
+    const internalInitialValue: StorageFieldItem[] =
+        getInternalInitialValue(multipleFilesSupported, value, metadata, size);
+
+    const [initialValue, setInitialValue] = useState<string | string[] | null>(value);
+    const [internalValue, setInternalValue] = useState<StorageFieldItem[]>(internalInitialValue);
+
+    useEffect(() => {
+        if (!equal(initialValue, value)) {
+            setInitialValue(value);
+            setInternalValue(internalInitialValue);
+        }
+    }, [internalInitialValue, value, initialValue]);
+
+    const fileNameBuilder = useCallback(async (file: File) => {
+        if (storage.fileName) {
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property: property,
+                file,
+                propertyKey
+            });
+            if (!fileName || fileName.length === 0) {
+                throw Error("You need to return a valid filename");
+            }
+            return fileName;
+        }
+        return randomString() + "_" + file.name;
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const storagePathBuilder = useCallback((file: File) => {
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property: property,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const onFileUploadComplete = useCallback(async (uploadedPath: string,
+        entry: StorageFieldItem,
+        metadata?: any,
+        uploadedUrl?: string) => {
+
+        console.debug("onFileUploadComplete", uploadedPath, entry);
+
+        let uploadPathOrDownloadUrl: string | null = uploadedPath;
+
+        if (storage.includeBucketUrl) {
+            if (!uploadedUrl) {
+                console.warn("includeBucketUrl is set but no fully-qualified storage URL was returned by the StorageSource. Falling back to the storage path.");
+            } else {
+                uploadPathOrDownloadUrl = uploadedUrl;
+            }
+        }
+
+        if (storage.storeUrl) {
+            uploadPathOrDownloadUrl = (await storageSource.getDownloadURL(uploadedPath)).url;
+        }
+        if (storage.postProcess && uploadPathOrDownloadUrl) {
+            uploadPathOrDownloadUrl = await storage.postProcess(uploadPathOrDownloadUrl);
+        }
+
+        if (!uploadPathOrDownloadUrl) {
+            console.warn("uploadPathOrDownloadUrl is null")
+            return;
+        }
+
+        let newValue: StorageFieldItem[];
+
+        entry.storagePathOrDownloadUrl = uploadPathOrDownloadUrl;
+        entry.metadata = metadata;
+        newValue = [...internalValue];
+
+        newValue = removeDuplicates(newValue);
+        setInternalValue(newValue);
+
+        const fieldValue = newValue
+            .filter(e => !!e.storagePathOrDownloadUrl)
+            .map(e => e.storagePathOrDownloadUrl as string);
+
+        if (multipleFilesSupported) {
+            onChange(fieldValue);
+        } else {
+            onChange(fieldValue ? fieldValue[0] : null);
+        }
+    }, [internalValue, multipleFilesSupported, onChange, storage, storageSource]);
+
+    const onFileUploadError = useCallback((entry: StorageFieldItem) => {
+        console.debug("onFileUploadError", entry);
+
+        // Remove the failed entry from internalValue
+        const newValue = internalValue.filter(item => item.id !== entry.id);
+        setInternalValue(newValue);
+    }, [internalValue]);
+
+    const onFilesAdded = useCallback(async (acceptedFiles: File[]) => {
+
+        if (!acceptedFiles.length || disabled)
+            return;
+
+        if (processFile) {
+            try {
+                acceptedFiles = await Promise.all(acceptedFiles.map(async file => {
+                    const processedFile = await processFile(file);
+                    if (!processedFile) {
+                        return file;
+                    }
+                    return processedFile;
+                }));
+            } catch (e) {
+                console.error("Error processing file with custom code. Attempting to continue uploading.", e);
+            }
+        }
+
+        let newInternalValue: StorageFieldItem[];
+
+        if (multipleFilesSupported) {
+            newInternalValue = [...internalValue,
+            ...(await Promise.all(acceptedFiles.map(async file => {
+                if ((imageResize || legacyCompression) && isImageFile(file)) {
+                    file = await resizeImage(file, imageResize, legacyCompression);
+                }
+
+                return {
+                    id: getRandomId(),
+                    file,
+                    fileName: await fileNameBuilder(file),
+                    metadata,
+                    size
+                } as StorageFieldItem;
+            })))];
+        } else {
+            let file = acceptedFiles[0];
+            if ((imageResize || legacyCompression) && isImageFile(file)) {
+                file = await resizeImage(file, imageResize, legacyCompression);
+            }
+
+            newInternalValue = [{
+                id: getRandomId(),
+                file,
+                fileName: await fileNameBuilder(file),
+                metadata,
+                size
+            }];
+        }
+
+        // Remove either storage path or file duplicates
+        newInternalValue = removeDuplicates(newInternalValue);
+        setInternalValue(newInternalValue);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize, legacyCompression]);
+
+    return {
+        internalValue,
+        setInternalValue,
+        storage,
+        fileNameBuilder,
+        storagePathBuilder,
+        onFileUploadComplete,
+        onFileUploadError,
+        onFilesAdded,
+        multipleFilesSupported
+    }
+}
+
+function getInternalInitialValue(multipleFilesSupported: boolean,
+    value: string | string[] | null,
+    metadata: Record<string, any> | undefined,
+    size: PreviewSize): StorageFieldItem[] {
+    let strings: string[] = [];
+    if (multipleFilesSupported) {
+        if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+            strings = (value ?? []) as string[];
+        }
+    } else {
+        if (typeof value === "string") {
+            strings = value ? [value as string] : [];
+        }
+    }
+
+    return strings
+        .map(entry => (
+            {
+                id: getRandomId(),
+                storagePathOrDownloadUrl: entry,
+                metadata,
+                size
+            }
+        ));
+}
+
+function removeDuplicates(items: StorageFieldItem[]) {
+    return items.filter(
+        (item, i) => {
+            return ((items.map((v) => v.storagePathOrDownloadUrl).indexOf(item.storagePathOrDownloadUrl) === i) || !item.storagePathOrDownloadUrl) &&
+                ((items.map((v) => v.file).indexOf(item.file) === i) || !item.file);
+        }
+    );
+}
+
+function getRandomId() {
+    return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
+}
+
+/**
+ * Check if a file is an image type supported for resizing
+ */
+function isImageFile(file: File): boolean {
+    return file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/webp";
+}
+
+/**
+ * Resize and compress an image using compressorjs.
+ * Supports both the new imageResize API and legacy imageCompression for backward compatibility.
+ */
+async function resizeImage(
+    file: File,
+    imageResize?: StorageConfig["imageResize"],
+    legacyCompression?: ImageResize
+): Promise<File> {
+    // Determine configuration (new API takes precedence)
+    const maxWidth = imageResize?.maxWidth ?? legacyCompression?.maxWidth;
+    const maxHeight = imageResize?.maxHeight ?? legacyCompression?.maxHeight;
+    const quality = (imageResize?.quality ?? legacyCompression?.quality ?? 80) / 100;
+    const mode = imageResize?.mode ?? "contain";
+
+    // Determine output format
+    let mimeType = file.type;
+    if (imageResize?.format && imageResize.format !== "original") {
+        mimeType = `image/${imageResize.format}`;
+    }
+
+    return new Promise<File>((resolve, reject) => {
+        new Compressor(file, {
+            quality,
+            maxWidth,
+            maxHeight,
+            mimeType,
+            // Use cover mode if specified (crops to fit)
+            // Otherwise use contain mode (scales to fit)
+            ...(mode === "cover" || mode === undefined ? {
+                width: maxWidth,
+                height: maxHeight,
+                resize: "cover" as const
+            } : {}),
+            success: (result) => {
+                const compressedFile = new File([result], file.name, {
+                    type: result.type,
+                    lastModified: Date.now(),
+                });
+                resolve(compressedFile);
+            },
+            error: reject,
+        });
+    });
+}

package/src/util/useTraceUpdate.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+
+export function printChanged(props: any, prev: any, path: string | undefined = "", depth: number | undefined = 0, maxDepth: number | undefined = 10) {
+    if (depth > maxDepth) {
+        return;
+    }
+    if (props && prev && typeof props === "object" && typeof prev === "object") {
+        Object.keys(props).forEach((key) => {
+            printChanged(props[key], prev[key], path + "." + key, depth + 1, maxDepth);
+        });
+    } else if (props !== prev) {
+        console.log("Changed props:", path);
+    }
+
+}
+
+export function useTraceUpdate(props: any, maxDepth = 3) {
+    const prev = useRef(props);
+    useEffect(() => {
+        console.log("Changed props:");
+        printChanged(props, prev.current, "", 0, maxDepth);
+        prev.current = props;
+    });
+}