@firecms/core 3.0.0-canary.27 → 3.0.0-canary.270

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -1,225 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-
-import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
-import { useDataOrder } from "../../hooks/data/useDataOrder";
-import {
-    Entity,
-    EntityCollection,
-    EntityTableController,
-    FilterValues,
-    FireCMSContext,
-    SelectedCellProps,
-    User
-} from "../../types";
-import { useDebouncedData } from "./useDebouncedData";
-
-const DEFAULT_PAGE_SIZE = 50;
-
-export type DataSourceEntityCollectionTableControllerProps<M extends Record<string, any> = any> = {
-    /**
-     * Full path where the data of this table is located
-     */
-    fullPath: string;
-    /**
-     * The collection that is represented by this config.
-     */
-    collection: EntityCollection<M>;
-    /**
-     * List of entities that will be displayed on top, no matter the ordering.
-     * This is used for reference fields selection
-     */
-    entitiesDisplayedFirst?: Entity<M>[];
-
-    lastDeleteTimestamp?: number;
-    forceFilter?: FilterValues<string>;
-}
-
-/**
- * Use this hook to build a controller for the {@link EntityCollectionTable}.
- * This controller is bound to data in a path in your specified datasource.
- *
- * Note that you can build your own hook returning a {@link EntityTableController}
- * if you would like to display different data.
- *
- * @param fullPath
- * @param collection
- * @param entitiesDisplayedFirst
- * @param lastDeleteTimestamp
- * @param forceFilterFromProps
- */
-export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, UserType extends User = User>(
-    {
-        fullPath,
-        collection,
-        entitiesDisplayedFirst,
-        lastDeleteTimestamp,
-        forceFilter: forceFilterFromProps,
-    }: DataSourceEntityCollectionTableControllerProps<M>)
-    : EntityTableController<M> {
-
-    const {
-        initialFilter,
-        initialSort,
-        forceFilter: forceFilterFromCollection
-    } = collection;
-
-    const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
-    const navigation = useNavigationController();
-    const dataSource = useDataSource(collection);
-    const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
-
-    const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
-    const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
-    const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
-
-    const [searchString, setSearchString] = React.useState<string | undefined>();
-    const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? pageSize : undefined);
-
-    const initialSortInternal = useMemo(() => {
-        if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
-            console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
-            return undefined;
-        }
-        return initialSort;
-    }, [initialSort, forceFilter]);
-
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
-    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
-
-    const sortByProperty = sortBy ? sortBy[0] : undefined;
-    const currentSort = sortBy ? sortBy[1] : undefined;
-
-    const context: FireCMSContext<UserType> = useFireCMSContext();
-
-    const [rawData, setRawData] = useState<Entity<M>[]>([]);
-
-    const [dataLoading, setDataLoading] = useState<boolean>(false);
-    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
-    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
-
-    const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-                                                sortBy?: [string, "asc" | "desc"]) => {
-        if (!dataSource.isFilterCombinationValid)
-            return true;
-        return dataSource.isFilterCombinationValid({
-            path: resolvedPath,
-            collection,
-            filterValues,
-            sortBy
-        })
-    }, []);
-
-    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
-
-    const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
-        if (forceFilter) {
-            console.warn("Filter is not compatible with the force filter. Ignoring filter");
-            return;
-        }
-        if (updatedFilter && Object.keys(updatedFilter).length === 0) {
-            setFilterValues(undefined);
-        } else {
-            setFilterValues(updatedFilter);
-        }
-    }, [forceFilter]);
-
-    useEffect(() => {
-
-        setDataLoading(true);
-
-        const onEntitiesUpdate = async (entities: Entity<M>[]) => {
-            if (collection.callbacks?.onFetch) {
-                try {
-                    entities = await Promise.all(
-                        entities.map((entity) =>
-                            collection.callbacks!.onFetch!({
-                                collection,
-                                path: resolvedPath,
-                                entity,
-                                context
-                            })));
-                } catch (e: any) {
-                    console.error(e);
-                }
-            }
-            setDataLoading(false);
-            setDataLoadingError(undefined);
-            setRawData(entities.map(e => ({
-                ...e,
-                // values: sanitizeData(e.values, resolvedCollection.properties)
-            })));
-            setNoMoreToLoad(!itemCount || entities.length < itemCount);
-        };
-
-        const onError = (error: Error) => {
-            console.error("ERROR", error);
-            setDataLoading(false);
-            setRawData([]);
-            setDataLoadingError(error);
-        };
-
-        if (dataSource.listenCollection) {
-            return dataSource.listenCollection<M>({
-                path: resolvedPath,
-                collection,
-                onUpdate: onEntitiesUpdate,
-                onError,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            });
-        } else {
-            dataSource.fetchCollection<M>({
-                path: resolvedPath,
-                collection,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            })
-                .then(onEntitiesUpdate)
-                .catch(onError);
-            return () => {
-            };
-        }
-    }, [resolvedPath, itemCount, currentSort, sortByProperty, filterValues, searchString]);
-
-    const orderedData = useDataOrder({
-        data: rawData,
-        entitiesDisplayedFirst
-    });
-
-    // hack to fix Firestore listeners firing with incomplete data
-    const data = useDebouncedData(orderedData, {
-        filterValues,
-        sortBy,
-        searchString,
-        lastDeleteTimestamp
-    });
-
-    return {
-        data,
-        dataLoading,
-        noMoreToLoad,
-        dataLoadingError,
-        filterValues,
-        setFilterValues: updateFilterValues,
-        sortBy,
-        setSortBy,
-        searchString,
-        setSearchString,
-        clearFilter,
-        itemCount,
-        setItemCount,
-        paginationEnabled,
-        pageSize,
-        checkFilterCombination,
-        popupCell,
-        setPopupCell
-    }
-}

