@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

package/src/core/EntitySidePanel.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import { EntitySidePanelProps } from "../types";
-import { useNavigationController } from "../hooks";
+import { useNavigationController, useSideEntityController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityView } from "../internal/EntityView";
+import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
+import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
+import { useLocation, useNavigate } from "react-router-dom";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -20,30 +22,64 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const {
         blocked,
         setBlocked,
-        setBlockedNavigationMessage
+        setBlockedNavigationMessage,
+        close
     } = useSideDialogContext();
 
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
+    const sideDialogsController = useSideDialogContext();
+
+    const onClose = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+
+        setBlocked(false);
+        close(true);
+    }
+
+    const onUpdate = (params: OnUpdateParams) => {
+        if (props.onUpdate) {
+            props.onUpdate(params);
+        }
+        if (params.status !== "existing") {
+            sideEntityController.replace({
+                path: params.path,
+                entityId: params.entityId,
+                selectedTab: params.selectedTab,
+                updateUrl: true,
+                collection: params.collection,
+            });
+        }
+
+        if (sideDialogsController.pendingClose) {
+            sideDialogsController.setPendingClose(false);
+            onClose();
+        }
+
+    }
 
     const parentCollectionIds = useMemo(() => {
         return navigationController.getParentCollectionIds(props.path);
     }, [navigationController, props.path]);
 
     const collection = useMemo(() => {
-        if (!props) return undefined;
-        let usedCollection = props.collection;
+        if (props.collection) {
+            return props.collection;
+        }
 
-        const registryCollection = navigationController.getCollection(props.path, props.entityId);
+        const registryCollection = navigationController.getCollection(props.path);
         if (registryCollection) {
-            usedCollection = registryCollection;
-        }
-        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 registryCollection;
         }
 
-        return usedCollection;
-    }, [navigationController, props]);
+        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.");
+    }, [navigationController, props.collection]);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -63,11 +99,11 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     }, [blocked, collection]);
 
-    const onValuesAreModified = useCallback((modified: boolean) => {
-        setBlocked(modified);
+    const onValuesModified = useCallback((modified: boolean) => {
         setBlockedNavigationMessage(modified
             ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
             : undefined)
+        setBlocked(modified);
     }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
 
     if (!props || !collection) {
@@ -77,12 +113,45 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
-                <EntityView
+                <EntityEditView
                     {...props}
-                    formWidth={props.width}
+                    layout={"side_panel"}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
-                    onValuesAreModified={onValuesAreModified}
+                    onValuesModified={onValuesModified}
+                    onSaved={onUpdate}
+                    barActions={<>
+                        <IconButton
+                            className="self-center"
+                            onClick={onClose}>
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                        <IconButton
+                            className="self-center"
+                            onClick={() => {
+                                if (props.entityId)
+                                    navigate(location.pathname);
+                                else
+                                    navigate(location.pathname + "#new");
+                            }}>
+                            <OpenInFullIcon size={"small"}/>
+                        </IconButton>
+                    </>}
+                    onTabChange={({
+                                      path,
+                                      entityId,
+                                      selectedTab,
+                                      collection
+                                  }) => {
+                        sideEntityController.replace({
+                            path,
+                            entityId,
+                            selectedTab,
+                            updateUrl: true,
+                            collection
+                        });
+                    }}
+                    formProps={props.formProps}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -1,9 +1,11 @@
-import React, { useMemo } from "react";
+"use client";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import React, { useMemo } from "react";
+import { CenteredView, Typography } from "@firecms/ui";
+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,14 +14,12 @@ 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 { useBuildDataSource } from "../internal/useBuildDataSource";
-import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
+import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 
 /**
  * If you are using independent components of the CMS
@@ -30,12 +30,11 @@ import { useProjectLog } from "../hooks/useProjectLog";
  *
  * 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>) {
+export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
 
-    const modeController = useModeController();
     const {
         children,
         entityLinkBuilder,
@@ -51,10 +50,9 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews,
         components,
         navigationController,
+        apiKey
     } = props;
 
-    useLocaleConfig(locale);
-
     /**
      * Controller in charge of fetching and persisting data
      */
@@ -71,7 +69,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 +77,22 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    });
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
-    useProjectLog(authController);
+    const accessResponse = useProjectLog({
+        apiKey,
+        authController,
+        dataSourceDelegate,
+        plugins
+    });
+
+    if (accessResponse?.message) {
+        console.warn(accessResponse.message);
+    }
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -107,40 +114,56 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         );
     }
 
+    if (accessResponse?.blocked) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                <Typography variant={"h4"} gutterBottom>
+                    License needed
+                </Typography>
+                <Typography>
+                    You need a valid license to use FireCMS PRO. Please reach out at <a
+                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                </Typography>
+                {accessResponse?.message &&
+                    <Typography>{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>
+        <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>
+                                                <BreadcrumbsProvider>
                                                     <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>
+                                                </BreadcrumbsProvider>
+                                            </DialogsProvider>
+                                        </NavigationContext.Provider>
+                                    </SideEntityControllerContext.Provider>
+                                </SideDialogsControllerContext.Provider>
+                            </AuthControllerContext.Provider>
+                        </DataSourceContext.Provider>
+                    </StorageSourceContext.Provider>
+                </UserConfigurationPersistenceContext.Provider>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.Provider>
     );
 
 }

