@firecms/core 3.0.0-canary.6 → 3.0.0-canary.61

package/src/components/EntityPreview.tsx

@@ -1,84 +1,223 @@
-import React, { useMemo } from "react";
-import { PropertyPreview } from "../preview";
-import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
-import { resolveCollection } from "../util";
-import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
-import { CustomizationController } from "../types/customization_controller";
-import { useCustomizationController } from "../hooks/useCustomizationController";
+import * as React from "react";
+import { useMemo } from "react";
+
+import { Entity, EntityCollection, ResolvedProperty } from "../types";
+
+import {
+    getEntityImagePreviewPropertyKey,
+    getEntityPreviewKeys,
+    getEntityTitlePropertyKey,
+    getValueInPath,
+    resolveCollection
+} from "../util";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
+import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
+
+export type EntityPreviewProps = {
+    size: PreviewSize,
+    actions?: React.ReactNode,
+    collection?: EntityCollection,
+    hover?: boolean;
+    previewProperties?: string[],
+    disabled: undefined | boolean,
+    entity: Entity<any>,
+    includeId?: boolean,
+    includeEntityLink?: boolean,
+    onClick?: (e: React.SyntheticEvent) => void;
+};
 
 /**
- * @group Components
+ * This view is used to display a preview of an entity.
+ * It is used by default in reference fields and whenever a reference is displayed.
  */
-export interface EntityPreviewProps<M extends Record<string, any>> {
-    entity: Entity<M>;
-    collection: EntityCollection<M>;
-    path: string;
-    className?: string;
-}
+export function EntityPreview({
+                                  actions,
+                                  disabled,
+                                  hover,
+                                  collection: collectionProp,
+                                  previewProperties,
+                                  onClick,
+                                  size,
+                                  includeId = true,
+                                  includeEntityLink = true,
+                                  entity
+                              }: EntityPreviewProps) {
 
-export function EntityPreview<M extends Record<string, any>>(
-    {
-        entity,
-        collection,
-        path,
-        className
-    }: EntityPreviewProps<M>) {
+    const analyticsController = useAnalyticsController();
+    const sideEntityController = useSideEntityController();
+    const customizationController = useCustomizationController();
+
+    const navigationController = useNavigationController();
+
+    const collection = collectionProp ?? navigationController.getCollection(entity.path);
 
-    const customizationController: CustomizationController = useCustomizationController();
-    const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
+    }
+
+    const resolvedCollection = React.useMemo(() => resolveCollection({
         collection,
-        path,
-        entityId: entity.id,
+        path: entity.path,
         values: entity.values,
         fields: customizationController.propertyConfigs
-    }), [collection, path, entity]);
+    }), [collection]);
 
-    const properties: ResolvedProperties = resolvedCollection.properties;
+    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+        [previewProperties, resolvedCollection, size]);
 
-    return (
-        <div className={"w-full " + className}>
-            <div className={"w-full mb-4"}>
-                <div className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                    <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-gray-600">Id</span>
-                    </div>
-                    <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
-                        <span className="flex-grow mr-2">{entity.id}</span>
-                        {customizationController?.entityLinkBuilder &&
-                            <a href={customizationController.entityLinkBuilder({ entity })}
-                               rel="noopener noreferrer"
-                               target="_blank">
-                                <IconButton>
-                                    <OpenInNewIcon
-                                        size={"small"}/>
-                                </IconButton>
-                            </a>}
+    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
+    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
+
+    const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
+
+    return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                   hover={disabled ? undefined : hover}
+                                   size={size}>
+        {imageProperty && (
+            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
+                <PropertyPreview property={imageProperty}
+                                 propertyKey={imagePropertyKey as string}
+                                 size={"tiny"}
+                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
+            </div>
+        )}
+
+        <div className={"flex flex-col flex-grow w-full m-1"}>
+
+            {size !== "tiny" && includeId && (
+                entity
+                    ? <div className={`${
+                        size !== "medium"
+                            ? "block whitespace-nowrap overflow-hidden truncate"
+                            : ""
+                    }`}>
+                        <Typography variant={"caption"}
+                                    color={"disabled"}
+                                    className={"font-mono"}>
+                            {entity.id}
+                        </Typography>
                     </div>
+                    : <Skeleton/>)}
+
+            {titleProperty && (
+                <div className={"my-0.5 text-sm font-medium"}>
+                    {
+                        entity
+                            ? <PropertyPreview
+                                propertyKey={titleProperty as string}
+                                value={getValueInPath(entity.values, titleProperty)}
+                                property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
+                                size={"medium"}/>
+                            : <SkeletonPropertyComponent
+                                property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
+                                size={"medium"}/>
+                    }
                 </div>
-                {Object.entries(properties)
-                    .map(([key, property]) => {
-                        const value = (entity.values)[key];
-                        return (
-                            <div
-                                key={`reference_previews_${key}`}
-                                className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                                <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
-                                </div>
-                                <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
-                                    <PropertyPreview
-                                        propertyKey={key}
-                                        value={value}
-                                        // entity={entity}
-                                        property={property}
-                                        size={"medium"}/>
-                                </div>
-                            </div>
-                        )
-                    })}
-            </div>
+            )}
+
+            {restProperties && restProperties.map((key) => {
+                const childProperty = resolvedCollection.properties[key as string];
+                if (!childProperty) return null;
+
+                return (
+                    <div key={"ref_prev_" + key}
+                         className={restProperties.length > 1 ? "my-0.5" : "my-0"}>
+                        {
+                            entity
+                                ? <PropertyPreview
+                                    propertyKey={key as string}
+                                    value={getValueInPath(entity.values, key)}
+                                    property={childProperty as ResolvedProperty}
+                                    size={"tiny"}/>
+                                : <SkeletonPropertyComponent
+                                    property={childProperty as ResolvedProperty}
+                                    size={"tiny"}/>
+                        }
+                    </div>
+                );
+            })}
+
         </div>
-    );
+
+        {entity && includeEntityLink &&
+            <Tooltip title={`See details for ${entity.id}`}
+                     className={size !== "tiny" ? "self-start" : ""}>
+                <IconButton
+                    color={"inherit"}
+                    size={"small"}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+                            path: entity.path,
+                            entityId: entity.id
+                        });
+                        sideEntityController.open({
+                            entityId: entity.id,
+                            path: entity.path,
+                            collection,
+                            updateUrl: true
+                        });
+                    }}>
+                    <KeyboardTabIcon size={"small"}/>
+                </IconButton>
+            </Tooltip>}
+
+        {actions}
+
+    </EntityPreviewContainer>;
 }
