@firecms/core 3.0.0-canary.186 → 3.0.0-canary.188

package/src/core/NavigationRoutes.tsx

@@ -68,24 +68,28 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
             });
         }
 
-        const urlPath = navigation.buildUrlCollectionPath("");
-        const collectionRoute = <Route path={urlPath + "/*"}
-                                       key={`navigation_entity`}
-                                       element={
-                                           <ErrorBoundary>
-                                               <FireCMSRoute/>
-                                           </ErrorBoundary>
-                                       }/>
+        const collectionUrlPath = navigation.buildUrlCollectionPath("");
+        const collectionRoute = (
+            <Route path={collectionUrlPath + "/*"}
+                   key={`navigation_entity`}
+                   element={
+                       <ErrorBoundary>
+                           <FireCMSRoute/>
+                       </ErrorBoundary>
+                   }/>
+        );
 
         const homeRoute = (
             <Route path={"/"}
                    element={<HomePageRoute>{homePage}</HomePageRoute>}/>
         );
 
-        const notFoundRoute = <Route path={"*"}
-                                     element={
-                                         <NotFoundPage/>
-                                     }/>;
+        const notFoundRoute = (
+            <Route path={"*"}
+                   element={
+                       <NotFoundPage/>
+                   }/>
+        );
 
         return (
             <Routes location={baseLocation}>

package/src/form/components/FormEntry.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+
+export function FormEntry({
+                              propertyKey,
+                              widthPercentage = 100,
+                              children
+                          }: {
+    propertyKey: string;
+    widthPercentage?: number;
+    children: React.ReactNode;
+}) {
+    return (
+        <div id={`form_field_${propertyKey}`}
+             className={"relative"}
+             style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}>
+            <ErrorBoundary>
+                {children}
+            </ErrorBoundary>
+        </div>
+    );
+}

package/src/form/components/FormLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cls } from "@firecms/ui";
+
+export function FormLayout({
+                               children,
+                               className
+                           }: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+            {children}
+        </div>
+    );
+}

package/src/form/components/StorageUploadProgress.tsx

