@firecms/core 3.1.0 → 3.2.0-canary.9c3d298

package/src/components/common/useDataSourceTableController.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
@@ -94,7 +95,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [searchString, setSearchString] = React.useState<string | undefined>();
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-                                                sortBy?: [string, "asc" | "desc"]) => {
+        sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
             return true;
         return dataSource.isFilterCombinationValid({
@@ -106,8 +107,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     }, []);
 
     const onScroll = ({
-                          scrollOffset
-                      }: {
+        scrollOffset
+    }: {
         scrollOffset: number
     }) => {
         if (scrollRestoration) {
@@ -128,10 +129,12 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    const location = useLocation();
+
     const {
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
-    } = parseFilterAndSort(window.location.search);
+    } = parseFilterAndSort(location.search);
 
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
@@ -328,6 +331,11 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
                         } else if (val instanceof EntityReference) {
                             encodedValue = encodeRef(val);
                         }
+                    } else if (typeof val === "string") {
+                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
+                        // so that decodeString's JSON.parse restores the string type,
+                        // not a number. Without this, "4" round-trips as the number 4.
+                        encodedValue = JSON.stringify(val);
                     }
                 } catch (e) {
                     encodedValue = val;

package/src/components/index.tsx

@@ -42,3 +42,4 @@ export * from "./FieldCaption";
 export * from "./EntityPreview";
 
 export * from "./AIIcon";
+export * from "./LanguageToggle";

package/src/core/DefaultAppBar.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 
 import { Link, useNavigate } from "react-router-dom";
-import { ErrorBoundary, FireCMSLogo } from "../components";
+import { ErrorBoundary, FireCMSLogo, LanguageToggle } from "../components";
 import {
     Avatar,
     BrightnessMediumIcon,
+    CheckIcon,
     cls,
     DarkModeIcon,
     IconButton,
@@ -15,7 +16,7 @@ import {
     Skeleton,
     Typography
 } from "@firecms/ui";
-import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
+import { useAuthController, useLargeLayout, useModeController, useNavigationController, useTranslation } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
@@ -85,6 +86,8 @@ export const DefaultAppBar = function DefaultAppBar({
         mode,
         setMode
     } = useModeController();
+    
+    const { i18n, t } = useTranslation();
 
     const navigate = useNavigate();
 
@@ -192,18 +195,19 @@ export const DefaultAppBar = function DefaultAppBar({
                 <Menu
                     trigger={<IconButton
                         color="inherit"
-                        aria-label="Open drawer"
-                        size="large">
+                        aria-label="Open drawer">
                         {mode === "dark"
-                            ? <DarkModeIcon />
-                            : <LightModeIcon />}
+                            ? <DarkModeIcon size="small" />
+                            : <LightModeIcon size="small" />}
                     </IconButton>}>
-                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> Dark</MenuItem>
-                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> {t("dark_mode")}</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> {t("light_mode")}</MenuItem>
                     <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
-                        size={"smallest"} />System</MenuItem>
+                        size={"smallest"} />{t("system_mode")}</MenuItem>
                 </Menu>}
 
+            <LanguageToggle />
+
             <Menu trigger={avatarComponent}>
                 {user && <div className={"px-4 py-2 mb-2"}>
                     {user.displayName && <Typography variant={"body1"} color={"secondary"}>
@@ -222,7 +226,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     navigate("/");
                 }}>
                     <LogoutIcon />
-                    Log Out
+                    {t("log_out")}
                 </MenuItem>}
 
             </Menu>

package/src/core/DefaultDrawer.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
-import { useCollapsedGroups, useLargeLayout, useNavigationController } from "../hooks";
+import {
+    useCollapsedGroups,
+    useLargeLayout,
+    useNavigationController,
+    useTranslation
+} from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
@@ -34,6 +39,7 @@ export function DefaultDrawer({
 
     const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
+    const { t } = useTranslation();
 
     const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
@@ -122,7 +128,7 @@ export function DefaultDrawer({
                             }}
                             key={entry.id}>
                             {<IconForView collectionOrView={entry.view} />}
-                            {entry.name}
+                            {t(entry.name as any)}
                         </MenuItem>)}
 
                 </Menu>}

package/src/core/DrawerNavigationGroup.tsx

@@ -3,12 +3,13 @@ import { cls, ExpandMoreIcon, Typography } from "@firecms/ui";
 import { NavigationEntry } from "../types";
 import { IconForView } from "../util";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface DrawerNavigationGroupProps {
     /**
-     * Group name to display in header
+     * Group name to display in header. When null, uses the translated default group name.
      */
-    group: string;
+    group: string | null;
     /**
      * Navigation entries in this group
      */
@@ -58,6 +59,7 @@ export function DrawerNavigationGroup({
     headerActions,
     onItemClick
 }: DrawerNavigationGroupProps) {
+    const { t } = useTranslation();
     return (
         <div
             className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
@@ -81,7 +83,7 @@ export function DrawerNavigationGroup({
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1"
                     >
-                        {(group || "Views").toUpperCase()}
+                        {(group || t("views_group")).toUpperCase()}
                     </Typography>
                     {headerActions && (
                         <div onClick={(e) => e.stopPropagation()}>

package/src/core/EntityEditView.tsx

@@ -32,6 +32,7 @@ import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 import { createFormexStub } from "../util/createFormexStub";
+import { useTranslation } from "../hooks/useTranslation";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -170,6 +171,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 }) {
 
     const context = useFireCMSContext();
+    const { t } = useTranslation();
 
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
 
@@ -342,8 +344,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             openEntityMode={layout} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
-                                You need to save your entity before
-                                adding additional collections
+                                {t("youd_need_to_save_before_additional_collections")}
                             </Typography>
                         </div>)
                 }
@@ -451,7 +452,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
-            className={cls("h-14 items-center overflow-visible overflow-x-scroll w-full no-scrollbar border-b pl-2 pr-2 flex gap-2 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+            className={cls("h-14 items-center overflow-hidden w-full border-b pl-2 pr-2 flex gap-2 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
             {barActions?.({
                 path: fullIdPath ?? path,

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) {
@@ -99,10 +100,10 @@ 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"} />;
@@ -136,9 +137,9 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                     const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
                                     saveEntityToMemoryCache(key, values);
                                     if (entityId)
-                                        navigate(location.pathname);
+                                        navigate(location.pathname + location.search);
                                     else
-                                        navigate(location.pathname + "#new");
+                                        navigate(location.pathname + location.search + "#new");
                                 }}>
                                 <OpenInFullIcon size={"smallest"} />
                             </IconButton>}

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>}