@firecms/core 3.0.0-rc.1 → 3.0.0-rc.2

package/src/core/FireCMS.tsx

@@ -20,6 +20,7 @@ import { CustomizationControllerContext } from "../contexts/CustomizationControl
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
+import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
 
 /**
  * If you are using independent components of the CMS
@@ -30,7 +31,6 @@ import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
  *
  * You only need to use this component if you are building a custom app.
  *
-
  * @group Core
  */
 export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
@@ -44,21 +44,28 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins: pluginsProp,
+        plugins: _pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
         entityActions,
         components,
         navigationController,
-        apiKey
+        apiKey,
+        userManagement: _userManagement
     } = props;
 
-    if (pluginsProp) {
+    if (_pluginsProp) {
         console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
 
-    const plugins = navigationController.plugins ?? pluginsProp;
+    const plugins = navigationController.plugins ?? _pluginsProp;
+    const userManagement = plugins?.find(p => p.userManagement)?.userManagement
+        ?? _userManagement
+        ?? {
+            users: [],
+            getUser: (uid: string) => null
+        };
 
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
@@ -156,14 +163,16 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
                                         value={sideEntityController}>
                                         <NavigationContext.Provider
                                             value={navigationController}>
-                                            <DialogsProvider>
-                                                <BreadcrumbsProvider>
-                                                    <FireCMSInternal
-                                                        loading={loading}>
-                                                        {children}
-                                                    </FireCMSInternal>
-                                                </BreadcrumbsProvider>
-                                            </DialogsProvider>
+                                            <InternalUserManagementContext.Provider value={userManagement}>
+                                                <DialogsProvider>
+                                                    <BreadcrumbsProvider>
+                                                        <FireCMSInternal
+                                                            loading={loading}>
+                                                            {children}
+                                                        </FireCMSInternal>
+                                                    </BreadcrumbsProvider>
+                                                </DialogsProvider>
+                                            </InternalUserManagementContext.Provider>
                                         </NavigationContext.Provider>
                                     </SideEntityControllerContext.Provider>
                                 </SideDialogsControllerContext.Provider>

package/src/core/field_configs.tsx

@@ -32,14 +32,16 @@ import {
     ListAltIcon,
     ListIcon,
     MailIcon,
-    NumbersIcon,
+    NumbersIcon, PersonIcon,
     RepeatIcon,
     ScheduleIcon,
     ShortTextIcon,
     SubjectIcon,
     UploadFileIcon,
+    VerifiedUserIcon,
     ViewStreamIcon
 } from "@firecms/ui";
+import { UserSelectFieldBinding } from "../form/field_bindings/UserSelectFieldBinding";
 
 export function isDefaultFieldConfigId(id: string) {
     return Object.keys(DEFAULT_FIELD_CONFIGS).includes(id);
@@ -143,6 +145,16 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: MultiSelectFieldBinding
         }
     },
+    user_select: {
+        key: "user_select",
+        name: "User select",
+        description: "Select a user from the user management system. Store the user ID.",
+        Icon: PersonIcon,
+        property: {
+            dataType: "string",
+            Field: UserSelectFieldBinding
+        }
+    },
     number_input: {
         key: "number_input",
         name: "Number input",
@@ -360,6 +372,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "email";
         } else if (property.enumValues) {
             return "select";
+        } else if (property.userSelect) {
+            return "user_select";
         } else if (property.reference) {
             return "reference_as_string";
         } else {

package/src/form/PropertyFieldBinding.tsx

@@ -93,6 +93,10 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
+    if(propertyKey === "created_by"){
+        console.log("Rendering field for created_by", {propertyKey, property, context});
+    }
+
     return (
         <Field
             key={propertyKey}

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+
+import { FieldProps, User } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { getIconForProperty } from "../../util";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
+import { PropertyIdCopyTooltip } from "../../components";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+
+type UserSelectProps = FieldProps<string>;
+
+/**
+ * Field binding for selecting a user from the internal user management system.
+ * Renders a select dropdown with user information including name and email.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function UserSelectFieldBinding({
+                                           propertyKey,
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           disabled,
+                                           autoFocus,
+                                           touched,
+                                           property,
+                                           includeDescription,
+                                           size = "large"
+                                       }: UserSelectProps) {
+
+    const { users, getUser } = useInternalUserManagementController();
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    return (
+        <>
+            <Select
+                value={value !== undefined && value != null ? value.toString() : ""}
+                disabled={disabled}
+                size={size}
+                fullWidth={true}
+                position="item-aligned"
+                inputClassName={cls("w-full")}
+                label={
+                    <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                        <LabelWithIcon
+                            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 my-0"}
+                        />
+                    </PropertyIdCopyTooltip>}
+                endAdornment={
+                    property.clearable && !disabled && value && <IconButton
+                        size="small"
+                        onClick={handleClearClick}>
+                        <CloseIcon size={"small"}/>
+                    </IconButton>
+                }
+                onValueChange={(updatedValue: string) => {
+                    const newValue = updatedValue || null;
+                    return setValue(newValue);
+                }}
+                renderValue={(userId: string) => {
+                    const user = getUser(userId);
+                    return <UserDisplay user={user} />;
+                }}
+            >
+                {users && users.map((user) => {
+                    return <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay user={user}  />
+                    </SelectItem>
+                })}
+            </Select>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/hooks/index.tsx

@@ -18,6 +18,9 @@ export * from "./useSnackbarController";
 export * from "./useModeController";
 export * from "./useClipboard";
 export * from "./useLargeLayout";
+export * from "./useCollapsedGroups";
+
+export * from "./useInternalUserManagementController";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";

package/src/hooks/useBrowserTitleAndIcon.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-const fireCMSLogo = "data:image/png;base64,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";
+const fireCMSLogo = "data:image/png;base64,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";
 
 /**
  * Internal hook to handle the browser title and icon

package/src/hooks/useCollapsedGroups.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Custom hook for managing collapsed/expanded state of navigation groups
+ * with localStorage persistence. Automatically cleans up stale group entries
+ * when groups are removed from the navigation.
+ */
+export function useCollapsedGroups(groupNames: string[]) {
+    // Load collapsed groups from localStorage on mount
+    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
+        try {
+            const stored = localStorage.getItem('firecms-collapsed-groups');
+            return stored ? JSON.parse(stored) : {};
+        } catch {
+            return {};
+        }
+    });
+
+    // Save to localStorage whenever collapsedGroups changes
+    useEffect(() => {
+        try {
+            localStorage.setItem('firecms-collapsed-groups', JSON.stringify(collapsedGroups));
+        } catch {
+            // Silently fail if localStorage is not available
+        }
+    }, [collapsedGroups]);
+
+    // Clean up collapsed groups state when groups change - remove entries for groups that no longer exist
+    useEffect(() => {
+        // Only clean up if we have actual groups loaded (avoid cleaning up during initial load)
+        if (groupNames.length === 0) return;
+
+        const currentGroupNames = new Set(groupNames);
+
+        setCollapsedGroups(prev => {
+            const cleaned = Object.fromEntries(
+                Object.entries(prev).filter(([groupName]) => currentGroupNames.has(groupName))
+            );
+
+            // Only update if something actually changed
+            const prevKeys = Object.keys(prev);
+            const cleanedKeys = Object.keys(cleaned);
+
+            if (prevKeys.length === cleanedKeys.length && prevKeys.every(key => cleanedKeys.includes(key))) {
+                return prev;
+            }
+
+            return cleaned;
+        });
+    }, [groupNames]);
+
+    const isGroupCollapsed = useCallback((name: string) => {
+        return !!collapsedGroups[name];
+    }, [collapsedGroups]);
+
+    const toggleGroupCollapsed = useCallback((name: string) => {
+        setCollapsedGroups(prev => ({ ...prev, [name]: !prev[name] }));
+    }, []);
+
+    return {
+        isGroupCollapsed,
+        toggleGroupCollapsed
+    };
+}

package/src/hooks/useFireCMSContext.tsx

@@ -11,6 +11,7 @@ import { useDialogsController } from "./useDialogsController";
 import { useCustomizationController } from "./useCustomizationController";
 import { useAnalyticsController } from "./useAnalyticsController";
 import React, { useEffect } from "react";
+import { useInternalUserManagementController } from "./useInternalUserManagementController";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -34,6 +35,7 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
     const dialogsController = useDialogsController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
+    const userManagement = useInternalUserManagementController<USER>();
 
     const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
@@ -46,7 +48,8 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
         userConfigPersistence,
         dialogsController,
         customizationController,
-        analyticsController
+        analyticsController,
+        userManagement
     });
 
     useEffect(() => {
@@ -61,7 +64,8 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
             userConfigPersistence,
             dialogsController,
             customizationController,
-            analyticsController
+            analyticsController,
+            userManagement
         };
     }, [authController, dialogsController, navigation, sideDialogsController]);
 