@@ -92,7 +92,7 @@ export function StorageUploadProgress({
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="w-full h-full"/>}
+                <Skeleton className="m-4 w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

package/src/form/components/index.tsx

@@ -1,3 +1,5 @@
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
 export * from "./LabelWithIconAndTooltip";
+export * from "./FormEntry";
+export * from "./FormLayout";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -23,7 +23,6 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         minimalistView: minimalistViewProp,
                                                                         property,
                                                                         includeDescription,
-                                                                        underlyingValueHasChanged,
                                                                         context,
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
@@ -65,7 +64,6 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             disabled: disabled || thisDisabled,
             property: childProperty,
             includeDescription,
-            underlyingValueHasChanged,
             context,
             partOfArray: true,
             minimalistView: false,

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -23,7 +23,6 @@ export function MapFieldBinding({
                                     property,
                                     minimalistView: minimalistViewProp,
                                     includeDescription,
-                                    underlyingValueHasChanged,
                                     autoFocus,
                                     context,
                                     onPropertyChange
@@ -62,7 +61,6 @@ export function MapFieldBinding({
                                 disabled: disabled || thisDisabled,
                                 property: childProperty,
                                 includeDescription,
-                                underlyingValueHasChanged,
                                 context,
                                 partOfArray: false,
                                 minimalistView: false,

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -3,13 +3,14 @@ import {
     FieldHelperText,
     FieldProps,
     getIconForProperty,
-    LabelWithIconAndTooltip, PropertyOrBuilder,
+    LabelWithIconAndTooltip,
+    PropertyOrBuilder,
     randomString,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     useStorageSource
 } from "../../index";
-import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
 import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
@@ -27,11 +28,13 @@ export function MarkdownEditorFieldBinding({
                                                showError,
                                                error,
                                                minimalistView,
+                                               disabled: disabledProp,
                                                isSubmitting,
                                                context,
                                                customProps,
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
+    const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
     const storageSource = useStorageSource();
@@ -54,11 +57,9 @@ export function MarkdownEditorFieldBinding({
         if (internalValue.current !== value) {
             internalValue.current = value;
             setFieldVersion(fieldVersion + 1);
-            // fieldVersion.current = fieldVersion.current + 1;
         }
     }, [value]);
 
-
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
         values: entityValues
@@ -107,6 +108,7 @@ export function MarkdownEditorFieldBinding({
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
+        disabled={disabled}
         handleImageUpload={async (file: File) => {
             const storagePath = storagePathBuilder(file);
             const fileName = await fileNameBuilder(file);
@@ -136,7 +138,8 @@ export function MarkdownEditorFieldBinding({
                 required={property.validation?.required}
                 title={property.name}
                 className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}
             </div>
             <FieldHelperText includeDescription={includeDescription}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -28,7 +28,7 @@ import {
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
+const disabledClasses = fieldBackgroundDisabledMixin;
 const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
@@ -206,6 +206,7 @@ function FileDropComponent({
             className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
                 {
@@ -248,7 +249,7 @@ function FileDropComponent({
                                 metadata={metadata}
                                 storagePath={storagePathBuilder(entry.file)}
                                 onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
+                                imageSize={size === "large" ? 220 : 118}
                                 simple={false}
                             />
                         );
@@ -285,7 +286,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>

package/src/preview/components/UrlComponentPreview.tsx

@@ -55,24 +55,23 @@ export function UrlComponentPreview({
         return <VideoPreview size={size} src={url} interactive={interactive}/>;
     } else {
         return (
-            <a
-                href={url}
-                rel="noopener noreferrer"
-                target="_blank"
-                onClick={(e) => e.stopPropagation()}
-                className="flex flex-col items-center justify-center"
-                style={{
-                    width: getThumbnailMeasure(size),
-                    height: getThumbnailMeasure(size)
-                }}>
-                <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
-                {hint &&
-                    <Tooltip title={hint}>
-                        <Typography
-                            className="max-w-full truncate rtl text-left"
-                            variant={"caption"}>{hint}</Typography>
-                    </Tooltip>}
-            </a>
+            <Tooltip title={hint}>
+                <a
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center"
+                    style={{
+                        width: getThumbnailMeasure(size),
+                        height: getThumbnailMeasure(size)
+                    }}>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                    {hint && <Typography
+                        className="max-w-full truncate rtl text-left"
+                        variant={"caption"}>{hint}</Typography>}
+                </a>
+            </Tooltip>
         );
     }
 }

package/src/routes/FireCMSRoute.tsx

@@ -190,10 +190,15 @@ function EntityFullScreenRoute({
             onValuesModified={(modified) => blocked.current = modified}
             onSaved={(params) => {
                 console.log("Entity saved", params);
-                navigate(`${basePath}/${params.entityId}`, { replace: true });
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}`, { replace: true });
+                }
             }}
             onTabChange={(params) => {
-                // updateUrl(params.entityId, params.selectedTab, !isNew, params.path, isNew);
                 setSelectedTab(params.selectedTab);
                 if (isNew) {
                     return;

package/src/types/fields.tsx

@@ -1,6 +1,7 @@
 import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
 import { FormexController } from "@firecms/formex";
+import { Entity } from "./entities";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -161,6 +162,21 @@ export interface FormContext<M extends Record<string, any> = any> {
      */
     path?: string;
 
+    status: "new" | "existing" | "copy";
+
+    entity?: Entity<M>;
+
+    savingError?: Error;
+
+    openEntityMode: "side_panel" | "full_screen";
+
+    /**
+     * If pending close is set to true, the form will close when the user
+     * saves the entity
+     * @param pendingClose
+     */
+    setPendingClose?: (pendingClose: boolean) => void;
+
     /**
      * This is the underlying formex controller that powers the form
      */

package/src/types/navigation.ts

@@ -5,6 +5,7 @@ import { EntityReference } from "./entities";
 /**
  * Controller that includes the resolved navigation and utility methods and
  * attributes.
+ * This controller holds the state of the navigation including the collections.
  * @group Models
  */
 export type NavigationController<EC extends EntityCollection = EntityCollection<any>> = {

package/src/types/plugins.tsx

@@ -195,7 +195,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;
-    layout: "side_panel" | "full_screen";
+    openEntityMode: "side_panel" | "full_screen";
 }
 
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {

package/src/types/properties.ts

@@ -377,7 +377,7 @@ export interface StringProperty extends BaseProperty<string> {
 
     /**
      * You can specify a `Storage` configuration. It is used to
-     * indicate that this string refers to a path in Google Cloud Storage.
+     * indicate that this string refers to a path in your storage provider.
      */
     storage?: StorageConfig;
 

package/src/util/entity_cache.ts

@@ -10,23 +10,31 @@ const entityCache: Map<string, object> = new Map();
 const isLocalStorageAvailable = typeof localStorage !== "undefined";
 
 // Define custom replacer for JSON.stringify
-function customReplacer(key: string, value: any): any {
+function customReplacer(key: string): any {
+
+    // @ts-ignore
+    const value = this[key];
+
     // Handle Date objects
+    // @ts-ignore
     if (value instanceof Date) {
         return { __type: "Date", value: value.toISOString() };
     }
 
     // Handle EntityReference
+    // @ts-ignore
     if (value instanceof EntityReference) {
         return { __type: "EntityReference", id: value.id, path: value.path };
     }
 
     // Handle GeoPoint
+    // @ts-ignore
     if (value instanceof GeoPoint) {
         return { __type: "GeoPoint", latitude: value.latitude, longitude: value.longitude };
     }
 
     // Handle Vector
+    // @ts-ignore
     if (value instanceof Vector) {
         return { __type: "Vector", value: value.value };
     }

package/src/util/useStorageUploadController.tsx

@@ -34,6 +34,7 @@ export interface StorageFieldItem {
     size: PreviewSize
 }
 
+
 export function useStorageUploadController<M extends object>({
                                                                  entityId,
                                                                  entityValues,
@@ -45,17 +46,17 @@ export function useStorageUploadController<M extends object>({
                                                                  disabled,
                                                                  onChange
                                                              }:
-                                                                 {
-                                                                     entityId: string,
-                                                                     entityValues: EntityValues<M>,
-                                                                     value: string | string[] | null;
-                                                                     path?: string,
-                                                                     propertyKey: string,
-                                                                     property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-                                                                     storageSource: StorageSource,
-                                                                     disabled: boolean,
-                                                                     onChange: (value: string | string[] | null) => void
-                                                                 }) {
+                                                             {
+                                                                 entityId: string,
+                                                                 entityValues: EntityValues<M>,
+                                                                 value: string | string[] | null;
+                                                                 path?: string,
+                                                                 propertyKey: string,
+                                                                 property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
+                                                                 storageSource: StorageSource,
+                                                                 disabled: boolean,
+                                                                 onChange: (value: string | string[] | null) => void
+                                                             }) {
 
     const storage: StorageConfig | undefined = property.dataType === "string"
         ? property.storage
@@ -75,16 +76,7 @@ export function useStorageUploadController<M extends object>({
     const compression: ImageCompression | undefined = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
-        (multipleFilesSupported
-            ? (value ?? []) as string[]
-            : value ? [value as string] : []).map(entry => (
-            {
-                id: getRandomId(),
-                storagePathOrDownloadUrl: entry,
-                metadata,
-                size
-            }
-        ));
+        getInternalInitialValue(multipleFilesSupported, value, metadata, size);
 
     const [initialValue, setInitialValue] = useState<string | string[] | null>(value);
     const [internalValue, setInternalValue] = useState<StorageFieldItem[]>(internalInitialValue);
@@ -226,6 +218,32 @@ export function useStorageUploadController<M extends object>({
     }
 }
 
+function getInternalInitialValue(multipleFilesSupported: boolean,
+                                 value: string | string[] | null,
+                                 metadata: Record<string, any> | undefined,
+                                 size: PreviewSize): StorageFieldItem[] {
+    let strings: string[] = [];
+    if (multipleFilesSupported) {
+        if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+            strings = (value ?? []) as string[];
+        }
+    } else {
+        if (typeof value === "string") {
+            strings = value ? [value as string] : [];
+        }
+    }
+
+    return strings
+        .map(entry => (
+            {
+                id: getRandomId(),
+                storagePathOrDownloadUrl: entry,
+                metadata,
+                size
+            }
+        ));
+}
+
 function removeDuplicates(items: StorageFieldItem[]) {
     return items.filter(
         (item, i) => {