@firecms/core 3.0.0-canary.61 → 3.0.0-canary.63

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.61",
+    "version": "3.0.0-canary.63",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/formex": "^3.0.0-canary.61",
-        "@firecms/ui": "^3.0.0-canary.61",
+        "@firecms/formex": "^3.0.0-canary.63",
+        "@firecms/ui": "^3.0.0-canary.63",
         "@fontsource/jetbrains-mono": "^5.0.20",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.0.4",
@@ -111,7 +111,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "bd4ff11fc59df78b8967e20c2229afab86e35d81",
+    "gitHead": "ebf432414a10a3e316be86d4b6ad4aa7be2786ad",
     "publishConfig": {
         "access": "public"
     },

package/src/app/AppBar.tsx

@@ -0,0 +1,18 @@
+import { DefaultAppBar, DefaultAppBarProps } from "../core/DefaultAppBar";
+
+/**
+ * This component renders the main app bar of FireCMS.
+ */
+export function AppBar({
+                           children,
+                           ...props
+                       }: {
+    children?: React.ReactNode,
+    className?: string,
+    style?: React.CSSProperties
+} & DefaultAppBarProps) {
+    const usedChildren = children ?? <DefaultAppBar {...props}/>;
+    return <>{usedChildren}</>;
+}
+
+AppBar.componentType = "AppBar";

package/src/app/Drawer.tsx

