@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/components/FireCMSAppBar.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+
+import { Link as ReactLink } from "react-router-dom";
+import { ErrorBoundary } from "../components";
+import {
+    Avatar,
+    cn,
+    DarkModeIcon,
+    IconButton,
+    LightModeIcon,
+    LogoutIcon,
+    Menu,
+    MenuItem,
+    Skeleton,
+    Typography
+} from "@firecms/ui";
+import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
+import { User } from "../types";
+
+export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
+    title: string;
+    /**
+     * A component that gets rendered on the upper side of the main toolbar
+     */
+    endAdornment?: React.ReactNode;
+
+    startAdornment?: React.ReactNode;
+
+    dropDownActions?: React.ReactNode;
+
+    includeDrawer?: boolean;
+
+    drawerOpen: boolean;
+
+    className?: string;
+
+    style?: React.CSSProperties;
+
+    user?: User;
+} & ADDITIONAL_PROPS;
+
+/**
+ * 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({
+                                                        title,
+                                                        endAdornment,
+                                                        startAdornment,
+                                                        drawerOpen,
+                                                        dropDownActions,
+                                                        includeDrawer,
+                                                        className,
+                                                        style,
+                                                        user: userProp
+                                                    }: FireCMSAppBarProps) {
+    const navigation = useNavigationController();
+
+    const authController = useAuthController();
+    const {
+        mode,
+        toggleMode
+    } = useModeController();
+
+    const largeLayout = useLargeLayout();
+
+    const user = userProp ?? authController.user;
+
+    let avatarComponent: JSX.Element;
+    if (user && user.photoURL) {
+        avatarComponent = <Avatar
+            src={user.photoURL}/>;
+    } else if (user === undefined || authController.initialLoading) {
+        avatarComponent = <div className={"p-1 flex justify-center"}>
+            <Skeleton className={"w-10 h-10 rounded-full"}/>
+        </div>;
+    } else {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar>{initial}</Avatar>;
+    }
+
+    return (
+        <div
+            style={style}
+            className={cn("pr-2",
+                {
+                    "ml-[17rem]": drawerOpen && largeLayout,
+                    "ml-16": includeDrawer && !(drawerOpen && largeLayout) && !startAdornment,
+                    "h-16": true,
+                    "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),
+                    "duration-150": drawerOpen && largeLayout,
+                    fixed: true,
+                },
+                className)}>
+
+            <div className="flex flex-row gap-2 px-4 h-full items-center">
+
+                {startAdornment}
+
+                {navigation && <div className="mr-8 hidden lg:block">
+                    <ReactLink
+                        className="visited:text-inherit visited:dark:text-inherit"
+                        to={navigation?.basePath ?? "/"}
+                    >
+                        <Typography variant="subtitle1"
+                                    noWrap
+                                    className={"ml-2 !font-medium"}>
+                            {title}
+                        </Typography>
+                    </ReactLink>
+                </div>}
+
+                <div className={"flex-grow"}/>
+
+                {endAdornment &&
+                    <ErrorBoundary>
+                        {endAdornment}
+                    </ErrorBoundary>}
+
+                <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={authController.signOut}>
+                        <LogoutIcon/>
+                        Log Out
+                    </MenuItem>}
+
+                </Menu>
+
+            </div>
+        </div>
+    );
+}

package/src/components/FireCMSLogo.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+export function FireCMSLogo({
+                                width,
+                                height,
+                                className,
+                                style
+                            }: {
+    width?: string,
+    height?: string,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    return (
+        <svg
+            width={width ?? "100%"} height={height ?? "100%"}
+            viewBox="0 0 599 599" version="1.1"
+            style={style}
+            className={className}
+            xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <radialGradient cx="28.6213569%" cy="43.1133328%"
+                                fx="28.6213569%"
+                                fy="43.1133328%" r="71.5003456%"
+                                gradientTransform="translate(0.286214,0.431133),rotate(3.343450),scale(1.000000,0.996175),translate(-0.286214,-0.431133)"
+                                id="radialGradient-1">
+                    <stop stopColor="#FF5B79" offset="0%"/>
+                    <stop stopColor="#FA5574" offset="28.0930803%"/>
+                    <stop stopColor="#EC4C51" offset="44.7242531%"/>
+                    <stop stopColor="#9543C1" offset="71.4578165%"/>
+                    <stop stopColor="#3857B3" offset="100%"/>
+                </radialGradient>
+                <radialGradient cx="53.6205516%" cy="47.2473036%"
+                                fx="53.6205516%"
+                                fy="47.2473036%" r="50.8229649%"
+                                gradientTransform="translate(0.536206,0.472473),rotate(90.000000),scale(1.000000,1.206631),translate(-0.536206,-0.472473)"
+                                id="radialGradient-2">
+                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
+                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
+                          offset="75.3503173%"/>
+                    <stop stopColor="#0D060B" stopOpacity="0.437431709"
+                          offset="100%"/>
+                </radialGradient>
+                <radialGradient cx="53.8605015%" cy="48.1990423%"
+                                fx="53.8605015%"
+                                fy="48.1990423%" r="59.9151549%"
+                                gradientTransform="translate(0.538605,0.481990),rotate(180.000000),scale(1.000000,0.925027),translate(-0.538605,-0.481990)"
+                                id="radialGradient-3">
+                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
+                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
+                          offset="84.0867343%"/>
+                    <stop stopColor="#FF0000" stopOpacity="0.567324765"
+                          offset="100%"/>
+                </radialGradient>
+            </defs>
+            <g id="Page-1" stroke="none" strokeWidth="1" fill="none"
+               fillRule="evenodd">
+                <g id="firecms_logo">
+                    <circle fill="url(#radialGradient-1)" cx="299.5"
+                            cy="299.5"
+                            r="299.5"/>
+                    <circle fill="url(#radialGradient-2)" cx="299.5"
+                            cy="299.5"
+                            r="299.5"/>
+                    <circle fill="url(#radialGradient-3)" cx="299.5"
+                            cy="299.5"
+                            r="299.5"/>
+                </g>
+            </g>
+        </svg>
+    );
+
+}

package/src/components/HomePage/DefaultHomePage.tsx

@@ -0,0 +1,214 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
+import { CMSAnalyticsEvent, PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+
+import { toArray } from "../../util/arrays";
+import { NavigationGroup } from "./NavigationGroup";
+import { NavigationCardBinding } from "./NavigationCardBinding";
+
+// @ts-ignore
+import * as JsSearch from "js-search";
+
+import { Container, SearchBar } from "@firecms/ui";
+import { FavouritesView } from "./FavouritesView";
+import { useRestoreScroll } from "../../internal/useRestoreScroll";
+
+const search = new JsSearch.Search("url");
+search.addIndex("name");
+search.addIndex("description");
+search.addIndex("group");
+search.addIndex("path");
+
+/**
+ * Default entry view for the CMS. This component renders navigation cards
+ * for each collection defined in the navigation.
+ * @constructor
+ * @group Components
+ */
+export function DefaultHomePage({
+                                    additionalActions,
+                                    additionalChildrenStart,
+                                    additionalChildrenEnd
+                                }: {
+    /**
+     * Additional actions to be rendered in the home page, close to the search bar.
+     */
+    additionalActions?: React.ReactNode;
+    /**
+     * Additional children to be rendered in the beginning of the home page.
+     */
+    additionalChildrenStart?: React.ReactNode;
+    /**
+     * Additional children to be rendered at the end of the home page.
+     */
+    additionalChildrenEnd?: React.ReactNode;
+}) {
+
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+    const navigationController = useNavigationController();
+
+    if (!navigationController.topLevelNavigation)
+        throw Error("Navigation not ready in FireCMSHomePage");
+
+    const {
+        containerRef,
+        scroll,
+        direction
+    } = useRestoreScroll();
+
+    const {
+        navigationEntries,
+        groups
+    } = navigationController.topLevelNavigation;
+
+    const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
+
+    const filteredNavigationEntries = filteredUrls
+        ? navigationEntries.filter((entry) => filteredUrls.includes(entry.url))
+        : navigationEntries;
+
+    useEffect(() => {
+        search.addDocuments(navigationEntries);
+    }, [navigationEntries]);
+
+    const updateSearchResults = useCallback(
+        (value?: string) => {
+            if (!value || value === "") {
+                setFilteredUrls(null);
+            } else {
+                const searchResult = search.search(value);
+                setFilteredUrls(searchResult.map((e: any) => e.url));
+            }
+        }, []);
+
+    const allGroups: Array<string | undefined> = [...groups];
+    if (filteredNavigationEntries.filter(e => !e.group).length > 0 || filteredNavigationEntries.length === 0) {
+        allGroups.push(undefined);
+    }
+
+    let additionalPluginChildrenStart: React.ReactNode | undefined;
+    let additionalPluginChildrenEnd: React.ReactNode | undefined;
+    let additionalPluginSections: React.ReactNode | undefined;
+    if (customizationController.plugins) {
+        const sectionProps: PluginGenericProps = {
+            context
+        };
+        additionalPluginSections = <>
+            {customizationController.plugins.filter(plugin => plugin.homePage?.includeSection)
+                .map((plugin, i) => {
+                    const section = plugin.homePage!.includeSection!(sectionProps)
+                    return (
+                        <NavigationGroup
+                            group={section.title}
+                            key={`plugin_section_${plugin.name}`}>
+                            {section.children}
+                        </NavigationGroup>
+                    );
+                })}
+        </>;
+        additionalPluginChildrenStart = <div className={"flex flex-col gap-2"}>
+            {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenStart)
+                .map((plugin, i) => {
+                    return <div key={`plugin_children_start_${i}`}>{plugin.homePage!.additionalChildrenStart}</div>;
+                })}
+        </div>;
+
+        additionalPluginChildrenEnd = <div className={"flex flex-col gap-2"}>
+            {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenEnd)
+                .map((plugin, i) => {
+                    return <div key={`plugin_children_start_${i}`}>{plugin.homePage!.additionalChildrenEnd}</div>;
+                })}
+        </div>;
+    }
+
+    return (
+        <div id="home_page"
+             ref={containerRef}
+             className="py-2 overflow-auto h-full w-full">
+            <Container maxWidth={"6xl"}>
+                <div
+                    className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"
+                    style={{ top: direction === "down" ? -84 : 0 }}>
+                    <SearchBar onTextSearch={updateSearchResults}
+                               placeholder={"Search collections"}
+                               large={false}
+                               innerClassName={"w-full"}
+                               className={"w-full flex-grow"}/>
+                    {additionalActions}
+                </div>
+
+                <FavouritesView hidden={Boolean(filteredUrls)}/>
+
+                {additionalChildrenStart}
+
+                {additionalPluginChildrenStart}
+
+                {allGroups.map((group, index) => {
+
+                    const AdditionalCards: React.ComponentType<PluginHomePageAdditionalCardsProps>[] = [];
+                    const actionProps: PluginHomePageAdditionalCardsProps = {
+                        group,
+                        context
+                    };
+
+                    if (customizationController.plugins) {
+                        customizationController.plugins.forEach(plugin => {
+                            if (plugin.homePage?.AdditionalCards) {
+                                AdditionalCards.push(...toArray(plugin.homePage?.AdditionalCards));
+                            }
+                        });
+                    }
+
+                    const thisGroupCollections = filteredNavigationEntries
+                        .filter((entry) => entry.group === group || (!entry.group && group === undefined));
+                    if (thisGroupCollections.length === 0 && AdditionalCards.length === 0)
+                        return null;
+                    return (
+                        <NavigationGroup
+                            group={group}
+                            key={`plugin_section_${group}`}>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {thisGroupCollections.map((entry) => (
+                                    <div key={`nav_${entry.group}_${entry.name}`} className="col-span-1">
+                                        <NavigationCardBinding
+                                            {...entry}
+                                            onClick={() => {
+                                                let event: CMSAnalyticsEvent;
+                                                if (entry.type === "collection") {
+                                                    event = "home_navigate_to_collection";
+                                                } else if (entry.type === "view") {
+                                                    event = "home_navigate_to_view";
+                                                } else if (entry.type === "admin") {
+                                                    event = "home_navigate_to_admin_view";
+                                                } else {
+                                                    event = "unmapped_event";
+                                                }
+                                                context.analyticsController?.onAnalyticsEvent?.(event, { path: entry.path });
+                                            }}
+                                        />
+                                    </div>
+                                ))}
+                                {AdditionalCards &&
+                                    AdditionalCards.map((AdditionalCard, i) => (
+                                        <div key={`nav_${group}_add_${i}`}>
+                                            <AdditionalCard {...actionProps} />
+                                        </div>
+                                    ))}
+                            </div>
+                        </NavigationGroup>
+                    );
+                })}
+
+                {additionalPluginSections}
+
+                {additionalPluginChildrenEnd}
+
+                {additionalChildrenEnd}
+
+            </Container>
+        </div>
+    );
+}

