@firecms/core 3.0.0-rc.2 → 3.0.0-rc.4

package/dist/types/collections.d.ts

@@ -307,6 +307,17 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * This prop has no effect if the history plugin is not enabled
      */
     history?: boolean;
+    /**
+     * Should local changes be backed up in local storage, to prevent data loss on
+     * accidental navigations.
+     * - `manual_apply`: When the user navigates back to an entity with local changes,
+     *   they will be prompted to restore the changes.
+     * - `auto_apply`: When the user navigates back to an entity with local changes,
+     *   the changes will be automatically applied.
+     * - `false`: Local changes will not be backed up.
+     * Defaults to `manual_apply`.
+     */
+    localChangesBackup?: "manual_apply" | "auto_apply" | false;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/types/fields.d.ts

@@ -67,6 +67,10 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      * Is this field part of an array
      */
     partOfArray?: boolean;
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.
@@ -178,6 +182,10 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * Is this field part of an array
      */
     partOfArray?: boolean;
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.

package/dist/types/properties.d.ts

@@ -102,6 +102,10 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
     /**
      * Should this property be editable. If set to true, the user will be able to modify the property and
      * save the new config. The saved config will then become the source of truth.
+     * Defaults to `true.
+     * This props is only useful when you are using the collection editor to modify collection
+     * configurations from the CMS itself. You can also use the `editable` prop in the
+     * `EntityCollection` interface to disable the edition of all properties in a collection.
      */
     editable?: boolean;
     /**
@@ -617,8 +621,15 @@ export type StorageConfig = {
     /**
      * Use client side image compression and resizing
      * Will only be applied to these MIME types: image/jpeg, image/png and image/webp
+     * @deprecated Use `imageResize` instead
      */
-    imageCompression?: ImageCompression;
+    imageCompression?: ImageResize;
+    /**
+     * Advanced image resizing and cropping configuration.
+     * Applied before upload to optimize storage and bandwidth.
+     * Only applies to image MIME types: image/jpeg, image/png, image/webp
+     */
+    imageResize?: ImageResize;
     /**
      * Specific metadata set in your uploaded file.
      * For the default Firebase implementation, the values passed here are of type
@@ -730,17 +741,32 @@ export type PreviewType = "image" | "video" | "audio" | "file";
  * @group Entity properties
  */
 export type FileType = "image/*" | "video/*" | "audio/*" | "application/*" | "text/*" | "font/*" | string;
