@firecms/core 3.0.0-canary.203 → 3.0.0-canary.205

package/dist/internal/useBuildSideEntityController.d.ts

@@ -1,4 +1,4 @@
-import { EntityCollection, EntitySidePanelProps, NavigationController, SideDialogsController, SideEntityController } from "../types";
-export declare function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string;
+import { CustomizationController, EntityCollection, EntitySidePanelProps, NavigationController, SideDialogsController, SideEntityController } from "../types";
+export declare function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string;
 export declare const useBuildSideEntityController: (navigation: NavigationController, sideDialogsController: SideDialogsController) => SideEntityController;
 export declare function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[];

package/dist/util/resolutions.d.ts

@@ -1,4 +1,4 @@
-import { ArrayProperty, CMSType, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
+import { ArrayProperty, CMSType, CustomizationController, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
 export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
@@ -76,3 +76,8 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
 export declare function resolvePropertyEnum(property: StringProperty | NumberProperty, fromBuilder?: boolean): ResolvedStringProperty | ResolvedNumberProperty;
 export declare function resolveEnumValues(input: EnumValues): EnumValueConfig[] | undefined;
 export declare function resolveEntityView(entityView: string | EntityCustomView<any>, contextEntityViews?: EntityCustomView<any>[]): EntityCustomView<any> | undefined;
+export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string): {
+    resolvedEntityViews: EntityCustomView[];
+    selectedEntityView: EntityCustomView | undefined;
+    selectedSecondaryForm: EntityCustomView | undefined;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.203",
+  "version": "3.0.0-canary.205",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.203",
-    "@firecms/formex": "^3.0.0-canary.203",
-    "@firecms/ui": "^3.0.0-canary.203",
+    "@firecms/editor": "^3.0.0-canary.205",
+    "@firecms/formex": "^3.0.0-canary.205",
+    "@firecms/ui": "^3.0.0-canary.205",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "bad3e5f8069d21897795c6d5c42f843e9967b66d",
+  "gitHead": "b3a2a795ce5eb7edc68efea5caa69b8d477901be",
   "publishConfig": {
     "access": "public"
   },

package/src/core/EntityEditView.tsx

@@ -1,8 +1,13 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Entity, EntityCollection, EntityCustomView, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
+import { Entity, EntityCollection, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
 
 import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
-import { canEditEntity, removeInitialAndTrailingSlashes, resolveDefaultSelectedView, resolveEntityView } from "../util";
+import {
+    canEditEntity,
+    removeInitialAndTrailingSlashes,
+    resolveDefaultSelectedView,
+    resolvedSelectedEntityView
+} from "../util";
 
 import {
     useAuthController,
@@ -13,7 +18,7 @@ import {
 } from "../hooks";
 import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
-import { EntityForm, EntityFormProps, FormLayoutInner } from "../form";
+import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -120,43 +125,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     />;
 }
 
-function SecondaryForm<M extends object>({
-                                             collection,
-                                             className,
-                                             customView,
-                                             entity,
-                                             formContext,
-                                             forceActionsAtTheBottom,
-                                         }: {
-    className?: string,
-    customView: EntityCustomView,
-    formContext: FormContext<M>,
-    collection: EntityCollection<M>,
-    forceActionsAtTheBottom?: boolean,
-    entity: Entity<M> | undefined,
-}) {
-
-    if (!customView.Builder) {
-        console.error("customView.Builder is not defined");
-        return null;
-    }
-
-    return <FormLayoutInner
-        className={className}
-        forceActionsAtTheBottom={forceActionsAtTheBottom}
-        formContext={formContext}
-        EntityFormActionsComponent={EntityEditViewFormActions}>
-        <ErrorBoundary>
-            {formContext && <customView.Builder
-                collection={collection}
-                entity={entity}
-                modifiedValues={formContext.formex.values ?? entity?.values}
-                formContext={formContext}
-            />}
-        </ErrorBoundary>
-    </FormLayoutInner>;
-}
-
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId,
@@ -214,42 +182,21 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     }, [selectedTabProp]);
 
-    const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
-
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
 
-    const resolvedEntityViews = customViews ? customViews
-            .map(e => resolveEntityView(e, customizationController.entityViews))
-            .filter(Boolean) as EntityCustomView[]
-        : [];
+    const {
+        resolvedEntityViews,
+        selectedEntityView,
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
 
-    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
-    const secondaryForms: React.ReactNode[] | undefined = formContext && customViews && resolvedEntityViews
-        .filter(e => e.includeActions)
-        .map((customView) => {
-            if (!customView || !formContext)
-                return null;
-
-            if (!customView.Builder) {
-                console.error("customView.Builder is not defined");
-                return null;
-            }
-
-            return <SecondaryForm key={`custom_view_${customView.key}`}
-                                  className={selectedTab !== customView.key ? "hidden" : ""}
-                                  customView={customView}
-                                  formContext={formContext}
-                                  collection={collection}
-                                  forceActionsAtTheBottom={!largeLayout || layout === "side_panel" || customView.includeActions === "bottom"}
-                                  entity={usedEntity}/>;
-
-        }).filter(Boolean);
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => !e.includeActions)
@@ -322,7 +269,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection
+                collection,
             });
         }
     };
