@firecms/core 3.0.0-canary.25 → 3.0.0-canary.250

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();
@@ -68,43 +68,33 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
             });
         }
 
-        // 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}
 
@@ -112,7 +102,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
                 {notFoundRoute}
 
-                {customRoutes}
+                {children}
 
             </Routes>
         );
@@ -122,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}/>

package/src/core/field_configs.tsx

@@ -8,8 +8,9 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownFieldBinding,
-    MultiSelectBinding,
+    MarkdownEditorFieldBinding,
+    MultiSelectFieldBinding,
+    ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -23,7 +24,6 @@ import {
     AddLinkIcon,
     BallotIcon,
     DriveFolderUploadIcon,
-    EmailIcon,
     FlagIcon,
     FormatListNumberedIcon,
     FormatQuoteIcon,
@@ -31,6 +31,7 @@ import {
     LinkIcon,
     ListAltIcon,
     ListIcon,
+    MailIcon,
     NumbersIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -77,7 +78,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         property: {
             dataType: "string",
             markdown: true,
-            Field: MarkdownFieldBinding
+            Field: MarkdownEditorFieldBinding
         }
     },
     url: {
@@ -96,7 +97,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         key: "email",
         name: "Email",
         description: "Text with email validation",
-        Icon: EmailIcon,
+        Icon: MailIcon,
         color: "#154fb3",
         property: {
             dataType: "string",
@@ -129,7 +130,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     },
     multi_select: {
         key: "multi_select",
-        name: "Multi select",
+        name: "Multi select (enum)",
         description: "Select multiple text values from within an enumeration",
         Icon: ListAltIcon,
         color: "#4223c9",
@@ -139,7 +140,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "string",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     number_input: {
@@ -177,7 +178,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "number",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     file_upload: {
@@ -211,10 +212,21 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: StorageUploadFieldBinding
         }
     },
+    reference_as_string: {
+        key: "reference_as_string",
+        name: "Reference (as string)",
+        description: "The value refers to a different collection (it is saved as a string)",
+        Icon: LinkIcon,
+        color: "#154fb3",
+        property: {
+            dataType: "string",
+            Field: ReferenceAsStringFieldBinding
+        }
+    },
     reference: {
         key: "reference",
         name: "Reference",
-        description: "The value refers to a different collection",
+        description: "The value refers to a different collection (it is saved as a reference)",
         Icon: LinkIcon,
         color: "#ff0042",
         property: {
@@ -300,7 +312,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     block: {
         key: "block",
         name: "Block",
-        description: "A complex field that allows the user to compose different fields together, with a key->value format",
+        description: "A complex field that allows the user to compose different fields together, with a key/value format",
         Icon: ViewStreamIcon,
         color: "#ff9408",
         property: {
@@ -331,7 +343,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) {
@@ -348,6 +360,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "email";
         } else if (property.enumValues) {
             return "select";
+        } else if (property.reference) {
+            return "reference_as_string";
         } else {
             return "text_field";
         }
@@ -359,8 +373,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,12 +1,13 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
-
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./DefaultDrawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
+
+export * from "./FireCMSRouter";
+
+export * from "../app";