@firecms/core 3.0.0-beta.1 → 3.0.0-beta.11

package/src/form/PropertyFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType, ReactElement, useCallback, useRef } from "react";
 import equal from "react-fast-compare"
 
-import { FastField, Field, FieldProps as FormikFieldProps, getIn } from "formik";
+import { Field, FieldProps as FormexFieldProps, getIn } from "@firecms/formex";
 
 import {
     CMSType,
@@ -51,6 +51,13 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     if (a.propertyKey !== b.propertyKey) {
         return false;
     }
+    if (a.index !== b.index) {
+        return false;
+    }
+
+    if (a.size !== b.size) {
+        return false;
+    }
     const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
     const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
 
@@ -67,44 +74,44 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps = any, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
 ({
      propertyKey,
      property,
      context,
      includeDescription,
      underlyingValueHasChanged,
-     disabled,
-     tableMode,
+     disabled: disabledProp,
      partOfArray,
-     partOfBlock,
+     minimalistView,
      autoFocus,
+     index,
+     size,
+     onPropertyChange
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const customizationController = useCustomizationController();
 
-    const shouldAlwaysRerender = shouldPropertyReRender(property, customizationController.plugins);
-    // we use the standard Field for user defined fields, since it rebuilds
-    // when there are changes in other values, in contrast to FastField
-    const FieldComponent = shouldAlwaysRerender ? Field : FastField;
-
     return (
-        <FieldComponent
+        <Field
+            key={propertyKey}
             name={propertyKey}
         >
-            {(fieldProps: FormikFieldProps<T>) => {
+            {(fieldProps) => {
 
                 let Component: ComponentType<FieldProps<T>> | undefined;
                 const resolvedProperty: ResolvedProperty<T> | null = resolveProperty({
                     propertyKey,
-                    propertyValue: fieldProps.field.value,
                     propertyOrBuilder: property,
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    index
                 });
 
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
                 } else if (isReadOnly(resolvedProperty)) {
@@ -116,16 +123,23 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                 } 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,
+                            property,
+                            resolvedProperty,
+                            fields: customizationController.propertyConfigs,
+                            propertyConfig
+                        });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
+                        propertyKey,
                         propertyOrBuilder: propertyConfig.property,
-                        propertyValue: fieldProps.field.value,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: customizationController.propertyConfigs
+                        propertyConfigs: customizationController.propertyConfigs,
+                        index
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }
@@ -144,18 +158,19 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     underlyingValueHasChanged,
                     context,
                     disabled,
-                    tableMode,
                     partOfArray,
-                    partOfBlock,
-                    autoFocus
+                    minimalistView,
+                    autoFocus,
+                    size,
+                    onPropertyChange
                 };
 
                 return <FieldInternal
                     Component={Component as ComponentType<FieldProps>}
                     componentProps={componentProps}
-                    fieldProps={fieldProps}/>;
+                    formexFieldProps={fieldProps}/>;
             }}
-        </FieldComponent>
+        </Field>
     );
 
 }
@@ -174,52 +189,59 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          property,
          includeDescription,
          underlyingValueHasChanged,
-         tableMode,
          partOfArray,
-         partOfBlock,
+         minimalistView,
          autoFocus,
          context,
-         disabled
+         disabled,
+         size,
+         onPropertyChange
      },
