@firecms/core 3.0.0-alpha.81 → 3.0.0-alpha.83

package/src/hooks/useFireCMSContext.tsx

@@ -1,4 +1,3 @@
-import { createContext, useContext } from "react";
 import { AuthController, FireCMSContext, User } from "../types";
 import { useAuthController } from "./useAuthController";
 import { useSideDialogsController } from "./useSideDialogsController";
@@ -9,8 +8,8 @@ import { useStorageSource } from "./useStorageSource";
 import { useSnackbarController } from "./useSnackbarController";
 import { useUserConfigurationPersistence } from "./useUserConfigurationPersistence";
 import { useDialogsController } from "./useDialogsController";
-
-export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({});
+import { useCustomizationController } from "./useCustomizationController";
+import { useAnalyticsController } from "./useAnalyticsController";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -23,7 +22,6 @@ export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({})
  */
 export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
 
-    const partialContext = useContext(FireCMSContextInstance) as FireCMSContext<UserType, AuthControllerType>;
     const authController = useAuthController<UserType, AuthControllerType>();
     const sideDialogsController = useSideDialogsController();
     const sideEntityController = useSideEntityController();
@@ -33,9 +31,10 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const snackbarController = useSnackbarController();
     const userConfigPersistence = useUserConfigurationPersistence();
     const dialogsController = useDialogsController();
+    const customizationController = useCustomizationController();
+    const analyticsController = useAnalyticsController();
 
     return {
-        ...partialContext,
         authController,
         sideDialogsController,
         sideEntityController,
@@ -44,7 +43,9 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
         storageSource,
         snackbarController,
         userConfigPersistence,
-        dialogsController
-    }
+        dialogsController,
+        customizationController,
+        analyticsController
+    };
 
 };

package/src/internal/EntityView.tsx