package/src/components/HomePage/FavouritesView.tsx

@@ -0,0 +1,64 @@
+import { useNavigate } from "react-router-dom";
+import { useNavigationController } from "../../hooks";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { TopNavigationEntry } from "../../types";
+import { Chip, Collapse, StarBorderIcon, StarIcon } from "@firecms/ui";
+
+function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
+
+    const navigate = useNavigate();
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+
+    if (!userConfigurationPersistence)
+        return null;
+
+    const favourite = userConfigurationPersistence.favouritePaths.includes(entry.path);
+    const onIconClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (favourite) {
+            userConfigurationPersistence.setFavouritePaths(
+                userConfigurationPersistence.favouritePaths.filter(p => p !== entry.path)
+            );
+        } else {
+            userConfigurationPersistence.setFavouritePaths(
+                [...userConfigurationPersistence.favouritePaths, entry.path]
+            );
+        }
+    };
+    return <Chip
+        key={entry.path}
+        onClick={() => navigate(entry.url)}
+        icon={
+            favourite
+                ? <StarIcon
+                    onClick={onIconClick}
+                    size={18}
+                    className={"text-secondary"}/>
+                : <StarBorderIcon
+                    onClick={onIconClick}
+                    size={18}
+                    className={"text-gray-400 dark:text-gray-500"}/>}>
+        {entry.name}
+    </Chip>;
+}
+
+export function FavouritesView({ hidden }: { hidden: boolean }) {
+
+    const navigationController = useNavigationController();
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+
+    if (!userConfigurationPersistence)
+        return null;
+
+    const favouriteCollections = (userConfigurationPersistence?.favouritePaths ?? [])
+        .map((path) => navigationController.topLevelNavigation?.navigationEntries.find((entry) => entry.path === path))
+        .filter(Boolean) as TopNavigationEntry[];
+
+    return <Collapse in={favouriteCollections.length > 0}>
+        <div className="flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]">
+            {favouriteCollections.map((entry) => <NavigationChip key={entry.path}
+                                                                 entry={entry}/>)}
+        </div>
+    </Collapse>;
+}

