@firecms/core 3.0.0-canary.6 → 3.0.0-canary.60

package/src/core/FireCMS.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
+import { useCustomizationController, useFireCMSContext } from "../hooks";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -12,11 +12,9 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { useLocaleConfig } from "../internal/useLocaleConfig";
-import { CenteredView } from "@firecms/ui";
+import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
-import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
@@ -35,7 +33,6 @@ import { useProjectLog } from "../hooks/useProjectLog";
  */
 export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
 
-    const modeController = useModeController();
     const {
         children,
         entityLinkBuilder,
@@ -71,7 +68,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const customizationController = useBuildCustomizationController({
+    const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,
         entityLinkBuilder,
@@ -79,13 +76,13 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    });
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
-    useProjectLog(authController);
+    const accessResponse = useProjectLog(authController, plugins);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -107,40 +104,54 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         );
     }
 
+    if (accessResponse?.blocked) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true}>
+                <Typography variant={"h4"}>
+                    Access blocked
+                </Typography>
+                <Typography>
+                    This app has been blocked. Please reach out at <a
+                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                </Typography>
+                {accessResponse?.message &&
+                    <Typography>Response from the server: {accessResponse?.message}</Typography>}
+            </CenteredView>
+        );
+    }
+
     return (
-        <ModeControllerContext.Provider value={modeController}>
-            <AnalyticsContext.Provider value={analyticsController}>
-                <CustomizationControllerContext.Provider value={customizationController}>
-                    <UserConfigurationPersistenceContext.Provider
-                        value={userConfigPersistence}>
-                        <StorageSourceContext.Provider
-                            value={storageSource}>
-                            <DataSourceContext.Provider
-                                value={dataSource}>
-                                <AuthControllerContext.Provider
-                                    value={authController}>
-                                    <SideDialogsControllerContext.Provider
-                                        value={sideDialogsController}>
-                                        <SideEntityControllerContext.Provider
-                                            value={sideEntityController}>
-                                            <NavigationContext.Provider
-                                                value={navigationController}>
-                                                <DialogsProvider>
-                                                    <FireCMSInternal
-                                                        loading={loading}>
-                                                        {children}
-                                                    </FireCMSInternal>
-                                                </DialogsProvider>
-                                            </NavigationContext.Provider>
-                                        </SideEntityControllerContext.Provider>
-                                    </SideDialogsControllerContext.Provider>
-                                </AuthControllerContext.Provider>
-                            </DataSourceContext.Provider>
-                        </StorageSourceContext.Provider>
-                    </UserConfigurationPersistenceContext.Provider>
-                </CustomizationControllerContext.Provider>
-            </AnalyticsContext.Provider>
-        </ModeControllerContext.Provider>
+        <AnalyticsContext.Provider value={analyticsController}>
+            <CustomizationControllerContext.Provider value={customizationController}>
+                <UserConfigurationPersistenceContext.Provider
+                    value={userConfigPersistence}>
+                    <StorageSourceContext.Provider
+                        value={storageSource}>
+                        <DataSourceContext.Provider
+                            value={dataSource}>
+                            <AuthControllerContext.Provider
+                                value={authController}>
+                                <SideDialogsControllerContext.Provider
+                                    value={sideDialogsController}>
+                                    <SideEntityControllerContext.Provider
+                                        value={sideEntityController}>
+                                        <NavigationContext.Provider
+                                            value={navigationController}>
+                                            <DialogsProvider>
+                                                <FireCMSInternal
+                                                    loading={loading}>
+                                                    {children}
+                                                </FireCMSInternal>
+                                            </DialogsProvider>
+                                        </NavigationContext.Provider>
+                                    </SideEntityControllerContext.Provider>
+                                </SideDialogsControllerContext.Provider>
+                            </AuthControllerContext.Provider>
+                        </DataSourceContext.Provider>
+                    </StorageSourceContext.Provider>
+                </UserConfigurationPersistenceContext.Provider>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.Provider>
     );
 
 }

package/src/core/NavigationRoutes.tsx

@@ -13,7 +13,7 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
     customRoutes?: React.ReactNode[]
 
@@ -28,10 +28,9 @@ export type NavigationRoutesProps = {
  * @constructor
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
+                                  homePage = <DefaultHomePage/>,
                                   customRoutes
                               }: NavigationRoutesProps) {
 
@@ -59,6 +58,14 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
             });
         }
+        if (navigation.adminViews) {
+            navigation.adminViews.forEach((cmsView) => {
+                if (Array.isArray(cmsView.path))
+                    cmsViews.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+                else
+                    cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
+            });
+        }
 
         // we reorder collections so that nested paths are included first
         const sortedCollections = [...(navigation.collections ?? [])]
@@ -85,7 +92,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}

package/src/core/Scaffold.tsx

