@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.70

package/src/core/Drawer.tsx

@@ -0,0 +1,161 @@
+import React, { useCallback } from "react";
+
+import { useFireCMSContext, useLargeLayout, useNavigationController } from "../hooks";
+
+import { NavLink } from "react-router-dom";
+import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
+import { getIconForView } from "../util";
+import { cn, Tooltip, Typography } from "@firecms/ui";
+
+/**
+ * Props used in case you need to override the default drawer
+ * @group Core
+ */
+export type DrawerProps<T = {}> = T & {
+    hovered: boolean,
+    drawerOpen: boolean,
+    closeDrawer: () => any,
+}
+
+/**
+ * Default drawer used in the CMS
+ * @group Core
+ */
+export function Drawer({
+                           hovered,
+                           drawerOpen,
+                           closeDrawer
+                       }: DrawerProps) {
+
+    const context = useFireCMSContext();
+    const navigation = useNavigationController();
+
+    const tooltipsOpen = hovered && !drawerOpen;
+    const largeLayout = useLargeLayout();
+
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in Drawer");
+
+    const {
+        navigationEntries,
+        groups
+    }: TopNavigationResult = navigation.topLevelNavigation;
+
+    const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
+
+    const buildGroupHeader = useCallback((group?: string) => {
+        if (!drawerOpen) return <div className="h-4"/>;
+        return <div
+            className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
+            <Typography variant={"caption"}
+                        color={"secondary"}
+                        className="font-medium flex-grow">
+                {group ? group.toUpperCase() : "Views".toUpperCase()}
+            </Typography>
+
+        </div>;
+    }, [drawerOpen]);
+
+    const onClick = (view: TopNavigationEntry) => {
+        const eventName: CMSAnalyticsEvent = view.type === "collection"
+            ? "drawer_navigate_to_collection"
+            : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
+        context.onAnalyticsEvent?.(eventName, { url: view.url });
+        if (!largeLayout)
+            closeDrawer();
+    };
+
+    return (
+        <div className={"flex-grow overflow-scroll no-scrollbar"}>
+
+            {groups.map((group) => (
+                <React.Fragment
+                    key={`drawer_group_${group}`}>
+                    {buildGroupHeader(group)}
+                    {Object.values(navigationEntries)
+                        .filter(e => e.group === group)
+                        .map((view, index) =>
+                            <DrawerNavigationItem
+                                key={`navigation_${index}`}
+                                icon={getIconForView(view.collection ?? view.view)}
+                                tooltipsOpen={tooltipsOpen}
+                                drawerOpen={drawerOpen}
+                                onClick={() => onClick(view)}
+                                url={view.url}
+                                name={view.name}/>)}
+                </React.Fragment>
+            ))}
+
+            {ungroupedNavigationViews.length > 0 && buildGroupHeader()}
+
+            {ungroupedNavigationViews.map((view, index) => {
+
+                return <DrawerNavigationItem
+                    key={`navigation_${index}`}
+                    icon={getIconForView(view.collection ?? view.view)}
+                    tooltipsOpen={tooltipsOpen}
+                    onClick={() => onClick(view)}
+                    drawerOpen={drawerOpen}
+                    url={view.url}
+                    name={view.name}/>;
+            })}
+
+        </div>
+    );
+}
+
+export function DrawerNavigationItem({
+                                         name,
+                                         icon,
+                                         drawerOpen,
+                                         tooltipsOpen,
+                                         url,
+                                         onClick
+                                     }: {
+    icon: React.ReactElement,
+    name: string,
+    tooltipsOpen: boolean,
+    drawerOpen: boolean,
+    url: string,
+    onClick?: () => void,
+}) {
+
+    const iconWrap = <div
+        className={"text-gray-600 dark:text-gray-500"}>
+        {icon}
+    </div>;
+
+    const listItem = <NavLink
+        onClick={onClick}
+        className={({ isActive }: any) => cn("rounded-r-xl truncate",
+            "hover:bg-gray-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
+            "flex flex-row items-center w-full mr-8",
+            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
+            "font-medium text-sm",
+            isActive ? "bg-gray-100 dark:bg-gray-800" : ""
+        )}
+        to={url}
+    >
+
+        {iconWrap}
+
+        <div
+            className={cn(
+                drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                "ml-4 font-inherit text-inherit"
+            )}>
+            {name.toUpperCase()}
+        </div>
+    </NavLink>;
+
+    // return listItem;
+    if (drawerOpen)
+        return listItem;
+    else
+        return <Tooltip
+            open={tooltipsOpen}
+            side="right"
+            title={name}>
+            {listItem}
+        </Tooltip>;
+}