-export interface ImageCompression {
+export interface ImageResize {
+    /**
+     * Maximum width in pixels. Image will be scaled down proportionally if wider.
+     */
+    maxWidth?: number;
     /**
-     * New image max height (ratio is preserved)
+     * Maximum height in pixels. Image will be scaled down proportionally if taller.
      */
     maxHeight?: number;
     /**
-     * New image max width (ratio is preserved)
+     * Resize mode determines how the image fits within maxWidth/maxHeight bounds.
+     * - `contain`: Scale down to fit within bounds, preserving aspect ratio (default)
+     * - `cover`: Scale to fill bounds, preserving aspect ratio (may crop)
      */
-    maxWidth?: number;
+    mode?: 'contain' | 'cover';
+    /**
+     * Output format for the resized image.
+     * - `original`: Keep the original format (default)
+     * - `jpeg`: Convert to JPEG
+     * - `png`: Convert to PNG
+     * - `webp`: Convert to WebP
+     */
+    format?: 'original' | 'jpeg' | 'png' | 'webp';
     /**
-     * A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)
+     * Quality for lossy formats (JPEG, WebP). Number between 0 and 100.
+     * Higher is better quality but larger file size. Defaults to 80.
      */
     quality?: number;
 }

package/dist/util/collections.d.ts

@@ -9,3 +9,4 @@ export declare function resolveDefaultSelectedView(defaultSelectedView: string |
  * @param permissionsBuilder
  */
 export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder<any, any>) => EntityCollection[];
+export declare function getLocalChangesBackup(collection: EntityCollection): "manual_apply" | "auto_apply";

package/dist/util/entity_cache.d.ts

@@ -4,14 +4,18 @@
  * @param data - The data to cache and persist.
  */
 export declare function saveEntityToCache(path: string, data: object): void;
+export declare function removeEntityFromMemoryCache(path: string): void;
+export declare function saveEntityToMemoryCache(path: string, data: object): void;
+export declare function getEntityFromMemoryCache(path: string): object | undefined;
+export declare function hasEntityInCache(path: string): boolean;
 /**
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
+ * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
 export declare function getEntityFromCache(path: string): object | undefined;
-export declare function hasEntityInCache(path: string): boolean;
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.
  * @param path - The unique path/key for the entity to remove.
@@ -21,3 +25,4 @@ export declare function removeEntityFromCache(path: string): void;
  * Clears the entire in-memory cache and removes all related entities from `localStorage`.
  */
 export declare function clearEntityCache(): void;
+export declare function flattenKeys(obj: any, prefix?: string, result?: string[]): string[];

package/dist/util/make_properties_editable.d.ts

@@ -1,3 +1,2 @@
-import { Properties, PropertiesOrBuilders } from "../types";
+import { Properties } from "../types";
 export declare function makePropertiesEditable(properties: Properties): Properties<any>;
-export declare function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders;

package/dist/util/objects.d.ts

@@ -1,5 +1,6 @@
 export declare const pick: <T>(obj: T, ...args: any[]) => T;
 export declare function isObject(item: any): any;
+export declare function isPlainObject(obj: any): boolean;
 export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U, ignoreUndefined?: boolean): T & U;
 export declare function getValueInPath(o: object | undefined, path: string): any;
 export declare function removeInPath(o: object, path: string): object | undefined;

package/dist/util/useStorageUploadController.d.ts

