@firecms/core 3.0.0-beta.7 → 3.0.0-beta.8

package/src/core/EntitySidePanel.tsx

@@ -79,7 +79,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             <ErrorBoundary>
                 <EntityEditView
                     {...props}
-                    formWidth={props.width}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
                     onValuesAreModified={onValuesAreModified}

package/src/core/NavigationRoutes.tsx

@@ -15,7 +15,7 @@ export type NavigationRoutesProps = {
      */
     homePage?: React.ReactNode;
 
-    customRoutes?: React.ReactNode[]
+    children?: React.ReactNode | React.ReactNode[]
 
 };
 
@@ -31,7 +31,7 @@ export type NavigationRoutesProps = {
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
                                   homePage = <DefaultHomePage/>,
-                                  customRoutes
+                                  children
                               }: NavigationRoutesProps) {
 
         const location = useLocation();
@@ -111,7 +111,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
                 {notFoundRoute}
 
-                {customRoutes}
+                {children}
 
             </Routes>
         );

package/src/core/index.tsx

@@ -1,8 +1,8 @@
 export * from "./FireCMS";
 
-export * from "./Scaffold";
+export * from "../app/Scaffold";
 
-export * from "./Drawer";
+export * from "./DefaultDrawer";
 export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";

package/src/form/PropertiesForm.tsx

@@ -0,0 +1,81 @@
+import { FormContext, PropertiesOrBuilders, PropertyFieldBindingProps } from "../types";
+import { Tooltip } from "@firecms/ui";
+import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
+import { PropertyFieldBinding } from "./PropertyFieldBinding";
+import { ErrorBoundary } from "../components";
+import { isHidden, isReadOnly, resolveProperties } from "../util";
+import { FormexController } from "@firecms/formex";
+
+export type PropertiesFormProps<M extends Record<string, any> = Record<string, any>> = {
+    properties: PropertiesOrBuilders<M>;
+    propertiesOrder?: string[];
+    formex: FormexController<M>;
+}
+
+export function PropertiesForm<M extends Record<string, any> = Record<string, any>>({
+                                                                                        properties,
+                                                                                        propertiesOrder,
+                                                                                        formex
+                                                                                    }: PropertiesFormProps<M>) {
+
+    const resolvedProperties = resolveProperties({ properties });
+
+    const formContext: FormContext<M> = {
+        // @ts-ignore
+        setFieldValue: useCallback(formex.setFieldValue, []),
+        values: formex.values ?? {},
+        // @ts-ignore
+        save: useCallback(() => {
+            throw new Error("Not implemented. You currently can't call save from a custom field, within a PropertiesForm (it works in standard Entity forms)");
+        }, []),
+        formex
+    };
+
+    const formFields = (
+        <div className={"flex flex-col gap-8"}>
+            {(propertiesOrder ?? Object.keys(resolvedProperties))
+                .map((key) => {
+
+                    const property = resolvedProperties[key];
+                    if (!property) {
+                        console.warn(`Property ${key} not found in collection PropertiesForm`);
+                        return null;
+                    }
+
+                    const disabled = formex.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
+                    const hidden = isHidden(property);
+                    if (hidden) return null;
+                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
+                        propertyKey: key,
+                        disabled,
+                        property,
+                        includeDescription: property.description || property.longDescription,
+                        context: formContext,
+                        tableMode: false,
+                        partOfArray: false,
+                        partOfBlock: false,
+                        autoFocus: false
+                    };
+
+                    return (
+                        <div id={`form_field_${key}`}
+                             key={`field_${key}`}>
+                            <ErrorBoundary>
+                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
+                                         delayDuration={800}
+                                         side={"left"}
+                                         align={"start"}
+                                         sideOffset={16}>
+                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                </Tooltip>
+                            </ErrorBoundary>
+                        </div>
+                    );
+                })
+                .filter(Boolean)}
+
+        </div>
+    );
+
+    return <div></div>
+}

package/src/form/PropertyFieldBinding.tsx

@@ -85,6 +85,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
 
     return (
         <Field
+            key={propertyKey}
             name={propertyKey}
         >
             {(fieldProps) => {
@@ -110,7 +111,12 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: customizationController.propertyConfigs, propertyConfig });
+                        console.log("INTERNAL: Could not find field config for property", {
+                            propertyKey,
+                            resolvedProperty,
+                            fields: customizationController.propertyConfigs,
+                            propertyConfig
+                        });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
@@ -194,7 +200,14 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
 
-    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent(context.path, context.collection, propertyKey, property, Component, plugins);
+    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent({
+        path: context.path,
+        collection: context.collection,
+        propertyKey: propertyKey,
+        property: property,
+        Component: Component,
+        plugins: plugins
+    });
     const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
 
     const isSubmitting = fieldProps.form.isSubmitting;
@@ -264,13 +277,24 @@ const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty,
     }
 }
 
