@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

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;
 }
 
 /**
@@ -76,7 +36,7 @@ export interface ScaffoldProps<ExtraAppbarProps = object> {
  * This component needs a parent {@link FireCMS}
  *
  * @param props
- * @constructor
+
  * @group Core
  */
 export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
@@ -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);
@@ -111,55 +79,57 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
 
+        const hasAppBar = Boolean(appBarChildren.length > 0);
         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
                         className="flex flex-col flex-grow overflow-auto">
-                        <DrawerHeader/>
+                        {hasAppBar && <DrawerHeader/>}
                         <div
-                            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")}>
+                            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", {
+                                "lg:mt-4": !hasAppBar
+                            })}>
 
                             <ErrorBoundary>
-                                {children}
+                                {otherChildren}
                             </ErrorBoundary>
 
                         </div>
                     </main>
                 </div>
-            </DrawerContext.Provider>
+            </AppContext.Provider>
         );
     },
     equal
@@ -183,8 +153,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,44 +166,35 @@ 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"
-            >
-                <IconButton
-                    color="inherit"
-                    aria-label="Open menu"
-                    className="sticky top-2 left-3 "
-                    onClick={() => props.setDrawerOpen(true)}
-                    size="large"
-                >
-                    <MenuIcon/>
-                </IconButton>
+                     asChild={true}>
+                <div
+                    className="ml-2 fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    <IconButton
+                        color="inherit"
+                        aria-label="Open menu"
+                        className="sticky top-2 left-3 "
+                        onClick={() => props.setDrawerOpen(true)}
+                        size="large"
+                    >
+                        <MenuIcon/>
+                    </IconButton>
+                </div>
             </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>
 
@@ -251,7 +210,7 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute top-2 left-6"
+                className="absolute top-2 left-5"
             >
                 <MenuIcon/>
             </IconButton>