package/src/core/FireCMSRouter.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { removeInitialAndTrailingSlashes } from "../util";
+
+export function FireCMSRouter({
+                           children,
+                           basePath
+                       }: {
+    children: React.ReactNode,
+    basePath?: string;
+}) {
+    return <RouterProvider router={createBrowserRouter([
+        {
+            path: basePath ? `${removeInitialAndTrailingSlashes(basePath)}/*` : "/*",
+            element: children
+        }
+    ])}/>;
+}

package/src/core/NavigationRoutes.tsx

@@ -2,9 +2,11 @@ import React from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 import { CMSView } from "../types";
-import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
+import { DefaultHomePage, ErrorBoundary, NotFoundPage } from "../components";
 import { useNavigationController } from "../hooks";
-import { toArray } from "../util/arrays";
+import { FireCMSRoute } from "../routes/FireCMSRoute";
+import { CustomCMSRoute } from "../routes/CustomCMSRoute";
+import { HomePageRoute } from "../routes/HomePageRoute";
 
 /**
  * @group Components
@@ -13,9 +15,9 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
-    customRoutes?: React.ReactNode[]
+    children?: React.ReactNode | React.ReactNode[]
 
 };
 
@@ -25,14 +27,12 @@ export type NavigationRoutesProps = {
  * 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
+                                  homePage = <DefaultHomePage/>,
+                                  children
                               }: NavigationRoutesProps) {
 
         const location = useLocation();
@@ -59,44 +59,42 @@ 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 ?? [])]
-            .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 collectionUrlPath = navigation.buildUrlCollectionPath("");
+        const collectionRoute = (
+            <Route path={collectionUrlPath + "/*"}
+                   key={`navigation_entity`}
+                   element={
+                       <ErrorBoundary>
+                           <FireCMSRoute/>
+                       </ErrorBoundary>
+                   }/>
+        );
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={<HomePageRoute>{homePage}</HomePageRoute>}/>
         );
 
-        const notFoundRoute = <Route path={"*"}
-                                     element={
-                                         <NotFoundPage/>
-                                     }/>;
+        const notFoundRoute = (
+            <Route path={"*"}
+                   element={
+                       <NotFoundPage/>
+                   }/>
+        );
 
         return (
             <Routes location={baseLocation}>
 
-                {collectionRoutes}
+                {collectionRoute}
 
                 {cmsViews}
 
@@ -104,7 +102,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
                 {notFoundRoute}
 
-                {customRoutes}
+                {children}
 
             </Routes>
         );
@@ -114,6 +112,6 @@ const buildCMSViewRoute = (path: string, cmsView: CMSView) => {
     return <Route
         key={"navigation_view_" + path}
         path={path}
-        element={cmsView.view}
+        element={<CustomCMSRoute cmsView={cmsView}/>}
     />;
 };

package/src/core/SideDialogs.tsx

@@ -1,19 +1,22 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
-import { UnsavedChangesDialog, useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
 import { ErrorBoundary } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 
-export type SideDialogContextProps = {
+export type SideDialogController = {
     blocked: boolean,
     setBlocked: (blocked: boolean) => void,
     setBlockedNavigationMessage: (message?: React.ReactNode) => void,
     width?: string,
-    close: (force?: boolean) => void
+    close: (force?: boolean) => void;
+    pendingClose: boolean,
+    setPendingClose: (pendingClose: boolean) => void
 }
 
-const SideDialogContext = React.createContext<SideDialogContextProps>({
+const SideDialogContext = React.createContext<SideDialogController>({
     width: "",
     blocked: false,
     setBlocked: (blocked: boolean) => {
@@ -21,6 +24,10 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
     setBlockedNavigationMessage: (message?: React.ReactNode) => {
     },
     close: () => {
+    },
+    pendingClose: false,
+    setPendingClose: () => {
+
     }
 });
 
@@ -29,7 +36,7 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
  * in contrast with {@link useSideDialogsController} which handles the
  * state of all the dialogs.
  */
-export const useSideDialogContext = () => useContext<SideDialogContextProps>(SideDialogContext);
+export const useSideDialogContext = () => useContext<SideDialogController>(SideDialogContext);
 
 /**
  * This is the component in charge of rendering the side dialogs used
@@ -72,6 +79,8 @@ function SideDialogView({
     const [blocked, setBlocked] = useState(false);
     const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
 
+    const [pendingClose, setPendingClose] = useState(false);
+
     const widthRef = React.useRef<string | undefined>(panel?.width);
     const width = widthRef.current;
 
@@ -111,8 +120,6 @@ function SideDialogView({
         }
     };
 
-    // const offsetClass = offsetPosition > 0 ? `transform translate-x-${offsetPosition}` : "";
-
     return (
         <SideDialogContext.Provider
             value={{
@@ -120,19 +127,22 @@ function SideDialogView({
                 setBlocked,
                 setBlockedNavigationMessage,
                 width,
-                close: onCloseRequest
+                close: onCloseRequest,
+                pendingClose,
+                setPendingClose
             }}>
 
             <Sheet
                 open={Boolean(panel)}
                 onOpenChange={(open) => !open && onCloseRequest()}
+                title={"Side dialog " + panel?.key}
             >
                 {panel &&
                     <div
-                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-gray-900 "}
+                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
                         style={{
                             width: panel.width,
-                            transform: `translateX(-${offsetPosition * 200}px)`
+                            transform: `translateX(-${offsetPosition * 200}px)`,
                         }}
                     >
                         <ErrorBoundary>
@@ -145,7 +155,7 @@ function SideDialogView({
             </Sheet>
 
             <UnsavedChangesDialog
-                open={navigationWasBlocked || drawerCloseRequested}
+                open={drawerCloseRequested}
                 handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
                 handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
                 body={blockedNavigationMessage}/>