@firecms/core 3.0.0-canary.287 → 3.0.0-canary.288

package/dist/util/entity_cache.d.ts

@@ -25,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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.287",
+  "version": "3.0.0-canary.288",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.287",
-    "@firecms/formex": "^3.0.0-canary.287",
-    "@firecms/ui": "^3.0.0-canary.287",
+    "@firecms/editor": "^3.0.0-canary.288",
+    "@firecms/formex": "^3.0.0-canary.288",
+    "@firecms/ui": "^3.0.0-canary.288",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "c6606ddc2309cbdaeacb3103fbb2bb50a20418ce",
+  "gitHead": "e609cafa0c505803a4628324a77404ebdfbb62c4",
   "publishConfig": {
     "access": "public"
   },

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/PropertyCollectionView.tsx

@@ -0,0 +1,329 @@
+import React from "react";
+import { defaultBorderMixin, Typography } from "@firecms/ui";
+import { PreviewSize, PropertyPreview } from "../preview";
+import { ResolvedProperties, ResolvedProperty } from "../types";
+import { getValueInPath } from "../util";
+
+/**
+ * Build a readable label for a path and resolve the property
+ * Supports map and array (including arrays of maps)
+ */
+export function buildPropertyLabelAndGetProperty(
+    properties: ResolvedProperties,
+    key: string
+): { label: string; property: ResolvedProperty | undefined } {
+    if (!key) return {
+        label: "",
+        property: undefined
+    };
+
+    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
+    const segments: (string | number)[] = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(key)) !== null) {
+        if (m[1] !== undefined) segments.push(m[1]);
+        else if (m[2] !== undefined) segments.push(Number(m[2]));
+    }
+
+    let currentProps: ResolvedProperties | undefined = properties;
+    let currentProp: ResolvedProperty | undefined;
+    let lastLabel = "";
+
+    const getArrayOfProp = (p?: ResolvedProperty): ResolvedProperty | undefined => {
+        if (!p || p.dataType !== "array") return undefined;
+        return Array.isArray(p.of) ? (p.of[0] as ResolvedProperty) : (p.of as ResolvedProperty | undefined);
+    };
+
+    for (const seg of segments) {
+        if (typeof seg === "number") {
+            // Last segment label should be the index itself
+            lastLabel = `[${seg}]`;
+
+            // Move schema context into the array element
+            if (currentProp?.dataType === "array") {
+                currentProp = getArrayOfProp(currentProp);
+                if (currentProp?.dataType === "map" && currentProp.properties) {
+                    currentProps = currentProp.properties as ResolvedProperties;
+                } else {
+                    currentProps = undefined;
+                }
+            } else {
+                // Index without array schema context
+                currentProp = undefined;
+                currentProps = undefined;
+            }
+            continue;
+        }
+
+        // seg is a string key
+        if (currentProps && (currentProps as any)[seg]) {
+            const nextProp = (currentProps as any)[seg] as ResolvedProperty;
+            currentProp = nextProp;
+            // Last segment label should be the property name (or the raw key)
+            lastLabel = nextProp.name || String(seg);
+
+            if (nextProp.dataType === "map" && nextProp.properties) {
+                currentProps = nextProp.properties as ResolvedProperties;
+            } else if (nextProp.dataType === "array") {
+                // Keep array prop; the next segment (index) will step into its element schema
+                currentProps = undefined;
+            } else {
+                currentProps = undefined;
+            }
+        } else {
+            // Unknown key or no schema context
+            currentProp = undefined;
+            currentProps = undefined;
+            lastLabel = String(seg);
+        }
+    }
+
+    return {
+        label: lastLabel,
+        property: currentProp
+    };
+}
+
+const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
+
+/**
+ * Improved simple layout for nested changes:
+ * - Map or Array-of-Map -> section header + indented rows
+ * - Leaf or Array-of-Primitives -> single row with label and value
+ */
+export const PropertyCollectionView = ({
+                                           data,
+                                           properties,
+                                           baseKey = "",
+                                           suppressHeader = false,
+                                           size = "small"
+                                       }: {
+    data: any;
+    properties: ResolvedProperties;
+    baseKey?: string;
+    suppressHeader?: boolean;
+    size?: PreviewSize;
+}) => {
+
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+
+    // Arrays
+    if (Array.isArray(data)) {
+        const {
+            label: arrayLabel,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        const ofProp = property?.dataType === "array"
+            ? (Array.isArray(property.of) ? property.of[0] : property.of) as ResolvedProperty | undefined
+            : undefined;
+
+        const isArrayOfMaps = ofProp?.dataType === "map";
+        const isArrayOfPrimitives = property?.dataType === "array" && ofProp && ofProp.dataType !== "map";
+
+        // Array of primitives -> single row
+        if (baseKey && property && isArrayOfPrimitives) {
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {arrayLabel}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                {baseKey && arrayLabel && !suppressHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}>
+                        {arrayLabel}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {data.map((item, index) => {
+                        if (item === null || item === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+
+                        // Combined header text
+                        const itemHeader = isArrayOfMaps && ofProp?.name
+                            ? `${ofProp.name} [${index}]`
+                            : `[${index}]`;
+
+                        return (
+                            <div key={currentKey} className="py-1">
+                                <Typography variant="caption"
+                                            color={"secondary"}
+                                            component={"span"}>
+                                    {itemHeader}
+                                </Typography>
+                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
+                                    <PropertyCollectionView
+                                        data={item}
+                                        properties={properties}
+                                        baseKey={currentKey}
+                                        suppressHeader={true} // don’t repeat the inner map header
+                                        size={size}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Objects (maps or plain objects)
+    if (typeof data === "object" && data !== null) {
+        const {
+            label,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        // Non-map leaf-like object -> single row
+        if (baseKey && (!property || property.dataType !== "map" || !property.properties)) {
+            if (!property) return null;
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {label}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Map with defined properties -> show map header only if not suppressed
+        const showMapHeader =
+            baseKey &&
+            !suppressHeader &&
+            property?.dataType === "map" &&
+            (property.name || !pathEndsWithIndex(baseKey));
+
+        const headerText = property?.name || label;
+
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                {showMapHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                    >
+                        {headerText}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {Object.entries(data).map(([key, value]) => {
+                        if (value === null || value === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
+                        return (
+                            <PropertyCollectionView
+                                key={currentKey}
+                                data={value}
+                                properties={properties}
+                                baseKey={currentKey}
+                                size={size}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Primitives
+    if (baseKey) {
+        const {
+            label,
+            property
+        } = buildPropertyLabelAndGetProperty(properties, baseKey);
+        if (!property) return null;
+        return (
+            <div
+                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                <div className="col-span-4 pr-2">
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                                className="break-words">
+                        {label}
+                    </Typography>
+                </div>
+                <div className="col-span-8">
+                    <PropertyPreview propertyKey={baseKey}
+                                     value={data}
+                                     property={property}
+                                     size={size}/>
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export function buildDataFromPaths(values: object, paths: string[]): object {
+    const result = {};
+    paths.forEach(path => {
+        const value = getValueInPath(values, path);
+        if (value === undefined) return;
+
+        // lodash.set would be perfect here
+        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let current: any = result;
+        segments.forEach((segment, index) => {
+            if (index === segments.length - 1) {
+                current[segment] = value;
+            } else {
+                const nextSegment = segments[index + 1];
+                const isNextAnIndex = /^\d+$/.test(nextSegment);
+                if (!current[segment]) {
+                    if (isNextAnIndex) {
+                        current[segment] = [];
+                    } else {
+                        current[segment] = {};
+                    }
+                }
+                current = current[segment];
+            }
+        });
+    });
+    return result;
+}

package/src/form/EntityForm.tsx

@@ -22,6 +22,7 @@ import {
     getLocalChangesBackup,
     getValueInPath,
     isHidden,
+    isObject,
     isReadOnly,
     mergeDeep,
     resolveCollection,
@@ -39,11 +40,12 @@ import {
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
-import { flattenKeys, Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
+import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
 import {
+    flattenKeys,
     getEntityFromCache,
     removeEntityFromCache,
     removeEntityFromMemoryCache,
@@ -120,6 +122,64 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     return acc;
 }
 
+export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
+    const changes: Partial<T> = {};
+
+    if (!source) {
+        return {};
+    }
+    if (!comparison) {
+        return source;
+    }
+
+    const allKeys = Array.from(new Set([...Object.keys(source), ...Object.keys(comparison)]));
+
+    for (const key of allKeys) {
+        const sourceValue = (source as any)[key];
+        const comparisonValue = (comparison as any)[key];
+
+        if (equal(sourceValue, comparisonValue)) {
+            continue;
+        }
+
+        const sourceHasKey = source && typeof source === "object" && Object.prototype.hasOwnProperty.call(source, key);
+        const comparisonHasKey = comparison && typeof comparison === "object" && Object.prototype.hasOwnProperty.call(comparison, key);
+
+        if (comparisonHasKey && !sourceHasKey) {
+            (changes as any)[key] = undefined;
+        } else if (Array.isArray(sourceValue)) {
+            const comparisonArray = Array.isArray(comparisonValue) ? comparisonValue : [];
+            if (sourceValue.length < comparisonArray.length) {
+                (changes as any)[key] = sourceValue;
+                continue;
+            }
+            const changedArray = sourceValue.map((item, index) => {
+                const comparisonItem = comparisonArray[index];
+                if (equal(item, comparisonItem)) {
+                    return null;
+                }
+                if (isObject(item) && item && isObject(comparisonItem) && comparisonItem) {
+                    const nestedChanges = getChanges(item, comparisonItem);
+                    return Object.keys(nestedChanges).length > 0 ? nestedChanges : item;
+                }
+                return item;
+            });
+            if (changedArray.some(item => item !== null) || sourceValue.length > comparisonArray.length) {
+                (changes as any)[key] = changedArray;
+            }
+        } else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+            const nestedChanges = getChanges(sourceValue, comparisonValue);
+            if (Object.keys(nestedChanges).length > 0) {
+                (changes as any)[key] = nestedChanges;
+            }
+        } else {
+            (changes as any)[key] = sourceValue;
+        }
+    }
+
+    return changes;
+}
+
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
                                                               fullIdPath,
@@ -272,16 +332,7 @@ export function EntityForm<M extends Record<string, any>>({
         if (!localChangesDataRaw) {
             return undefined;
         }
-        let filteredChanges = {};
-        const flattenedKeys = flattenKeys(localChangesDataRaw);
-        flattenedKeys.forEach(key => {
-            const localValue = getIn(localChangesDataRaw, key);
-            const initialValue = getIn(initialValues, key);
-            if (!equal(localValue, initialValue)) {
-                filteredChanges = setIn(filteredChanges, key, localValue);
-            }
-        });
-        return filteredChanges;
+        return getChanges(localChangesDataRaw, initialValues);
     }, [localChangesDataRaw, initialValues]);
 
     const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
@@ -891,3 +942,4 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
+