@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/core/FireCMS.tsx

@@ -0,0 +1,198 @@
+import React, { useMemo } from "react";
+
+import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
+import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
+import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
+import { ErrorView } from "../components";
+import { StorageSourceContext } from "../contexts/StorageSourceContext";
+import { UserConfigurationPersistenceContext } from "../contexts/UserConfigurationPersistenceContext";
+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, Typography } 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";
+
+/**
+ * If you are using independent components of the CMS
+ * you need to wrap them with this main component, so the internal hooks work.
+ *
+ * This is the main component of FireCMS. It acts as the provider of all the
+ * internal contexts and hooks.
+ *
+ * You only need to use this component if you are building a custom app.
+ *
+ * @constructor
+ * @group Core
+ */
+export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
+
+    const modeController = useModeController();
+    const {
+        children,
+        entityLinkBuilder,
+        userConfigPersistence,
+        dateTimeFormat,
+        locale,
+        authController,
+        storageSource,
+        dataSourceDelegate,
+        plugins,
+        onAnalyticsEvent,
+        propertyConfigs,
+        entityViews,
+        components,
+        navigationController,
+    } = props;
+
+    useLocaleConfig(locale);
+
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceDelegate,
+        propertyConfigs,
+        navigationController
+    });
+
+    const sideDialogsController = useBuildSideDialogsController();
+    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController);
+
+    const pluginsLoading = plugins?.some(p => p.loading) ?? false;
+
+    const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
+
+    const customizationController = useBuildCustomizationController({
+        dateTimeFormat,
+        locale,
+        entityLinkBuilder,
+        plugins,
+        entityViews: entityViews ?? [],
+        propertyConfigs: propertyConfigs ?? {},
+        components
+    });
+
+    const analyticsController = useMemo(() => ({
+        onAnalyticsEvent
+    }), []);
+
+    const accessResponse = useProjectLog(authController);
+
+    if (navigationController.navigationLoadingError) {
+        return (
+            <CenteredView maxWidth={"md"}>
+                <ErrorView
+                    title={"Error loading navigation"}
+                    error={navigationController.navigationLoadingError}/>
+            </CenteredView>
+        );
+    }
+
+    if (authController.authError) {
+        return (
+            <CenteredView maxWidth={"md"}>
+                <ErrorView
+                    title={"Error loading auth"}
+                    error={authController.authError}/>
+            </CenteredView>
+        );
+    }
+
+    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>
+    );
+
+}
+
+function FireCMSInternal({
+                             loading,
+                             children
+                         }: {
+    loading: boolean;
+    children: (props: {
+        context: FireCMSContext;
+        loading: boolean;
+    }) => React.ReactNode;
+}) {
+
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
+    let childrenResult = children({
+        context,
+        loading
+    });
+
+    const plugins = customizationController.plugins;
+    if (!loading && plugins) {
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.provider) {
+                childrenResult = (
+                    <plugin.provider.Component {...plugin.provider.props}
+                                               context={context}>
+                        {childrenResult}
+                    </plugin.provider.Component>
+                );
+            }
+        });
+    }
+
+    return <>{childrenResult}</>;
+}