@@ -5,19 +5,35 @@ import { Link } from "react-router-dom";
 import { Drawer as DefaultDrawer, DrawerProps } from "./Drawer";
 import { useLargeLayout, useNavigationController } from "../hooks";
 import { ErrorBoundary, FireCMSAppBar as DefaultFireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
-import { ChevronLeftIcon, cn, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
 
 export const DRAWER_WIDTH = 280;
 
+const DrawerContext = React.createContext<DrawerProps>({
+    hovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useDrawer() {
+    return React.useContext(DrawerContext);
+}
+
 /**
  * @group Core
  */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
+export interface ScaffoldProps<ExtraAppbarProps = object> {
 
     /**
      * Name of the app, displayed as the main title and in the tab title
      */
-    name: string;
+    name?: React.ReactNode;
 
     /**
      * Logo to be displayed in the drawer of the CMS
@@ -30,15 +46,10 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     includeDrawer?: boolean;
 
     /**
-     * In case you need to override the view that gets rendered as a drawer
-     * @see DefaultDrawer
-     */
-    Drawer?: React.ComponentType<DrawerProps<ExtraDrawerProps>>;
-
-    /**
-     * Additional props passed to the custom Drawer
+     * You can define a custom drawer to be displayed in the scaffold.
+     * Use the hook `useDrawer` to access the context values.
      */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
+    drawer?: React.ReactNode;
 
     /**
      * Open the drawer on hover
@@ -46,8 +57,7 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     autoOpenDrawer?: boolean;
 
     /**
-     * A component that gets rendered on the upper side of the main toolbar.
-     * `toolbarExtraWidget` has no effect if this is set.
+     * The AppBar component to be used in the scaffold.
      */
     FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
 
@@ -78,8 +88,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             logo,
             includeDrawer = true,
             autoOpenDrawer,
-            Drawer = DefaultDrawer,
-            drawerProps,
+            drawer = <DefaultDrawer/>,
             FireCMSAppBar = DefaultFireCMSAppBar,
             fireCMSAppBarProps,
         } = props;
@@ -92,60 +101,65 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
         }, []);
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+
         return (
-            <div
-                className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
-                style={{
-                    paddingTop: "env(safe-area-inset-top)",
-                    paddingLeft: "env(safe-area-inset-left)",
-                    paddingRight: "env(safe-area-inset-right)",
-                    paddingBottom: "env(safe-area-inset-bottom)",
-                    height: "100dvh"
-                    // "@supports (height: 100dvh)": {
-                    //     height: "100dvh"
-                    // }
-                }}>
-
-                <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
-
-                <StyledDrawer
-                    displayed={includeDrawer}
-                    onMouseEnter={setOnHoverTrue}
-                    onMouseMove={setOnHoverTrue}
-                    onMouseLeave={setOnHoverFalse}
-                    open={computedDrawerOpen}
-                    logo={logo}
-                    hovered={onHover}
-                    setDrawerOpen={setDrawerOpen}>
-                    {includeDrawer && (
-                        <Drawer
-                            hovered={onHover}
-                            drawerOpen={computedDrawerOpen}
-                            closeDrawer={handleDrawerClose}
-                            {...drawerProps}/>)}
-                </StyledDrawer>
-
-                <main
-                    className="flex flex-col flex-grow overflow-auto">
-                    <DrawerHeader/>
-                    <div
-                        className={cn(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
-
-                        <ErrorBoundary>
-                            {children}
-                        </ErrorBoundary>
-
-                    </div>
-                </main>
-            </div>
+            <DrawerContext.Provider value={{
+                hovered: onHover,
+                drawerOpen: computedDrawerOpen,
+                closeDrawer: handleDrawerClose,
+                openDrawer: handleDrawerOpen,
+                autoOpenDrawer
+            }}>
+                <div
+                    className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh"
+                    }}>
+
+                    <FireCMSAppBar title={name}
+                                   includeDrawer={includeDrawer}
+                                   logo={logo}
+                                   drawerOpen={computedDrawerOpen}
+                                   {...fireCMSAppBarProps}/>
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={computedDrawerOpen}
+                        logo={logo}
+                        hovered={onHover}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawer}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col flex-grow overflow-auto">
+                        <DrawerHeader/>
+                        <div
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+
+                            <ErrorBoundary>
+                                {children}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </DrawerContext.Provider>
         );
     },
     equal
@@ -157,7 +171,7 @@ const DrawerHeader = () => {
     );
 };
 
-function StyledDrawer(props: {
+function DrawerWrapper(props: {
     children: React.ReactNode,
     displayed: boolean,
     open: boolean,
@@ -204,7 +218,7 @@ function StyledDrawer(props: {
                     transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
                     padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
                 }}
-                className={cn("cursor-pointer")}>
+                className={cls("cursor-pointer")}>
 
                 <Tooltip title={"Home"}
                          sideOffset={20}
@@ -214,7 +228,7 @@ function StyledDrawer(props: {
                         {props.logo
                             ? <img src={props.logo}
                                    alt="Logo"
-                                   className={cn("max-w-full max-h-full",
+                                   className={cls("max-w-full max-h-full",
                                        props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 

package/src/core/field_configs.tsx

@@ -331,7 +331,7 @@ export function getFieldConfig(property: Property | ResolvedProperty, propertyCo
     }
     const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
     const customField = fieldId ? propertyConfigs[fieldId] : undefined;
-    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {} as PropertyConfig);
 }
 
 export function getDefaultFieldId(property: Property | ResolvedProperty) {
@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;

package/src/core/index.tsx

@@ -1,10 +1,9 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
+export * from "./Scaffold";
 
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./Drawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";