@firecms/core 3.0.0-canary.29 → 3.0.0-canary.292

package/src/util/useStorageUploadController.tsx

@@ -1,10 +1,12 @@
-import Resizer from "react-image-file-resizer";
+import Compressor from "compressorjs";
 import equal from "react-fast-compare";
 
 import {
+    ArrayProperty,
     EntityValues,
-    ImageCompression,
+    ImageResize,
     Property,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
@@ -14,7 +16,9 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { PreviewSize } from "../preview";
 import { randomString } from "./strings";
-import { resolveFilenameString, resolveStoragePathString } from "./storage";
+import { resolveStorageFilenameString, resolveStoragePathString } from "./storage";
+import { resolveProperty } from "./resolutions";
+import { useAuthController } from "../hooks";
 
 /**
  * Internal representation of an item in the storage
@@ -42,18 +46,19 @@ export function useStorageUploadController<M extends object>({
                                                                  disabled,
                                                                  onChange
                                                              }:
-                                                                 {
-                                                                     entityId: string,
-                                                                     entityValues: EntityValues<M>,
-                                                                     value: string | string[] | null;
-                                                                     path: string,
-                                                                     propertyKey: string,
-                                                                     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-                                                                     storageSource: StorageSource,
-                                                                     disabled: boolean,
-                                                                     onChange: (value: string | string[] | null) => void
-                                                                 }) {
-
+                                                             {
+                                                                 entityId: string,
+                                                                 entityValues: EntityValues<M>,
+                                                                 value: string | string[] | null;
+                                                                 path?: string,
+                                                                 propertyKey: string,
+                                                                 property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
+                                                                 storageSource: StorageSource,
+                                                                 disabled: boolean,
+                                                                 onChange: (value: string | string[] | null) => void
+                                                             }) {
+
+    const authController = useAuthController();
     const storage: StorageConfig | undefined = property.dataType === "string"
         ? property.storage
         : property.dataType === "array" &&
@@ -66,22 +71,17 @@ export function useStorageUploadController<M extends object>({
     if (!storage)
         throw Error("Storage meta must be specified");
 
+    const processFile = storage?.processFile;
+
     const metadata: Record<string, any> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const size = multipleFilesSupported ? "medium" : "large";
 
-    const compression: ImageCompression | undefined = storage?.imageCompression;
+    // Support both new imageResize and deprecated imageCompression
+    const imageResize = storage?.imageResize;
+    const legacyCompression = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
-        (multipleFilesSupported
-            ? (value ?? []) as string[]
-            : value ? [value as string] : []).map(entry => (
-            {
-                id: getRandomId(),
-                storagePathOrDownloadUrl: entry,
-                metadata,
-                size
-            }
-        ));
+        getInternalInitialValue(multipleFilesSupported, value, metadata, size);
 
     const [initialValue, setInitialValue] = useState<string | string[] | null>(value);
     const [internalValue, setInternalValue] = useState<StorageFieldItem[]>(internalInitialValue);
@@ -93,20 +93,44 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalInitialValue, value, initialValue]);
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        values: entityValues,
+        authController
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     const fileNameBuilder = useCallback(async (file: File) => {
         if (storage.fileName) {
-            const fileName = await resolveFilenameString(storage.fileName, storage, entityValues, entityId, path, property, file, propertyKey);
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property: resolvedProperty,
+                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]);
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const storagePathBuilder = useCallback((file: File) => {
-        return resolveStoragePathString(storage.storagePath, storage, entityValues, entityId, path, property, file, propertyKey) ?? "/";
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property: resolvedProperty,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const onFileUploadComplete = useCallback(async (uploadedPath: string,
                                                     entry: StorageFieldItem,
@@ -147,17 +171,40 @@ export function useStorageUploadController<M extends object>({
         }
     }, [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 (compression && compressionFormat(file)) {
-                        file = await resizeAndCompressImage(file, compression)
+                    if ((imageResize || legacyCompression) && isImageFile(file)) {
+                        file = await resizeImage(file, imageResize, legacyCompression);
                     }
 
                     return {
@@ -169,9 +216,9 @@ export function useStorageUploadController<M extends object>({
                     } as StorageFieldItem;
                 })))];
         } else {
-            let file = acceptedFiles[0]
-            if (compression && compressionFormat(file)) {
-                file = await resizeAndCompressImage(file, compression)
+            let file = acceptedFiles[0];
+            if ((imageResize || legacyCompression) && isImageFile(file)) {
+                file = await resizeImage(file, imageResize, legacyCompression);
             }
 
             newInternalValue = [{
@@ -186,7 +233,7 @@ export function useStorageUploadController<M extends object>({
         // Remove either storage path or file duplicates
         newInternalValue = removeDuplicates(newInternalValue);
         setInternalValue(newInternalValue);
-    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size]);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize, legacyCompression]);
 
     return {
         internalValue,
@@ -195,11 +242,38 @@ export function useStorageUploadController<M extends object>({
         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) => {
@@ -213,31 +287,57 @@ function getRandomId() {
     return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
 }
 
-const supportedTypes: Record<string, string> = {
-    "image/jpeg": "JPEG",
-    "image/png": "PNG",
-    "image/webp": "WEBP"
+/**
+ * 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";
 }
-const compressionFormat = (file: File) => supportedTypes[file.type] ? supportedTypes[file.type] : null;
-
-const defaultQuality = 100;
-const resizeAndCompressImage = (file: File, compression: ImageCompression) => new Promise<File>((resolve) => {
 
-    const inputQuality = compression.quality === undefined ? defaultQuality : compression.quality;
-    const quality = inputQuality >= 0 ? inputQuality <= 100 ? inputQuality : 100 : 100;
-
-    const format = compressionFormat(file);
-    if (!format) {
-        throw Error("resizeAndCompressImage: Unsupported image format");
+/**
+ * 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}`;
     }
-    Resizer.imageFileResizer(
-        file,
-        compression.maxWidth || Number.MAX_VALUE,
-        compression.maxHeight || Number.MAX_VALUE,
-        format,
-        quality,
-        0,
-        (file: string | Blob | File | ProgressEvent<FileReader>) => resolve(file as File),
-        "file"
-    )
-});
+
+    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/dist/components/EntityCollectionTable/internal/popup_field/ElementResizeListener.d.ts

@@ -1,5 +0,0 @@
-interface Props {
-    onResize: (event: Event) => void;
-}
-export declare const ElementResizeListener: React.FC<Props>;
-export {};

package/dist/components/FireCMSAppBar.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-import { User } from "../types";
-export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
-    /**
-     * A component that gets rendered on the upper side of the main toolbar
-     */
-    endAdornment?: React.ReactNode;
-    startAdornment?: React.ReactNode;
-    dropDownActions?: React.ReactNode;
-    includeDrawer?: boolean;
-    drawerOpen: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    user?: User;
-} & ADDITIONAL_PROPS;
-/**
- * This component renders the main app bar of FireCMS.
- * You will likely not need to use this component directly.
- *
- * @param title
- * @param toolbarExtraWidget
- * @param drawerOpen
- * @constructor
- */
-export declare const FireCMSAppBar: ({ title, endAdornment, startAdornment, drawerOpen, dropDownActions, includeDrawer, className, style, user: userProp }: FireCMSAppBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PropertyIdCopyTooltipContent.d.ts

@@ -1,3 +0,0 @@
-export declare function PropertyIdCopyTooltipContent({ propertyId }: {
-    propertyId: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/VirtualTable/common.d.ts

@@ -1,2 +0,0 @@
-import { VirtualTableSize } from "./VirtualTableProps";
-export declare function getRowHeight(size: VirtualTableSize): number;

package/dist/core/Drawer.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps<T = {}> = T & {
-    hovered: boolean;
-    drawerOpen: boolean;
-    closeDrawer: () => any;
-};
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export declare function Drawer({ hovered, drawerOpen, closeDrawer }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-export declare function DrawerNavigationItem({ name, icon, drawerOpen, tooltipsOpen, url, onClick }: {
-    icon: React.ReactElement;
-    name: string;
-    tooltipsOpen: boolean;
-    drawerOpen: boolean;
-    url: string;
-    onClick?: () => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/core/Scaffold.d.ts

@@ -1,55 +0,0 @@
-import React from "react";
-import { DrawerProps } from "./Drawer";
-import { FireCMSAppBarProps } from "../components";
-export declare const DRAWER_WIDTH = 280;
-/**
- * @group Core
- */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name: string;
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    includeDrawer?: boolean;
-    /**
-     * In case you need to override the view that gets rendered as a drawer
-     * @see DefaultDrawer
-     */
-    Drawer?: React.ComponentType<DrawerProps<ExtraDrawerProps>>;
-    /**
-     * Additional props passed to the custom Drawer
-     */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
-    /**
-     * Open the drawer on hover
-     */
-    autoOpenDrawer?: boolean;
-    /**
-     * A component that gets rendered on the upper side of the main toolbar.
-     * `toolbarExtraWidget` has no effect if this is set.
-     */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
-}
-/**
- * This view acts as a scaffold for FireCMS.
- *
- * It is in charge of displaying the navigation drawer, top bar and main
- * collection views.
- * This component needs a parent {@link FireCMS}
- *
- * @param props
- * @constructor
- * @group Core
- */
-export declare const Scaffold: React.NamedExoticComponent<React.PropsWithChildren<ScaffoldProps<object, object>>>;

package/dist/core/SideEntityView.d.ts

@@ -1,7 +0,0 @@
-import { User } from "../types";
-import { EntityEditViewProps } from "./EntityEditView";
-export type SideEntityViewProps<M extends Record<string, any>> = EntityEditViewProps<M> & {
-    formWidth?: number | string;
-    onClose?: () => void;
-};
-export declare function SideEntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: SideEntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/form/components/FormikArrayContainer.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-interface ArrayContainerProps<T> {
-    value: T[];
-    name: string;
-    addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
-    disabled?: boolean;
-    small?: boolean;
-    onInternalIdAdded?: (id: number) => void;
-    includeAddButton?: boolean;
-    newDefaultEntry?: T | null;
-    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
-}
-/**
- * @group Form custom fields
- */
-export declare function FormikArrayContainer<T>({ name, addLabel, value, disabled, buildEntry, small, onInternalIdAdded, includeAddButton, newDefaultEntry, setFieldValue }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/form/field_bindings/MarkdownFieldBinding.d.ts

@@ -1,9 +0,0 @@
-import { FieldProps } from "../../types";
-/**
- * Render a markdown field that allows edition and seeing the preview.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export declare function MarkdownFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, tableMode, includeDescription, context }: FieldProps<string>): import("react/jsx-runtime").JSX.Element;

package/dist/internal/useBuildCustomizationController.d.ts

@@ -1,2 +0,0 @@
-import { CustomizationController } from "../types/customization_controller";
-export declare function useBuildCustomizationController(controller: CustomizationController): CustomizationController;

package/dist/internal/useLocaleConfig.d.ts

@@ -1 +0,0 @@
-export declare function useLocaleConfig(locale?: string): void;

package/dist/types/appcheck.d.ts

@@ -1,26 +0,0 @@
-import { FirebaseApp } from "firebase/app";
-/**
- * @group Firebase
- */
-export interface AppCheck {
-    firebaseApp?: FirebaseApp;
-}
-/**
- * @group Firebase
- */
-export interface AppCheckOptions {
-    providerKey: string;
-    useEnterpriseRecaptcha: boolean;
-    isTokenAutoRefreshEnabled?: boolean;
-    debugToken?: string;
-    forceRefresh?: boolean;
-}
-/**
- * @group Firebase
- */
-export declare interface AppCheckTokenResult {
-    /**
-     * The token string in JWT format.
-     */
-    readonly token: string;
-}

package/src/components/EntityCollectionTable/internal/popup_field/ElementResizeListener.tsx

@@ -1,59 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef } from "react";
-
-interface Props {
-    onResize: (event: Event) => void;
-}
-
-export const ElementResizeListener: React.FC<Props> = ({ onResize }) => {
-    const rafRef = useRef(0);
-    const objectRef: RefObject<HTMLObjectElement> = useRef(null);
-    const onResizeRef = useRef(onResize);
-
-    onResizeRef.current = onResize;
-
-    const _onResize = useCallback((e: Event) => {
-        if (rafRef.current) {
-            cancelAnimationFrame(rafRef.current);
-        }
-        rafRef.current = requestAnimationFrame(() => {
-            onResizeRef.current(e);
-        });
-    }, []);
-
-    const onLoad = useCallback(() => {
-        const obj = objectRef.current;
-        if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-            obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-        }
-    }, [_onResize]);
-
-    useEffect(() => {
-        const obj = objectRef.current;
-        return () => {
-            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-                obj.contentDocument.defaultView.removeEventListener("resize", _onResize);
-            }
-        };
-    }, [_onResize]);
-
-    return (
-        <object
-            onLoad={onLoad}
-            ref={objectRef}
-            tabIndex={-1}
-            type={"text/html"}
-            data={"about:blank"}
-            title={""}
-            style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                height: "100%",
-                width: "100%",
-                pointerEvents: "none",
-                zIndex: -1,
-                opacity: 0
-            }}
-        />
-    );
-};