@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/src/preview/PropertyPreview.tsx

@@ -11,6 +11,7 @@ import {
 } from "../types";
 
 import { resolveProperty } from "../util";
+import { jsonStringifyReplacer } from "../util/objects";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
 import { useAuthController, useCustomizationController } from "../hooks";
@@ -234,7 +235,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
     } else {
-        content = JSON.stringify(value);
+        content = JSON.stringify(value, jsonStringifyReplacer);
     }
 
     return content === undefined || content === null || (Array.isArray(content) && content.length === 0)
@@ -246,6 +247,6 @@ function buildWrongValueType(name: string | undefined, dataType: string, value:
     console.warn(`Unexpected value for property ${name}, of type ${dataType}`, value);
     return (
         <ErrorView title={"Unexpected value"}
-            error={`${JSON.stringify(value)}`} />
+            error={`${JSON.stringify(value, jsonStringifyReplacer)}`} />
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -6,6 +6,7 @@ import { PreviewSize } from "../PropertyPreviewProps";
 import { Skeleton } from "@firecms/ui";
 import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
+import { jsonStringifyReplacer } from "../../util/objects";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -29,7 +30,7 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
             onClick={props.onClick}
             size={props.size ?? "medium"}>
             <ErrorView error={"Unexpected value. Click to edit"}
-                       tooltip={JSON.stringify(reference)}/>
+                       tooltip={JSON.stringify(reference, jsonStringifyReplacer)}/>
         </EntityPreviewContainer>;
     }
     return <ErrorBoundary>

package/src/preview/components/UrlComponentPreview.tsx

@@ -6,6 +6,7 @@ import { PreviewType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
 import { EmptyValue } from "./EmptyValue";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * @group Preview components
@@ -27,6 +28,8 @@ export function UrlComponentPreview({
     fill?: boolean
 }): React.ReactElement {
 
+    const { t } = useTranslation();
+
     if (!previewType) {
         if (!url || !url.trim()) return <EmptyValue />;
         return (
@@ -51,8 +54,7 @@ export function UrlComponentPreview({
         return <audio controls
             className={"max-w-100%"}
             src={url}>
-            Your browser does not support the
-            <code>audio</code> element.
+            {t("browser_does_not_support_audio")}
         </audio>;
     } else if (previewType === "video") {
         return <VideoPreview size={size} src={url} interactive={interactive} />;

package/src/preview/components/UserPreview.tsx

@@ -4,6 +4,7 @@ import { useInternalUserManagementController } from "../../hooks";
 import { UserDisplay } from "../../components/UserDisplay";
 import { EmptyValue } from "./EmptyValue";
 import { Typography } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * Preview component for displaying user information.
@@ -13,6 +14,7 @@ import { Typography } from "@firecms/ui";
  */
 export function UserPreview({ value }: PropertyPreviewProps<string>) {
     const { getUser } = useInternalUserManagementController();
+    const { t } = useTranslation();
 
     if (!value) {
         return <EmptyValue/>;
@@ -20,7 +22,7 @@ export function UserPreview({ value }: PropertyPreviewProps<string>) {
 
     const user = getUser(value);
     if (!user) {
-        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+        return <Typography variant={"caption"} color={"secondary"}>{t("user_not_found", { value })}</Typography>;
     }
 
     return <UserDisplay user={user}/>;

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -6,6 +6,7 @@ import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
+import { DatePreview } from "../components/DatePreview";
 
 /**
  * @group Preview components
@@ -111,37 +112,58 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]: [string, any]) => (
-                <div
-                    key={`map_preview_table_${key}}`}
-                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
+            Object.entries(value).map(([key, childValue]: [string, any]) => {
+                const isTimestampObj = childValue && typeof childValue === "object" && (
+                    childValue instanceof Date ||
+                    ("_seconds" in childValue && "_nanoseconds" in childValue && typeof childValue._seconds === "number" && typeof childValue._nanoseconds === "number") ||
+                    ("seconds" in childValue && "nanoseconds" in childValue && typeof childValue.seconds === "number" && typeof childValue.nanoseconds === "number")
+                );
+
+                const isScalar = childValue && (typeof childValue !== "object" || isTimestampObj);
+
+                return (
                     <div
-                        className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
-                        <div
-                            key={`table-cell-title-${key}-${key}`}
-                            className="min-w-[140px] w-[25%] py-1">
-                            <Typography variant={"caption"}
-                                        className={"font-semibold break-words"}
-                                        color={"secondary"}>
-                                {key}
-                            </Typography>
-                        </div>
+                        key={`map_preview_table_${key}}`}
+                        className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                         <div
-                            className="flex-grow max-w-[75%]">
-                            {childValue && typeof childValue !== "object" && <Typography>
-                                <ErrorBoundary>
-                                    {childValue.toString()}
-                                </ErrorBoundary>
-                            </Typography>}
+                            className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
+                            <div
+                                key={`table-cell-title-${key}-${key}`}
+                                className="min-w-[140px] w-[25%] py-1">
+                                <Typography variant={"caption"}
+                                            className={"font-semibold break-words"}
+                                            color={"secondary"}>
+                                    {key}
+                                </Typography>
+                            </div>
+                            <div
+                                className="flex-grow max-w-[75%]">
+                                {isScalar && (isTimestampObj ? (
+                                    <ErrorBoundary>
+                                        <DatePreview date={
+                                            childValue instanceof Date ? childValue :
+                                            typeof childValue.toDate === "function" ? childValue.toDate() :
+                                            "_seconds" in childValue ? new Date(childValue._seconds * 1000 + childValue._nanoseconds / 1000000) :
+                                            new Date(childValue.seconds * 1000 + childValue.nanoseconds / 1000000)
+                                        } />
+                                    </ErrorBoundary>
+                                ) : (
+                                    <Typography>
+                                        <ErrorBoundary>
+                                            {childValue.toString()}
+                                        </ErrorBoundary>
+                                    </Typography>
+                                ))}
+                            </div>
                         </div>
+                        {typeof childValue === "object" && !isTimestampObj &&
+                            <div className={cls(defaultBorderMixin, "border-l pl-4")}>
+                                <KeyValuePreview value={childValue}/>
+                            </div>
+                        }
                     </div>
-                    {typeof childValue === "object" &&
-                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
-                            <KeyValuePreview value={childValue}/>
-                        </div>
-                    }
-                </div>
-            ))
+                );
+            })
         }
     </div>;
 }

package/src/routes/FireCMSRoute.tsx

@@ -1,7 +1,6 @@
 import { Blocker, useBlocker, useLocation } from "react-router";
-import { EntityEditView } from "../core/EntityEditView";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigationController } from "../hooks";
-import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
     getNavigationEntriesFromPath,
@@ -11,7 +10,11 @@ import {
 } from "../util/navigation_from_path";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { toArray } from "../util/arrays";
-import { EntityCollectionView, NotFoundPage } from "../components";
+import { NotFoundPage } from "../components";
+import { lazyEager } from "../util/lazy_eager";
+
+const EntityEditView = lazyEager<typeof import("../core/EntityEditView")["EntityEditView"]>(() => import("../core/EntityEditView"), "EntityEditView");
+const EntityCollectionView = lazyEager<typeof import("../components/EntityCollectionView/EntityCollectionView")["EntityCollectionView"]>(() => import("../components/EntityCollectionView/EntityCollectionView"), "EntityCollectionView");
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 import { EntityCollection } from "../types";
 
@@ -88,15 +91,17 @@ export function FireCMSRoute() {
             collection = navigation.getCollection(navigationEntries[0].path);
         if (!collection)
             return null;
-        return <EntityCollectionView
-            key={`collection_view_${collection.id ?? collection.path}`}
-            isSubCollection={false}
-            parentCollectionIds={[]}
-            fullPath={collection.path}
-            fullIdPath={collection.id}
-            updateUrl={true}
-            {...collection}
-            Actions={toArray(collection.Actions)} />
+        return <React.Suspense fallback={null}>
+            <EntityCollectionView
+                key={`collection_view_${collection.id ?? collection.path}`}
+                isSubCollection={false}
+                parentCollectionIds={[]}
+                fullPath={collection.path}
+                fullIdPath={collection.id}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)} />
+        </React.Suspense>;
     }
 
     if (isSidePanel) {
@@ -109,15 +114,17 @@ export function FireCMSRoute() {
                 collection = navigation.getCollection(firstEntry.path);
             if (!collection)
                 return null;
-            return <EntityCollectionView
-                key={`collection_view_${collection.id ?? collection.path}`}
-                fullIdPath={collection.id}
-                isSubCollection={false}
-                parentCollectionIds={[]}
-                fullPath={collection.path}
-                updateUrl={true}
-                {...collection}
-                Actions={toArray(collection.Actions)} />;
+            return <React.Suspense fallback={null}>
+                <EntityCollectionView
+                    key={`collection_view_${collection.id ?? collection.path}`}
+                    fullIdPath={collection.id}
+                    isSubCollection={false}
+                    parentCollectionIds={[]}
+                    fullPath={collection.path}
+                    updateUrl={true}
+                    {...collection}
+                    Actions={toArray(collection.Actions)} />
+            </React.Suspense>;
         }
     }
 
@@ -215,39 +222,41 @@ function EntityFullScreenRoute({
     const fullIdPath = isNew ? lastCollectionEntry!.path : lastEntityEntry!.path;
     const collectionPath = navigation.resolveIdsFrom(fullIdPath);
     return <>
-        <EntityEditView
-            key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
-            entityId={isNew ? undefined : entityId}
-            fullIdPath={fullIdPath}
-            collection={collection}
-            layout={"full_screen"}
-            path={collectionPath}
-            copy={isCopy}
-            selectedTab={selectedTab ?? undefined}
-            onValuesModified={(modified) => blocked.current = modified}
-            onSaved={(params) => {
-                const newSelectedTab = params.selectedTab;
-                const newEntityId = params.entityId;
-                if (newSelectedTab) {
-                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
-                } else {
-                    navigate(`${basePath}/${newEntityId}`, { replace: true });
-                }
-            }}
-            onTabChange={(params) => {
-                setSelectedTab(params.selectedTab);
-                if (isNew) {
-                    return;
-                }
-                const newSelectedTab = params.selectedTab;
-                if (newSelectedTab) {
-                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
-                } else {
-                    navigate(`${basePath}/${entityId}`, { replace: true });
-                }
-            }}
-            parentCollectionIds={parentCollectionIds}
-        />
+        <React.Suspense fallback={null}>
+            <EntityEditView
+                key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+                entityId={isNew ? undefined : entityId}
+                fullIdPath={fullIdPath}
+                collection={collection}
+                layout={"full_screen"}
+                path={collectionPath}
+                copy={isCopy}
+                selectedTab={selectedTab ?? undefined}
+                onValuesModified={(modified) => blocked.current = modified}
+                onSaved={(params) => {
+                    const newSelectedTab = params.selectedTab;
+                    const newEntityId = params.entityId;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${newEntityId}`, { replace: true });
+                    }
+                }}
+                onTabChange={(params) => {
+                    setSelectedTab(params.selectedTab);
+                    if (isNew) {
+                        return;
+                    }
+                    const newSelectedTab = params.selectedTab;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${entityId}`, { replace: true });
+                    }
+                }}
+                parentCollectionIds={parentCollectionIds}
+            />
+        </React.Suspense>
 
         <UnsavedChangesDialog
             open={blocker?.state === "blocked"}

package/src/types/collections.ts

@@ -163,6 +163,31 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     subcollections?: EntityCollection<any, any>[];
 
+    /**
+     * You can group subcollections and custom views into dropdown menus
+     * in the entity view tabs. Views listed in a group will be removed
+     * from the top-level tabs and shown under a single dropdown instead.
+     *
+     * @example
+     * ```tsx
+     * const productsCollection = buildCollection({
+     *     id: "products",
+     *     path: "products",
+     *     name: "Products",
+     *     properties: { ... },
+     *     subcollections: [localesCollection, reviewsCollection],
+     *     entityViews: [sampleView],
+     *     viewGroups: [
+     *         {
+     *             name: "Related data",
+     *             views: ["locales", "reviews", "sample_view"]
+     *         }
+     *     ]
+     * });
+     * ```
+     */
+    viewGroups?: ViewGroup[];
+
     /**
      * This interface defines all the callbacks that can be used when an entity
      * is being created, updated or deleted.
@@ -413,6 +438,21 @@ export interface KanbanConfig<M extends Record<string, any> = any> {
     columnProperty: Extract<keyof M, string>;
 }
 
+/**
+ * You can group subcollections and custom views into dropdown menus in the entity view tabs.
+ * @group Collections
+ */
+export interface ViewGroup {
+    /**
+     * Name of the group
+     */
+    name: string;
+    /**
+     * Array of subcollection paths/ids or custom view keys
+     */
+    views: string[];
+}
+
 /**
  * View mode for displaying a collection.
  * @group Collections

package/src/types/customization_controller.tsx

@@ -42,7 +42,8 @@ export type CustomizationController = {
     dateTimeFormat?: string;
 
     /**
-     * Locale of the CMS, currently only affecting dates
+     * Locale of the CMS.
+     * Affects date formatting.
      */
     locale?: Locale;
 

package/src/types/firecms.tsx

@@ -111,7 +111,8 @@ export type FireCMSProps<USER extends User> = {
     dateTimeFormat?: string;
 
     /**
-     * Locale of the CMS, currently only affecting dates
+     * Locale of the CMS.
+     * Affects date formatting.
      */
     locale?: Locale;
 

package/src/types/index.ts

@@ -28,3 +28,4 @@ export * from "./export_import";
 export * from "./modify_collections";
 export * from "./analytics_controller";
 export * from "./customization_controller";
+export * from "./translations";

package/src/types/navigation.ts

@@ -252,7 +252,7 @@ export interface NavigationEntry {
     collection?: EntityCollection;
     view?: CMSView;
     description?: string;
-    group: string;
+    group: string | null;
 }
 
 export type NavigationResult = {
@@ -261,7 +261,7 @@ export type NavigationResult = {
 
     navigationEntries: NavigationEntry[],
 
-    groups: string[],
+    groups: (string | null)[],
 
     onNavigationEntriesUpdate: (entries: NavigationGroupMapping[]) => void;
 };

package/src/types/plugins.tsx

@@ -28,6 +28,14 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
      */
     loading?: boolean;
 
+    /**
+     * Override any FireCMS UI string, or provide translations for additional
+     * locales, specific for this plugin.
+     * Keys can be existing `FireCMSTranslations` keys, or new keys if using
+     * module augmentation.
+     */
+    i18n?: Record<string, Record<string, string>>;
+
     /**
      * You can use this prop to add higher order components to the CMS.
      * The components will be added to the root of the CMS, so any component

package/src/types/properties.ts

@@ -180,6 +180,17 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * @see https://jsonlogic.com/ for JSON Logic syntax
      */
     conditions?: PropertyConditions;
+
+    /**
+     * Set this property to true to provide the UX to explicitly set the value to `null`.
+     * Defaults to `false`.
+     */
+    nullable?: boolean;
+
+    /**
+     * @deprecated Use `nullable` instead.
+     */
+    clearable?: boolean;
 }
 
 /**
@@ -620,11 +631,6 @@ export interface NumberProperty extends BaseProperty<number> {
      * Rules for validating this property
      */
     validation?: NumberPropertyValidationSchema,
-
-    /**
-     * Add an icon to clear the value and set it to `null`. Defaults to `false`
-     */
-    clearable?: boolean;
 }
 
 /**
@@ -735,11 +741,6 @@ export interface StringProperty extends BaseProperty<string> {
      */
     validation?: StringPropertyValidationSchema;
 
-    /**
-     * Add an icon to clear the value and set it to `null`. Defaults to `false`
-     */
-    clearable?: boolean;
-
     /**
      * You can use this property (a string) to behave as a reference to another
      * collection. The stored value is the ID of the entity in the
@@ -1110,6 +1111,7 @@ export type StorageConfig = {
      */
     imageResize?: ImageResize;
 
+
     /**
      * Specific metadata set in your uploaded file.
      * For the default Firebase implementation, the values passed here are of type

package/src/types/storage.ts

@@ -6,7 +6,8 @@ export interface UploadFileProps {
     fileName?: string,
     path?: string,
     metadata?: any,
-    bucket?: string
+    bucket?: string,
+    onProgress?: (progress: number) => void
 }
 
 /**