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

package/src/core/Scaffold.tsx

@@ -0,0 +1,278 @@
+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 { CircularProgressCenter, ErrorBoundary, FireCMSAppBar, 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;
+
+    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.
+     */
+    FireCMSAppBarComponent?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
+
+    /**
+     * Additional props passed to the custom AppBar
+     */
+    fireCMSAppBarComponentProps?: 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,
+            FireCMSAppBarComponent = FireCMSAppBar,
+            fireCMSAppBarComponentProps,
+        } = 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"
+                    // }
+                }}>
+
+                <FireCMSAppBarComponent title={name}
+                                        includeDrawer={includeDrawer}
+                                        drawerOpen={computedDrawerOpen}
+                                        {...fireCMSAppBarComponentProps}/>
+
+                <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 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms 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 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+                    padding: props.open ? "32px 96px 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-[160px] h-[160px]")}/>
+                            : <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 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms 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>
+    );
+}

package/src/core/SideDialogs.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export type SideDialogContextProps = {
+    blocked: boolean;
+    setBlocked: (blocked: boolean) => void;
+    setBlockedNavigationMessage: (message?: React.ReactNode) => void;
+    width?: string;
+    close: (force?: boolean) => void;
+};
+/**
+ * This hook is used to access the properties of a particular side dialog,
+ * in contrast with {@link useSideDialogsController} which handles the
+ * state of all the dialogs.
+ */
+export declare const useSideDialogContext: () => SideDialogContextProps;
+/**
+ * This is the component in charge of rendering the side dialogs used
+ * for editing entities. Use the {@link useSideEntityController} to open
+ * and control the dialogs.
+ * This component needs a parent {@link FireCMS}
+ * {@link useSideDialogsController}
+ * @group Components
+ */
+export declare function SideDialogs(): import("react/jsx-runtime").JSX.Element;

package/src/core/SideDialogs.tsx

@@ -0,0 +1,156 @@
+import React, { useContext, useEffect, useState } from "react";
+import { useSideDialogsController } from "../hooks";
+import { SideDialogPanelProps } from "../types";
+import { Sheet } from "@firecms/ui";
+import { UnsavedChangesDialog, useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { ErrorBoundary } from "../components";
+
+export type SideDialogContextProps = {
+    blocked: boolean,
+    setBlocked: (blocked: boolean) => void,
+    setBlockedNavigationMessage: (message?: React.ReactNode) => void,
+    width?: string,
+    close: (force?: boolean) => void
+}
+
+const SideDialogContext = React.createContext<SideDialogContextProps>({
+    width: "",
+    blocked: false,
+    setBlocked: (blocked: boolean) => {
+    },
+    setBlockedNavigationMessage: (message?: React.ReactNode) => {
+    },
+    close: () => {
+    }
+});
+
+/**
+ * This hook is used to access the properties of a particular side dialog,
+ * in contrast with {@link useSideDialogsController} which handles the
+ * state of all the dialogs.
+ */
+export const useSideDialogContext = () => useContext<SideDialogContextProps>(SideDialogContext);
+
+/**
+ * This is the component in charge of rendering the side dialogs used
+ * for editing entities. Use the {@link useSideEntityController} to open
+ * and control the dialogs.
+ * This component needs a parent {@link FireCMS}
+ * {@link useSideDialogsController}
+ * @group Components
+ */
+export function SideDialogs() {
+
+    const sideDialogsController = useSideDialogsController();
+
+    const sidePanels = sideDialogsController.sidePanels;
+
+    const panels: (SideDialogPanelProps | undefined)[] = [...sidePanels];
+    panels.push(undefined);
+
+    return <>
+        {
+            panels.map((panel, index) =>
+                <SideDialogView
+                    key={`side_dialog_${index}`}
+                    panel={panel}
+                    offsetPosition={sidePanels.length - index - 1}/>)
+        }
+    </>;
+}
+
+function SideDialogView({
+                            offsetPosition,
+                            panel
+                        }: {
+    offsetPosition: number,
+    panel?: SideDialogPanelProps
+}) {
+
+    // was the closing of the dialog requested by the drawer
+    const [drawerCloseRequested, setDrawerCloseRequested] = useState<boolean>(false);
+    const [blocked, setBlocked] = useState(false);
+    const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
+
+    const widthRef = React.useRef<string | undefined>(panel?.width);
+    const width = widthRef.current;
+
+    const sideDialogsController = useSideDialogsController();
+
+    const {
+        navigationWasBlocked,
+        handleOk: handleNavigationOk,
+        handleCancel: handleNavigationCancel
+    } = useNavigationUnsavedChangesDialog(
+        blocked && !drawerCloseRequested,
+        () => setBlocked(false)
+    );
+
+    useEffect(() => {
+        if (panel)
+            widthRef.current = panel.width;
+    }, [panel])
+
+    const handleDrawerCloseOk = () => {
+        setBlocked(false);
+        setDrawerCloseRequested(false);
+        sideDialogsController.close();
+        panel?.onClose?.();
+    };
+
+    const handleDrawerCloseCancel = () => {
+        setDrawerCloseRequested(false);
+    };
+
+    const onCloseRequest = (force?: boolean) => {
+        if (blocked && !force) {
+            setDrawerCloseRequested(true);
+        } else {
+            sideDialogsController.close();
+            panel?.onClose?.();
+        }
+    };
+
+    // const offsetClass = offsetPosition > 0 ? `transform translate-x-${offsetPosition}` : "";
+
+    return (
+        <SideDialogContext.Provider
+            value={{
+                blocked,
+                setBlocked,
+                setBlockedNavigationMessage,
+                width,
+                close: onCloseRequest
+            }}>
+
+            <Sheet
+                open={Boolean(panel)}
+                onOpenChange={(open) => !open && onCloseRequest()}
+            >
+                {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 "}
+                        style={{
+                            width: panel.width,
+                            transform: `translateX(-${offsetPosition * 200}px)`
+                        }}
+                    >
+                        <ErrorBoundary>
+                            {panel.component}
+                        </ErrorBoundary>
+                    </div>}
+
+                {!panel && <div style={{ width }}/>}
+
+            </Sheet>
+
+            <UnsavedChangesDialog
+                open={navigationWasBlocked || drawerCloseRequested}
+                handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
+                handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
+                body={blockedNavigationMessage}/>
+
+        </SideDialogContext.Provider>
+
+    );
+}

package/src/core/field_configs.d.ts

@@ -0,0 +1,7 @@
+import { Property, PropertyConfig, ResolvedProperty } from "../types";
+export declare function isDefaultFieldConfigId(id: string): boolean;
+export declare const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>>;
+export declare function getDefaultFieldConfig(property: Property | ResolvedProperty): PropertyConfig | undefined;
+export declare function getFieldConfig(property: Property | ResolvedProperty, propertyConfigs: Record<string, PropertyConfig<any>>): PropertyConfig | undefined;
+export declare function getDefaultFieldId(property: Property | ResolvedProperty): "reference" | "date_time" | "repeat" | "block" | "group" | "switch" | "url" | "email" | "select" | "text_field" | "multiline" | "markdown" | "multi_select" | "number_input" | "number_select" | "multi_number_select" | "file_upload" | "multi_file_upload" | "key_value" | "multi_references" | "custom_array" | undefined;
+export declare function getFieldId(property: Property | ResolvedProperty): string | undefined;