package/src/components/HomePage/NavigationCard.tsx

@@ -0,0 +1,69 @@
+import { ArrowForwardIcon, Card, cn, Markdown, Typography, } from "@firecms/ui";
+
+export type NavigationCardProps = {
+    name: string,
+    description?: string;
+    actions: React.ReactNode;
+    icon: React.ReactNode;
+    onClick?: () => void,
+};
+
+export function NavigationCard({
+                                   name,
+                                   description,
+                                   icon,
+                                   actions,
+                                   onClick,
+                               }: NavigationCardProps) {
+
+    return (<Card
+        className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+        onClick={() => {
+            onClick?.();
+        }}>
+
+        <div className="flex flex-col items-start h-full">
+            <div
+                className="flex-grow w-full">
+
+                <div
+                    className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+
+                    {icon}
+
+                    <div
+                        className="flex items-center gap-1"
+                        onClick={(event: React.MouseEvent) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }}>
+
+                        {actions}
+
+                    </div>
+
+                </div>
+
+                <Typography gutterBottom variant="h5"
+                            component="h2">
+                    {name}
+                </Typography>
+
+                {description && <Typography variant="body2"
+                                            color="secondary"
+                                            component="div">
+                    <Markdown source={description}/>
+                </Typography>}
+            </div>
+
+            <div style={{ alignSelf: "flex-end" }}>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon className="text-primary"/>
+                </div>
+            </div>
+
+        </div>
+
+    </Card>)
+}