@firecms/core 3.0.0-canary.279 → 3.0.0-canary.280

package/dist/preview/components/UserPreview.d.ts

@@ -0,0 +1,8 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * Preview component for displaying user information.
+ * This is a simple wrapper around UserDisplay.
+ *
+ * @group Preview components
+ */
+export declare function UserPreview({ value }: PropertyPreviewProps<string>): import("react/jsx-runtime").JSX.Element | null;

package/dist/preview/index.d.ts

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

package/dist/types/firecms.d.ts

@@ -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.
  * You can use the user to decide which collections to show.
@@ -123,6 +124,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>[];
     /**
@@ -134,6 +136,19 @@ export type FireCMSProps<USER extends User> = {
      * The function must return a URL that gets opened when the button is clicked
      */
     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?: {
         /**
          * Component to render when a reference is missing

package/dist/types/firecms_context.d.ts

@@ -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.
  * Some controllers and context included in this context can be accessed
@@ -67,4 +68,19 @@ export type FireCMSContext<USER extends User = User, AuthControllerType extends
      * Callback to send analytics events
      */
     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/dist/types/index.d.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/dist/types/internal_user_management.d.ts

@@ -0,0 +1,20 @@
+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/dist/types/plugins.d.ts

@@ -7,6 +7,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.
  * NOTE: This is a work in progress and the API is not stable yet.
@@ -37,6 +38,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         }>>;
         props?: PROPS;
     };
+    userManagement?: InternalUserManagement;
     homePage?: {
         /**
          * Additional actions to be rendered in the home page, close to the search bar.

package/dist/types/properties.d.ts

@@ -291,6 +291,15 @@ export interface StringProperty extends BaseProperty<string> {
      * indicate that this string refers to a path in your storage provider.
      */
     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/dist/types/property_config.d.ts

@@ -37,4 +37,4 @@ export type PropertyConfig<T extends CMSType = any> = {
      */
     description?: string;
 };
-export type PropertyConfigId = "text_field" | "multiline" | "markdown" | "url" | "email" | "select" | "multi_select" | "number_input" | "number_select" | "multi_number_select" | "file_upload" | "multi_file_upload" | "group" | "key_value" | "reference" | "reference_as_string" | "multi_references" | "switch" | "date_time" | "repeat" | "custom_array" | "block";
+export type PropertyConfigId = "text_field" | "multiline" | "markdown" | "url" | "email" | "user_select" | "select" | "multi_select" | "number_input" | "number_select" | "multi_number_select" | "file_upload" | "multi_file_upload" | "group" | "key_value" | "reference" | "reference_as_string" | "multi_references" | "switch" | "date_time" | "repeat" | "custom_array" | "block";

package/dist/types/user.d.ts

@@ -35,7 +35,7 @@ export type User = {
      */
     readonly isAnonymous: boolean;
     /**
-     *
+     * Custom roles assigned to the user.
      */
     roles?: Role[];
     getIdToken?: (forceRefresh?: boolean) => Promise<string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.279",
+  "version": "3.0.0-canary.280",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.279",
-    "@firecms/formex": "^3.0.0-canary.279",
-    "@firecms/ui": "^3.0.0-canary.279",
+    "@firecms/editor": "^3.0.0-canary.280",
+    "@firecms/formex": "^3.0.0-canary.280",
+    "@firecms/ui": "^3.0.0-canary.280",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "43a93dc4d64d13ff6b146cb8e42d483e36253df3",
+  "gitHead": "4c511808713ad163340dd67cb07f4bbba3d15c56",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -17,6 +17,7 @@ import { VirtualTableSelect } from "../VirtualTable/fields/VirtualTableSelect";
 import { VirtualTableNumberInput } from "../VirtualTable/fields/VirtualTableNumberInput";
 import { VirtualTableSwitch } from "../VirtualTable/fields/VirtualTableSwitch";
 import { VirtualTableDateField } from "../VirtualTable/fields/VirtualTableDateField";
+import { VirtualTableUserSelect } from "../VirtualTable/fields/VirtualTableUserSelect";
 
 import { TableStorageUpload } from "./fields/TableStorageUpload";
 import { TableReferenceField } from "./fields/TableReferenceField";
@@ -332,6 +333,17 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
+                } else if (stringProperty.userSelect) {
+                    innerComponent = <VirtualTableUserSelect name={propertyKey as string}
+                                                             multiple={false}
+                                                             focused={selected}
+                                                             disabled={disabled}
+                                                             small={getPreviewSizeFrom(size) !== "medium"}
+                                                             error={validationError ?? error}
+                                                             internalValue={internalValue as string}
+                                                             updateValue={updateValue}
+                    />;
+                    fullHeight = true;
                 } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}

