@firecms/core 3.0.0-canary.66 → 3.0.0-canary.68

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/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

@@ -110,7 +110,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 +199,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 +276,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

@@ -10,22 +10,18 @@ interface StorageItemPreviewProps {
     name: string;
     property: ResolvedStringProperty;
     value: string,
-    entity: Entity<any>,
     onRemove: (value: string) => void;
     size: PreviewSize;
     disabled: boolean;
-    collection: EntityCollection;
 }
 
 export function StorageItemPreview({
                                        name,
                                        property,
                                        value,
-                                       entity,
                                        onRemove,
                                        disabled,
                                        size,
-                                       collection
                                    }: StorageItemPreviewProps) {
 
     return (

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,
@@ -101,7 +108,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/StorageUploadFieldBinding.tsx

@@ -3,7 +3,6 @@ import React, { useCallback } from "react";
 import {
     ArrayProperty,
     Entity,
-    EntityCollection,
     FieldProps,
     ResolvedArrayProperty,
     ResolvedStringProperty,
@@ -81,7 +80,7 @@ export function StorageUploadFieldBinding({
         propertyKey,
         value,
         storageSource,
-        disabled,
+        disabled: disabled ?? false,
         onChange: setValue
     });
 
@@ -91,12 +90,6 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
-    const entity: Entity<any> = {
-        id: context.entityId,
-        values: context.values,
-        path: context.path
-    };
-
     return (
 
         <>
@@ -109,15 +102,13 @@ export function StorageUploadFieldBinding({
 
             <StorageUpload
                 value={internalValue}
-                collection={context.collection}
                 name={propertyKey}
-                disabled={disabled}
-                autoFocus={autoFocus}
+                disabled={disabled ?? false}
+                autoFocus={autoFocus ?? false}
                 property={property}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
-                entity={entity}
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
@@ -135,7 +126,6 @@ export function StorageUploadFieldBinding({
 
 function FileDropComponent({
                                storage,
-                               collection,
                                disabled,
                                isDraggingOver,
                                onFilesAdded,
@@ -144,7 +134,6 @@ function FileDropComponent({
                                autoFocus,
                                internalValue,
                                property,
-                               entity,
                                onClear,
                                metadata,
                                storagePathBuilder,
@@ -154,7 +143,6 @@ function FileDropComponent({
                                helpText
                            }: {
     storage: StorageConfig,
-    collection: EntityCollection,
     disabled: boolean,
     isDraggingOver: boolean,
     droppableProvided: any,
@@ -165,7 +153,6 @@ function FileDropComponent({
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
     metadata: any,
-    entity: Entity<any>;
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
     size: PreviewSize,
@@ -235,11 +222,9 @@ function FileDropComponent({
                     if (entry.storagePathOrDownloadUrl) {
                         child = (
                             <StorageItemPreview
-                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={property}
                                 disabled={disabled}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -299,7 +284,6 @@ function FileDropComponent({
 
 export interface StorageUploadProps {
     value: StorageFieldItem[];
-    collection: EntityCollection;
     setInternalValue: (v: StorageFieldItem[]) => void;
     name: string;
     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -307,7 +291,6 @@ export interface StorageUploadProps {
     multipleFilesSupported: boolean;
     autoFocus: boolean;
     disabled: boolean;
-    entity: Entity<any>;
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => void;
     storagePathBuilder: (file: File) => string;
@@ -315,7 +298,6 @@ export interface StorageUploadProps {
 }
 
 export function StorageUpload({
-                                  collection,
                                   property,
                                   name,
                                   value,
@@ -327,7 +309,6 @@ export function StorageUpload({
                                   onFilesAdded,
                                   autoFocus,
                                   storage,
-                                  entity,
                                   storagePathBuilder,
                               }: StorageUploadProps) {
 
@@ -408,11 +389,9 @@ export function StorageUpload({
                             className="rounded"
                         >
                             <StorageItemPreview
-                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={renderProperty}
                                 disabled={true}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl as string}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -422,7 +401,6 @@ export function StorageUpload({
             >
                 {(provided, snapshot) => {
                     return <FileDropComponent storage={storage}
-                                              collection={collection}
                                               disabled={disabled}
                                               isDraggingOver={snapshot.isDraggingOver}
                                               droppableProvided={provided}
@@ -431,7 +409,6 @@ export function StorageUpload({
                                               autoFocus={autoFocus}
                                               internalValue={value}
                                               property={renderProperty}
-                                              entity={entity}
                                               onClear={onClear}
                                               metadata={metadata}
                                               storagePathBuilder={storagePathBuilder}

package/src/form/index.tsx

@@ -34,10 +34,10 @@ export {
 
 export * from "./components";
 
-export type { EntityFormProps } from "./EntityForm";
-export {
-    EntityForm
-} from "./EntityForm";
+// export type { EntityFormProps } from "./EntityForm";
+// export {
+//     EntityForm
+// } from "./EntityForm";
 
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
 export * from "./useClearRestoreValue";

package/src/form/validation.ts

@@ -112,23 +112,7 @@ export function getYupMapObjectSchema({
     if (validation?.required) {
         return shape.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true);
     }
-    return shape.nullable(true);
-    // const object: ObjectSchema<any> = yup.object().shape(objectSchema);
-    // return validation?.required
-    //     ? object.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true)
-    //     : yup.object().optional().default(undefined).notRequired().nullable(true).test(
-    //         "empty-check",
-    //         "Optional map can be empty",
-    //         (o: any, testContext: any) => {
-    //             try {
-    //                 if (!o || Object.keys(o).length === 0) return true;
-    //                 return object.validateSync(o);
-    //             } catch (e) {
-    //                 testContext.createError(e);
-    //                 console.error(e);
-    //                 return false;
-    //             }
-    //         });
+    return yup.object().shape(shape.fields).default(undefined).notRequired().nullable(true);
 }
 
 function getYupStringSchema({

package/src/types/collections.ts

@@ -477,8 +477,22 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
  */
 export type EntityCustomView<M extends Record<string, any> = any> =
     {
+        /**
+         * Key of this custom view.
+         */
         key: string,
+        /**
+         * Name of this custom view.
+         */
         name: string,
+        /**
+         * If set to true, the actions of the entity will be included in the
+         * bottom of the panel (save buttons, delete buttons, etc.)
+         */
+        includeActions?: boolean;
+        /**
+         * Builder for rendering the custom view
+         */
         Builder?: React.ComponentType<EntityCustomViewParams<M>>;
     }
 

package/src/types/customization_controller.tsx

@@ -24,7 +24,6 @@ export type CustomizationController = {
      *
      * You can also define an entity view from the UI.
      */
-
     entityViews?: EntityCustomView[];
 
     /**

package/src/types/fields.tsx

@@ -1,6 +1,6 @@
-import { EntityValues } from "./entities";
 import { CMSType, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
+import { FormexController } from "@firecms/formex";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -21,11 +21,6 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     value: T;
 
-    /**
-     * Initial value of this field
-     */
-    // initialValue: T | undefined;
-
     /**
      * Set value of field directly
      */
@@ -42,7 +37,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Is the form currently submitting
      */
-    isSubmitting: boolean;
+    isSubmitting?: boolean;
 
     /**
      * Should this field show the error indicator.
@@ -50,19 +45,19 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      * filled) but we don't want to show the error until the user has tried
      * saving.
      */
-    showError: boolean;
+    showError?: boolean;
 
     /**
      * Is there an error in this field. The error field has the same shape as
      * the field, replacing values with a string containing the error.
      * It takes the value `null` if there is no error
      */
-    error: any | null;
+    error?: any | null;
 
     /**
      * Has this field been touched
      */
-    touched: boolean;
+    touched?: boolean;
 
     /**
      * Property related to this field
@@ -72,38 +67,38 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Should this field include a description
      */
-    includeDescription: boolean;
+    includeDescription?: boolean;
 
     /**
      * Flag to indicate that the underlying value has been updated in the
      * datasource
      */
-    underlyingValueHasChanged: boolean;
+    underlyingValueHasChanged?: boolean;
 
     /**
      * Is this field part of an array
      */
-    partOfArray: boolean;
+    partOfArray?: boolean;
 
     /**
      * Is this field part of a block (oneOf array)
      */
-    partOfBlock: boolean;
+    partOfBlock?: boolean;
 
     /**
      * Is this field being rendered in the entity table popup
      */
-    tableMode: boolean;
+    tableMode?: boolean;
 
     /**
      * Should this field autofocus on mount
      */
-    autoFocus: boolean;
+    autoFocus?: boolean;
 
     /**
      * Additional properties set by the developer
      */
-    customProps: CustomProps
+    customProps?: CustomProps
 
     /**
      * Additional values related to the state of the form or the entity
@@ -113,7 +108,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Flag to indicate if this field should be disabled
      */
-    disabled: boolean;
+    disabled?: boolean;
 
 }
 
@@ -124,37 +119,42 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
 export interface FormContext<M extends Record<string, any> = any> {
 
     /**
-     * Collection of the entity being modified
+     * Current values of the entity
      */
-    collection: ResolvedEntityCollection<M>;
+    values: M;
 
     /**
-     * Current values of the entity
+     * Update the value of a field
+     * @param key
+     * @param value
+     * @param shouldValidate
      */
-    values: EntityValues<M>;
+    setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
 
     /**
-     * Entity id, it can be null if it's a new entity
+     * Save the entity.
      */
-    entityId?: string;
+    save: (values: M) => void;
 
     /**
-     * Path this entity is located at
+     * Collection of the entity being modified
      */
-    path: string;
+    collection?: ResolvedEntityCollection<M>;
 
     /**
-     * Update the value of a field
-     * @param key
-     * @param value
-     * @param shouldValidate
+     * Entity id, it can be null if it's a new entity
      */
-    setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
+    entityId?: string;
+
+    /**
+     * Path this entity is located at
+     */
+    path?: string;
 
     /**
-     * Save the entity
+     * This is the underlying formex controller that powers the form
      */
-    save: (values: EntityValues<M>) => void;
+    formex: FormexController<M>;
 }
 
 /**

package/src/types/plugins.tsx

@@ -194,8 +194,8 @@ export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Reco
     property: Property<T> | ResolvedProperty<T>;
     Field: React.ComponentType<FieldProps<T, any, M>>;
     plugin: FireCMSPlugin;
-    path: string;
-    collection: EC;
+    path?: string;
+    collection?: EC;
 };
 
 export interface PluginGenericProps<UserType extends User = User> {

package/src/types/properties.ts

@@ -812,7 +812,7 @@ export interface UploadedFileContext {
     /**
      * Entity path. E.g. `products/PID/locales`
      */
-    path: string;
+    path?: string;
 
     /**
      * Values of the current entity

package/src/util/entities.ts

@@ -152,6 +152,7 @@ export function traverseValuesProperties<M extends Record<string, any>>(
         .map(([key, property]) => {
             const inputValue = inputValues && (inputValues)[key];
             const updatedValue = traverseValueProperty(inputValue, property as Property, operation);
+            if (updatedValue === null) return null;
             if (updatedValue === undefined) return undefined;
             return ({ [key]: updatedValue });
         })

package/src/util/permissions.ts

@@ -49,6 +49,7 @@ export function canCreateEntity<M extends Record<string, any>, UserType extends
     authController: AuthController<UserType>,
     path: string,
     entity: Entity<M> | null): boolean {
+    if (collection.collectionGroup) return false;
     return resolvePermissions(collection, authController, path, entity)?.create ?? DEFAULT_PERMISSIONS.create;
 }