package/src/core/NavigationRoutes.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+import { Route, Routes, useLocation } from "react-router-dom";
+import { CMSView } from "../types";
+import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
+import { useNavigationController } from "../hooks";
+import { toArray } from "../util/arrays";
+
+/**
+ * @group Components
+ */
+export type NavigationRoutesProps = {
+    /**
+     * In case you need to override the home page
+     */
+    HomePage?: React.ComponentType;
+
+    customRoutes?: React.ReactNode[]
+
+};
+
+/**
+ * This component is in charge of rendering
+ * all the related routes (entity collection root views, custom views
+ * or the home route) related to a {@link NavigationController}.
+ * This component needs a parent {@link FireCMS}
+ *
+ * @constructor
+ * @group Components
+ */
+
+export const NavigationRoutes = React.memo<NavigationRoutesProps>(
+    function NavigationRoutes({
+                                  HomePage = DefaultHomePage,
+                                  customRoutes
+                              }: NavigationRoutesProps) {
+
+        const location = useLocation();
+        const navigation = useNavigationController();
+
+        if (!navigation)
+            return <></>;
+
+        const state = location.state as any;
+
+        /**
+         * The location can be overridden if `base_location` is set in the
+         * state field of the current location. This can happen if you open
+         * a side entity, like `products`, from a different one, like `users`
+         */
+        const baseLocation = state && state.base_location ? state.base_location : location;
+
+        const cmsViews: React.ReactNode[] = [];
+        if (navigation.views) {
+            navigation.views.forEach((cmsView) => {
+                if (Array.isArray(cmsView.path))
+                    cmsViews.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+                else
+                    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 ?? [])]
+            .sort((a, b) => b.path.length - a.path.length);
+
+        const collectionRoutes = sortedCollections
+            .map((collection) => {
+                    const urlPath = navigation.buildUrlCollectionPath(collection.id ?? collection.path);
+                    return <Route path={urlPath + "/*"}
+                                  key={`navigation_${collection.id ?? collection.path}`}
+                                  element={
+                                      <ErrorBoundary>
+                                          <EntityCollectionView
+                                              key={`collection_view_${collection.id ?? collection.path}`}
+                                              isSubCollection={false}
+                                              parentCollectionIds={[]}
+                                              fullPath={collection.id ?? collection.path}
+                                              {...collection}
+                                              Actions={toArray(collection.Actions)}/>
+                                      </ErrorBoundary>
+                                  }/>;
+                }
+            );
+
+        const homeRoute = (
+            <Route path={"/"}
+                   element={<HomePage/>}/>
+        );
+
+        const notFoundRoute = <Route path={"*"}
+                                     element={
+                                         <NotFoundPage/>
+                                     }/>;
+
+        return (
+            <Routes location={baseLocation}>
+
+                {collectionRoutes}
+
+                {cmsViews}
+
+                {homeRoute}
+
+                {notFoundRoute}
+
+                {customRoutes}
+
+            </Routes>
+        );
+    });
+
+const buildCMSViewRoute = (path: string, cmsView: CMSView) => {
+    return <Route
+        key={"navigation_view_" + path}
+        path={path}
+        element={cmsView.view}
+    />;
+};

package/src/core/Scaffold.tsx

@@ -0,0 +1,281 @@
+import React, { PropsWithChildren, useCallback } from "react";
+import equal from "react-fast-compare"
+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";
+
+export const DRAWER_WIDTH = 280;
+
+/**
+ * @group Core
+ */
+export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
+
+    /**
+     * Name of the app, displayed as the main title and in the tab title
+     */
+    name: string;
+
+    /**
+     * Logo to be displayed in the drawer of the CMS
+     */
+    logo?: string;
+
+    /**
+     * Whether to include the drawer in the scaffold
+     */
+    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
+     */
+    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
+
+    /**
+     * Open the drawer on hover
+     */
+    autoOpenDrawer?: boolean;
+
+    /**
+     * A component that gets rendered on the upper side of the main toolbar.
+     * `toolbarExtraWidget` has no effect if this is set.
+     */
+    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
+
+    /**
+     * Additional props passed to the custom AppBar
+     */
+    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
+
+}
+
+/**
+ * This view acts as a scaffold for FireCMS.
+ *
+ * It is in charge of displaying the navigation drawer, top bar and main
+ * collection views.
+ * This component needs a parent {@link FireCMS}
+ *
+ * @param props
+ * @constructor
+ * @group Core
+ */
+export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
+    function Scaffold(props: PropsWithChildren<ScaffoldProps>) {
+
+        const {
+            children,
+            name,
+            logo,
+            includeDrawer = true,
+            autoOpenDrawer,
+            Drawer = DefaultDrawer,
+            drawerProps,
+            FireCMSAppBar = DefaultFireCMSAppBar,
+            fireCMSAppBarProps,
+        } = props;
+
+        const largeLayout = useLargeLayout();
+
+        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [onHover, setOnHover] = React.useState(false);
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        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>
+        );
+    },
+    equal
+)
+
+const DrawerHeader = () => {
+    return (
+        <div className="flex flex-col min-h-[68px]"></div>
+    );
+};
+
+function StyledDrawer(props: {
+    children: React.ReactNode,
+    displayed: boolean,
+    open: boolean,
+    logo?: string,
+    hovered: boolean,
+    setDrawerOpen: (open: boolean) => void,
+    onMouseEnter: () => void,
+    onMouseMove: () => void,
+    onMouseLeave: () => void
+}) {
+
+    const navigation = useNavigationController();
+
+    const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const innerDrawer = <div
+        className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
+        style={{
+            width,
+            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+        }}
+    >
+
+        {!props.open && props.displayed && (
+            <Tooltip title="Open menu"
+                     side="right"
+                     sideOffset={12}
+                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit"
+            >
+                <IconButton
+                    color="inherit"
+                    aria-label="Open menu"
+                    className="sticky top-2 left-3 "
+                    onClick={() => props.setDrawerOpen(true)}
+                    size="large"
+                >
+                    <MenuIcon/>
+                </IconButton>
+            </Tooltip>
+        )}
+
+        <div className={"flex flex-col h-full"}>
+            <div
+                style={{
+                    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")}>
+
+                <Tooltip title={"Home"}
+                         sideOffset={20}
+                         side="right">
+                    <Link
+                        to={navigation.basePath}>
+                        {props.logo
+                            ? <img src={props.logo}
+                                   alt="Logo"
+                                   className={cn("max-w-full max-h-full",
+                                       props.open ?? "w-[112px] h-[112px]")}/>
+                            : <FireCMSLogo/>}
+
+                    </Link>
+                </Tooltip>
+            </div>
+
+            {props.children}
+        </div>
+
+    </div>;
+
+    const largeLayout = useLargeLayout();
+    if (!largeLayout) {
+        if (!props.displayed)
+            return null;
+        return <>
+            <IconButton
+                color="inherit"
+                aria-label="Open drawer"
+                onClick={() => props.setDrawerOpen(true)}
+                size="large"
+                className="absolute top-2 left-6"
+            >
+                <MenuIcon/>
+            </IconButton>
+            <Sheet side={"left"}
+                   transparent={true}
+                   open={props.open}
+                   onOpenChange={props.setDrawerOpen}
+            >
+                {innerDrawer}
+            </Sheet>
+        </>;
+    }
+
+    return (
+        <div
+            className="relative"
+            onMouseEnter={props.onMouseEnter}
+            onMouseMove={props.onMouseMove}
+            onMouseLeave={props.onMouseLeave}
+            style={{
+                width,
+                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            }}>
+
+            {innerDrawer}
+
+            <div
+                className={`absolute right-0 top-4 ${
+                    props.open ? "opacity-100" : "opacity-0 invisible"
+                } transition-opacity duration-1000 ease-in-out`}>
+                <IconButton
+                    aria-label="Close drawer"
+                    onClick={() => props.setDrawerOpen(false)}
+                >
+                    <ChevronLeftIcon/>
+                </IconButton>
+            </div>
+
+        </div>
+    );
+}