package/src/core/Drawer.tsx

@@ -1,191 +0,0 @@
-import React, { useCallback } from "react";
-
-import { useLargeLayout, useNavigationController } from "../hooks";
-
-import { NavLink, useNavigate } from "react-router-dom";
-import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
-import { IconForView } from "../util";
-import { cn, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
-import { useAnalyticsController } from "../hooks/useAnalyticsController";
-
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps<T = {}> = T & {
-    hovered: boolean,
-    drawerOpen: boolean,
-    closeDrawer: () => any,
-}
-
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export function Drawer({
-                           hovered,
-                           drawerOpen,
-                           closeDrawer
-                       }: DrawerProps) {
-
-    const analyticsController = useAnalyticsController();
-    const navigation = useNavigationController();
-
-    const tooltipsOpen = hovered && !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={"flex-grow 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={cn(
-                                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>}
-        </>
-    );
-}
-
-export function DrawerNavigationItem({
-                                         name,
-                                         icon,
-                                         drawerOpen,
-                                         tooltipsOpen,
-                                         url,
-                                         onClick
-                                     }: {
-    icon: React.ReactElement,
-    name: string,
-    tooltipsOpen: boolean,
-    drawerOpen: boolean,
-    url: string,
-    onClick?: () => void,
-}) {
-
-    const iconWrap = <div
-        className={"text-gray-600 dark:text-gray-500"}>
-        {icon}
-    </div>;
-
-    const listItem = <NavLink
-        onClick={onClick}
-        style={{
-            width: !drawerOpen ? "72px" : "280px",
-            transition: drawerOpen ? "width 150ms ease-in" : undefined
-        }}
-        className={({ isActive }: any) => cn("rounded-r-xl truncate",
-            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-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-8 h-12" : "pl-6 h-11",
-            "font-medium text-sm",
-            isActive ? "bg-slate-200 bg-opacity-75 dark:bg-gray-800" : ""
-        )}
-        to={url}
-    >
-
-        {iconWrap}
-
-        <div
-            className={cn(
-                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                "ml-4 font-inherit text-inherit"
-            )}>
-            {name.toUpperCase()}
-        </div>
-    </NavLink>;
-
-    return <Tooltip
-        open={drawerOpen ? false : tooltipsOpen}
-        side="right"
-        title={name}>
-        {listItem}
-    </Tooltip>;
-}

package/src/core/Scaffold.tsx

@@ -1,281 +0,0 @@
-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, 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;
-
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    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.
-     */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
-
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: 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,
-            FireCMSAppBar = DefaultFireCMSAppBar,
-            fireCMSAppBarProps,
-        } = 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"
-                    // }
-                }}>
-
-                <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
-
-                <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 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms 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 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-                    padding: props.open ? "32px 144px 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-[112px] h-[112px]")}/>
-                            : <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 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms 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>
-    );
-}