@firecms/core 3.0.0-beta.1 → 3.0.0-beta.11

package/src/components/common/useTableSearchHelper.ts

@@ -0,0 +1,88 @@
+import { useState } from "react";
+
+import { EntityCollection } from "../../types";
+import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
+
+export interface UseTableSearchHelperParams<M extends Record<string, any>> {
+    collection: EntityCollection<M>;
+    fullPath: string;
+    parentCollectionIds?: string[];
+}
+
+export function useTableSearchHelper<M extends Record<string, any>>({
+                                                                        collection,
+                                                                        fullPath,
+                                                                        parentCollectionIds
+                                                                    }: UseTableSearchHelperParams<M>) {
+
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+    const dataSource = useDataSource();
+
+    const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
+    const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+
+    let onTextSearchClick: (() => void) | undefined;
+    let textSearchEnabled = Boolean(collection.textSearchEnabled);
+
+    const props = {
+        context,
+        path: fullPath,
+        databaseId: collection.databaseId,
+        collection,
+        parentCollectionIds
+    };
+
+    const searchBlocked = customizationController.plugins?.find(p => {
+        return p.collectionView?.blockSearch?.(props);
+    });
+
+    const addTextSearchClickListener = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    if (addTextSearchClickListener) {
+
+        onTextSearchClick = addTextSearchClickListener
+            ? () => {
+                setTextSearchLoading(true);
+                const promises: Promise<boolean>[] = [];
+                if (dataSource?.initTextSearch && !searchBlocked) {
+                    promises.push(dataSource.initTextSearch(props));
+                }
+                if (searchBlocked) {
+                    customizationController.plugins?.forEach(p => {
+                        if (p.collectionView?.onTextSearchClick)
+                            promises.push(p.collectionView.onTextSearchClick({
+                                context,
+                                path: fullPath,
+                                collection,
+                                parentCollectionIds
+                            }));
+                    })
+                }
+                return Promise.all(promises)
+                    .then((res: boolean[]) => {
+                        if (res.every(Boolean)) setTextSearchInitialised(true);
+                    })
+                    .finally(() => setTextSearchLoading(false));
+            }
+            : undefined;
+
+        customizationController.plugins?.forEach(p => {
+            if (!textSearchEnabled)
+                if (p.collectionView?.showTextSearchBar) {
+                    textSearchEnabled = p.collectionView.showTextSearchBar({
+                        context,
+                        path: fullPath,
+                        collection,
+                        parentCollectionIds
+                    });
+                }
+        })
+    }
+    return {
+        textSearchLoading,
+        textSearchInitialised,
+        onTextSearchClick,
+        textSearchEnabled
+    };
+}

package/src/components/index.tsx

@@ -1,31 +1,38 @@
 export type { ErrorViewProps } from "./ErrorView";
 export { ErrorView } from "./ErrorView";
 
-export type { EntityPreviewProps } from "./EntityPreview";
-export { EntityPreview } from "./EntityPreview";
+export type { EntityViewProps } from "./EntityView";
+export { EntityView } from "./EntityView";
 
-export type { ReferenceSelectionInnerProps } from "./ReferenceSelectionInner";
-export { ReferenceSelectionInner } from "./ReferenceSelectionInner";
+export type { ReferenceSelectionInnerProps } from "./ReferenceTable/ReferenceSelectionTable";
+export { ReferenceSelectionTable } from "./ReferenceTable/ReferenceSelectionTable";
 
 export { CircularProgressCenter } from "./CircularProgressCenter";
 
+export * from "./common";
+
 export * from "./HomePage";
+export * from "./SelectableTable/SelectableTable";
+export * from "./SelectableTable/SelectableTableContext";
 export * from "./EntityCollectionView/EntityCollectionView";
+export * from "./EntityCollectionView/EntityCollectionViewActions";
+export * from "./EntityCollectionView/useSelectionController";
 
-export * from "./FieldConfigBadge";
+export * from "./PropertyConfigBadge";
+export * from "./PropertyIdCopyTooltip";
 
 export * from "./EntityCollectionTable";
 export * from "./NotFoundPage";
 
 export * from "./VirtualTable";
 export * from "./ErrorBoundary";
-export * from "./DeleteConfirmationDialog";
+export * from "./ConfirmationDialog";
 
 export * from "./FireCMSLogo";
 
-export * from "./FireCMSAppBar";
+export * from "../core/DefaultAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
-export * from "./LabelWithIcon";
 export * from "./SearchIconsView";