-function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
-    path: string,
-    collection: EntityCollection<M>,
+interface UseWrappedComponentParams<T extends CMSType = CMSType, M extends Record<string, any> = any> {
+    path?: string,
+    collection?: EntityCollection<M>,
     propertyKey: string,
     property: ResolvedProperty<T>,
     Component: ComponentType<FieldProps<T, any, M>>,
     plugins?: FireCMSPlugin[]
+}
+
+function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
+    {
+        path,
+        collection,
+        propertyKey,
+        property,
+        Component,
+        plugins
+    }: UseWrappedComponentParams<T, M>
 ): ComponentType<FieldProps<T, any, M>> | null {
 
     const wrapperRef = useRef<ComponentType<FieldProps<T, any, M>> | null>((() => {

package/src/form/components/FieldHelperText.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "../../types";
+import { Property, ResolvedProperty } from "../../types";
 import { IconButton, InfoIcon, Tooltip, Typography } from "@firecms/ui";
 
 /**
@@ -13,8 +13,8 @@ export function FieldHelperText({
                                     disabled
                                 }: {
                                     error?: string,
-                                    showError: boolean,
-                                    property: ResolvedProperty,
+                                    showError?: boolean,
+                                    property: ResolvedProperty | Property,
                                     includeDescription?: boolean,
                                     disabled?: boolean,
                                 }

package/src/form/components/StorageItemPreview.tsx

@@ -1,39 +1,40 @@
 import React from "react";
 
-import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
+import { ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cls, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 interface StorageItemPreviewProps {
     name: string;
     property: ResolvedStringProperty;
     value: string,
-    entity: Entity<any>,
     onRemove: (value: string) => void;
     size: PreviewSize;
     disabled: boolean;
-    collection: EntityCollection;
+    placeholder?: boolean;
+    className?: string;
 }
 
 export function StorageItemPreview({
                                        name,
                                        property,
                                        value,
-                                       entity,
                                        onRemove,
                                        disabled,
                                        size,
-                                       collection
+                                       placeholder,
+                                       className
                                    }: StorageItemPreviewProps) {
 
     return (
         <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
+            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            className)}>
 
-            {!disabled &&
+            {!placeholder && !disabled &&
                 <div
                     className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
 
@@ -51,16 +52,24 @@ export function StorageItemPreview({
                 </div>
             }
 
-            {value &&
+            {!placeholder && value &&
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={name}
                                      value={value}
                                      property={property}
-                        // entity={entity}
+                                     interactive={false}
                                      size={size}/>
                 </ErrorBoundary>
             }
 
+            {placeholder &&
+                <div
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center w-full h-full">
+                    <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
+                </div>
+            }
+
 
         </div>
     );

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel } from "@firecms/ui";
+import { ExpandablePanel, Typography } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
@@ -39,10 +39,13 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const title = <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                 required={property.validation?.required}
-                                 className={"text-text-secondary dark:text-text-secondary-dark"}
-                                 title={property.name}/>;
+    const title = (<>
+        <LabelWithIcon icon={getIconForProperty(property, "small")}
+                       required={property.validation?.required}
+                       title={property.name}
+                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     const body = property.resolvedProperties.map((childProperty, index) => {
         const fieldProps = {

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -6,7 +6,7 @@ import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -94,12 +94,13 @@ export function ArrayOfReferencesFieldBinding({
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
 
-    const title = (
+    const title = (<>
         <LabelWithIcon icon={getIconForProperty(property, "small")}
                        required={property.validation?.required}
                        title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
+                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     const body = <>
         {!collection && <ErrorView

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -21,6 +21,7 @@ import {
 } from "@firecms/ui";
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
+import { getIn } from "@firecms/formex";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -52,9 +53,13 @@ export function KeyValueFieldBinding({
     if (!property.keyValue) {
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
+
+    const initialValues = getIn(context.formex.initialValues, propertyKey);
+
     const mapFormView = <MapEditView value={value}
                                      setValue={setValue}
                                      disabled={disabled}
+                                     initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
     const title = <LabelWithIcon
@@ -84,6 +89,7 @@ export function KeyValueFieldBinding({
 
 interface MapEditViewParams<T extends Record<string, any>> {
     value?: T;
+    initialValue?: T;
     setValue: (value: (T | null)) => void;
     fieldName?: string,
     disabled?: boolean
@@ -91,14 +97,15 @@ interface MapEditViewParams<T extends Record<string, any>> {
 
 function MapEditView<T extends Record<string, any>>({
                                                         value,
+                                                        initialValue,
                                                         setValue,
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
-        Object.keys(value ?? {}).map((key) => [getRandomId(), {
+        Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
-            dataType: getDataType(value?.[key]) ?? "string"
+            dataType: getDataType(initialValue?.[key]) ?? "string"
         }])
     );
 
@@ -121,8 +128,6 @@ function MapEditView<T extends Record<string, any>>({
         setInternalState(newRowIds);
     }, [value]);
 
-    const originalValue = React.useRef<T>(value ?? {} as T);
-
     const updateDataType = (rowId: number, dataType: DataType) => {
         if (!rowId) {
             console.warn("No key selected for data type update");
@@ -168,7 +173,7 @@ function MapEditView<T extends Record<string, any>>({
                         }
 
                         const newValue = { ...(value ?? {}) } as T;
-                        if (typeof originalValue.current === "object" && fieldKey in originalValue.current) {
+                        if (typeof initialValue === "object" && fieldKey in initialValue) {
                             // @ts-ignore
                             newValue[fieldKey] = undefined; // set to undefined to remove from the object, the datasource will remove it from the backend
                         } else {
@@ -186,7 +191,7 @@ function MapEditView<T extends Record<string, any>>({
                                            value={value ?? {} as T}
                                            onDeleteClick={() => {
                                                const newValue = { ...(value ?? {}) as T };
-                                               if (originalValue.current && fieldKey in originalValue.current) {
+                                               if (initialValue && fieldKey in initialValue) {
                                                    // @ts-ignore
                                                    newValue[fieldKey] = undefined;
                                                } else {
@@ -305,7 +310,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            disabled={disabled || !fieldKey}
                                            onValueChange={(newValue) => {
@@ -375,7 +380,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
             <Typography key={rowId.toString()}
                         component={"div"}
                         className="font-mono flex flex-row gap-1">
-                <div className="w-[200px] max-w-[25%]">
+                <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
                         placeholder={"key"}
@@ -389,32 +394,32 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="flex-grow">
                     {(dataType !== "map" && dataType !== "array") && buildInput(entryValue, fieldKey, dataType)}
                 </div>
-                <Menu
-                    trigger={<IconButton size={"small"}
-                                         className="h-7 w-7">
-                        <ArrowDropDownIcon/>
-                    </IconButton>}
-                >
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("array")}>array</MenuItem>
-                </Menu>
-
-                <IconButton aria-label="delete"
-                            size={"small"}
-                            onClick={onDeleteClick}
-                            className="h-7 w-7">
-                    <RemoveIcon size={"small"}/>
-                </IconButton>
+                <div className={"flex flex-col"}>
+                    <Menu
+                        trigger={<IconButton size={"smallest"}>
+                            <ArrowDropDownIcon size={"small"}/>
+                        </IconButton>}
+                    >
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                    </Menu>
+
+                    <IconButton aria-label="delete"
+                                size={"smallest"}
+                                onClick={onDeleteClick}>
+                        <RemoveIcon size={"smallest"}/>
+                    </IconButton>
+                </div>
             </Typography>
 
             {(dataType === "map" || dataType === "array") && buildInput(entryValue, fieldKey, dataType)}
@@ -472,7 +477,7 @@ function ArrayKeyValueRow<T>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            onValueChange={(v) => {
                                                setValue(v as T);

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import { FieldProps, Properties, ResolvedProperties } from "../../types";
+import {
+    CMSType,
+    FieldProps,
+    FormContext,
+    MapProperty,
+    Properties,
+    ResolvedProperties,
+    ResolvedProperty
+} from "../../types";
 
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
@@ -21,7 +29,6 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    setValue,
                                     partOfBlock,
                                     tableMode,
                                     includeDescription,
@@ -68,6 +75,7 @@ export function MapFieldBinding({
                             partOfBlock: false,
                             autoFocus: autoFocus && index === 0
                         };
+
                         return (
                             <div key={`map-${propertyKey}-${index}`}>
                                 <ErrorBoundary>
@@ -101,7 +109,7 @@ export function MapFieldBinding({
             {(tableMode || partOfBlock) && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
+                             showError={showError ?? false}
                              error={error ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
                              disabled={disabled}
                              property={property}/>

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -30,12 +30,6 @@ export function ReadOnlyFieldBinding({
     if (!context.entityId)
         throw new Error("ReadOnlyFieldBinding: Entity id is null");
 
-    const entity: Entity<any> = {
-        id: context.entityId!,
-        values: context.values,
-        path: context.path
-    };
-
     return (
 
         <>
@@ -53,7 +47,6 @@ export function ReadOnlyFieldBinding({
                     <PropertyPreview propertyKey={propertyKey}
                                      value={value}
                                      property={property}
-                        // entity={entity}
                                      size={"medium"}/>
                 </ErrorBoundary>
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
 import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
 import { ErrorBoundary } from "../../components";
-import { getIconForProperty } from "../../util";
+import { getDefaultValueFor, getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel } from "@firecms/ui";
+import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -75,12 +75,15 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                  onInternalIdAdded={setLastAddedId}
                                                  disabled={isSubmitting || Boolean(property.disabled)}
                                                  includeAddButton={!property.disabled}
-                                                 newDefaultEntry={property.of.defaultValue}/>;
+                                                 newDefaultEntry={getDefaultValueFor(property.of)}/>;
 
-    const title = (<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                  required={property.validation?.required}
-                                  title={property.name}
-                                  className={"text-text-secondary dark:text-text-secondary-dark"}/>);
+    const title = (<>
+        <LabelWithIcon icon={getIconForProperty(property, "small")}
+                       required={property.validation?.required}
+                       title={property.name}
+                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     return (