@@ -0,0 +1,25 @@
+import { DefaultDrawer } from "../core";
+
+/**
+ * This component is in charge of rendering the drawer.
+ * If you add this component under your {@link Scaffold}, it will be rendered
+ * as a drawer, and the open and close functionality will be handled automatically.
+ * If you want to customise the drawer, you can create your own component and pass it as a child.
+ * For custom drawers, you can use the {@link useApp} to open and close the drawer.
+ *
+ * @constructor
+ */
+export function Drawer({
+                           children,
+                           className,
+                           style
+                       }: {
+    children?: React.ReactNode,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    const usedChildren = children ?? <DefaultDrawer className={className} style={style}/>;
+    return <>{usedChildren}</>;
+}
+
+Drawer.componentType = "Drawer";

package/src/{core → app}/Scaffold.tsx

@@ -1,55 +1,16 @@
 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, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import equal from "react-fast-compare"
+import { useLargeLayout } from "../hooks";
+import { ErrorBoundary } from "../components";
+import { AppContext } from "./useApp";
 
 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<ExtraAppbarProps = object> {
-
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name?: React.ReactNode;
-
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    includeDrawer?: boolean;
-
-    /**
-     * You can define a custom drawer to be displayed in the scaffold.
-     * Use the hook `useDrawer` to access the context values.
-     */
-    drawer?: React.ReactNode;
+export interface ScaffoldProps {
 
     /**
      * Open the drawer on hover
@@ -57,15 +18,14 @@ export interface ScaffoldProps<ExtraAppbarProps = object> {
     autoOpenDrawer?: boolean;
 
     /**
-     * The AppBar component to be used in the scaffold.
+     * Logo to be displayed in the top bar and drawer.
+     * Note that this has no effect if you are using a custom AppBar or Drawer.
      */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
+    logo?: string;
 
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
+    className?: string;
 
+    style?: React.CSSProperties;
 }
 
 /**
@@ -84,15 +44,23 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const {
             children,
-            name,
-            logo,
-            includeDrawer = true,
             autoOpenDrawer,
-            drawer = <DefaultDrawer/>,
-            FireCMSAppBar = DefaultFireCMSAppBar,
-            fireCMSAppBarProps,
+            logo,
+            className,
+            style
         } = props;
 
+        const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
+        if (drawerChildren.length > 1) {
+            throw Error("Only one Drawer component is allowed in Scaffold");
+        }
+        const appBarChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "AppBar");
+        if (appBarChildren.length > 1) {
+            throw Error("Only one AppBar component is allowed in Scaffold");
+        }
+        const otherChildren = React.Children.toArray(children)
+            .filter((child: any) => child.type.componentType !== "Drawer" && child.type.componentType !== "AppBar");
+        const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
         const [drawerOpen, setDrawerOpen] = React.useState(false);
@@ -112,38 +80,37 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
 
         return (
-            <DrawerContext.Provider value={{
-                hovered: onHover,
+            <AppContext.Provider value={{
+                logo,
+                hasDrawer: includeDrawer,
+                drawerHovered: 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"
+                    className={cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className)}
                     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"
+                        height: "100dvh",
+                        ...style
                     }}>
 
-                    <FireCMSAppBar title={name}
-                                   includeDrawer={includeDrawer}
-                                   logo={logo}
-                                   drawerOpen={computedDrawerOpen}
-                                   {...fireCMSAppBarProps}/>
+                    {appBarChildren}
+
                     <DrawerWrapper
                         displayed={includeDrawer}
                         onMouseEnter={setOnHoverTrue}
                         onMouseMove={setOnHoverTrue}
                         onMouseLeave={setOnHoverFalse}
                         open={computedDrawerOpen}
-                        logo={logo}
                         hovered={onHover}
                         setDrawerOpen={setDrawerOpen}>
-                        {includeDrawer && drawer}
+                        {includeDrawer && drawerChildren}
                     </DrawerWrapper>
 
                     <main
@@ -153,13 +120,13 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                             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}
+                                {otherChildren}
                             </ErrorBoundary>
 
                         </div>
                     </main>
                 </div>
-            </DrawerContext.Provider>
+            </AppContext.Provider>
         );
     },
     equal
@@ -183,8 +150,6 @@ function DrawerWrapper(props: {
     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"}
@@ -198,7 +163,7 @@ function DrawerWrapper(props: {
             <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"
+                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20"
             >
                 <IconButton
                     color="inherit"
@@ -212,30 +177,19 @@ function DrawerWrapper(props: {
             </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={cls("cursor-pointer")}>
-
-                <Tooltip title={"Home"}
-                         sideOffset={20}
-                         side="right">
-                    <Link
-                        to={navigation.basePath}>
-                        {props.logo
-                            ? <img src={props.logo}
-                                   alt="Logo"
-                                   className={cls("max-w-full max-h-full",
-                                       props.open ?? "w-[112px] h-[112px]")}/>
-                            : <FireCMSLogo/>}
-
-                    </Link>
-                </Tooltip>
-            </div>
+        <div
+            className={`z-20 absolute right-0 top-4 ${
+                props.open ? "opacity-100" : "opacity-0 invisible"
+            } transition-opacity duration-200 ease-in-out`}>
+            <IconButton
+                aria-label="Close drawer"
+                onClick={() => props.setDrawerOpen(false)}
+            >
+                <ChevronLeftIcon/>
+            </IconButton>
+        </div>
 
+        <div className={"flex flex-col h-full"}>
             {props.children}
         </div>
 
@@ -267,7 +221,7 @@ function DrawerWrapper(props: {
 
     return (
         <div
-            className="relative"
+            className="z-20 relative"
             onMouseEnter={props.onMouseEnter}
             onMouseMove={props.onMouseMove}
             onMouseLeave={props.onMouseLeave}
@@ -278,17 +232,17 @@ function DrawerWrapper(props: {
 
             {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*/}
+            {/*    className={`z-20 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>
     );

package/src/app/index.ts

@@ -0,0 +1,4 @@
+export * from "./Drawer";
+export * from "./AppBar";
+export * from "./Scaffold";
+export * from "./useApp";

package/src/app/useApp.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+/**
+ * This context represents the state of the app in terms of layout.
+ * @group Core
+ */
+export type AppState = {
+    hasDrawer: boolean,
+    drawerHovered: boolean,
+    drawerOpen: boolean,
+    openDrawer: () => void,
+    closeDrawer: () => void,
+    autoOpenDrawer?: boolean,
+    logo?: string
+}
+
+export const AppContext = React.createContext<AppState>({
+    hasDrawer: false,
+    drawerHovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useApp() {
+    return React.useContext(AppContext);
+}

package/src/components/index.tsx

@@ -29,7 +29,7 @@ export * from "./DeleteConfirmationDialog";
 
 export * from "./FireCMSLogo";
 
-export * from "./FireCMSAppBar";
+export * from "../core/DefaultAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";

package/src/{components/FireCMSAppBar.tsx → core/DefaultAppBar.tsx}

@@ -16,8 +16,9 @@ import {
 } from "@firecms/ui";
 import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
 import { User } from "../types";
+import { useApp } from "../app/useApp";
 
-export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
+export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
     title?: React.ReactNode;
     /**
@@ -29,12 +30,8 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     dropDownActions?: React.ReactNode;
 
-    includeDrawer?: boolean;
-
     includeModeToggle?: boolean;
 
-    drawerOpen: boolean;
-
     className?: string;
 
     style?: React.CSSProperties;
@@ -48,24 +45,24 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
  * This component renders the main app bar of FireCMS.
  * You will likely not need to use this component directly.
  *
- * @param title
- * @param toolbarExtraWidget
- * @param drawerOpen
  * @constructor
  */
-export const FireCMSAppBar = function FireCMSAppBar({
+export const DefaultAppBar = function DefaultAppBar({
                                                         title,
                                                         endAdornment,
                                                         startAdornment,
-                                                        drawerOpen,
                                                         dropDownActions,
-                                                        includeDrawer,
                                                         includeModeToggle = true,
                                                         className,
                                                         style,
-                                                        logo,
                                                         user: userProp
-                                                    }: FireCMSAppBarProps) {
+                                                    }: DefaultAppBarProps) {
+
+    const {
+        hasDrawer,
+        drawerOpen,
+        logo
+    } = useApp();
     const navigation = useNavigationController();
 
     const authController = useAuthController();
@@ -96,20 +93,15 @@ export const FireCMSAppBar = function FireCMSAppBar({
     return (
         <div
             style={style}
-            className={cls("pr-2",
+            className={cls("pr-2 w-full h-16 transition-all ease-in duration-75 fixed",
                 {
-                    "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout),
-                    "h-16": true,
+                    "pl-[17rem]": drawerOpen && largeLayout,
+                    "pl-20": hasDrawer && !(drawerOpen && largeLayout),
                     "z-10": largeLayout,
-                    "transition-all": true,
-                    "ease-in": true,
-                    "duration-75": true,
-                    "w-full": !includeDrawer,
-                    "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
-                    "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
+                    // "w-full": !hasDrawer,
+                    // "w-[calc(100%-64px)]": hasDrawer && !(drawerOpen && largeLayout),
+                    // "w-[calc(100%-17rem)]": hasDrawer && (drawerOpen && largeLayout),
                     "duration-150": drawerOpen && largeLayout,
-                    fixed: true
                 },
                 className)}>
 
@@ -121,7 +113,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                         to={navigation?.basePath ?? "/"}
                     >
                         <div className={"flex flex-row gap-4"}>
-                            {!includeDrawer && (logo
+                            {!hasDrawer && (logo
                                 ? <img src={logo}
                                        alt="Logo"
                                        className={cls("w-[32px] h-[32px]")}/>

package/src/core/DefaultDrawer.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback } from "react";
+
+import { useLargeLayout, useNavigationController } from "../hooks";
+
+import { Link, useNavigate } from "react-router-dom";
+import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
+import { IconForView } from "../util";
+import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { FireCMSLogo } from "../components";
+import { useApp } from "../app/useApp";
+
+/**
+ * Default drawer used in the CMS
+ * @group Core
+ */
+export function DefaultDrawer({
+                                  className,
+                                  style,
+                              }: {
+    className?: string
+    style?: React.CSSProperties,
+}) {
+
+    const {
+        drawerHovered,
+        drawerOpen,
+        closeDrawer,
+        logo
+    } = useApp();
+
+    const analyticsController = useAnalyticsController();
+    const navigation = useNavigationController();
+
+    const tooltipsOpen = drawerHovered && !drawerOpen;
+    const largeLayout = useLargeLayout();
+    const navigate = useNavigate();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
+
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in Drawer");
+
+    const {
+        navigationEntries,
+        groups
+    }: TopNavigationResult = navigation.topLevelNavigation;
+
+    const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
+    const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
+
+    const buildGroupHeader = useCallback((group?: string) => {
+        if (!drawerOpen) return <div className="h-12 w-full"/>;
+        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 line-clamp-1">
+                {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");
+        analyticsController.onAnalyticsEvent?.(eventName, { url: view.url });
+        if (!largeLayout)
+            closeDrawer();
+    };
+
+    return (
+        <>
+            <div className={cls("flex flex-col h-full relative flex-grow w-full", className)} style={style}>
+
+                <DrawerLogo logo={logo}/>
+
+                <div className={"overflow-scroll no-scrollbar"}>
+
+                    {groupsWithoutAdmin.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={<IconForView collectionOrView={view.collection ?? view.view}/>}
+                                        tooltipsOpen={tooltipsOpen}
+                                        drawerOpen={drawerOpen}
+                                        onClick={() => onClick(view)}
+                                        url={view.url}
+                                        name={view.name}/>)}
+                        </React.Fragment>
+                    ))}
+
+                </div>
+
+                {adminViews.length > 0 && <Menu
+                    open={adminMenuOpen}
+                    onOpenChange={setAdminMenuOpen}
+                    trigger={
+                        <IconButton
+                            shape={"square"}
+                            className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                            <Tooltip title={"Admin"}
+                                     open={tooltipsOpen}
+                                     side={"right"} sideOffset={28}>
+                                <MoreVertIcon/>
+                            </Tooltip>
+                            {drawerOpen && <div
+                                className={cls(
+                                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                                    "mx-4 font-inherit text-inherit"
+                                )}>
+                                ADMIN
+                            </div>}
+                        </IconButton>}
+                >
+                    {adminViews.map((entry, index) =>
+                        <MenuItem
+                            onClick={(event) => {
+                                event.preventDefault();
+                                navigate(entry.path);
+                            }}
+                            key={`navigation_${index}`}>
+                            {<IconForView collectionOrView={entry.view}/>}
+                            {entry.name}
+                        </MenuItem>)}
+
+                </Menu>}
+            </div>
+
+        </>
+    );
+}
+
+/**
+ * This is the logo displayed in the drawer
+ * It expands when the drawer is open.
+ *
+ * @param logo
+ * @constructor
+ */
+export function DrawerLogo({ logo }: {
+    logo?: string;
+}) {
+
+    const navigation = useNavigationController();
+    const { drawerOpen } = useApp();
+    return <div
+        style={{
+            transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 16px 0px"
+        }}
+        className={cls("cursor-pointer")}>
+
+        <Tooltip title={"Home"}
+                 sideOffset={20}
+                 side="right">
+            <Link
+                to={navigation.basePath}>
+                {logo
+                    ? <img src={logo}
+                           alt="Logo"
+                           className={cls("max-w-full max-h-full",
+                               drawerOpen ?? "w-[112px] h-[112px]")}/>
+                    : <FireCMSLogo/>}
+
+            </Link>
+        </Tooltip>
+    </div>;
+}