+export * from "./FieldCaption";

package/src/contexts/AuthControllerContext.tsx

@@ -1,4 +1,4 @@
 import React from "react";
 import { AuthController } from "../types";
 
-export const AuthControllerContext = React.createContext<AuthController>({} as AuthController);
+export const AuthControllerContext = React.createContext<AuthController<any, any>>({} as AuthController<any, any>);

package/src/contexts/DialogsProvider.tsx

@@ -18,14 +18,14 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
         if (dialogEntries.length === 0)
             return;
 
-        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        const updatedPanels = [...dialogEntriesRef.current.slice(0, -1)];
         updateDialogEntries(updatedPanels);
 
     }, [dialogEntries]);
 
     const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
 
-        const updatedPanels = [...dialogEntries, dialogEntry];
+        const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
 
         return {

package/src/contexts/SnackbarProvider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { PropsWithChildren } from "react";
 import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
 

package/src/core/DefaultAppBar.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+
+import { Link as ReactLink, useNavigate } from "react-router-dom";
+import { ErrorBoundary, FireCMSLogo } from "../components";
+import {
+    Avatar,
+    cls,
+    DarkModeIcon,
+    IconButton,
+    LightModeIcon,
+    LogoutIcon,
+    Menu,
+    MenuItem,
+    Skeleton,
+    Typography
+} from "@firecms/ui";
+import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
+import { User } from "../types";
+import { useApp } from "../app/useApp";
+
+export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
+
+    title?: React.ReactNode;
+    /**
+     * A component that gets rendered on the upper side of the main toolbar
+     */
+    endAdornment?: React.ReactNode;
+
+    startAdornment?: React.ReactNode;
+
+    dropDownActions?: React.ReactNode;
+
+    includeModeToggle?: boolean;
+
+    className?: string;
+
+    style?: React.CSSProperties;
+
+    logo?: string;
+
+    user?: User;
+} & ADDITIONAL_PROPS;
+
+/**
+ * This component renders the main app bar of FireCMS.
+ * You will likely not need to use this component directly.
+ *
+
+ */
+export const DefaultAppBar = function DefaultAppBar({
+                                                        title,
+                                                        endAdornment,
+                                                        startAdornment,
+                                                        dropDownActions,
+                                                        includeModeToggle = true,
+                                                        className,
+                                                        style,
+                                                        user: userProp
+                                                    }: DefaultAppBarProps) {
+
+    const {
+        hasDrawer,
+        drawerOpen,
+        logo
+    } = useApp();
+    const navigation = useNavigationController();
+
+    const authController = useAuthController();
+    const {
+        mode,
+        toggleMode
+    } = useModeController();
+
+    const navigate = useNavigate();
+
+    const largeLayout = useLargeLayout();
+
+    const user = userProp ?? authController.user;
+
+    let avatarComponent: JSX.Element | null;
+
+    if (user) {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar src={user.photoURL ?? undefined}>
+            {initial}
+        </Avatar>;
+    } else if (user === undefined || authController.initialLoading) {
+        avatarComponent = <div className={"p-1 flex justify-center"}>
+            <Skeleton className={"w-10 h-10 rounded-full"}/>
+        </div>;
+    } else {
+        avatarComponent = null;
+    }
+
+    return (
+        <div
+            style={style}
+            className={cls("w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+                "flex flex-row gap-2 px-4 items-center",
+                {
+                    "pl-[19rem]": drawerOpen && largeLayout,
+                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
+                    "z-10": largeLayout,
+                    "duration-100": drawerOpen && largeLayout,
+                },
+                className)}>
+
+
+            {navigation && <div className="mr-8 hidden lg:block">
+                <ReactLink
+                    className="visited:text-inherit visited:dark:text-inherit block"
+                    to={navigation?.basePath ?? "/"}
+                >
+                    <div className={"flex flex-row gap-4"}>
+                        {!hasDrawer && (logo
+                            ? <img src={logo}
+                                   alt="Logo"
+                                   className={cls("w-[32px] h-[32px] object-contain")}/>
+                            : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                        {typeof title === "string"
+                            ? <Typography variant="subtitle1"
+                                          noWrap>
+                                {title}
+                            </Typography>
+                            : title}
+                    </div>
+                </ReactLink>
+            </div>}
+
+            {startAdornment}
+
+            <div className={"flex-grow"}/>
+
+            {endAdornment &&
+                <ErrorBoundary>
+                    {endAdornment}
+                </ErrorBoundary>}
+
+            {includeModeToggle && <IconButton
+                color="inherit"
+                aria-label="Open drawer"
+                onClick={toggleMode}
+                size="large">
+                {mode === "dark"
+                    ? <DarkModeIcon/>
+                    : <LightModeIcon/>}
+            </IconButton>}
+
+            <Menu trigger={avatarComponent}>
+                {user && <div className={"px-4 py-2 mb-2"}>
+                    {user.displayName && <Typography variant={"body1"} color={"secondary"}>
+                        {user.displayName}
+                    </Typography>}
+                    {user.email && <Typography variant={"body2"} color={"secondary"}>
+                        {user.email}
+                    </Typography>}
+                </div>}
+
+                {dropDownActions}
+
+                {!dropDownActions && <MenuItem onClick={async () => {
+                    await authController.signOut();
+                    // replace current route with home
+                    navigate("/");
+                }}>
+                    <LogoutIcon/>
+                    Log Out
+                </MenuItem>}
+
+            </Menu>
+
+        </div>
+    );
+}

package/src/core/DefaultDrawer.tsx

@@ -0,0 +1,185 @@
+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 [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
+
+    const analyticsController = useAnalyticsController();
+    const navigation = useNavigationController();
+
+    const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
+    const largeLayout = useLargeLayout();
+    const navigate = useNavigate();
+
+    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="w-full"/>;
+        return <div
+            className="pl-6 pr-8 py-4 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={"mt-4 flex-grow overflow-scroll no-scrollbar"}
+                     style={{
+                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                     }}>
+
+                    {groupsWithoutAdmin.map((group) => (
+                        <div
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
+                            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}
+                                                           size={"small"}/>}
+                                        tooltipsOpen={tooltipsOpen}
+                                        adminMenuOpen={adminMenuOpen}
+                                        drawerOpen={drawerOpen}
+                                        onClick={() => onClick(view)}
+                                        url={view.url}
+                                        name={view.name}/>)}
+                        </div>
+                    ))}
+
+                </div>
+
+                {adminViews.length > 0 && <Menu
+                    side={"right"}
+                    open={adminMenuOpen}
+                    onOpenChange={setAdminMenuOpen}
+                    trigger={
+                        <IconButton
+                            shape={"square"}
+                            className={"m-4 text-surface-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
+
+ */
+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 12px 0px 12px"
+        }}
+        className={cls("cursor-pointer rounded ml-3 mr-1")}>
+
+        <Tooltip title={"Home"}
+                 sideOffset={20}
+                 side="right">
+            <Link
+                className={"block"}
+                to={navigation.basePath}>
+                {logo
+                    ? <img src={logo}
+                           alt="Logo"
+                           className={cls("max-w-full max-h-full transition-all",
+                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
+                    : <FireCMSLogo/>}
+
+            </Link>
+        </Tooltip>
+    </div>;
+}

package/src/core/DrawerNavigationItem.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import { NavLink } from "react-router-dom";
+import { cls, Tooltip } from "@firecms/ui";
+
+export function DrawerNavigationItem({
+                                         name,
+                                         icon,
+                                         drawerOpen,
+                                         adminMenuOpen,
+                                         tooltipsOpen,
+                                         url,
+                                         onClick
+                                     }: {
+    icon: React.ReactElement,
+    name: string,
+    tooltipsOpen: boolean,
+    drawerOpen: boolean,
+    adminMenuOpen?: boolean,
+    url: string,
+    onClick?: () => void,
+}) {
+
+    const iconWrap = <div
+        className={"text-text-secondary dark:text-text-secondary-dark"}>
+        {icon}
+    </div>;
+
+    const listItem = <div>
+        <NavLink
+            onClick={onClick}
+            style={{
+                width: "100%",
+                transition: drawerOpen ? "width 150ms ease-in" : undefined
+            }}
+            className={({ isActive }: any) => cls("rounded-lg truncate",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "flex flex-row items-center mr-8",
+                // "transition-all ease-in-out delay-100 duration-300",
+                // drawerOpen ? "w-full" : "w-18",
+                drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
+                "font-semibold text-xs",
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+            )}
+            to={url}
+        >
+
+            {iconWrap}
+
+            <div
+                className={cls(
+                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                    "ml-4 font-inherit text-inherit"
+                )}>
+                {name.toUpperCase()}
+            </div>
+        </NavLink>
+    </div>;
+
+    return <Tooltip
+        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
+        side="right"
+        title={name}>
+        {listItem}
+    </Tooltip>;
+}