@firecms/core 3.0.0-canary.11 → 3.0.0-canary.111

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -3,7 +3,7 @@ import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -21,9 +21,7 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    setValue,
-                                    partOfBlock,
-                                    tableMode,
+                                    minimalistView,
                                     includeDescription,
                                     underlyingValueHasChanged,
                                     autoFocus,
@@ -63,11 +61,11 @@ export function MapFieldBinding({
                             includeDescription,
                             underlyingValueHasChanged,
                             context,
-                            tableMode: false,
                             partOfArray: false,
-                            partOfBlock: false,
+                            minimalistView: false,
                             autoFocus: autoFocus && index === 0
                         };
+
                         return (
                             <div key={`map-${propertyKey}-${index}`}>
                                 <ErrorBoundary>
@@ -85,23 +83,25 @@ export function MapFieldBinding({
     </>;
 
     const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
     );
 
     return (
         <ErrorBoundary>
 
-            {!tableMode && !partOfBlock && <ExpandablePanel initiallyExpanded={expanded}
-                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
-                                                            title={title}>{mapFormView}</ExpandablePanel>}
+            {!minimalistView && !minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
+                                                                    title={title}>{mapFormView}</ExpandablePanel>}
 
-            {(tableMode || partOfBlock) && mapFormView}
+            {(minimalistView || minimalistView) && 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/MarkdownEditorFieldBinding.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+    FieldHelperText,
+    FieldProps,
+    getIconForProperty,
+    LabelWithIconAndTooltip,
+    randomString,
+    useStorageSource
+} from "../../index";
+import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
+import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { resolveStorageFilenameString, resolveStoragePathString } from "../../util";
+
+interface MarkdownEditorFieldProps {
+    highlight?: { from: number, to: number };
+    editorProps?: Partial<FireCMSEditorProps>
+}
+
+export function MarkdownEditorFieldBinding({
+                                               property,
+                                               propertyKey,
+                                               value,
+                                               setValue,
+                                               includeDescription,
+                                               showError,
+                                               error,
+                                               minimalistView,
+                                               isSubmitting,
+                                               context,
+                                               customProps,
+                                           }: FieldProps<string, MarkdownEditorFieldProps>) {
+
+    const highlight = customProps?.highlight;
+    const editorProps = customProps?.editorProps;
+    const storageSource = useStorageSource();
+    const storage = property.storage;
+
+    const entityValues = context.values;
+    const entityId = context.entityId;
+    const path = context.path;
+
+    // const fieldVersion = useRef(0);
+    const [fieldVersion, setFieldVersion] = useState(0);
+    const internalValue = useRef(value);
+
+    const onContentChange = useCallback((content: string) => {
+        internalValue.current = content;
+        setValue(content);
+    }, [setValue]);
+
+    useEffect(() => {
+        if (internalValue.current !== value) {
+            internalValue.current = value;
+            setFieldVersion(fieldVersion + 1);
+            // fieldVersion.current = fieldVersion.current + 1;
+        }
+    }, [value]);
+
+    const fileNameBuilder = useCallback(async (file: File) => {
+        if (storage?.fileName) {
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property,
+                file,
+                propertyKey
+            });
+            if (!fileName || fileName.length === 0) {
+                throw Error("You need to return a valid filename");
+            }
+            return fileName;
+        }
+        return randomString() + "_" + file.name;
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const storagePathBuilder = useCallback((file: File) => {
+        if (!storage) return "/";
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const editor = <FireCMSEditor
+        content={value}
+        onMarkdownContentChange={onContentChange}
+        version={context.formex.version + fieldVersion}
+        highlight={highlight}
+        handleImageUpload={async (file: File) => {
+            const storagePath = storagePathBuilder(file);
+            const fileName = await fileNameBuilder(file);
+            const result = await storageSource.uploadFile({
+                file,
+                fileName,
+                path: storagePath,
+            });
+            const downloadConfig = await storageSource.getDownloadURL(result.path);
+            const url = downloadConfig.url;
+            if (!url) {
+                throw new Error("Error uploading image");
+            }
+            return url;
+        }}
+        {...editorProps}
+        />;
+
+    if (minimalistView)
+        return editor;
+
+    return (
+        <>
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
+                {editor}
+            </div>
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             property={property}/>
+        </>
+
+    );
+
+}

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
 import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
@@ -23,6 +23,7 @@ export function MultiSelectBinding({
                                        disabled,
                                        property,
                                        includeDescription,
+                                       size = "medium",
                                        autoFocus
                                    }: FieldProps<EnumType[], any, any>) {
 
@@ -81,12 +82,15 @@ export function MultiSelectBinding({
     return (
         <div className="mt-0.5 ml-0.5  mt-2">
             <MultiSelect
+                size={size === "medium" ? "medium" : "small"}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                label={<LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
                 renderValue={useCallback((v: string) => renderValue(v, false), [renderValue])}
                 onMultiValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-import { Entity, FieldProps } from "../../types";
+import { FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
-import { cn, paperMixin } from "@firecms/ui";
+import { cls, paperMixin } from "@firecms/ui";
 
 /**
  *
@@ -21,7 +21,7 @@ export function ReadOnlyFieldBinding({
                                          value,
                                          error,
                                          showError,
-                                         tableMode,
+                                         minimalistView,
                                          property,
                                          includeDescription,
                                          context
@@ -30,30 +30,25 @@ 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 (
 
         <>
 
-            {!tableMode && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                          required={property.validation?.required}
-                                          title={property.name}
-                                          className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div
-                className={cn(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}
                                      value={value}
                                      property={property}
-                        // entity={entity}
                                      size={"medium"}/>
                 </ErrorBoundary>
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -3,12 +3,13 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
 import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
-import { ReferencePreview } from "../../preview";
+import { EmptyValue, ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-import { Button } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -27,19 +28,21 @@ export function ReferenceFieldBinding<M extends Record<string, any>>(props: Fiel
 
 }
 
-function ReferenceFieldBindingInternal<M extends Record<string, any>>({
-                                                                          value,
-                                                                          setValue,
-                                                                          error,
-                                                                          showError,
-                                                                          isSubmitting,
-                                                                          disabled,
-                                                                          touched,
-                                                                          autoFocus,
-                                                                          property,
-                                                                          includeDescription,
-                                                                          context
-                                                                      }: FieldProps<EntityReference>) {
+function ReferenceFieldBindingInternal({
+                                           propertyKey,
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           isSubmitting,
+                                           disabled,
+                                           minimalistView,
+                                           touched,
+                                           autoFocus,
+                                           property,
+                                           includeDescription,
+                                           size = "medium"
+                                       }: FieldProps<EntityReference>) {
     if (!property.path) {
         throw new Error("Property path is required for ReferenceFieldBinding");
     }
@@ -82,10 +85,12 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
 
     return (
         <>
-            <LabelWithIcon icon={getIconForProperty(property, "small")}
-                           required={property.validation?.required}
-                           title={property.name}
-                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}
@@ -96,18 +101,23 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
                     hover={!disabled}
-                    size={"medium"}
+                    size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
                 />}
 
                 {!value && <div className="justify-center text-left">
-                    <Button variant="outlined"
-                            color="primary"
-                            disabled={disabled || isSubmitting}
-                            onClick={onEntryClick}>
-                        Edit {property.name}
-                    </Button>
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-slate-500"
+                            : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                                            onClick={onEntryClick}
+                                            size={"medium"}>
+                        <EmptyValue/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
                 </div>}
             </>}
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
-import { getIconForProperty } from "../../util";
+import { getDefaultValueFor, getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel } from "@firecms/ui";
+import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -23,7 +23,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              isSubmitting,
                                                              setValue,
                                                              setFieldValue,
-                                                             tableMode,
+                                                             minimalistView,
                                                              property,
                                                              includeDescription,
                                                              underlyingValueHasChanged,
@@ -57,13 +57,12 @@ export function RepeatFieldBinding<T extends Array<any>>({
             includeDescription,
             underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: internalId === lastAddedId
         };
         return <ErrorBoundary>
-            <PropertyFieldBinding {...fieldProps}/>
+            <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
@@ -75,24 +74,29 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                  onInternalIdAdded={setLastAddedId}
                                                  disabled={isSubmitting || Boolean(property.disabled)}
                                                  includeAddButton={!property.disabled}
-                                                 newDefaultEntry={property.of.defaultValue}/>;
+                                                 newDefaultEntry={getDefaultValueFor(property.of)}/>;
 
-    const title = (<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                  required={property.validation?.required}
-                                  title={property.name}
-                                  className={"text-text-secondary dark:text-text-secondary-dark"}/>);
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     return (
 
         <>
 
-            {!tableMode && <ExpandablePanel initiallyExpanded={expanded}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
-                                            title={title}>
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                 title={title}>
                 {arrayContainer}
             </ExpandablePanel>}
 
-            {tableMode && arrayContainer}
+            {minimalistView && arrayContainer}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -4,8 +4,9 @@ import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
-import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 
@@ -27,7 +28,8 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            autoFocus,
                                                            touched,
                                                            property,
-                                                           includeDescription
+                                                           includeDescription,
+                                                           size = "medium"
                                                        }: SelectProps<T>) {
 
     const enumValues = property.enumValues;
@@ -47,46 +49,50 @@ export function SelectFieldBinding<T extends EnumType>({
     return (
         <>
 
-            <Select
-                value={value ? value.toString() : ""}
-                disabled={disabled}
-                position="item-aligned"
-                inputClassName={cn("w-full")}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
-                />}
-                endAdornment={
-                    property.clearable && <IconButton
-                        onClick={handleClearClick}>
-                        <ClearIcon/>
-                    </IconButton>
-                }
-                onValueChange={(updatedValue: string) => {
-                    const newValue = updatedValue
-                        ? (property.dataType === "number" ? parseFloat(updatedValue) : updatedValue)
-                        : null;
-                    return setValue(newValue as T);
-                }}
-                renderValue={(enumKey: any) => {
-                    return <EnumValuesChip
-                        enumKey={enumKey}
-                        enumValues={enumValues}
-                        size={"medium"}/>;
-                }}
-            >
-                {enumValues && enumValues.map((option) => {
-                    return <SelectItem
-                        key={option.id}
-                        value={String(option.id)}>
-                        <EnumValuesChip
-                            enumKey={String(option.id)}
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <Select
+                    size={size === "medium" ? "medium" : "small"}
+                    value={value !== undefined && value != null ? value.toString() : ""}
+                    disabled={disabled}
+                    position="item-aligned"
+                    inputClassName={cls("w-full")}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
+                    />}
+                    endAdornment={
+                        property.clearable && <IconButton
+                            onClick={handleClearClick}>
+                            <ClearIcon/>
+                        </IconButton>
+                    }
+                    onValueChange={(updatedValue: string) => {
+                        const newValue = updatedValue
+                            ? (property.dataType === "number" ? parseFloat(updatedValue) : updatedValue)
+                            : null;
+                        return setValue(newValue as T);
+                    }}
+                    renderValue={(enumKey: any) => {
+                        return <EnumValuesChip
+                            enumKey={enumKey}
                             enumValues={enumValues}
-                            size={"medium"}/>
-                    </SelectItem>
-                })}
-            </Select>
+                            size={size}/>;
+                    }}
+                >
+                    {enumValues && enumValues.map((option) => {
+                        return <SelectItem
+                            key={option.id}
+                            value={String(option.id)}>
+                            <EnumValuesChip
+                                enumKey={String(option.id)}
+                                enumValues={enumValues}
+                                size={size}/>
+                        </SelectItem>
+                    })}
+                </Select>
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}