-     fieldProps
+     formexFieldProps
  }:
      {
          Component: ComponentType<FieldProps<T, any, M>>,
          componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-         fieldProps: FormikFieldProps<T>
+         formexFieldProps: FormexFieldProps<T, any>
      }) {
 
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
-    const value = fieldProps.field.value;
-    const initialValue = fieldProps.meta.initialValue;
-    const error = getIn(fieldProps.form.errors, propertyKey);
-    const touched = getIn(fieldProps.form.touched, propertyKey);
+    const value = formexFieldProps.field.value;
+    // const initialValue = formexFieldProps.meta.initialValue;
+    const error = getIn(formexFieldProps.form.errors, propertyKey);
+    const touched = getIn(formexFieldProps.form.touched, propertyKey);
 
     const showError: boolean = error &&
-        (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
+        (formexFieldProps.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;
+    const isSubmitting = formexFieldProps.form.isSubmitting;
 
     const setValue = useCallback((value: T | null, shouldValidate?: boolean) => {
-        fieldProps.form.setFieldTouched(propertyKey, true, false);
-        fieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
     }, []);
 
     const setFieldValue = useCallback((otherPropertyKey: string, value: CMSType | null, shouldValidate?: boolean) => {
-        fieldProps.form.setFieldTouched(propertyKey, true, false);
-        fieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
     }, []);
 
     const cmsFieldProps: FieldProps<T, CustomProps, M> = {
         propertyKey,
         value: value as T,
-        initialValue,
         setValue,
         setFieldValue,
         error,
@@ -230,12 +252,13 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         property: property as ResolvedProperty<T>,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
-        tableMode: tableMode ?? false,
         partOfArray: partOfArray ?? false,
-        partOfBlock: partOfBlock ?? false,
+        minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,
-        context
+        context,
+        size,
+        onPropertyChange
     };
 
     return (
@@ -271,13 +294,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/CustomIdField.tsx

@@ -1,15 +1,25 @@
 import React, { useMemo } from "react";
 
-import { ErrorMessage } from "formik";
-
+// import { ErrorMessage } from "@firecms/formex";
 import { Entity, EntityStatus, EnumValueConfig, EnumValues } from "../../types";
 
 import { useClipboard, useSnackbarController } from "../../hooks";
 import { enumToObjectEntries } from "../../util";
-import { ContentCopyIcon, IconButton, OpenInNewIcon, Select, SelectItem, TextField, Tooltip } from "@firecms/ui";
+import {
+    CircularProgress,
+    ContentCopyIcon,
+    IconButton,
+    OpenInNewIcon,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
 import { EnumValuesChip } from "../../preview";
 import { useCustomizationController } from "../../hooks/useCustomizationController";
 import { CustomizationController } from "../../types/customization_controller";
+import { useFormex } from "@firecms/formex";
 
 export function CustomIdField<M extends Record<string, any>>({
                                                                  customId,
@@ -17,16 +27,19 @@ export function CustomIdField<M extends Record<string, any>>({
                                                                  status,
                                                                  onChange,
                                                                  error,
-                                                                 entity
+                                                                 entity,
+                                                                 loading
                                                              }: {
     customId?: boolean | EnumValues | "optional"
     entityId?: string
     status: EntityStatus,
     onChange: (id?: string) => void,
     error: boolean,
-    entity: Entity<M> | undefined
+    entity: Entity<M> | undefined,
+    loading: boolean
 }) {
 
+    const { errors } = useFormex();
     const disabled = status === "existing" || !customId;
     const idSetAutomatically = status !== "existing" && !customId;
 
@@ -48,36 +61,38 @@ export function CustomIdField<M extends Record<string, any>>({
 
     const fieldProps = {
         label: idSetAutomatically ? "ID is set automatically" : "ID",
-        disabled,
+        disabled: disabled || loading,
         name: "id",
         value: (entity && status === "existing" ? entity.id : entityId) ?? "",
-        endAdornment: entity
-            ? (
-                <>
-
-                    <Tooltip title={"Copy"}>
-                        <IconButton onClick={(e) => copy(entity.id)}
-                                    aria-label="copy-id">
-                            <ContentCopyIcon size={"small"}/>
-                        </IconButton>
-                    </Tooltip>
-
-                    {customizationController?.entityLinkBuilder &&
-                        <Tooltip title={"Open in the console"}>
-                            <IconButton component={"a"}
-                                        href={customizationController.entityLinkBuilder({ entity })}
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                        onClick={(e) => e.stopPropagation()}
-                                        aria-label="go-to-datasource">
-                                <OpenInNewIcon size={"small"}/>
+        endAdornment: loading ? <CircularProgress size={"small"}/> : (entity
+                ? (
+                    <>
+
+                        <Tooltip title={"Copy"}
+                                 asChild={true}>
+                            <IconButton onClick={(e) => copy(entity.id)}
+                                        aria-label="copy-id">
+                                <ContentCopyIcon size={"small"}/>
                             </IconButton>
-                        </Tooltip>}
-
-                </>
-            )
-            : undefined
-
+                        </Tooltip>
+
+                        {customizationController?.entityLinkBuilder &&
+                            <Tooltip title={"Open in the console"}
+                                     asChild={true}>
+                                <IconButton component={"a"}
+                                            href={customizationController.entityLinkBuilder({ entity })}
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                            onClick={(e) => e.stopPropagation()}
+                                            aria-label="go-to-datasource">
+                                    <OpenInNewIcon size={"small"}/>
+                                </IconButton>
+                            </Tooltip>}
+
+                    </>
+                )
+                : undefined
+        )
     };
 
     return (
@@ -85,7 +100,9 @@ export function CustomIdField<M extends Record<string, any>>({
 
             {enumValues &&
                 <Select
+                    size={"large"}
                     error={error}
+                    fullWidth={true}
                     onValueChange={(v) => onChange(v as string)}
                     {...fieldProps}
                     renderValue={(option) => {
@@ -116,10 +133,10 @@ export function CustomIdField<M extends Record<string, any>>({
                                return onChange(value.length ? value : undefined);
                            }}/>}
 
-            <ErrorMessage name={"id"}
-                          component="div">
-                {(_) => "You need to specify an ID"}
-            </ErrorMessage>
+            {errors.id && <Typography variant={"caption"}
+                                      className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                {errors.id}
+            </Typography>}
 
         </>
     );

package/src/form/components/ErrorFocus.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect } from "react";
-import { useFormikContext } from "formik";
+import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
                                {
                                    containerRef?: React.RefObject<HTMLDivElement>
                                }) => {
-    const { isSubmitting, isValidating, errors } = useFormikContext();
+    const { isSubmitting, isValidating, errors } = useFormex();
 
     useEffect(() => {
         const keys = Object.keys(errors);
@@ -21,7 +21,7 @@ export const ErrorFocus = ({ containerRef }:
                 if (scrollableParent) {
                     const top = errorElement.getBoundingClientRect().top;
                     scrollableParent.scrollTo({
-                        top: scrollableParent.scrollTop + top - 64,
+                        top: scrollableParent.scrollTop + top - 196,
                         behavior: "smooth"
                     });
                 }

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,
                                 }
@@ -44,7 +44,7 @@ export function FieldHelperText({
         {property.longDescription &&
             <Tooltip title={property.longDescription}
                      side="bottom"
-            >
+                     asChild={true}>
                 <IconButton
                     size={"small"}
                     className="self-start">

package/src/form/components/LabelWithIcon.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from "react";
+
+interface LabelWithIconProps {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
+    ({
+         icon,
+         title,
+         small,
+         className,
+         required
+     }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={`inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}
+            >
+        {icon}
+                <span
+                    className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${
+                        small ? "translate-x-2 scale-75" : ""
+                    }`}
+                >
+          {(title ?? "") + (required ? " *" : "")}
+        </span>
+      </div>
+        );
+    }
+);
+
+LabelWithIcon.displayName = "LabelWithIcon";

package/src/form/components/LabelWithIconAndTooltip.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LabelWithIcon } from "./LabelWithIcon";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+
+interface LabelWithIconAndTooltip {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+    propertyKey: string
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIconAndTooltip({
+                                            propertyKey,
+                                            className,
+                                            ...props
+                                        }: LabelWithIconAndTooltip) {
+    return (
+        <PropertyIdCopyTooltip propertyKey={propertyKey} className={className}>
+            <LabelWithIcon {...props}/>
+        </PropertyIdCopyTooltip>
+    );
+}

package/src/form/components/StorageItemPreview.tsx

@@ -1,41 +1,45 @@
 import React from "react";
 
-import { Entity, ResolvedStringProperty } from "../../types";
+import { ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cn, 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;
+    placeholder?: boolean;
+    className?: string;
 }
 
 export function StorageItemPreview({
                                        name,
                                        property,
                                        value,
-                                       entity,
                                        onRemove,
                                        disabled,
-                                       size
+                                       size,
+                                       placeholder,
+                                       className
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cn(paperMixin,
+        <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 === "large" ? "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">
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
 
                     <Tooltip
+                        asChild={true}
                         title="Remove">
                         <IconButton
                             size={"small"}
@@ -49,16 +53,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-surface-700 dark:text-surface-300"/>
+                </div>
+            }
+
 
         </div>
     );

package/src/form/components/StorageUploadProgress.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
-import { cn, paperMixin, Skeleton } from "@firecms/ui";
+import { cls, paperMixin, Skeleton } from "@firecms/ui";
 
 export interface StorageUploadItemProps {
     storagePath: string;
@@ -22,10 +22,10 @@ export function StorageUploadProgress({
                                           metadata,
                                           onFileUploadComplete,
                                           imageSize,
-                                          simple
+                                          simple,
                                       }: StorageUploadItemProps) {
 
-    const storage = useStorageSource();
+    const storageSource = useStorageSource();
 
     const snackbarController = useSnackbarController();
 
@@ -41,14 +41,14 @@ export function StorageUploadProgress({
         setError(undefined);
         setLoading(true);
 
-        storage.uploadFile({
+        storageSource.uploadFile({
             file,
             fileName,
             path: storagePath,
             metadata
         })
             .then(async ({ path }) => {
-                console.debug("Upload successful");
+                console.debug("Upload successful", path);
                 await onFileUploadComplete(path, entry, metadata);
                 if (mounted.current)
                     setLoading(false);
@@ -67,7 +67,7 @@ export function StorageUploadProgress({
             .finally(() => {
                 uploading.current = false;
             });
-    }, [entry, metadata, onFileUploadComplete, storage, storagePath]);
+    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
 
     React.useEffect(() => {
         mounted.current = true;
@@ -87,9 +87,9 @@ export function StorageUploadProgress({
     }
     return (
 
-        <div className={cn(paperMixin,
+        <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
                 <Skeleton className="w-full h-full"/>}

package/src/form/components/index.tsx

@@ -1,3 +1,3 @@
-export * from "./FormikArrayContainer";
-export * from "./SwitchControl";
 export * from "./FieldHelperText";
+export * from "./LabelWithIcon";
+export * from "./LabelWithIconAndTooltip";