@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.81

package/src/components/HomePage/DefaultHomePage.tsx

@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useFireCMSContext, useNavigationController } from "../../hooks";
+import { PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+
+import { toArray } from "../../util/arrays";
+import { NavigationGroup } from "./NavigationGroup";
+import { NavigationCollectionCard } from "./NavigationCollectionCard";
+
+// @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 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 (context.plugins) {
+        const sectionProps: PluginGenericProps = {
+            context
+        };
+        additionalPluginSections = <>
+            {context.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"}>
+            {context.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"}>
+            {context.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 (context.plugins) {
+                        context.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">
+                                        <NavigationCollectionCard
+                                            {...entry}
+                                            onClick={() => {
+                                                const event =
+                                                    entry.type === "collection"
+                                                        ? "home_navigate_to_collection"
+                                                        : entry.type === "view"
+                                                            ? "home_navigate_to_view"
+                                                            : "unmapped_event";
+                                                context.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/NavigationCollectionCard.tsx

@@ -0,0 +1,145 @@
+import { useNavigate } from "react-router-dom";
+
+import { useFireCMSContext } from "../../hooks";
+import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
+import { getIconForView } from "../../util";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
+
+/**
+ * This is the component used in the home page to render a card for each
+ * collection.
+ * @group Components
+ * @param view
+ * @param path
+ * @param collection
+ * @param url
+ * @param name
+ * @param description
+ * @param onClick
+ * @constructor
+ */
+export function NavigationCollectionCard({
+                                             view,
+                                             path,
+                                             collection,
+                                             url,
+                                             name,
+                                             description,
+                                             onClick
+                                         }: TopNavigationEntry & {
+    onClick?: () => void
+}) {
+
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    const collectionIcon = getIconForView(collection ?? view);
+
+    const navigate = useNavigate();
+    const context = useFireCMSContext();
+
+    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
+
+    let actions: React.ReactNode | undefined;
+    if (context.plugins && collection) {
+        const actionProps: PluginHomePageActionsProps = {
+            path,
+            collection,
+            context
+        };
+        actions = <>
+            {context.plugins.map((plugin, i) => (
+                plugin.homePage?.CollectionActions
+                    ? <plugin.homePage.CollectionActions
+                        key={`actions_${i}`}
+                        {...actionProps}
+                        extraProps={plugin.homePage.extraProps}
+                    />
+                    : null
+            ))}
+        </>
+        ;
+    }
+
+    return (
+        <Card
+            className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+            onClick={() => {
+                onClick?.();
+                navigate(url);
+                if (userConfigurationPersistence) {
+                    userConfigurationPersistence.setRecentlyVisitedPaths(
+                        [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
+                    );
+                }
+            }}>
+
+            <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">
+
+                        {collectionIcon}
+
+                        <div
+                            className="flex items-center gap-1"
+                            onClick={(event: React.MouseEvent) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }}>
+
+                            {actions}
+
+                            {userConfigurationPersistence &&
+                                <IconButton
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        if (favourite) {
+                                            userConfigurationPersistence.setFavouritePaths(
+                                                userConfigurationPersistence.favouritePaths.filter(p => p !== path)
+                                            );
+                                        } else {
+                                            userConfigurationPersistence.setFavouritePaths(
+                                                [...userConfigurationPersistence.favouritePaths, path]
+                                            );
+                                        }
+                                    }}>
+                                    {
+                                        favourite
+                                            ? <StarIcon
+                                                size={18}
+                                                className={"text-secondary"}/>
+                                            : <StarBorderIcon
+                                                size={18}
+                                                className={"text-gray-400 dark:text-gray-500"}/>}
+                                </IconButton>}
+
+                        </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>);
+}

package/src/components/HomePage/NavigationGroup.tsx

@@ -0,0 +1,39 @@
+import { PropsWithChildren } from "react";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { ExpandablePanel, Typography } from "@firecms/ui";
+
+export function NavigationGroup({
+                                    children,
+                                    group
+                                }: PropsWithChildren<{
+    group: string | undefined
+}>) {
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    return (
+        <ExpandablePanel
+            invisible={true}
+            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
+            className={"py-4"}
+            initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
+            onExpandedChange={expanded => {
+                if (userConfigurationPersistence) {
+
+                    if (!expanded) {
+                        const paths = (userConfigurationPersistence.collapsedGroups ?? []).concat(group ?? "ungrouped");
+                        userConfigurationPersistence.setCollapsedGroups(paths);
+                    } else {
+                        userConfigurationPersistence.setCollapsedGroups((userConfigurationPersistence.collapsedGroups ?? []).filter(g => g !== (group ?? "ungrouped")));
+                    }
+                }
+            }}
+            title={<Typography color={"secondary"}
+                               className="font-medium ml-1">
+                {group?.toUpperCase() ?? "Views".toUpperCase()}
+            </Typography>}>
+
+            <div className="mb-8">
+                {children}
+            </div>
+        </ExpandablePanel>
+    );
+}

package/src/components/HomePage/index.tsx

@@ -0,0 +1,3 @@
+export * from "./DefaultHomePage";
+export * from "./NavigationCollectionCard";
+export * from "./NavigationGroup";

package/src/components/LabelWithIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface LabelWithIconProps {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIcon({
+                                  icon,
+                                  title,
+                                  small,
+                                  className,
+                                  required
+                              }: LabelWithIconProps) {
+    return (
+        <span
+            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
+
+            {icon}
+
+            <span
+                className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
+
+        </span>
+    );
+}

package/src/components/NotFoundPage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link as ReactLink } from "react-router-dom";
+import { Button, Typography } from "@firecms/ui";
+
+export function NotFoundPage() {
+
+    return (
+        <div className="flex w-full h-full">
+            <div className="m-auto flex items-center flex-col"
+            >
+                <Typography variant={"h4"} align={"center"}
+                            gutterBottom={true}>
+                    Page not found
+                </Typography>
+                <Typography align={"center"} gutterBottom={true}>
+                    This page does not exist or you may not have access to it
+                </Typography>
+                <Button
+                    variant={"text"}
+                    component={ReactLink}
+                    to={"/"}>Back to home</Button>
+            </div>
+        </div>
+    );
+}