@@ -31,6 +31,7 @@ export declare function useStorageUploadController<M extends object>({ entityId,
     fileNameBuilder: (file: File) => Promise<string>;
     storagePathBuilder: (file: File) => string;
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, metadata?: any) => Promise<void>;
+    onFileUploadError: (entry: StorageFieldItem) => void;
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>;
     multipleFilesSupported: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.4",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,11 +53,12 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-rc.2",
-    "@firecms/formex": "^3.0.0-rc.2",
-    "@firecms/ui": "^3.0.0-rc.2",
+    "@firecms/editor": "^3.0.0-rc.4",
+    "@firecms/formex": "^3.0.0-rc.4",
+    "@firecms/ui": "^3.0.0-rc.4",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
+    "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
@@ -67,7 +68,6 @@
     "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^14.3.8",
     "react-fast-compare": "^3.2.2",
-    "react-image-file-resizer": "^0.4.8",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "6295de2d801a3d2cddaa958fd66cb041dd2c240e",
+  "gitHead": "5fab14c8d1fff7dd606512b5d9b3f1842e601f8c",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,20 +1,10 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import {
-    Checkbox,
-    Chip,
-    cls,
-    EditIcon,
-    IconButton,
-    Menu,
-    MenuItem,
-    MoreVertIcon,
-    Skeleton,
-    Tooltip
-} from "@firecms/ui";
+import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { hasEntityInCache } from "../../util/entity_cache";
+import { getEntityFromCache } from "../../util/entity_cache";
+import { getLocalChangesBackup } from "../../util";
 
 /**
  *
@@ -79,7 +69,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
-    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+    const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
     return (
         <div
             className={cls(
@@ -99,37 +91,50 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
             {(hasActions || selectionEnabled) &&
                 <div className="w-34 flex justify-center">
 
-                    {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index}
-                                 title={action.name}
-                                 asChild={true}>
-                            <IconButton
-                                onClick={(event: MouseEvent) => {
-                                    event.stopPropagation();
-                                    action.onClick({
-                                        view: "collection",
-                                        entity,
-                                        fullPath,
-                                        fullIdPath,
-                                        collection,
-                                        context,
-                                        selectionController,
-                                        highlightEntity,
-                                        unhighlightEntity,
-                                        onCollectionChange,
-                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
-                                    });
-                                }}
-                                size={largeLayout ? "medium" : "small"}>
-                                {action.icon}
-                            </IconButton>
-                        </Tooltip>
-                    ))}
+                    {uncollapsedActions.map((action, index) => {
+                        const isEditAction = action.key === "edit";
+                        const tooltip = isEditAction && hasDraft ? "Local unsaved changes" : action.name;
+
+                        let iconButton = <IconButton
+                            onClick={(event: MouseEvent) => {
+                                event.stopPropagation();
+                                action.onClick({
+                                    view: "collection",
+                                    entity,
+                                    fullPath,
+                                    fullIdPath,
+                                    collection,
+                                    context,
+                                    selectionController,
+                                    highlightEntity,
+                                    unhighlightEntity,
+                                    onCollectionChange,
+                                    openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                });
+                            }}
+                            size={iconSize}>
+                            {action.icon}
+                        </IconButton>;
+                        if (isEditAction && hasDraft) {
+                            iconButton = (
+                                <Badge color={"warning"}>
+                                    {iconButton}
+                                </Badge>
+                            );
+                        }
+                        return (
+                            <Tooltip key={index}
+                                     title={tooltip}
+                                     asChild={true}>
+                                {iconButton}
+                            </Tooltip>
+                        );
+                    })}
 
                     {hasCollapsedActions &&
                         <Menu
                             trigger={<IconButton
-                                size={largeLayout ? "medium" : "small"}>
+                                size={iconSize}>
                                 <MoreVertIcon/>
                             </IconButton>}>
                             {collapsedActions.map((action, index) => (
@@ -161,7 +166,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     {selectionEnabled &&
                         <Tooltip title={`Select ${entity.id}`}>
                             <Checkbox
-                                size={largeLayout ? "medium" : "small"}
+                                size={iconSize}
                                 checked={Boolean(isSelected)}
                                 onCheckedChange={onCheckedChange}
                             />
@@ -175,11 +180,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-                    {hasDraft && <Tooltip title={"Local unsaved changes"} className={"inline"}>
-                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
-                            <EditIcon size={12}/>
-                        </Chip>
-                    </Tooltip>}
                     <span className="min-w-0 truncate text-center">
                         {entity
                             ? entity.id

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -376,6 +376,11 @@ export const EntityCollectionView = React.memo(
                     console.error("Save failure");
                     console.error(e);
                     setError(e);
+                },
+                onPreSaveHookError: (e: Error) => {
+                    console.error("Pre-save hook error");
+                    console.error(e);
+                    setError(e);
                 }
             });
 
@@ -694,7 +699,7 @@ export const EntityCollectionView = React.memo(
                                 className="mt-4"
                             >
                                 <AddIcon/>
-                                Create your first entity
+                                Create your first entry
                             </Button>
                         </div>
                         : <Typography variant={"label"}>No results with the applied filter/sort</Typography>

package/src/components/EntityView.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from "react";
-import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
 import { useAuthController } from "../hooks";
+import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
  * @group Components
@@ -40,47 +40,36 @@ export function EntityView<M extends Record<string, any>>(
 
     return (
         <div className={"w-full " + className}>
-            <div className={"w-full mb-4"}>
-                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                    <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-surface-600">Id</span>
+            <div className={"w-full mb-4 p-4"}>
+
+                <div className={`grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            Id
+                        </Typography>
                     </div>
-                    <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
-                        <span className="flex-grow mr-2">{entity.id}</span>
-                        {customizationController?.entityLinkBuilder &&
-                            <a href={customizationController.entityLinkBuilder({ entity })}
-                               rel="noopener noreferrer"
-                               target="_blank">
-                                <IconButton>
-                                    <OpenInNewIcon
-                                        size={"small"}/>
-                                </IconButton>
-                            </a>}
+                    <div className="col-span-8">
+                        <div
+                            className="flex-grow text-surface-900 dark:text-white flex items-center">
+                            <span className="flex-grow mr-2">{entity.id}</span>
+                            {customizationController?.entityLinkBuilder &&
+                                <a href={customizationController.entityLinkBuilder({ entity })}
+                                   rel="noopener noreferrer"
+                                   target="_blank">
+                                    <IconButton>
+                                        <OpenInNewIcon
+                                            size={"small"}/>
+                                    </IconButton>
+                                </a>}
+                        </div>
                     </div>
                 </div>
-                {Object.entries(properties)
-                    .map(([key, property]) => {
-                        const value = entity.values?.[key];
-                        return (
-                            <div
-                                key={`reference_previews_${key}`}
-                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                                <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
-                                </div>
-                                <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
-                                    <PropertyPreview
-                                        propertyKey={key}
-                                        value={value}
-                                        // entity={entity}
-                                        property={property}
-                                        size={"medium"}/>
-                                </div>
-                            </div>
-                        )
-                    })}
+
+                <PropertyCollectionView data={entity.values} properties={properties} size={"medium"}/>
+
             </div>
         </div>
     );

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,8 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Fuse from "fuse.js";
 import { Container, SearchBar } from "@firecms/ui";
-import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
-import { useCollapsedGroups } from "../../hooks/useCollapsedGroups";
+import {
+    useCollapsedGroups,
+    useCustomizationController,
+    useFireCMSContext,
+    useNavigationController
+} from "../../hooks";
 import {
     CMSAnalyticsEvent,
     NavigationEntry,
@@ -143,7 +147,6 @@ export function DefaultHomePage({
             allProcessed = allProcessed.filter(
                 (g) =>
                     g.entries.length ||
-                    groupOrderFromNavController.includes(g.name) ||
                     (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
             );
         }
@@ -177,6 +180,7 @@ export function DefaultHomePage({
     const persistNavigationGroups = (
         latest: { name: string; entries: NavigationEntry[] }[]
     ) => {
+        // Map ALL groups including "Views"
         const draggable: NavigationGroupMapping[] = latest.map((g) => ({
             name: g.name,
             entries: g.entries.map((e) => e.path)
@@ -221,13 +225,14 @@ export function DefaultHomePage({
         dialogOpenForGroup,
         setDialogOpenForGroup,
         handleRenameGroup,
+        handleDialogClose,
         isHoveringNewGroupDropZone,
         setIsHoveringNewGroupDropZone
     } = useHomePageDnd({
         items,
         setItems: updateItems,
         disabled: !allowDragAndDrop || performingSearch,
-        onPersist: persistNavigationGroups, // ——► persistence here
+        onPersist: persistNavigationGroups,
         onGroupMoved: (g) =>
             context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
                 name: g
@@ -355,7 +360,7 @@ export function DefaultHomePage({
                         items={containers}
                         strategy={verticalListSortingStrategy}
                     >
-                        {items.map((groupData) => {
+                        {items.map((groupData, groupIndex) => {
                             const groupKey = groupData.name;
                             const entriesInGroup = groupData.entries;
 
@@ -378,14 +383,13 @@ export function DefaultHomePage({
 
                             if (
                                 entriesInGroup.length === 0 &&
-                                (AdditionalCards.length === 0 || performingSearch) &&
-                                !groupOrderFromNavController.includes(groupKey)
+                                (AdditionalCards.length === 0 || performingSearch)
                             )
                                 return null;
 
                             return (
                                 <SortableNavigationGroup
-                                    key={groupKey}
+                                    key={`group-${groupIndex}`}
                                     groupName={groupKey}
                                     disabled={dndDisabled}
                                 >
@@ -557,7 +561,7 @@ export function DefaultHomePage({
                     existingGroupNames={items
                         .map((g) => g.name)
                         .filter((n) => n !== dialogOpenForGroup)}
-                    onClose={() => setDialogOpenForGroup(null)}
+                    onClose={handleDialogClose}
                     onRename={(newName) => {
                         handleRenameGroup(dialogOpenForGroup, newName);
                     }}