package/src/hooks/useInternalUserManagementController.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { InternalUserManagement, NavigationController, User } from "../types";
+import { NavigationContext } from "../contexts/NavigationContext";
+import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+
+/**
+ * Use this hook to get the internal user management of the app.
+ * Note that this is different from the user management plugin controller.
+ * This controller will be eventually replaced by the one provided
+ * by the user management plugin.
+ *
+ * Use at your own risk!
+ *
+ * @group Hooks and utilities
+ */
+export const useInternalUserManagementController = <USER extends User = User>(): InternalUserManagement<USER> => useContext(InternalUserManagementContext);

package/src/preview/PropertyPreview.tsx

@@ -31,6 +31,7 @@ import { DatePreview } from "./components/DatePreview";
 import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
 import { ErrorView } from "../components";
+import { UserPreview } from "./components/UserPreview";
 
 /**
  * @group Preview components
@@ -97,6 +98,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              previewType={stringProperty.url}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
+            } else if (stringProperty.userSelect) {
+                content = <UserPreview
+                    value={value}
+                    property={stringProperty}
+                    propertyKey={propertyKey}
+                    size={props.size}
+                />;
             } else if (stringProperty.reference) {
                 if (typeof stringProperty.reference.path === "string") {
                     content = <ReferencePreview

package/src/preview/components/ReferencePreview.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference } from "../../types";
 import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Skeleton } from "@firecms/ui";
-import { ErrorView } from "../../components";
+import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
@@ -32,7 +32,9 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
                        tooltip={JSON.stringify(reference)}/>
         </EntityPreviewContainer>;
     }
-    return <ReferencePreviewInternal {...props} />;
+    return <ErrorBoundary>
+        <ReferencePreviewInternal {...props} />
+    </ErrorBoundary>;
 };
 
 function ReferencePreviewInternal({

package/src/preview/components/UserPreview.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+import { EmptyValue } from "./EmptyValue";
+import { Typography } from "@firecms/ui";
+
+/**
+ * Preview component for displaying user information.
+ * This is a simple wrapper around UserDisplay.
+ *
+ * @group Preview components
+ */
+export function UserPreview({ value }: PropertyPreviewProps<string>) {
+    const { getUser } = useInternalUserManagementController();
+
+    if (!value) {
+        return <EmptyValue/>;
+    }
+
+    const user = getUser(value);
+    if (!user) {
+        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+    }
+
+    return <UserDisplay user={user}/>;
+}