package/src/core/EntitySidePanel.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+
+import { EntitySidePanelProps } from "../types";
+import { useNavigationController } from "../hooks";
+
+import { ErrorBoundary } from "../components";
+import { EntityView } from "../internal/EntityView";
+import { useSideDialogContext } from "./SideDialogs";
+
+/**
+ * This is the component in charge of rendering the side dialog used
+ * for editing entities. Use the {@link useSideEntityController} to open
+ * and control the dialogs.
+ * This component needs a parent {@link FireCMS}
+ * {@link useSideEntityController}
+ * @group Components
+ */
+export function EntitySidePanel(props: EntitySidePanelProps) {
+
+    const {
+        blocked,
+        setBlocked,
+        setBlockedNavigationMessage
+    } = useSideDialogContext();
+
+    const navigationController = useNavigationController();
+
+    const parentCollectionIds = useMemo(() => {
+        return navigationController.getParentCollectionIds(props.path);
+    }, [navigationController, props.path]);
+
+    const collection = useMemo(() => {
+        if (!props) return undefined;
+        let usedCollection = props.collection;
+
+        if (!usedCollection) {
+            usedCollection = navigationController.getCollection(props.path, props.entityId);
+            if (!usedCollection) {
+                console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
+                throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
+            }
+        }
+        return usedCollection;
+    }, [navigationController, props]);
+
+    useEffect(() => {
+        function beforeunload(e: any) {
+            if (blocked && collection) {
+                e.preventDefault();
+                e.returnValue = `You have unsaved changes in this ${collection.name}. Are you sure you want to leave this page?`;
+            }
+        }
+
+        if (typeof window !== "undefined")
+            window.addEventListener("beforeunload", beforeunload);
+
+        return () => {
+            if (typeof window !== "undefined")
+                window.removeEventListener("beforeunload", beforeunload);
+        };
+
+    }, [blocked, collection]);
+
+    const onValuesAreModified = useCallback((modified: boolean) => {
+        setBlocked(modified);
+        setBlockedNavigationMessage(modified
+            ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
+            : undefined)
+    }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
+
+    if (!props || !collection) {
+        return <div className={"w-full"}/>;
+    }
+
+    return (
+        <>
+
+            <ErrorBoundary>
+                <EntityView
+                    {...props}
+                    formWidth={props.width}
+                    collection={collection}
+                    parentCollectionIds={parentCollectionIds}
+                    onValuesAreModified={onValuesAreModified}
+                />
+            </ErrorBoundary>
+
+        </>
+    );
+}

package/src/core/FireCMS.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo } from "react";
+
+import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
+import { FireCMSContextInstance, 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 } from "@firecms/ui";
+import { DialogsProvider } from "../contexts/DialogsProvider";
+import { useBuildNavigationController } from "../internal/useBuildNavigationController";
+import { useBuildDataSource } from "../internal/useBuildDataSource";
+
+/**
+ * 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,
+        baseCollectionPath,
+        basePath,
+        collections,
+        views
+    } = props;
+
+    useLocaleConfig(locale);
+
+    const navigationController = useBuildNavigationController({
+        basePath,
+        baseCollectionPath,
+        authController,
+        collections,
+        views,
+        userConfigPersistence,
+        dataSource: dataSourceDelegate,
+        plugins
+    });
+
+    /**
+     * 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 context: Partial<FireCMSContext> = useMemo(() => ({
+        entityLinkBuilder,
+        dateTimeFormat,
+        locale,
+        plugins,
+        onAnalyticsEvent,
+        entityViews: entityViews ?? [],
+        propertyConfigs: propertyConfigs ?? {},
+        components
+    }), [dateTimeFormat, locale, plugins, entityViews, propertyConfigs, components]);
+
+    if (navigationController.navigationLoadingError) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true}>
+                <ErrorView
+                    title={"Error loading navigation"}
+                    error={navigationController.navigationLoadingError}/>
+            </CenteredView>
+        );
+    }
+
+    if (authController.authError) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true}>
+                <ErrorView
+                    title={"Error loading auth"}
+                    error={authController.authError}/>
+            </CenteredView>
+        );
+    }
+
+    return (
+        <ModeControllerContext.Provider value={modeController}>
+            <FireCMSContextInstance.Provider value={context}>
+                <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>
+            </FireCMSContextInstance.Provider>
+        </ModeControllerContext.Provider>
+    );
+
+}
+
+function FireCMSInternal({
+                             loading,
+                             children
+                         }: {
+    loading: boolean;
+    children: (props: {
+        context: FireCMSContext;
+        loading: boolean;
+    }) => React.ReactNode;
+}) {
+
+    const context = useFireCMSContext();
+    let childrenResult = children({
+        context,
+        loading
+    });
+
+    const plugins = context.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,118 @@
+import React from "react";
+
+import { Route, Routes, useLocation } from "react-router-dom";
+import { CMSView } from "../types";
+import { DefaultHomePage, EntityCollectionView, 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));
+            });
+        }
+
+        // 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={
+                                      <EntityCollectionView
+                                          key={`collection_view_${collection.id ?? collection.path}`}
+                                          isSubCollection={false}
+                                          parentCollectionIds={[]}
+                                          fullPath={collection.id ?? collection.path}
+                                          {...collection}
+                                          Actions={toArray(collection.Actions)}/>
+                                  }/>;
+                }
+            );
+
+        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}
+    />;
+};
+