package/src/components/UserDisplay.tsx

@@ -0,0 +1,54 @@
+import { User } from "../types";
+import { AccountCircleIcon, cls, defaultBorderMixin } from "@firecms/ui";
+
+/**
+ * Component to render a single user with name and email
+ */
+export function UserDisplay({
+                                user,
+                            }: { user: User | null }) {
+    if (!user) {
+        return <span className="text-text-secondary dark:text-text-secondary-dark">Select a user</span>;
+    }
+
+    const avatarSizeClass = "w-6 h-6";
+
+    return (
+        <div className={cls(
+            "inline-flex items-center gap-4 px-2 py-1 rounded-xl",
+            "bg-surface-accent-100 dark:bg-surface-accent-800",
+            "border",
+            defaultBorderMixin
+        )}>
+            {user.photoURL ? (
+                <img
+                    src={user.photoURL}
+                    alt={user.displayName || user.email || "User"}
+                    className={cls(
+                        "rounded-full object-cover",
+                        avatarSizeClass
+                    )}
+                />
+            ) : (
+                <AccountCircleIcon
+                    className={cls(
+                        "text-text-secondary dark:text-text-secondary-dark",
+                        avatarSizeClass
+                    )}
+                />
+            )}
+            <div className="flex flex-col min-w-0">
+                <span className={cls("font-regular truncate", "text-sm")}>
+                    {user.displayName || user.email || "-"}
+                </span>
+                {user.displayName && user.email && (
+                    <span className={cls("text-text-secondary dark:text-text-secondary-dark truncate",
+                        "text-xs"
+                    )}>
+                        {user.email}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableUserSelect.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
+import { useInternalUserManagementController } from "../../../hooks";
+import { UserDisplay } from "../../UserDisplay";
+
+export function VirtualTableUserSelect(props: {
+    name: string;
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | string[] | undefined;
+    updateValue: (newValue: (string | string[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple
+    } = props;
+
+    const { users, getUser } = useInternalUserManagementController();
+
+    const validValue = (Array.isArray(internalValue) && multiple) ||
+        (!Array.isArray(internalValue) && !multiple);
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        if (!updatedValue) {
+            updateValue(null);
+        } else {
+            updateValue(updatedValue);
+        }
+    }, [updateValue]);
+
+    const renderValue = (userId: string) => {
+        const user = getUser(userId);
+        return <UserDisplay user={user}  />;
+    };
+
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                includeClear={false}
+                useChips={false}
+                value={validValue
+                    ? (internalValue as string[])
+                    : ([])}
+                onValueChange={onChange}>
+                {users?.map((user) => (
+                    <MultiSelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay
+                            user={user} />
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+            : <Select
+                inputRef={ref}
+                size={"large"}
+                fullWidth={true}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                value={validValue
+                    ? internalValue as string
+                    : ""}
+                onValueChange={onChange}
+                renderValue={renderValue}>
+                {users?.map((user) => (
+                    <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay
+                            user={user}/>
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}
+

package/src/contexts/InternalUserManagementContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { InternalUserManagement, NavigationController } from "../types";
+
+export const InternalUserManagementContext = React.createContext<InternalUserManagement<any>>({} as InternalUserManagement);

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

@@ -20,6 +20,8 @@ export * from "./useClipboard";
 export * from "./useLargeLayout";
 export * from "./useCollapsedGroups";
 
+export * from "./useInternalUserManagementController";
+
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
 export * from "./useCustomizationController";

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);