@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

package/src/core/EntityEditViewFormActions.tsx

@@ -28,7 +28,8 @@ import {
     useCustomizationController,
     useFireCMSContext,
     useSideEntityController,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "../hooks";
 import { EntityFormActionsProps } from "../form/EntityFormActions";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
@@ -56,6 +57,7 @@ export function EntityEditViewFormActions({
     const sideEntityController = useSideEntityController();
     const sideDialogContext = useSideDialogContext();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     const entityActions = useMemo((): EntityAction[] => {
         const customEntityActions = (collection.entityActions ?? [])
@@ -90,7 +92,8 @@ export function EntityEditViewFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         })
         : buildSideActions({
             savingError,
@@ -106,7 +109,8 @@ export function EntityEditViewFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         });
 }
 
@@ -123,8 +127,9 @@ type ActionsViewProps<M extends object> = {
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext,
+    formContext: FormContext;
     formex: FormexController<any>;
+    t: any;
 };
 
 function buildBottomActions<M extends object>({
@@ -141,7 +146,8 @@ function buildBottomActions<M extends object>({
                                                   openEntityMode,
                                                   navigateBack,
                                                   formContext,
-                                                  formex
+                                                  formex,
+                                                  t
                                               }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -191,7 +197,7 @@ function buildBottomActions<M extends object>({
                 color="primary"
                 disabled={disabled || formex.isSubmitting}
                 type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
         <Button variant={canClose ? "text" : "filled"}
                 color="primary"
@@ -200,9 +206,9 @@ function buildBottomActions<M extends object>({
                 onClick={() => {
                     sideDialogContext.setPendingClose(false);
                 }}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </Button>
         {canClose && <LoadingButton variant="filled"
                                     color="primary"
@@ -212,9 +218,9 @@ function buildBottomActions<M extends object>({
                                     onClick={() => {
                                         sideDialogContext.setPendingClose?.(true);
                                     }}>
-            {status === "existing" && "Save and close"}
-            {status === "copy" && "Create copy and close"}
-            {status === "new" && "Create and close"}
+            {status === "existing" && t("save_and_close")}
+            {status === "copy" && t("create_copy_and_close")}
+            {status === "new" && t("create_and_close")}
         </LoadingButton>}
     </DialogActions>;
 }
@@ -233,7 +239,8 @@ function buildSideActions<M extends object>({
                                                 openEntityMode,
                                                 navigateBack,
                                                 formContext,
-                                                formex
+                                                formex,
+                                                t
                                             }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -249,13 +256,13 @@ function buildSideActions<M extends object>({
                        onClick={() => {
                            sideDialogContext.setPendingClose?.(false);
                        }}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </LoadingButton>
 
         <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
 
         {pluginActions}

package/src/core/EntitySidePanel.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import { EntityCollection, EntitySidePanelProps } from "../types";
-import { useNavigationController, useSideEntityController } from "../hooks";
+import { useNavigationController, useSideEntityController, useTranslation } from "../hooks";
 
 import { ErrorBoundary } from "../components";
 import { EntityEditView, OnUpdateParams } from "./EntityEditView";
@@ -41,6 +41,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
     const sideDialogsController = useSideDialogContext();
+    const { t } = useTranslation();
 
     const onClose = () => {
         if (props.onClose) {
@@ -77,7 +78,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
 
-    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
+    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -99,18 +100,19 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const onValuesModified = useCallback((modified: boolean) => {
         setBlockedNavigationMessage(modified
-            ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
+            ? t("unsaved_changes", { collectionName: collection?.singularName ?? collection?.name ?? "" })
             : undefined)
         setBlocked(modified);
-    }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
+    }, [collection?.name, setBlocked, setBlockedNavigationMessage, t]);
 
     if (!props || !collection) {
-        return <div className={"w-full"}/>;
+        return <div className={"w-full"} />;
     }
 
     return (
         <>
             <ErrorBoundary>
+
                 <EntityEditView
                     {...props}
                     fullIdPath={fullIdPath}
@@ -120,32 +122,34 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
                     barActions={({
-                                     status,
-                                     values
-                                 }) => <>
-                        <IconButton
-                            className="self-center"
-                            onClick={onClose}>
-                            <CloseIcon size={"small"}/>
-                        </IconButton>
-                        {allowFullScreen && <IconButton
-                            className="self-center"
-                            onClick={() => {
-                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                saveEntityToMemoryCache(key, values);
-                                if (entityId)
-                                    navigate(location.pathname);
-                                else
-                                    navigate(location.pathname + "#new");
-                            }}>
-                            <OpenInFullIcon size={"small"}/>
-                        </IconButton>}
-                    </>}
+                        status,
+                        values
+                    }) => <>
+                            <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={onClose}>
+                                <CloseIcon size={"smallest"} />
+                            </IconButton>
+                            {allowFullScreen && <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={() => {
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    saveEntityToMemoryCache(key, values);
+                                    if (entityId)
+                                        navigate(location.pathname + location.search);
+                                    else
+                                        navigate(location.pathname + location.search + "#new");
+                                }}>
+                                <OpenInFullIcon size={"smallest"} />
+                            </IconButton>}
+                        </>}
                     onTabChange={({
-                                      entityId,
-                                      selectedTab,
-                                      collection,
-                                  }) => {
+                        entityId,
+                        selectedTab,
+                        collection,
+                    }) => {
                         sideEntityController.replace({
                             path,
                             entityId,

package/src/core/FireCMS.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { CenteredView, Typography } from "@firecms/ui";
+import { AuthController } from "../types";
 import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext } from "../contexts";
+import { AuthControllerContext, ModeControllerProvider } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext } from "../hooks";
+import { useCustomizationController, useFireCMSContext, useTranslation, ModeController } from "../hooks";
+import { useBuildModeController } from "../hooks/useBuildModeController";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -59,6 +61,10 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
 
+    const { t, i18n } = useTranslation();
+
+    const modeController = useBuildModeController();
+
     const plugins = navigationController.plugins ?? _pluginsProp;
     const userManagement = plugins?.find(p => p.userManagement)?.userManagement
         ?? _userManagement
@@ -106,6 +112,24 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController
     });
 
+    // Inject plugin translations into the existing i18next instance
+    useEffect(() => {
+        if (!i18n) return;
+        plugins?.forEach(plugin => {
+            if (plugin.i18n) {
+                Object.keys(plugin.i18n).forEach(locale => {
+                    i18n.addResourceBundle(
+                        locale,
+                        "firecms_core",
+                        plugin.i18n![locale],
+                        true,  // deep merge
+                        true   // overwrite
+                    );
+                });
+            }
+        });
+    }, [i18n, plugins]);
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }
@@ -133,12 +157,15 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
     if (accessResponse?.blocked) {
         return (
             <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                {/* eslint-disable-next-line i18next/no-literal-string */}
                 <Typography variant={"h4"} gutterBottom>
-                    License needed
+                    {t("license_needed")}
                 </Typography>
                 <Typography>
-                    You need a valid license to use FireCMS PRO. Please reach out at <a
-                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                    {(() => {
+                        const parts = t("license_description", { email: "%%EMAIL%%" }).split("%%EMAIL%%");
+                        return <>{parts[0]}<a href={"mailto:hello@firecms.co"}>hello@firecms.co</a>{parts[1]}</>;
+                    })()}
                 </Typography>
                 {accessResponse?.message &&
                     <Typography>{accessResponse?.message}</Typography>}

package/src/core/field_configs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ArrayProperty, FieldProps, Property, PropertyConfig, ResolvedProperty } from "../types";
+import { ArrayProperty, FieldProps, NumberProperty, Property, PropertyConfig, ResolvedProperty, StringProperty } from "../types";
 import {
     ArrayCustomShapedFieldBinding,
     ArrayOfReferencesFieldBinding,
@@ -8,16 +8,18 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownEditorFieldBinding,
     MultiSelectFieldBinding,
     ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
-    StorageUploadFieldBinding,
     SwitchFieldBinding,
     TextFieldBinding
 } from "../form";
+import { lazyEager } from "../util/lazy_eager";
+
+const MarkdownEditorFieldBinding = lazyEager<typeof import("../form/field_bindings/MarkdownEditorFieldBinding")["MarkdownEditorFieldBinding"]>(() => import("../form/field_bindings/MarkdownEditorFieldBinding"), "MarkdownEditorFieldBinding");
+const StorageUploadFieldBinding = lazyEager<typeof import("../form/field_bindings/StorageUploadFieldBinding")["StorageUploadFieldBinding"]>(() => import("../form/field_bindings/StorageUploadFieldBinding"), "StorageUploadFieldBinding");
 import { isPropertyBuilder, mergeDeep } from "../util";
 
 import {
@@ -397,14 +399,19 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "custom_array";
         } else if (isPropertyBuilder(of)) {
             return "repeat";
-        } else if (of?.dataType === "string" && of.enumValues) {
-            return "multi_select";
-        } else if (of?.dataType === "number" && of.enumValues) {
-            return "multi_number_select";
-        } else if (of?.dataType === "string" && of.storage) {
-            return "multi_file_upload";
-        } else if (of?.dataType === "reference") {
-            return "multi_references";
+        } else if (of) {
+            const ofProperty = of as Property;
+            if (ofProperty.dataType === "string" && (ofProperty as StringProperty).enumValues) {
+                return "multi_select";
+            } else if (ofProperty.dataType === "number" && (ofProperty as NumberProperty).enumValues) {
+                return "multi_number_select";
+            } else if (ofProperty.dataType === "string" && (ofProperty as StringProperty).storage) {
+                return "multi_file_upload";
+            } else if (ofProperty.dataType === "reference") {
+                return "multi_references";
+            } else {
+                return "repeat";
+            }
         } else {
             return "repeat";
         }