package/src/preview/index.ts

@@ -25,3 +25,4 @@ export * from "./components/EnumValuesChip";
 export * from "./components/EmptyValue";
 export * from "./components/ImagePreview";
 export * from "./components/ReferencePreview";
+export * from "./components/UserPreview";

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -42,7 +42,7 @@ export function ArrayPropertyPreview({
     const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
-        <div className="flex flex-col gap-2">
+        <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
                         const of: ResolvedProperty = property.resolvedProperties[index] ??

package/src/types/collections.ts

@@ -69,6 +69,8 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * https://fonts.google.com/icons
      * e.g. 'account_tree' or 'person'.
      * Find all the icons in https://firecms.co/docs/icons
+     * You can also pass a React node if you want to render a custom icon.
+     * If not specified, a default icon will be used.
      */
     icon?: string | React.ReactNode;
 

package/src/types/entities.ts

@@ -50,9 +50,15 @@ export class EntityReference {
      */
     readonly path: string;
 
-    constructor(id: string, path: string) {
+    /**
+     * Optional database ID where the entity is stored (if multiple databases are used)
+     */
+    readonly databaseId?: string;
+
+    constructor(id: string, path: string, databaseId?: string) {
         this.id = id;
         this.path = path;
+        this.databaseId = databaseId;
     }
 
     get pathWithId() {

package/src/types/firecms.tsx

@@ -13,6 +13,7 @@ import { UserConfigurationPersistence } from "./local_config_persistence";
 import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
 import { EntityAction } from "./entity_actions";
+import { InternalUserManagement } from "./internal_user_management";
 
 /**
  * Use this callback to build entity collections dynamically.
@@ -139,6 +140,7 @@ export type FireCMSProps<USER extends User> = {
      * Use plugins to modify the behaviour of the CMS.
      * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
      * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
+     * @deprecated
      */
     plugins?: FireCMSPlugin<any, any, any>[];
 
@@ -153,6 +155,20 @@ export type FireCMSProps<USER extends User> = {
      */
     entityLinkBuilder?: EntityLinkBuilder;
 
+    /**
+     * You can use this props to provide your own user management implementation.
+     * Note that this will not affect the UI, but it will be used to show user information
+     * in various places of the CMS, for example, to show who created or modified an entity,
+     * or to assign ownership of an entity.
+     *
+     * You can also use this data to be retrieved in your custom properties,
+     * for example, to show a list of users in a dropdown.
+     *
+     * If you are using the FireCMS user management plugin, this
+     * prop will be implemented automatically.
+     */
+    userManagement?: InternalUserManagement
+
     components?: {
 
         /**

package/src/types/firecms_context.tsx

@@ -10,6 +10,7 @@ import { SideDialogsController } from "./side_dialogs_controller";
 import { DialogsController } from "./dialogs_controller";
 import { CustomizationController } from "./customization_controller";
 import { AnalyticsController } from "./analytics_controller";
+import { InternalUserManagement } from "./internal_user_management";
 
 /**
  * Context that includes the internal controllers and contexts used by the app.
@@ -80,4 +81,20 @@ export type FireCMSContext<USER extends User = User, AuthControllerType extends
      */
     analyticsController?: AnalyticsController;
 
+    /**
+     * This section is used to manage users in the CMS.
+     * It is used to show user information in various places of the CMS,
+     * for example, to show who created or modified an entity,
+     * or to assign ownership of an entity.
+     *
+     * In the base CMS, this information is not used for access control.
+     * You can pass your own implementation of this section, to populate
+     * the dropdown of users when assigning ownership of an entity,
+     * or to show more information about the user.
+     *
+     * If you are using the FireCMS user management plugin, this
+     * section will be implemented automatically.
+     */
+    userManagement: InternalUserManagement<USER>
+
 };

package/src/types/index.ts

@@ -13,6 +13,7 @@ export * from "./fields";
 export * from "./property_config";
 export * from "./datasource";
 export * from "./entity_link_builder";
+export * from "./internal_user_management";
 export * from "./side_entity_controller";
 export * from "./side_dialogs_controller";
 export * from "./firecms_context";

package/src/types/internal_user_management.ts

@@ -0,0 +1,24 @@
+import { User } from "./user";
+
+export type InternalUserManagement<USER extends User = User> = {
+
+    /**
+     * List of users to be managed by the CMS.
+     */
+    users: USER[];
+
+    /**
+     * Function to get a user by its uid. This is used to show
+     * user information when assigning ownership of an entity.
+     *
+     * You can pass your own implementation if you want to show
+     * more information about the user.
+     *
+     * If you are using the FireCMS user management plugin, this
+     * function will be implemented automatically.
+     *
+     * @param uid
+     */
+    getUser: (uid: string) => USER | null;
+
+}

package/src/types/plugins.tsx

@@ -8,6 +8,7 @@ import { CMSType, Property } from "./properties";
 import { EntityStatus } from "./entities";
 import { ResolvedProperty } from "./resolved_entities";
 import { NavigationGroupMapping } from "./navigation";
+import { InternalUserManagement } from "./internal_user_management";
 
 /**
  * Interface used to define plugins for FireCMS.
@@ -43,6 +44,8 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         props?: PROPS;
     };
 
+    userManagement?: InternalUserManagement
+
     homePage?: {
 
         /**

package/src/types/properties.ts

@@ -388,6 +388,16 @@ export interface StringProperty extends BaseProperty<string> {
      */
     storage?: StorageConfig;
 
+    /**
+     * This property is used to indicate that the string is a user ID, and
+     * it will be rendered as a user picker.
+     * Note that the user ID needs to be the one used in your authentication
+     * provider, e.g. Firebase Auth.
+     * You can also use a property builder to specify the user path dynamically
+     * based on other values of the entity.
+     */
+    userSelect?: boolean;
+
     /**
      * If the value of this property is a URL, you can set this flag to true
      * to add a link, or one of the supported media types to render a preview

package/src/types/property_config.tsx

@@ -52,6 +52,7 @@ export type PropertyConfigId =
     "markdown" |
     "url" |
     "email" |
+    "user_select" |
     "select" |
     "multi_select" |
     "number_input" |

package/src/types/user.ts

@@ -37,7 +37,7 @@ export type User = {
     readonly isAnonymous: boolean;
 
     /**
-     *
+     * Custom roles assigned to the user.
      */
     roles?: Role[];
 

package/src/util/entities.ts

@@ -142,7 +142,7 @@ export function sanitizeData<M extends Record<string, any>>
 }
 
 export function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference {
-    return new EntityReference(entity.id, entity.path);
+    return new EntityReference(entity.id, entity.path, entity.databaseId);
 }
 
 export function traverseValuesProperties<M extends Record<string, any>>(