@@ -361,6 +308,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             onSaved?.(res);
             formProps?.onSaved?.(res);
         }}
+        Builder={selectedSecondaryForm?.Builder}
     />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
@@ -421,7 +369,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </div>
             : entityView}
 
-        {secondaryForms}
+        {/*{secondaryForms}*/}
 
         {customViewsView}
 

package/src/core/EntitySidePanel.tsx

@@ -141,14 +141,14 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                       path,
                                       entityId,
                                       selectedTab,
-                                      collection
+                                      collection,
                                   }) => {
                         sideEntityController.replace({
                             path,
                             entityId,
                             selectedTab,
                             updateUrl: true,
-                            collection
+                            collection,
                         });
                     }}
                     formProps={props.formProps}

package/src/form/EntityForm.tsx

@@ -3,6 +3,7 @@ import {
     CMSAnalyticsEvent,
     Entity,
     EntityCollection,
+    EntityCustomViewParams,
     EntityStatus,
     EntityValues,
     FormContext,
@@ -82,6 +83,8 @@ export type EntityFormProps<M extends Record<string, any>> = {
 
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 
+    Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+
     children?: React.ReactNode;
 };
 
@@ -102,6 +105,7 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
+                                                              Builder,
                                                               EntityFormActionsComponent = EntityFormActions,
                                                               showDefaultActions = true,
                                                               showEntityPath = true,
@@ -498,83 +502,94 @@ export function EntityForm<M extends Record<string, any>>({
 
     const formFieldKeys = getFormFieldKeys(resolvedCollection);
 
-    const formFields = () => (
-        <FormLayout>
-            {formFieldKeys.map((key) => {
-                const property = resolvedCollection.properties[key];
-                if (property) {
-                    const underlyingValueHasChanged: boolean =
-                        !!underlyingChanges &&
-                        Object.keys(underlyingChanges).includes(key) &&
-                        formex.touched[key];
-                    const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
-                    const hidden = isHidden(property);
-                    if (hidden) return null;
-                    const widthPercentage = property.widthPercentage ?? 100;
-                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
-                        propertyKey: key,
-                        disabled,
-                        property,
-                        includeDescription: property.description || property.longDescription,
-                        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-                        context: formContext,
-                        partOfArray: false,
-                        minimalistView: false,
-                        autoFocus: false
-                    };
-
-                    return (
-                        <FormEntry propertyKey={key}
-                                   widthPercentage={widthPercentage}
-                                   key={`field_${key}`}>
-                            <PropertyFieldBinding {...cmsFormFieldProps} />
-                        </FormEntry>
-                    );
-                }
+    const formFields = () => {
 
-                const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
-                if (additionalField && entity) {
-                    const Builder = additionalField.Builder;
-                    if (!Builder && !additionalField.value) {
-                        throw new Error("When using additional fields you need to provide a Builder or a value");
+        if (Builder) {
+            return <Builder
+                collection={collection}
+                entity={entity}
+                modifiedValues={formex.values}
+                formContext={formContext}
+            />;
+        }
+        return (
+            <FormLayout>
+                {formFieldKeys.map((key) => {
+                    const property = resolvedCollection.properties[key];
+                    if (property) {
+                        const underlyingValueHasChanged: boolean =
+                            !!underlyingChanges &&
+                            Object.keys(underlyingChanges).includes(key) &&
+                            formex.touched[key];
+                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const hidden = isHidden(property);
+                        if (hidden) return null;
+                        const widthPercentage = property.widthPercentage ?? 100;
+                        const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
+                            propertyKey: key,
+                            disabled,
+                            property,
+                            includeDescription: property.description || property.longDescription,
+                            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+                            context: formContext,
+                            partOfArray: false,
+                            minimalistView: false,
+                            autoFocus: false
+                        };
+
+                        return (
+                            <FormEntry propertyKey={key}
+                                       widthPercentage={widthPercentage}
+                                       key={`field_${key}`}>
+                                <PropertyFieldBinding {...cmsFormFieldProps} />
+                            </FormEntry>
+                        );
                     }
-                    const child = Builder
-                        ? <Builder entity={entity} context={context}/>
-                        : <div className={"w-full"}>
-                            {additionalField.value?.({
-                                entity,
-                                context
-                            })?.toString()}
-                        </div>;
-
-                    return (
-                        <div key={`additional_${key}`} className={"w-full"}>
-                            <LabelWithIconAndTooltip
-                                propertyKey={key}
-                                icon={<NotesIcon size={"small"}/>}
-                                title={additionalField.name}
-                                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-                            <div
-                                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
-                                <ErrorBoundary>
-                                    {child}
-                                </ErrorBoundary>
+
+                    const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
+                    if (additionalField && entity) {
+                        const Builder = additionalField.Builder;
+                        if (!Builder && !additionalField.value) {
+                            throw new Error("When using additional fields you need to provide a Builder or a value");
+                        }
+                        const child = Builder
+                            ? <Builder entity={entity} context={context}/>
+                            : <div className={"w-full"}>
+                                {additionalField.value?.({
+                                    entity,
+                                    context
+                                })?.toString()}
+                            </div>;
+
+                        return (
+                            <div key={`additional_${key}`} className={"w-full"}>
+                                <LabelWithIconAndTooltip
+                                    propertyKey={key}
+                                    icon={<NotesIcon size={"small"}/>}
+                                    title={additionalField.name}
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                <div
+                                    className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                                    <ErrorBoundary>
+                                        {child}
+                                    </ErrorBoundary>
+                                </div>
                             </div>
-                        </div>
-                    );
-                }
+                        );
+                    }
 
-                console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
-                return null;
-            }).filter(Boolean)}
-        </FormLayout>
-    );
+                    console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+                    return null;
+                }).filter(Boolean)}
+            </FormLayout>
+        );
+    };
 
     const formRef = useRef<HTMLDivElement>(null);
 
     const formView = <ErrorBoundary>
         <>
-            <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
+            {!Builder && <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
                 <Typography
                     className={"py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0")}
                     variant={"h4"}>
@@ -586,11 +601,11 @@ export function EntityForm<M extends Record<string, any>>({
                         {entity?.path ?? path}/{entityId}
                     </code>
                 </Alert>}
-            </div>
+            </div>}
 
             {children}
 
-            {!collection.hideIdFromForm &&
+            {!Builder && !collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
                                entityId={entityId}
                                status={status}
@@ -616,104 +631,14 @@ export function EntityForm<M extends Record<string, any>>({
             onIdChange(entityId);
     }, [entityId, onIdChange]);
 
-    return (
-        <FormLayoutInner
-            className={className}
-            id={`form_${path}`}
-            pluginActions={pluginActions}
-            forceActionsAtTheBottom={forceActionsAtTheBottom}
-            EntityFormActionsComponent={EntityFormActionsComponent}
-            formContext={formContext}
-            showDefaultActions={showDefaultActions}>
-            {formView}
-        </FormLayoutInner>
-    );
-}
-
-function getInitialEntityValues<M extends object>(
-    collection: EntityCollection,
-    path: string,
-    status: "new" | "existing" | "copy",
-    entity: Entity<M> | undefined,
-    propertyConfigs?: Record<string, PropertyConfig>
-): Partial<EntityValues<M>> {
-    const resolvedCollection = resolveCollection({
-        collection,
-        path,
-        values: entity?.values,
-        propertyConfigs
-    });
-    const properties = resolvedCollection.properties;
-    if ((status === "existing" || status === "copy") && entity) {
-        if (!collection.alwaysApplyDefaultValues) {
-            return entity.values ?? getDefaultValuesFor(properties);
-        } else {
-            const defaultValues = getDefaultValuesFor(properties);
-            return mergeDeep(defaultValues, entity.values ?? {});
-        }
-    } else if (status === "new") {
-        return getDefaultValuesFor(properties);
-    } else {
-        console.error({
-            status,
-            entity
-        });
-        throw new Error("Form has not been initialised with the correct parameters");
-    }
-}
-
-export function yupToFormErrors(yupError: ValidationError): Record<string, any> {
-    let errors: Record<string, any> = {};
-    if (yupError.inner) {
-        if (yupError.inner.length === 0) {
-            return setIn(errors, yupError.path!, yupError.message);
-        }
-        for (const err of yupError.inner) {
-            if (!getIn(errors, err.path!)) {
-                errors = setIn(errors, err.path!, err.message);
-            }
-        }
-    }
-    return errors;
-}
-
-export function FormLayoutInner({
-                                    id,
-                                    formContext,
-                                    children,
-                                    className,
-                                    forceActionsAtTheBottom,
-                                    pluginActions,
-                                    EntityFormActionsComponent,
-                                    showDefaultActions,
-                                }: {
-    id?: string,
-    formContext: FormContext,
-    children: React.ReactNode,
-    className?: string,
-    forceActionsAtTheBottom?: boolean,
-    pluginActions?: React.ReactNode[],
-    EntityFormActionsComponent: React.FC<EntityFormActionsProps>;
-    showDefaultActions?: boolean;
-}) {
-
-    const formex = formContext.formex;
-    const collection = formContext.collection;
-    const path = formContext.path;
-    const entity = formContext.entity;
-    const savingError = formContext.savingError;
-    const status = formContext.status;
-    const openEntityMode = formContext.openEntityMode;
     const disabled = formex.isSubmitting || (!formex.dirty && status === "existing");
 
-    const customizationController = useCustomizationController();
-
-    if (!collection || !path) {
+    if (!resolvedCollection || !path) {
         throw Error("INTERNAL: Collection and path must be defined in form context");
     }
 
     const dialogActions = <EntityFormActionsComponent
-        collection={collection}
+        collection={resolvedCollection}
         path={path}
         entity={entity}
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
@@ -731,12 +656,12 @@ export function FormLayoutInner({
             <form
                 onSubmit={formContext.formex.handleSubmit}
                 onReset={() => formex.resetForm({
-                    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs),
+                    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs) as M,
                 })}
                 noValidate
                 className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
                 <div
-                    id={id}
+                    id={`form_${path}`}
                     className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
 
                     <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
@@ -754,7 +679,8 @@ export function FormLayoutInner({
                                     <CheckIcon size={"smallest"}/>
                                 </Chip>
                             </Tooltip>}
-                        {children}
+
+                        {formView}
 
                     </div>
 
@@ -766,6 +692,53 @@ export function FormLayoutInner({
     );
 }
 
+function getInitialEntityValues<M extends object>(
+    collection: EntityCollection,
+    path: string,
+    status: "new" | "existing" | "copy",
+    entity: Entity<M> | undefined,
+    propertyConfigs?: Record<string, PropertyConfig>
+): Partial<EntityValues<M>> {
+    const resolvedCollection = resolveCollection({
+        collection,
+        path,
+        values: entity?.values,
+        propertyConfigs
+    });
+    const properties = resolvedCollection.properties;
+    if ((status === "existing" || status === "copy") && entity) {
+        if (!collection.alwaysApplyDefaultValues) {
+            return entity.values ?? getDefaultValuesFor(properties);
+        } else {
+            const defaultValues = getDefaultValuesFor(properties);
+            return mergeDeep(defaultValues, entity.values ?? {});
+        }
+    } else if (status === "new") {
+        return getDefaultValuesFor(properties);
+    } else {
+        console.error({
+            status,
+            entity
+        });
+        throw new Error("Form has not been initialised with the correct parameters");
+    }
+}
+
+export function yupToFormErrors(yupError: ValidationError): Record<string, any> {
+    let errors: Record<string, any> = {};
+    if (yupError.inner) {
+        if (yupError.inner.length === 0) {
+            return setIn(errors, yupError.path!, yupError.message);
+        }
+        for (const err of yupError.inner) {
+            if (!getIn(errors, err.path!)) {
+                errors = setIn(errors, err.path!, err.message);
+            }
+        }
+    }
+    return errors;
+}
+
 function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<any>, lastSavedValues: any, save: (values: EntityValues<any>) => Promise<void>) {
     if (!autoSave) return;
     useEffect(() => {