@firecms/core 3.0.0-canary.119 → 3.0.0-canary.120

package/dist/types/fields.d.ts

@@ -1,4 +1,4 @@
-import { CMSType, PropertyOrBuilder } from "./properties";
+import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
 import { FormexController } from "@firecms/formex";
 /**
@@ -52,7 +52,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Property related to this field
      */
-    property: ResolvedProperty<T>;
+    property: Property<T> | ResolvedProperty<T>;
     /**
      * Should this field include a description
      */

package/dist/types/properties.d.ts

@@ -8,7 +8,7 @@ import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
 /**
  * @group Entity properties
  */
-export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends Vector ? "vector" : T extends EntityReference ? "reference" : T extends Array<CMSType> ? "array" : T extends Record<string, CMSType> ? "map" : never;
+export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends Vector ? "vector" : T extends EntityReference ? "reference" : T extends Array<any> ? "array" : T extends Record<string, any> ? "map" : never;
 /**
  * @group Entity properties
  */
@@ -20,7 +20,7 @@ export type AnyProperty = StringProperty | NumberProperty | BooleanProperty | Da
 /**
  * @group Entity properties
  */
-export type Property<T extends CMSType = CMSType> = T extends string ? StringProperty : T extends number ? NumberProperty : T extends boolean ? BooleanProperty : T extends Date ? DateProperty : T extends GeoPoint ? GeopointProperty : T extends EntityReference ? ReferenceProperty : T extends Array<CMSType> ? ArrayProperty<T> : T extends Record<string, any> ? MapProperty<T> : AnyProperty;
+export type Property<T extends CMSType = any> = T extends string ? StringProperty : T extends number ? NumberProperty : T extends boolean ? BooleanProperty : T extends Date ? DateProperty : T extends GeoPoint ? GeopointProperty : T extends EntityReference ? ReferenceProperty : T extends Array<CMSType> ? ArrayProperty<T> : T extends Record<string, any> ? MapProperty<T> : AnyProperty;
 /**
  * Interface including all common properties of a CMS property
  * @group Entity properties
@@ -306,7 +306,7 @@ export interface StringProperty extends BaseProperty<string> {
 /**
  * @group Entity properties
  */