+
+export type EntityPreviewContainerProps = {
+    children: React.ReactNode;
+    hover?: boolean;
+    fullwidth?: boolean;
+    size: PreviewSize;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.SyntheticEvent) => void;
+};
+
+const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                       children,
+                                                                                                       hover,
+                                                                                                       onClick,
+                                                                                                       size,
+                                                                                                       style,
+                                                                                                       className,
+                                                                                                       fullwidth = true,
+                                                                                                       ...props
+                                                                                                   }, ref) => {
+    return <div
+        ref={ref}
+        style={{
+            ...style,
+            // @ts-ignore
+            tabindex: 0
+        }}
+        className={cls(
+            "bg-white dark:bg-gray-900",
+            fullwidth ? "w-full" : "",
+            "items-center",
+            hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
+            size === "tiny" ? "p-1" : "p-2",
+            "flex border rounded-lg",
+            onClick ? "cursor-pointer" : "",
+            defaultBorderMixin,
+            className)}
+        onClick={(event) => {
+            if (onClick) {
+                event.preventDefault();
+                onClick(event);
+            }
+        }}
+        {...props}>
+        {children}
+    </div>;
+});
+
+EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
+
+export const EntityPreviewContainer = React.memo(EntityPreviewContainerInner) as React.FC<EntityPreviewContainerProps>;

package/src/components/EntityView.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { PropertyPreview } from "../preview";
+import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
+import { resolveCollection } from "../util";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { CustomizationController } from "../types/customization_controller";
+import { useCustomizationController } from "../hooks/useCustomizationController";
+
+/**
+ * @group Components
+ */
+export interface EntityViewProps<M extends Record<string, any>> {
+    entity: Entity<M>;
+    collection: EntityCollection<M>;
+    path: string;
+    className?: string;
+}
+
+export function EntityView<M extends Record<string, any>>(
+    {
+        entity,
+        collection,
+        path,
+        className
+    }: EntityViewProps<M>) {
+
+    const customizationController: CustomizationController = useCustomizationController();
+    const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
+        collection,
+        path,
+        entityId: entity.id,
+        values: entity.values,
+        fields: customizationController.propertyConfigs
+    }), [collection, path, entity, customizationController.propertyConfigs]);
+
+    const properties: ResolvedProperties = resolvedCollection.properties;
+
+    return (
+        <div className={"w-full " + className}>
+            <div className={"w-full mb-4"}>
+                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                    <div className="flex items-center w-1/4">
+                        <span className="pl-2 text-sm text-gray-600">Id</span>
+                    </div>
+                    <div
+                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                        <span className="flex-grow mr-2">{entity.id}</span>
+                        {customizationController?.entityLinkBuilder &&
+                            <a href={customizationController.entityLinkBuilder({ entity })}
+                               rel="noopener noreferrer"
+                               target="_blank">
+                                <IconButton>
+                                    <OpenInNewIcon
+                                        size={"small"}/>
+                                </IconButton>
+                            </a>}
+                    </div>
+                </div>
+                {Object.entries(properties)
+                    .map(([key, property]) => {
+                        const value = entity.values?.[key];
+                        return (
+                            <div
+                                key={`reference_previews_${key}`}
+                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                                <div className="flex items-center w-1/4">
+                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
+                                </div>
+                                <div
+                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                    <PropertyPreview
+                                        propertyKey={key}
+                                        value={value}
+                                        // entity={entity}
+                                        property={property}
+                                        size={"medium"}/>
+                                </div>
+                            </div>
+                        )
+                    })}
+            </div>
+        </div>
+    );
+}

