@firecms/core 3.1.0-canary.9e89e98 → 3.1.0-canary.dc8ac43

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -11,6 +11,7 @@ import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -37,6 +38,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                         }: FieldProps<T>) {
 
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
@@ -84,7 +86,7 @@ export function BlockFieldBinding<T extends Array<any>>({
     const body = <ArrayContainer value={value}
                                  className={"flex flex-col gap-3"}
                                  droppableId={propertyKey}
-                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
                                  disabled={isSubmitting || Boolean(property.disabled)}
@@ -167,6 +169,7 @@ function BlockEntry({
     const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
 
     const formex = useFormex();
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (!type) {
@@ -227,7 +230,7 @@ function BlockEntry({
                             <Select
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
-                                                         className={"px-4 py-2 font-medium"}>Type</Typography>}
+                                                         className={"px-4 py-2 font-medium"}>{t("type")}</Typography>}
                                 size={"medium"}
                                 fullWidth={true}
                                 position={"item-aligned"}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -22,6 +22,7 @@ import {
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
 import { getIn } from "@firecms/formex";
+import { useTranslation } from "../../hooks/useTranslation";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -54,6 +55,7 @@ export function KeyValueFieldBinding({
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
 
+    const { t } = useTranslation();
     const initialValues = getIn(context.formex.initialValues, propertyKey);
 
     const mapFormView = <MapEditView value={value}
@@ -103,6 +105,7 @@ function MapEditView<T extends Record<string, any>>({
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
+    const { t } = useTranslation();
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
         Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
@@ -230,7 +233,7 @@ function MapEditView<T extends Record<string, any>>({
                     }]]);
                 }
                 }>
-            {fieldName ? `Add to ${fieldName}` : "Add"}
+            {fieldName ? t("add_to_field", { fieldName }) : t("add_entry")}
         </Button>
 
     </div>;
@@ -261,12 +264,13 @@ function MapKeyValueRow<T extends Record<string, any>>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
 
     function buildInput(entryValue: any, fieldKey: string, dataType: DataType) {
         if (dataType === "string" || dataType === "number") {
             return <TextField
                 key={dataType}
-                placeholder={"value"}
+                placeholder={t("value")}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
                 size={"medium"}
@@ -325,7 +329,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
-                                addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
+                                addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add_entry")}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
                                 canAddElements={true}
@@ -370,7 +374,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -386,7 +390,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
-                        placeholder={"key"}
+                        placeholder={t("key")}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
                         size={"medium"}
                         onChange={(event) => {
@@ -404,17 +408,17 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         </IconButton>}
                     >
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                                  onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                                  onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                                  onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                                  onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                                  onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                                  onClick={() => doUpdateDataType("array")}>{t("array")}</MenuItem>
                     </Menu>
 
                     <IconButton aria-label="delete"
@@ -446,6 +450,7 @@ function ArrayKeyValueRow<T>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {
@@ -487,7 +492,7 @@ function ArrayKeyValueRow<T>({
                                            }}/>;
         } else if (dataType === "array") {
             return <Typography variant={"caption"}>
-                Arrays of arrays are not supported.
+                {t("arrays_of_arrays_not_supported")}
             </Typography>;
         } else if (dataType === "map") {
             return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
@@ -499,7 +504,7 @@ function ArrayKeyValueRow<T>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -519,15 +524,15 @@ function ArrayKeyValueRow<T>({
                         <ArrowDropDownIcon/>
                     </IconButton>}>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                              onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                              onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                              onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                              onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                              onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                 </Menu>
 
             </Typography>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -7,6 +7,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 /**
  * Field that renders the children property fields
@@ -91,7 +92,7 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value, t)}*/}
 
     </>
         ;
@@ -128,7 +129,7 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any, t: any) => {
 
     const keys = Object.keys(properties)
         .filter((key) => !value || !(key in value));
@@ -143,7 +144,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
     if (!keys.length) return <></>;
 
     return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
+        <InputLabel>{t("add_property")}</InputLabel>
         <Select
             value={""}
             size={"large"}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -12,8 +12,9 @@ import {
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
-import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { FireCMSEditor, FireCMSEditorProps } from "../../editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
+import { isImageFile, resizeImage } from "../../util/useStorageUploadController";
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
@@ -55,17 +56,17 @@ export function MarkdownEditorFieldBinding({
         }
         internalValue.current = content;
         setValue(content);
-    }, [setValue]);
+    }, [setValue, value]);
 
     useEffect(() => {
         if (internalValue.current !== value) {
             internalValue.current = value;
-            setFieldVersion(fieldVersion + 1);
+            setFieldVersion(v => v + 1);
         }
     }, [value]);
 
     const resolvedProperty = resolveProperty({
-        propertyOrBuilder: property as PropertyOrBuilder,
+        propertyOrBuilder: property as PropertyOrBuilder<string>,
         values: entityValues,
         authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -112,33 +113,46 @@ export function MarkdownEditorFieldBinding({
     // Extract markdown config from property - can be boolean or object
     const markdownConfig = typeof property.markdown === 'object' ? property.markdown : undefined;
 
+    const handleImageUpload = async (file: File) => {
+        const imageResize = storage?.imageResize;
+        const legacyCompression = storage?.imageCompression;
+        if ((imageResize || legacyCompression) && isImageFile(file)) {
+            file = await resizeImage(file, imageResize, legacyCompression);
+        }
+
+        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;
+    };
+
     const editor = <FireCMSEditor
+        key={context.formex.version + fieldVersion}
         content={value}
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
         disabled={disabled}
         markdownConfig={markdownConfig}
-        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;
-        }}
+        handleImageUpload={handleImageUpload}
         {...editorProps}
     />;
 
     if (minimalistView)
-        return editor;
+        return (
+            <>
+                {editor}
+            </>
+        );
 
     return (
         <>

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -7,6 +7,7 @@ import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -34,6 +35,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
     const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
@@ -87,7 +89,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
     const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
     const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
-                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -41,6 +41,7 @@ import {
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useTranslation } from "../../hooks/useTranslation";
 
 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 = fieldBackgroundDisabledMixin;
@@ -52,18 +53,18 @@ const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0
 type StorageUploadFieldProps = FieldProps<string | string[]>;
 
 export function StorageUploadFieldBinding({
-                                              propertyKey,
-                                              value,
-                                              setValue,
-                                              error,
-                                              showError,
-                                              autoFocus,
-                                              minimalistView,
-                                              property,
-                                              includeDescription,
-                                              context,
-                                              isSubmitting,
-                                          }: StorageUploadFieldProps) {
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    autoFocus,
+    minimalistView,
+    property,
+    includeDescription,
+    context,
+    isSubmitting,
+}: StorageUploadFieldProps) {
 
     const authController = useAuthController();
 
@@ -100,7 +101,7 @@ export function StorageUploadFieldBinding({
     });
 
     const resolvedProperty = resolveProperty({
-        propertyOrBuilder: property as PropertyOrBuilder,
+        propertyOrBuilder: property as PropertyOrBuilder<string>,
         authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
@@ -114,7 +115,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />}
 
             <StorageUpload
                 value={internalValue}
@@ -128,14 +129,13 @@ export function StorageUploadFieldBinding({
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
-                multipleFilesSupported={multipleFilesSupported}/>
+                multipleFilesSupported={multipleFilesSupported} />
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
-
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
         </>
     );
 }
@@ -154,15 +154,15 @@ interface SortableStorageItemProps {
 }
 
 function SortableStorageItem({
-                                 id,
-                                 entry,
-                                 property,
-                                 metadata,
-                                 storagePathBuilder,
-                                 onFileUploadComplete,
-                                 onClear,
-                                 disabled,
-                             }: SortableStorageItemProps) {
+    id,
+    entry,
+    property,
+    metadata,
+    storagePathBuilder,
+    onFileUploadComplete,
+    onClear,
+    disabled,
+}: SortableStorageItemProps) {
 
     const {
         attributes,
@@ -201,7 +201,7 @@ function SortableStorageItem({
                 disabled={disabled}
                 value={entry.storagePathOrDownloadUrl}
                 onRemove={() => onClear(entry.storagePathOrDownloadUrl!)}
-                size={entry.size}/>
+                size={entry.size} />
         );
     } else if (entry.file) {
         child = (
@@ -231,21 +231,21 @@ function SortableStorageItem({
 }
 
 function FileDropComponent({
-                               storage,
-                               disabled,
-                               onFilesAdded,
-                               multipleFilesSupported,
-                               autoFocus,
-                               internalValue,
-                               property,
-                               onClear,
-                               metadata,
-                               storagePathBuilder,
-                               onFileUploadComplete,
-                               name,
-                               helpText,
-                               isDndItemDragging
-                           }: {
+    storage,
+    disabled,
+    onFilesAdded,
+    multipleFilesSupported,
+    autoFocus,
+    internalValue,
+    property,
+    onClear,
+    metadata,
+    storagePathBuilder,
+    onFileUploadComplete,
+    name,
+    helpText,
+    isDndItemDragging
+}: {
     storage: StorageConfig,
     disabled: boolean,
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
@@ -271,33 +271,33 @@ function FileDropComponent({
         isDragAccept,
         isDragReject
     } = useDropzone({
-            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
-                ...acc,
-                [ext]: []
-            }), {}) : undefined,
-            disabled: disabled || isDndItemDragging,
-            noDragEventsBubbling: true,
-            maxSize: storage.maxSize,
-            onDrop: onFilesAdded,
-            onDropRejected: (fileRejections) => {
-                for (const fileRejection of fileRejections) {
-                    for (const error of fileRejection.errors) {
-                        console.error("Error uploading file: ", error);
-                        if (error.code === "file-too-large") {
-                            snackbarContext.open({
-                                type: "error",
-                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                            });
-                        } else if (error.code === "file-invalid-type") {
-                            snackbarContext.open({
-                                type: "error",
-                                message: "Error uploading file: File type is not supported"
-                            });
-                        }
+        accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
+            ...acc,
+            [ext]: []
+        }), {}) : undefined,
+        disabled: disabled || isDndItemDragging,
+        noDragEventsBubbling: true,
+        maxSize: storage.maxSize,
+        onDrop: onFilesAdded,
+        onDropRejected: (fileRejections) => {
+            for (const fileRejection of fileRejections) {
+                for (const error of fileRejection.errors) {
+                    console.error("Error uploading file: ", error);
+                    if (error.code === "file-too-large") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                        });
+                    } else if (error.code === "file-invalid-type") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: "Error uploading file: File type is not supported"
+                        });
                     }
                 }
             }
         }
+    }
     );
 
     return (
@@ -349,8 +349,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}
-                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
+                    variant={"label"}
+                    className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
@@ -374,19 +374,20 @@ export interface StorageUploadProps {
 }
 
 export function StorageUpload({
-                                  property,
-                                  name,
-                                  value, // This is internalValue from useStorageUploadController
-                                  setInternalValue,
-                                  onChange,
-                                  multipleFilesSupported,
-                                  onFileUploadComplete,
-                                  disabled,
-                                  onFilesAdded,
-                                  autoFocus,
-                                  storage,
-                                  storagePathBuilder,
-                              }: StorageUploadProps) {
+    property,
+    name,
+    value, // This is internalValue from useStorageUploadController
+    setInternalValue,
+    onChange,
+    multipleFilesSupported,
+    onFileUploadComplete,
+    disabled,
+    onFilesAdded,
+    autoFocus,
+    storage,
+    storagePathBuilder,
+}: StorageUploadProps) {
+    const { t } = useTranslation();
 
     if (multipleFilesSupported) {
         const arrayProperty = property as ResolvedArrayProperty<string[]>;
@@ -461,8 +462,8 @@ export function StorageUpload({
     }, [value, multipleFilesSupported, onChange, setInternalValue]);
 
     const helpText = multipleFilesSupported
-        ? "Drag 'n' drop some files here, or click to select files. Drag to reorder."
-        : "Drag 'n' drop a file here, or click to select one";
+        ? t("drag_drop_multiple")
+        : t("drag_drop_single");
 
     const renderProperty: ResolvedStringProperty = multipleFilesSupported
         ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty
@@ -500,6 +501,6 @@ export function StorageUpload({
         );
     } else {
         // For single file, no D&D context is needed
-        return <FileDropComponent {...fileDropProps} isDndItemDragging={false}/>;
+        return <FileDropComponent {...fileDropProps} isDndItemDragging={false} />;
     }
 }

package/src/hooks/index.tsx

@@ -31,3 +31,4 @@ export * from "./useBuildLocalConfigurationPersistence";
 export * from "./useBuildModeController";
 
 export * from "./useValidateAuthenticator";
+export * from "./useTranslation";