@@ -22,6 +22,7 @@ import {
 import {
     saveEntityWithCallbacks,
     useAuthController,
+    useCustomizationController,
     useDataSource,
     useEntityFetch,
     useFireCMSContext,
@@ -98,6 +99,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const snackbarController = useSnackbarController();
+    const customizationController = useCustomizationController();
     const context = useFireCMSContext();
     const authController = useAuthController<UserType>();
 
@@ -297,7 +299,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
     };
 
     const resolvedEntityViews = customViews ? customViews
-            .map(e => resolveEntityView(e, context.entityViews))
+            .map(e => resolveEntityView(e, customizationController.entityViews))
             .filter(Boolean) as EntityCustomView[]
         : [];
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
@@ -411,7 +413,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
     }
 
     function buildForm() {
-        const plugins = context.plugins;
+        const plugins = customizationController.plugins;
         let form = <EntityForm
             status={status}
             path={path}

package/src/internal/useBuildCustomizationController.tsx

@@ -0,0 +1,5 @@
+import { CustomizationController } from "../types/customization_controller";
+
+export function useBuildCustomizationController(controller: CustomizationController): CustomizationController {
+    return controller;
+}

package/src/internal/useBuildSideDialogsController.tsx

@@ -4,7 +4,6 @@ import { SideDialogPanelProps, SideDialogsController } from "../types";
 import equal from "react-fast-compare"
 
 export function useBuildSideDialogsController(): SideDialogsController {
-    console.log("useBuildSideDialogsController");
 
     const location = useLocation();
     const navigate = useNavigate();

package/src/preview/PropertyPreview.tsx

@@ -13,7 +13,7 @@ import {
 import { resolveProperty } from "../util";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
-import { useFireCMSContext } from "../hooks";
+import { useCustomizationController } from "../hooks";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -37,7 +37,8 @@ import { ErrorView } from "../components";
  */
 export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
     let content: React.ReactNode | any;
     const {
         property: inputProperty,
@@ -53,7 +54,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         propertyKey,
         propertyOrBuilder: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (value === undefined || property === null) {
@@ -210,7 +211,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         content = JSON.stringify(value);
     }
 
-    return content === undefined || content === null ? <EmptyValue/> : content;
+    return content === undefined || content === null || (Array.isArray(content) && content.length === 0)
+        ? <EmptyValue/>
+        : content;
 }, equal);
 
 function buildWrongValueType(name: string | undefined, dataType: string, value: any) {

package/src/preview/components/DatePreview.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import { format } from "date-fns";
 import * as locales from "date-fns/locale";
-import { FireCMSContext } from "../../types";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { defaultDateFormat } from "../../util";
 
 /**
@@ -13,10 +12,10 @@ export function DatePreview({
                                 date
                             }: { date: Date }): React.ReactElement {
 
-    const appConfig: FireCMSContext<any> | undefined = useFireCMSContext();
+    const customizationController = useCustomizationController();
     // @ts-ignore
-    const dateUtilsLocale = appConfig?.locale ? locales[appConfig?.locale] : undefined;
-    const dateFormat: string = appConfig?.dateTimeFormat ?? defaultDateFormat;
+    const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale] : undefined;
+    const dateFormat: string = customizationController?.dateTimeFormat ?? defaultDateFormat;
     const formattedDate = date ? format(date, dateFormat, { locale: dateUtilsLocale }) : "";
 
     return (

package/src/preview/components/ReferencePreview.tsx

@@ -4,12 +4,18 @@ import { useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
 
 import { getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../util";
-import { useEntityFetch, useFireCMSContext, useNavigationController, useSideEntityController } from "../../hooks";
+import {
+    useCustomizationController,
+    useEntityFetch,
+    useNavigationController,
+    useSideEntityController
+} from "../../hooks";
 import { PropertyPreview } from "../PropertyPreview";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
 import { cn, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { ErrorView } from "../../components";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -58,13 +64,14 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
                                                                      allowEntityNavigation = true
                                                                  }: ReferencePreviewProps) {
 
-    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
     const navigationController = useNavigationController();
 
     const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
     if (!collection) {
-        if (context.components?.missingReference) {
-            return <context.components.missingReference path={reference.path}/>;
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={reference.path}/>;
         } else {
             throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
         }
@@ -85,7 +92,9 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
     collection: EntityCollection<M>
 }) {
 
-    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
+    const analyticsController = useAnalyticsController();
     const sideEntityController = useSideEntityController();
 
     const {
@@ -109,10 +118,10 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
         collection,
         path: reference.path,
         values: usedEntity?.values,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     }), [collection]);
 
-    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, context.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     let body: React.ReactNode;
@@ -179,7 +188,7 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
                                 size={"small"}
                                 onClick={(e) => {
                                     e.stopPropagation();
-                                    context.onAnalyticsEvent?.("entity_click_from_reference", {
+                                    analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
                                         path: usedEntity.path,
                                         entityId: usedEntity.id
                                     });

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorBoundary } from "../../components";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { resolveArrayProperty } from "../../util";
@@ -15,13 +15,13 @@ export function ArrayOfMapsPreview({
                                        size,
                                        // entity
                                    }: PropertyPreviewProps<Record<string, any>[]>) {
-    const fireCMSContext = useFireCMSContext();
 
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,6 +1,6 @@
 import { ResolvedReferenceProperty } from "../../types";
 import { resolveArrayProperty } from "../../util";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -14,12 +14,12 @@ export function ArrayOfReferencesPreview({
                                              size
                                          }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
 
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "../../components";
@@ -19,12 +19,12 @@ export function ArrayOfStorageComponentsPreview({
                                                     size
                                                 }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -3,7 +3,7 @@ import { ResolvedStringProperty } from "../../types";
 
 import { resolveArrayProperty } from "../../util";
 import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -17,12 +17,12 @@ export function ArrayOfStringsPreview({
                                           size
                                       }: PropertyPreviewProps<string[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {
@@ -45,7 +45,7 @@ export function ArrayOfStringsPreview({
                             <StringPropertyPreview propertyKey={propertyKey}
                                                    property={stringProperty}
                                                    value={v}
-                                                   // entity={entity}
+                                // entity={entity}
                                                    size={size}/>
                         </ErrorBoundary>
                     </div>

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cn, defaultBorderMixin } from "@firecms/ui";
@@ -19,12 +19,12 @@ export function ArrayOneOfPreview({
                                       // entity
                                   }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (property?.dataType !== "array")

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cn, defaultBorderMixin } from "@firecms/ui";
@@ -19,12 +19,12 @@ export function ArrayPropertyPreview({
                                          size
                                      }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (!property.of) {

package/src/types/analytics_controller.tsx

@@ -0,0 +1,10 @@
+import { CMSAnalyticsEvent } from "./analytics";
+
+export type AnalyticsController = {
+
+    /**
+     * Callback used to get analytics events from the CMS
+     */
+    onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
+
+}

package/src/types/collections.ts

@@ -363,6 +363,9 @@ export type WhereFilterOp =
 
 /**
  * Used to define filters applied in collections
+ *
+ * e.g. `{ age: [">=", 18] }`
+ *
  * @group Models
  */
 export type FilterValues<Key extends string> =

package/src/types/customization_controller.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { EntityLinkBuilder } from "./entity_link_builder";
+import { FireCMSPlugin } from "./plugins";
+import { EntityCustomView } from "./collections";
+import { Locale } from "./locales";
+import { PropertyConfig } from "./property_config";
+
+export type CustomizationController = {
+
+    /**
+     * Builder for generating utility links for entities
+     */
+    entityLinkBuilder?: EntityLinkBuilder;
+
+    /**
+     * Use plugins to modify the behaviour of the CMS.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+
+    /**
+     * List of additional custom views for entities.
+     * You can use the key to reference the custom view in
+     * the `entityViews` prop of a collection.
+     *
+     * You can also define an entity view from the UI.
+     */
+
+    entityViews?: EntityCustomView[];
+
+    /**
+     * Format of the dates in the CMS.
+     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
+     */
+    dateTimeFormat?: string;
+
+    /**
+     * Locale of the CMS, currently only affecting dates
+     */
+    locale?: Locale;
+
+    /**
+     * Record of custom form fields to be used in the CMS.
+     * You can use the key to reference the custom field in
+     * the `propertyConfig` prop of a property in a collection.
+     */
+    propertyConfigs: Record<string, PropertyConfig>;
+
+    components?: {
+
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string,
+        }>;
+
+    };
+}

package/src/types/entity_callbacks.ts

@@ -30,7 +30,7 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      * Callback used when saving fails
      * @param entitySaveProps
      */
-    onSaveFailure?(entitySaveProps: EntityOnSaveProps<M, UserType>)
+    onSaveFailure?(entitySaveProps: EntityOnSaveFailureProps<M, UserType>)
         : Promise<void> | void;
 
     /**
@@ -39,7 +39,7 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      * error snackbar gets displayed.
      * @param entitySaveProps
      */
-    onPreSave?(entitySaveProps: EntityOnSaveProps<M, UserType>)
+    onPreSave?(entitySaveProps: EntityOnPreSaveProps<M, UserType>)
         : Promise<Partial<EntityValues<M>>> | Partial<EntityValues<M>>;
 
     /**
@@ -96,6 +96,25 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
     context: FireCMSContext<UserType>;
 }
 
+/**
+ * Parameters passed to hooks before an entity is saved
+ * @group Models
+ */
+export type EntityOnPreSaveProps<M extends Record<string, any> = any, UserType extends User = User> =
+    Omit<EntityOnSaveProps<M, UserType>, "entityId">
+    & {
+    entityId?: string;
+}
+/**
+ * Parameters passed to hooks before an entity is saved
+ * @group Models
+ */
+export type EntityOnSaveFailureProps<M extends Record<string, any> = any, UserType extends User = User> =
+    Omit<EntityOnSaveProps<M, UserType>, "entityId">
+    & {
+    entityId?: string;
+}
+
 /**
  * Parameters passed to hooks when an entity is saved
  * @group Models
@@ -121,7 +140,7 @@ export interface EntityOnSaveProps<M extends Record<string, any> = any, UserType
     /**
      * ID of the entity
      */
-    entityId?: string;
+    entityId: string;
 
     /**
      * Values being saved

package/src/types/firecms_context.tsx

@@ -1,19 +1,15 @@
-import { Locale } from "./locales";
 import { DataSource } from "./datasource";
 import { StorageSource } from "./storage";
 import { NavigationController } from "./navigation";
 import { SideEntityController } from "./side_entity_controller";
 import { AuthController } from "./auth";
-import { EntityLinkBuilder } from "./entity_link_builder";
 import { User } from "./user";
 import { SnackbarController } from "../hooks";
 import { UserConfigurationPersistence } from "./local_config_persistence";
 import { SideDialogsController } from "./side_dialogs_controller";
-import { FireCMSPlugin } from "./plugins";
-import { CMSAnalyticsEvent } from "./analytics";
-import { PropertyConfig } from "./property_config";
-import { EntityCustomView } from "./collections";
 import { DialogsController } from "./dialogs_controller";
+import { CustomizationController } from "./customization_controller";
+import { AnalyticsController } from "./analytics_controller";
 
 /**
  * Context that includes the internal controllers and contexts used by the app.
@@ -65,9 +61,9 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     authController: AuthControllerType;
 
     /**
-     * Builder for generating utility links for entities
+     * This controller holds the customization options for the CMS.
      */
-    entityLinkBuilder?: EntityLinkBuilder;
+    customizationController: CustomizationController;
 
     /**
      * Use this controller to display snackbars
@@ -80,49 +76,8 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     userConfigPersistence?: UserConfigurationPersistence;
 
     /**
-     * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * Callback to send analytics events
      */
-    plugins?: FireCMSPlugin[];
+    analyticsController?: AnalyticsController;
 
-    /**
-     * Callback used to get analytics events from the CMS
-     */
-    onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
-
-    /**
-     * Record of custom form fields to be used in the CMS.
-     * You can use the key to reference the custom field in
-     * the `propertyConfig` prop of a property in a collection.
-     */
-    propertyConfigs: Record<string, PropertyConfig>;
-
-    /**
-     * List of additional custom views for entities.
-     * You can use the key to reference the custom view in
-     * the `entityViews` prop of a collection.
-     *
-     * You can also define an entity view from the UI.
-     */
-    entityViews?: EntityCustomView[];
-
-    /**
-     * Format of the dates in the CMS.
-     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
-     */
-    dateTimeFormat?: string;
-
-    /**
-     * Locale of the CMS, currently only affecting dates
-     */
-    locale?: Locale;
-
-    components?: {
-
-        /**
-         * Component to render when a reference is missing
-         */
-        missingReference?: React.ComponentType<{ path: string }>;
-
-    }
 };

package/src/types/index.ts

@@ -24,3 +24,5 @@ export * from "./firecms";
 export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";
+export * from "./analytics_controller";
+export * from "./customization_controller";