@firecms/core 3.2.0 → 3.3.0-canary.451aa49

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

package/src/types/translations.ts

@@ -467,6 +467,8 @@ export interface FireCMSTranslations {
     cms_users: string;
     roles_menu: string;
     project_settings: string;
+    firestore_explorer: string;
+    explore_your_firestore_data: string;
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
     build_admin_panel_in_minutes: string;
@@ -722,4 +724,29 @@ export interface FireCMSTranslations {
     settings_appcheck_refresh_note: string;
     settings_appcheck_updated: string;
     settings_appcheck_error: string;
+
+    // --- Permission Error View ---
+    missing_firestore_security_rules: string;
+    firecms_cloud_requires_security_rule: string;
+    cannot_be_accessed_without_it: string;
+    required_security_rule: string;
+    fix_automatically: string;
+    open_firebase_rules: string;
+    security_rules_updated_successfully: string;
+    sec_rules_fixing: string;
+    sec_rules_fixed: string;
+
+    // ─── GCP Marketplace ─────────────────────────────────────────
+    marketplace_managed_by_gcp: string;
+    marketplace_billing_note: string;
+    marketplace_manage_in_gcp_console: string;
+    marketplace_plan_changes_note: string;
+    marketplace_welcome_title: string;
+    marketplace_welcome_subtitle: string;
+    marketplace_select_or_create_project: string;
+    marketplace_link_project: string;
+    marketplace_linking: string;
+    marketplace_link_success: string;
+    marketplace_link_error: string;
+    marketplace_no_account_id: string;
 }

package/src/util/index.ts

@@ -25,3 +25,4 @@ export * from "./useTraceUpdate";
 export * from "./storage";
 export * from "./callbacks";
 export * from "./conditions";
+export * from "./lazy_eager";

package/src/util/lazy_eager.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+/**
+ * Returns a React.lazy component that is also preloaded immediately using
+ * requestIdleCallback or setTimeout.
+ * This ensures that chunks are split, but fetched in the background before they are actually needed.
+ */
+export function lazyEager<T extends React.ComponentType<any>>(
+    factory: () => Promise<any>,
+    exportName: string = "default"
+): React.LazyExoticComponent<T> {
+    let promise: Promise<any> | null = null;
+
+    const load = () => {
+        if (!promise) {
+            promise = factory().then((module) => {
+                const component = module[exportName] || module.default || module;
+                return { default: component };
+            });
+        }
+        return promise;
+    };
+
+    if (typeof window !== "undefined") {
+        if ("requestIdleCallback" in window) {
+            (window as any).requestIdleCallback(load);
+        } else {
+            setTimeout(load, 500);
+        }
+    }
+
+    return React.lazy(load);
+}

package/src/util/objects.ts

@@ -279,3 +279,18 @@ export function removePropsIfExisting(source: any, comparison: any) {
 
     return res;
 }
+
+export function jsonStringifyReplacer(key: string, value: any) {
+    if (value && typeof value === "object") {
+        if (value instanceof Date) {
+            return value.toISOString();
+        }
+        if ("_seconds" in value && "_nanoseconds" in value && typeof value._seconds === "number" && typeof value._nanoseconds === "number") {
+            return new Date(value._seconds * 1000 + value._nanoseconds / 1000000).toISOString();
+        }
+        if ("seconds" in value && "nanoseconds" in value && typeof value.seconds === "number" && typeof value.nanoseconds === "number") {
+            return new Date(value.seconds * 1000 + value.nanoseconds / 1000000).toISOString();
+        }
+    }
+    return value;
+}