package/src/components/FieldCaption.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Typography } from "@firecms/ui";
+
+export function FieldCaption({
+                                    error,
+                                    children
+                                }: { error?: boolean, children?: React.ReactNode }) {
+    if (!children) return null;
+    return (
+        <Typography variant={"caption"} color={error ? "error" : "secondary"} className={"ml-3.5 mt-0.5"}>
+            {children}
+        </Typography>
+    );
+}

package/src/components/FireCMSAppBar.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
 import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
+import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
-    cn,
+    cls,
     DarkModeIcon,
     IconButton,
     LightModeIcon,
@@ -18,7 +18,8 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 
 export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
+
+    title?: React.ReactNode;
     /**
      * A component that gets rendered on the upper side of the main toolbar
      */
@@ -30,12 +31,16 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     includeDrawer?: boolean;
 
+    includeModeToggle?: boolean;
+
     drawerOpen: boolean;
 
     className?: string;
 
     style?: React.CSSProperties;
 
+    logo?: string;
+
     user?: User;
 } & ADDITIONAL_PROPS;
 
@@ -55,8 +60,10 @@ export const FireCMSAppBar = function FireCMSAppBar({
                                                         drawerOpen,
                                                         dropDownActions,
                                                         includeDrawer,
+                                                        includeModeToggle = true,
                                                         className,
                                                         style,
+                                                        logo,
                                                         user: userProp
                                                     }: FireCMSAppBarProps) {
     const navigation = useNavigationController();
@@ -89,10 +96,10 @@ export const FireCMSAppBar = function FireCMSAppBar({
     return (
         <div
             style={style}
-            className={cn("pr-2",
+            className={cls("pr-2",
                 {
                     "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout) && !startAdornment,
+                    "ml-16": includeDrawer && !(drawerOpen && largeLayout),
                     "h-16": true,
                     "z-10": largeLayout,
                     "transition-all": true,
@@ -102,27 +109,37 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
                     "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
                     "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
+                    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>
+                        <div className={"flex flex-row gap-4"}>
+                            {!includeDrawer && (logo
+                                ? <img src={logo}
+                                       alt="Logo"
+                                       className={cls("w-[32px] h-[32px]")}/>
+                                : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                            {typeof title === "string"
+                                ? <Typography variant="subtitle1"
+                                              noWrap
+                                              className={"ml-2 !font-medium"}>
+                                    {title}
+                                </Typography>
+                                : title}
+                        </div>
                     </ReactLink>
                 </div>}
 
+                {startAdornment}
+
                 <div className={"flex-grow"}/>
 
                 {endAdornment &&
@@ -130,7 +147,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                         {endAdornment}
                     </ErrorBoundary>}
 
-                <IconButton
+                {includeModeToggle && <IconButton
                     color="inherit"
                     aria-label="Open drawer"
                     onClick={toggleMode}
@@ -138,9 +155,17 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     {mode === "dark"
                         ? <DarkModeIcon/>
                         : <LightModeIcon/>}
-                </IconButton>
+                </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}
 

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
-import { PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+import { CMSAnalyticsEvent, PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
 
 import { toArray } from "../../util/arrays";
 import { NavigationGroup } from "./NavigationGroup";
-import { NavigationCollectionCard } from "./NavigationCollectionCard";
+import { NavigationCardBinding } from "./NavigationCardBinding";
 
 // @ts-ignore
 import * as JsSearch from "js-search";
@@ -102,7 +102,7 @@ export function DefaultHomePage({
                     return (
                         <NavigationGroup
                             group={section.title}
-                            key={`plugin_section_${plugin.name}`}>
+                            key={`plugin_section_${plugin.key}`}>
                             {section.children}
                         </NavigationGroup>
                     );
@@ -173,21 +173,25 @@ export function DefaultHomePage({
                             <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
+                                        <NavigationCardBinding
                                             {...entry}
                                             onClick={() => {
-                                                const event =
-                                                    entry.type === "collection"
-                                                        ? "home_navigate_to_collection"
-                                                        : entry.type === "view"
-                                                            ? "home_navigate_to_view"
-                                                            : "unmapped_event";
+                                                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 &&
+                                {group?.toLowerCase() !== "admin" && AdditionalCards &&
                                     AdditionalCards.map((AdditionalCard, i) => (
                                         <div key={`nav_${group}_add_${i}`}>
                                             <AdditionalCard {...actionProps} />

package/src/components/HomePage/NavigationCard.tsx

@@ -0,0 +1,69 @@
+import { ArrowForwardIcon, Card, cls, 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={cls("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} size={"small"}/>
+                </Typography>}
+            </div>
+
+            <div style={{ alignSelf: "flex-end" }}>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon className="text-primary"/>
+                </div>
+            </div>
+
+        </div>
+
+    </Card>)
+}