@@ -259,6 +218,8 @@ function DrawerWrapper(props: {
                    transparent={true}
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
+                   title={"Navigaion drawer"}
+                   overlayClassName={"bg-white bg-opacity-80"}
             >
                 {innerDrawer}
             </Sheet>
@@ -267,7 +228,7 @@ function DrawerWrapper(props: {
 
     return (
         <div
-            className="relative"
+            className="z-20 relative"
             onMouseEnter={props.onMouseEnter}
             onMouseMove={props.onMouseMove}
             onMouseLeave={props.onMouseLeave}
@@ -278,18 +239,6 @@ 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>
     );
 }

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/ArrayContainer.tsx

@@ -7,7 +7,8 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin, HandleIcon,
+    fieldBackgroundHoverMixin,
+    HandleIcon,
     IconButton,
     Menu,
     MenuItem,
@@ -26,7 +27,8 @@ interface ArrayContainerProps<T> {
     onInternalIdAdded?: (id: number) => void;
     includeAddButton?: boolean;
     newDefaultEntry: T;
-    onValueChange: (value: T[]) => void
+    onValueChange: (value: T[]) => void,
+    className?: string;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -52,7 +54,8 @@ export function ArrayContainer<T>({
                                       onInternalIdAdded,
                                       includeAddButton,
                                       newDefaultEntry,
-                                      onValueChange
+                                      onValueChange,
+                                      className
                                   }: ArrayContainerProps<T>) {
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
@@ -153,6 +156,7 @@ export function ArrayContainer<T>({
             >
                 {(droppableProvided, droppableSnapshot) => (
                     <div
+                        className={className}
                         {...droppableProvided.droppableProps}
                         ref={droppableProvided.innerRef}>
                         {hasValue && internalIds.map((internalId: number, index: number) => {
@@ -235,12 +239,13 @@ export function ArrayContainerItem({
         {...provided.draggableProps}
         style={provided.draggableProps.style}
         className={`${
-            (isDragging || onHover) ? fieldBackgroundHoverMixin : ""
+            (isDragging || onHover) ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""
         } mb-1 rounded-md opacity-100`}
     >
         <div
             className="flex items-start">
-            <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
+            <div
+                className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
                 {buildEntry(index, internalId)}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
@@ -253,7 +258,6 @@ export function ArrayContainerItem({
     </div>;
 }
 
-
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -283,11 +287,13 @@ export function ArrayItemOptions({
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
             title="Drag to move. Click for more options">
-
             <IconButton
                 size="small"
                 disabled={disabled}
-                onClick={() => setMenuOpen(true)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setMenuOpen(true);
+                }}
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
@@ -298,7 +304,7 @@ export function ArrayItemOptions({
             <Menu
                 portalContainer={iconRef.current}
                 open={menuOpen}
-                trigger={<div/>}>
+                trigger={<div tabIndex={-1}/>}>
 
                 <MenuItem dense onClick={(e) => {
                     setMenuOpen(false);
@@ -316,7 +322,6 @@ export function ArrayItemOptions({
                 </MenuItem>
 
             </Menu>
-
         </Tooltip>
 
     </div>;

package/src/components/CircularProgressCenter.tsx

@@ -5,7 +5,7 @@ import { CircularProgress, CircularProgressProps, Typography } from "@firecms/ui
  *
  * @param text
  * @param props
- * @constructor
+
  * @ignore
  */
 export function CircularProgressCenter({ text, ...props }: CircularProgressProps & {

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -14,7 +14,6 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param size
  * @param toggleEntitySelection
  * @param hideId
- * @constructor
  *
  * @group Collection components
  */
@@ -56,12 +55,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        selectionController?.toggleEntitySelection(entity);
-    }, [entity, selectionController?.toggleEntitySelection]);
-
-    const onClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        selectionController?.toggleEntitySelection(entity);
+        selectionController?.toggleEntitySelection(entity, checked);
     }, [entity, selectionController?.toggleEntitySelection]);
 
     const hasActions = actions.length > 0;
@@ -71,7 +65,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     return (
         <div
-            onClick={onClick}
             className={cls(
                 "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
@@ -87,7 +80,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <Tooltip key={index}
+                                 title={action.name}
+                                 asChild={true}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
@@ -149,16 +144,14 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
+                <div
+                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
 
                     {entity
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -246,7 +246,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             : collectionColumns) as VirtualTableColumn[]
     ];
 
-    const cellRenderer = (props: CellRendererParams<any>) => {
+    const cellRenderer = useCallback((props: CellRendererParams<any>) => {
         const column = props.column;
         const columns = props.columns;
         const columnKey = column.key;
@@ -286,7 +286,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 <ErrorView error={e}/>
             </EntityTableCell>;
         }
-    }
+    }, [tableRowActionsBuilder, additionalCellRenderer, propertyCellRenderer, size]);
 
     return (
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -49,6 +49,8 @@ export interface PropertyTableCellProps<T extends CMSType> {
 }
 
 function isStorageProperty(property: ResolvedProperty) {
+    if (property.dataType === "string" && property.markdown)
+        return false;
     if (property.dataType === "string" && (property as ResolvedStringProperty).storage)
         return true;
     if (property.dataType === "array") {
@@ -147,7 +149,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                 onValueUpdated,
                                 data: entity,
                             });
-                        } catch (e:any) {
+                        } catch (e: any) {
                             console.error("onValueChange error", e);
                             setError(e);
                         }
@@ -306,7 +308,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
-                } else if (!stringProperty.storage) {
+                } else if (stringProperty.markdown || !stringProperty.storage) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { getReferenceFrom } from "../../../util";
+import { getReferenceFrom, IconForView } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { Button } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -39,11 +39,11 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
             throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
         }
     }
-    return <TableReferenceFieldSuccess {...props} collection={collection}/>;
+    return <TableReferenceFieldInternal {...props} collection={collection}/>;
 }
 
-export const TableReferenceFieldSuccess = React.memo(
-    function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+export const TableReferenceFieldInternal = React.memo(
+    function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
         collection: EntityCollection;
     }) {
         const {
@@ -87,11 +87,11 @@ export const TableReferenceFieldSuccess = React.memo(
             }
         );
 
-        const handleOpen = useCallback(() => {
+        const handleOpen = () => {
             if (disabled)
                 return;
             referenceDialogController.open();
-        }, [disabled, referenceDialogController]);
+        };
 
         const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
 
@@ -123,7 +123,7 @@ export const TableReferenceFieldSuccess = React.memo(
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
-                                size={"tiny"}
+                                size={"smallest"}
                                 reference={reference}
                                 hover={!disabled}
                                 disabled={!path}
@@ -150,13 +150,20 @@ export const TableReferenceFieldSuccess = React.memo(
                 {internalValue && multiselect && buildMultipleReferenceField()}
 
                 {valueNotSet &&
-                    <Button
+                    <EntityPreviewContainer
+                        className={cls("px-4 py-2 text-sm font-medium flex items-center uppercase",
+                            multiselect ? "gap-4" : "gap-6",
+                            disabled
+                                ? "text-slate-500"
+                                : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
                         onClick={handleOpen}
-                        size={"small"}
-                        variant="outlined"
-                        color="primary">
+                        size={"medium"}>
+                        <IconForView
+                            size={"small"}
+                            collectionOrView={collection}
+                            className={"text-gray-300 dark:text-gray-600"}/>
                         Edit {title}
-                    </Button>}
+                    </EntityPreviewContainer>}
 
             </div>
         );