-export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSType = CMSType> extends BaseProperty<T> {
+export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSType = any> extends BaseProperty<T> {
     dataType: "array";
     /**
      * The property of this array.

package/dist/util/entities.d.ts

@@ -1,5 +1,5 @@
 import { CMSType, DataType, Entity, EntityReference, EntityStatus, EntityValues, PropertiesOrBuilders, Property, PropertyBuilder, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
-export declare function isReadOnly(property: Property | ResolvedProperty): boolean;
+export declare function isReadOnly(property: Property<any> | ResolvedProperty<any>): boolean;
 export declare function isHidden(property: Property | ResolvedProperty): boolean;
 export declare function isPropertyBuilder<T extends CMSType, M extends Record<string, any>>(propertyOrBuilder?: PropertyOrBuilder<T, M> | Property<T> | ResolvedProperty<T>): propertyOrBuilder is PropertyBuilder<T, M>;
 export declare function getDefaultValuesFor<M extends Record<string, any>>(properties: PropertiesOrBuilders<M> | ResolvedProperties<M>): Partial<EntityValues<M>>;

package/dist/util/property_utils.d.ts

@@ -3,7 +3,7 @@ import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuild
 export declare function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
 export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
-export declare function getIconForProperty(property: PropertyOrBuilder | ResolvedProperty, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
+export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
 export declare function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string;
 /**
  * Get a property in a property tree from a path like

package/dist/util/useStorageUploadController.d.ts

@@ -1,4 +1,4 @@
-import { EntityValues, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, StorageSource } from "../types";
+import { ArrayProperty, EntityValues, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, StorageSource, StringProperty } from "../types";
 import { PreviewSize } from "../preview";
 /**
  * Internal representation of an item in the storage
@@ -20,7 +20,7 @@ export declare function useStorageUploadController<M extends object>({ entityId,
     value: string | string[] | null;
     path?: string;
     propertyKey: string;
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>;
     storageSource: StorageSource;
     disabled: boolean;
     onChange: (value: string | string[] | null) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.119",
+    "version": "3.0.0-canary.120",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.119",
-        "@firecms/formex": "^3.0.0-canary.119",
-        "@firecms/ui": "^3.0.0-canary.119",
+        "@firecms/editor": "^3.0.0-canary.120",
+        "@firecms/formex": "^3.0.0-canary.120",
+        "@firecms/ui": "^3.0.0-canary.120",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "22e1ffb78b12816a576df70e3aa7df1ee29e26ad",
+    "gitHead": "aa817730cb582b5724774a50ac8a512bf0643ef3",
     "publishConfig": {
         "access": "public"
     },

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -3,7 +3,7 @@ import { FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
-import { getIconForProperty } from "../../util";
+import { getArrayResolvedProperties, getIconForProperty } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -28,8 +28,15 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
-    if (!Array.isArray(property.resolvedProperties))
-        throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
+    if (!resolvedProperties) {
+        resolvedProperties = getArrayResolvedProperties({
+            propertyValue: value,
+            propertyKey,
+            property,
+            ignoreMissingFields: false
+        })
+    }
 
     const expanded = property.expanded === undefined ? true : property.expanded;
 
@@ -49,7 +56,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 
-    const body = property.resolvedProperties.map((childProperty, index) => {
+    const body = resolvedProperties.map((childProperty, index) => {
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
             disabled,

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -3,13 +3,15 @@ import {
     FieldHelperText,
     FieldProps,
     getIconForProperty,
-    LabelWithIconAndTooltip,
+    LabelWithIconAndTooltip, PropertyOrBuilder,
     randomString,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
 import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
-import { resolveStorageFilenameString, resolveStoragePathString } from "../../util";
+import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
@@ -56,6 +58,12 @@ export function MarkdownEditorFieldBinding({
         }
     }, [value]);
 
+
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        values: entityValues
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     const fileNameBuilder = useCallback(async (file: File) => {
         if (storage?.fileName) {
             const fileName = await resolveStorageFilenameString({
@@ -64,7 +72,7 @@ export function MarkdownEditorFieldBinding({
                 values: entityValues,
                 entityId,
                 path,
-                property,
+                property: resolvedProperty,
                 file,
                 propertyKey
             });
@@ -74,17 +82,21 @@ export function MarkdownEditorFieldBinding({
             return fileName;
         }
         return randomString() + "_" + file.name;
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const storagePathBuilder = useCallback((file: File) => {
         if (!storage) return "/";
+        const resolvedProperty = resolveProperty({
+            propertyOrBuilder: property,
+            values: entityValues
+        }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
         return resolveStoragePathString({
             input: storage.storagePath,
             storage,
             values: entityValues,
             entityId,
             path,
-            property,
+            property: resolvedProperty,
             file,
             propertyKey
         }) ?? "/";
@@ -111,7 +123,7 @@ export function MarkdownEditorFieldBinding({
             return url;
         }}
         {...editorProps}
-        />;
+    />;
 
     if (minimalistView)
         return editor;

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -34,7 +34,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
 
-    let resolvedProperties = property.resolvedProperties;
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
     if (!resolvedProperties) {
         resolvedProperties = getArrayResolvedProperties({
             propertyValue: value,

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
-import { getIconForProperty } from "../../util";
+import { getIconForProperty, resolveEnumValues } from "../../util";
 import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { PropertyIdCopyTooltip } from "../../components";
@@ -32,7 +32,7 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            size = "medium"
                                                        }: SelectProps<T>) {
 
-    const enumValues = property.enumValues;
+    const enumValues = resolveEnumValues(property.enumValues ?? []);
 
     useClearRestoreValue({
         property,

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,11 +1,18 @@
 import React, { useCallback } from "react";
 
-import { ArrayProperty, FieldProps, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../types";
+import {
+    ArrayProperty,
+    FieldProps,
+    PropertyOrBuilder,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
+    StorageConfig
+} from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
-import { getIconForProperty, isReadOnly } from "../../util";
+import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
@@ -82,6 +89,10 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     return (
 
         <>
@@ -99,7 +110,7 @@ export function StorageUploadFieldBinding({
                 name={propertyKey}
                 disabled={disabled ?? false}
                 autoFocus={autoFocus ?? false}
-                property={property}
+                property={resolvedProperty}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}

package/src/form/useClearRestoreValue.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { CMSType, ResolvedProperty } from "../types";
+import { CMSType, Property, ResolvedProperty } from "../types";
 
 /**
  * Hook we use to restore a value after it has been cleared
@@ -14,7 +14,7 @@ export function useClearRestoreValue<T extends CMSType>({
                                                             setValue
                                                         }:
                                                             {
-                                                                property: ResolvedProperty<T>,
+                                                                property: Property<T> | ResolvedProperty<T>,
                                                                 value: T,
                                                                 setValue: (value: T | null, shouldValidate?: boolean) => void
                                                             }) {

package/src/types/fields.tsx

@@ -1,4 +1,4 @@
-import { CMSType, PropertyOrBuilder } from "./properties";
+import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
 import { FormexController } from "@firecms/formex";
 
@@ -62,7 +62,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Property related to this field
      */
-    property: ResolvedProperty<T>;
+    property: Property<T> | ResolvedProperty<T>;
 
     /**
      * Should this field include a description

package/src/types/properties.ts

@@ -17,8 +17,8 @@ export type DataType<T extends CMSType = CMSType> =
                     T extends GeoPoint ? "geopoint" :
                         T extends Vector ? "vector" :
                             T extends EntityReference ? "reference" :
-                                T extends Array<CMSType> ? "array" :
-                                    T extends Record<string, CMSType> ? "map" : never;
+                                T extends Array<any> ? "array" :
+                                    T extends Record<string, any> ? "map" : never;
 
 /**
  * @group Entity properties
@@ -49,7 +49,7 @@ export type AnyProperty =
 /**
  * @group Entity properties
  */
-export type Property<T extends CMSType = CMSType> =
+export type Property<T extends CMSType = any> =
     T extends string ? StringProperty :
         T extends number ? NumberProperty :
             T extends boolean ? BooleanProperty :
@@ -405,7 +405,7 @@ export interface StringProperty extends BaseProperty<string> {
 /**
  * @group Entity properties
  */
-export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSType = CMSType> extends BaseProperty<T> {
+export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSType = any> extends BaseProperty<T> {
 
     dataType: "array";
 

package/src/util/entities.ts

@@ -15,7 +15,7 @@ import {
 } from "../types";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "./common";
 
-export function isReadOnly(property: Property | ResolvedProperty): boolean {
+export function isReadOnly(property: Property<any> | ResolvedProperty<any>): boolean {
     if (property.readOnly)
         return true;
     if (property.dataType === "date") {

package/src/util/property_utils.tsx

@@ -35,7 +35,7 @@ export function getIconForWidget(widget: PropertyConfig | undefined,
 }
 
 export function getIconForProperty(
-    property: PropertyOrBuilder | ResolvedProperty,
+    property: PropertyOrBuilder<any> | ResolvedProperty<any>,
     size: "small" | "medium" | "large" = "small",
     fields: Record<string, PropertyConfig> = {}
 ): React.ReactNode {

package/src/util/storage.ts

@@ -1,8 +1,11 @@
 import {
+    ArrayProperty,
     EntityValues,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
+    StringProperty,
     UploadedFileContext
 } from "../types";
 import { randomString } from "./strings";
@@ -13,7 +16,7 @@ interface ResolveFilenameStringParams<M extends object> {
     values: EntityValues<M>;
     entityId: string;
     path?: string;
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
     file: File;
     propertyKey: string;
 }
@@ -30,6 +33,7 @@ export async function resolveStorageFilenameString<M extends object>(
         propertyKey
     }: ResolveFilenameStringParams<M>): Promise<string> {
     let result;
+
     if (typeof input === "function") {
         result = await input({
             path,

package/src/util/useStorageUploadController.tsx

@@ -2,9 +2,11 @@ import Resizer from "react-image-file-resizer";
 import equal from "react-fast-compare";
 
 import {
+    ArrayProperty,
     EntityValues,
     ImageCompression,
     Property,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
@@ -15,6 +17,7 @@ import { useCallback, useEffect, useState } from "react";
 import { PreviewSize } from "../preview";
 import { randomString } from "./strings";
 import { resolveStorageFilenameString, resolveStoragePathString } from "./storage";
+import { resolveProperty } from "./resolutions";
 
 /**
  * Internal representation of an item in the storage
@@ -48,7 +51,7 @@ export function useStorageUploadController<M extends object>({
                                                                      value: string | string[] | null;
                                                                      path?: string,
                                                                      propertyKey: string,
-                                                                     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
+                                                                     property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
                                                                      storageSource: StorageSource,
                                                                      disabled: boolean,
                                                                      onChange: (value: string | string[] | null) => void
@@ -93,6 +96,11 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalInitialValue, value, initialValue]);
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        values: entityValues
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     const fileNameBuilder = useCallback(async (file: File) => {
         if (storage.fileName) {
             const fileName = await resolveStorageFilenameString({
@@ -101,7 +109,7 @@ export function useStorageUploadController<M extends object>({
                 values: entityValues,
                 entityId,
                 path,
-                property,
+                property: resolvedProperty,
                 file,
                 propertyKey
             });
@@ -111,7 +119,7 @@ export function useStorageUploadController<M extends object>({
             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({
@@ -120,11 +128,11 @@ export function useStorageUploadController<M extends object>({
             values: entityValues,
             entityId,
             path,
-            property,
+            property: resolvedProperty,
             file,
             propertyKey
         }) ?? "/";
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const onFileUploadComplete = useCallback(async (uploadedPath: string,
                                                     entry: StorageFieldItem,