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

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { VirtualTableSize } from "../../VirtualTable";
-import { getRowHeight } from "../../VirtualTable/common";
-import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
+import { getRowHeight, TableSize } from "../../common/table_height";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -19,7 +18,7 @@ interface EntityTableCellProps {
     error?: Error;
     allowScroll?: boolean;
     align: "right" | "left" | "center";
-    size: VirtualTableSize;
+    size: TableSize;
     disabledTooltip?: string;
     width: number;
     showExpandIcon?: boolean;
@@ -47,7 +46,7 @@ const TableCellInner = ({
                         }: TableCellInnerProps) => {
     return (
         <div
-            className={cn("flex flex-col max-h-full w-full",
+            className={cls("flex flex-col max-h-full w-full",
                 {
                     "items-start": faded || scrollable
                 })}
@@ -96,7 +95,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const [onHover, setOnHover] = useState(false);
         const [internalSaved, setInternalSaved] = useState(saved);
 
-        const showError = !disabled && error;
+        const showError = !disabled && Boolean(error);
 
         useEffect(() => {
             if (saved) {
@@ -176,21 +175,26 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const borderClass = showError
+            ? "border-red-500"
+            : internalSaved
+                ? "border-green-500"
+                : isSelected
+                    ? "border-primary"
+                    : "border-transparent";
+
         return (
             <div
-                ref={ref}
-                className={cn(
+                className={cls(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
                     onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
                     saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
-                    !isSelected && !internalSaved && !showError ? "border-transparent" : "",
                     hideOverflow ? "overflow-hidden" : "",
                     isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
-                    isSelected && !internalSaved ? "border-primary" : "",
-                    internalSaved ? "border-green-500 " : "",
-                    showError ? "border-red-500" : ""
+                    borderClass
                 )}
+                ref={ref}
                 style={{
                     justifyContent,
                     alignItems: disabled || !isOverflowing ? "center" : undefined,

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -41,7 +41,7 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, any>) => Promise<void> | void;
 }
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
@@ -205,12 +205,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             return onCellValueChange({
                 value: values[propertyKey as string],
                 propertyKey: propertyKey as string,
-                entity,
+                data: entity,
                 setError: setSavingError,
                 onValueUpdated: () => {
                 },
-                fullPath: path,
-                context: fireCMSContext
             });
         }
         return Promise.resolve();
@@ -266,7 +264,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         values,
         path,
         setFieldValue,
-        save: saveValue
+        save: saveValue,
+        formex
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -7,7 +7,7 @@ import {
     CollectionSize,
     Entity,
     EntityAction,
-    EntityCollection,
+    EntityCollection, EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -35,6 +35,7 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
+    useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
@@ -44,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cn,
+    cls,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -65,14 +66,11 @@ import {
 } from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
-import {
-    copyEntityAction,
-    deleteEntityAction,
-    editEntityAction
-} from "../EntityCollectionTable/internal/default_entity_actions";
+import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
+import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -80,10 +78,22 @@ const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
  * @group Components
  */
 export type EntityCollectionViewProps<M extends Record<string, any>> = {
-    fullPath: string;
+    /**
+     * Complete path where this collection is located.
+     * It defaults to the collection path if not provided.
+     */
+    fullPath?: string;
+    /**
+     * If this is a subcollection, specify the parent collection ids.
+     */
     parentCollectionIds?: string[];
+    /**
+     * Whether this is a subcollection or not.
+     */
     isSubCollection?: boolean;
+
     className?: string;
+
 } & EntityCollection<M>;
 
 /**
@@ -112,7 +122,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
  */
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
-                                                                     fullPath,
+                                                                     fullPath: fullPathProp,
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
@@ -120,6 +130,8 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+        const context = useFireCMSContext();
+        const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
@@ -128,7 +140,6 @@ export const EntityCollectionView = React.memo(
         const analyticsController = useAnalyticsController();
         const customizationController = useCustomizationController();
 
-
         const containerRef = React.useRef<HTMLDivElement>(null);
 
         const collection = useMemo(() => {
@@ -175,7 +186,6 @@ export const EntityCollectionView = React.memo(
         const usedSelectionController = collection.selectionController ?? selectionController;
         const {
             selectedEntities,
-            toggleEntitySelection,
             isEntitySelected,
             setSelectedEntities
         } = usedSelectionController;
@@ -186,8 +196,7 @@ export const EntityCollectionView = React.memo(
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
-            collection: collectionRef.current,
-            entitiesDisplayedFirst: [],
+            collection,
             lastDeleteTimestamp
         });
 
@@ -257,6 +266,7 @@ export const EntityCollectionView = React.memo(
             fullPath: string,
             parentCollectionIds: string[],
             collection: EntityCollection;
+            tableController: EntityTableController;
         }> | undefined
 
         // we are only using the first plugin that implements this
@@ -301,13 +311,11 @@ export const EntityCollectionView = React.memo(
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
-                                                                fullPath,
-                                                                context,
                                                                 value,
                                                                 propertyKey,
                                                                 onValueUpdated,
                                                                 setError,
-                                                                entity,
+                                                                data: entity,
                                                             }) => {
 
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
@@ -324,10 +332,12 @@ export const EntityCollectionView = React.memo(
             return saveEntityWithCallbacks({
                 ...saveProps,
                 collection,
-                callbacks: collection.callbacks,
                 dataSource,
                 context,
-                onSaveSuccess: () => onValueUpdated(),
+                onSaveSuccess: () => {
+                    setError(undefined);
+                    onValueUpdated();
+                },
                 onSaveFailure: (e: Error) => {
                     console.error("Save failure");
                     console.error(e);
@@ -346,7 +356,6 @@ export const EntityCollectionView = React.memo(
 
         const getPropertyFor = useCallback(({
                                                 propertyKey,
-                                                propertyValue,
                                                 entity
                                             }: GetPropertyForProps<M>) => {
             let propertyOrBuilder: PropertyOrBuilder<any, M> | undefined = getPropertyInPath<M>(collection.properties, propertyKey);
@@ -360,13 +369,12 @@ export const EntityCollectionView = React.memo(
             return resolveProperty({
                 propertyKey,
                 propertyOrBuilder,
-                path: fullPath,
-                propertyValue,
+                path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
                 fields: customizationController.propertyConfigs
             });
-        }, [collection.properties, customizationController.propertyConfigs, fullPath, resolvedCollection.properties]);
+        }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
@@ -406,7 +414,7 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => {
                         const collectionsWithPath = navigation.getParentReferencesFromPath(entity.path);
                         return (
-                            <>
+                            <div className={"flex flex-col gap-2 w-full"}>
                                 {collectionsWithPath.map((reference) => {
                                     return (
                                         <ReferencePreview
@@ -415,7 +423,7 @@ export const EntityCollectionView = React.memo(
                                             size={"tiny"}/>
                                     );
                                 })}
-                            </>
+                            </div>
                         );
                     }
                 }]
@@ -557,6 +565,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
+                            tableController={tableController}
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
@@ -567,7 +576,8 @@ export const EntityCollectionView = React.memo(
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
                                                parentCollectionIds={parentCollectionIds ?? []}
-                                               collection={collection}/>;
+                                               collection={collection}
+                                               tableController={tableController}/>;
                 return null;
             }
             : undefined;
@@ -584,12 +594,13 @@ export const EntityCollectionView = React.memo(
         });
 
         return (
-            <div className={cn("overflow-hidden h-full w-full rounded-md", className)}
+            <div className={cls("overflow-hidden h-full w-full rounded-md", className)}
                  ref={containerRef}>
                 <EntityCollectionTable
                     key={`collection_table_${fullPath}`}
                     additionalFields={additionalFields}
                     tableController={tableController}
+                    enablePopupIcon={true}
                     displayedColumnIds={displayedColumnIds}
                     onSizeChanged={onSizeChanged}
                     onEntityClick={onEntityClick}
@@ -606,6 +617,14 @@ export const EntityCollectionView = React.memo(
                     onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
                     textSearchLoading={textSearchLoading}
                     textSearchEnabled={textSearchEnabled}
+                    actionsStart={<EntityCollectionViewStartActions
+                        parentCollectionIds={parentCollectionIds ?? []}
+                        collection={collection}
+                        tableController={tableController}
+                        path={fullPath}
+                        relativePath={collection.path}
+                        selectionController={usedSelectionController}
+                        collectionEntitiesCount={docsCount}/>}
                     actions={<EntityCollectionViewActions
                         parentCollectionIds={parentCollectionIds ?? []}
                         collection={collection}
@@ -683,8 +702,11 @@ export const EntityCollectionView = React.memo(
             equal(a.selectionController, b.selectionController) &&
             equal(a.Actions, b.Actions) &&
             equal(a.defaultSize, b.defaultSize) &&
+            equal(a.initialFilter, b.initialFilter) &&
+            equal(a.initialSort, b.initialSort) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
+            equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -724,6 +746,7 @@ function EntitiesCount({
 
     useEffect(() => {
         if (onCountChange) {
+            setError(undefined);
             onCountChange(count ?? 0);
         }
     }, [onCountChange, count]);
@@ -775,7 +798,7 @@ function EntityIdHeaderWidget({
                           if (!searchString) return;
                           setOpenPopup(false);
                           return sideEntityController.open({
-                              entityId: searchString,
+                              entityId: searchString.trim(),
                               path,
                               collection,
                               updateUrl: true,
@@ -788,11 +811,13 @@ function EntityIdHeaderWidget({
                             autoFocus={openPopup}
                             placeholder={"Find entity by ID"}
                             // size={"small"}
-                            onChange={(e) => setSearchString(e.target.value)}
+                            onChange={(e) => {
+                                setSearchString(e.target.value);
+                            }}
                             value={searchString}
                             className={"flex-grow bg-transparent outline-none p-1"}/>
                         <Button variant={"outlined"}
-                                disabled={!searchString}
+                                disabled={!(searchString.trim())}
                                 type={"submit"}
                         >Go</Button>
                     </div>

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
+import { toArray } from "../../util/arrays";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { ClearFilterSortButton } from "../ClearFilterSortButton";
+
+export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount: number;
+}
+
+export function EntityCollectionViewStartActions<M extends Record<string, any>>({
+                                                                                    collection,
+                                                                                    relativePath,
+                                                                                    parentCollectionIds,
+                                                                                    path,
+                                                                                    selectionController,
+                                                                                    tableController,
+                                                                                    collectionEntitiesCount
+                                                                                }: EntityCollectionViewStartActionsProps<M>) {
+
+    const context = useFireCMSContext();
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins ?? [];
+
+    const actionProps: CollectionActionsProps = {
+        path,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        tableController,
+        collectionEntitiesCount
+    };
+    const actions: React.ReactNode[] = [
+        <ClearFilterSortButton
+            key={"clear_filter"}
+            tableController={tableController}
+            enabled={!collection.forceFilter}/>
+    ];
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collectionView?.CollectionActionsStart) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActionsStart)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps}/>
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    return (
+        <>
+            {actions}
+        </>
+    );
+}

package/src/components/EntityPreview.tsx

@@ -10,7 +10,7 @@ import {
     getValueInPath,
     resolveCollection
 } from "../util";
-import { cn, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+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";
@@ -23,7 +23,8 @@ export type EntityPreviewProps = {
     previewProperties?: string[],
     disabled: undefined | boolean,
     entity: Entity<any>,
-    includeEntityNavigation?: boolean,
+    includeId?: boolean,
+    includeEntityLink?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -39,7 +40,8 @@ export function EntityPreview({
                                   previewProperties,
                                   onClick,
                                   size,
-                                  includeEntityNavigation,
+                                  includeId = true,
+                                  includeEntityLink = true,
                                   entity
                               }: EntityPreviewProps) {
 
@@ -49,7 +51,7 @@ export function EntityPreview({
 
     const navigationController = useNavigationController();
 
-    const collection = collectionProp ?? navigationController.getCollection<EntityCollection>(entity.path);
+    const collection = collectionProp ?? navigationController.getCollection(entity.path);
 
     if (!collection) {
         throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
@@ -75,7 +77,7 @@ export function EntityPreview({
                                    hover={disabled ? undefined : hover}
                                    size={size}>
         {imageProperty && (
-            <div className={cn("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
+            <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"}
@@ -85,7 +87,7 @@ export function EntityPreview({
 
         <div className={"flex flex-col flex-grow w-full m-1"}>
 
-            {size !== "tiny" && (
+            {size !== "tiny" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -140,7 +142,7 @@ export function EntityPreview({
 
         </div>
 
-        {entity && includeEntityNavigation &&
+        {entity && includeEntityLink &&
             <Tooltip title={`See details for ${entity.id}`}
                      className={size !== "tiny" ? "self-start" : ""}>
                 <IconButton
@@ -168,9 +170,10 @@ export function EntityPreview({
     </EntityPreviewContainer>;
 }
 
-type EntityPreviewContainerProps = {
+export type EntityPreviewContainerProps = {
     children: React.ReactNode;
     hover?: boolean;
+    fullwidth?: boolean;
     size: PreviewSize;
     className?: string;
     style?: React.CSSProperties;
@@ -184,6 +187,7 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
                                                                                                        size,
                                                                                                        style,
                                                                                                        className,
+                                                                                                       fullwidth = true,
                                                                                                        ...props
                                                                                                    }, ref) => {
     return <div
@@ -193,8 +197,9 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             // @ts-ignore
             tabindex: 0
         }}
-        className={cn(
+        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",

package/src/components/EntityView.tsx

@@ -2,7 +2,7 @@ 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 { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
 
@@ -31,14 +31,14 @@ export function EntityView<M extends Record<string, any>>(
         entityId: entity.id,
         values: entity.values,
         fields: customizationController.propertyConfigs
-    }), [collection, path, entity]);
+    }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;
 
     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={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>
@@ -58,11 +58,11 @@ export function EntityView<M extends Record<string, any>>(
                 </div>
                 {Object.entries(properties)
                     .map(([key, property]) => {
-                        const value = (entity.values)[key];
+                        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")}>
+                                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>

package/src/components/HomePage/DefaultHomePage.tsx

@@ -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>
                     );
@@ -191,7 +191,7 @@ export function DefaultHomePage({
                                         />
                                     </div>
                                 ))}
-                                {AdditionalCards &&
+                                {group?.toLowerCase() !== "admin" && AdditionalCards &&
                                     AdditionalCards.map((AdditionalCard, i) => (
                                         <div key={`nav_${group}_add_${i}`}>
                                             <AdditionalCard {...actionProps} />

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, Card, cn, Markdown, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@firecms/ui";
 
 export type NavigationCardProps = {
     name: string,
@@ -17,7 +17,7 @@ export function NavigationCard({
                                }: NavigationCardProps) {
 
     return (<Card
-        className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+        className={cls("h-full p-4 cursor-pointer min-h-[230px]")}
         onClick={() => {
             onClick?.();
         }}>
@@ -52,7 +52,7 @@ export function NavigationCard({
                 {description && <Typography variant="body2"
                                             color="secondary"
                                             component="div">
-                    <Markdown source={description}/>
+                    <Markdown source={description} size={"small"}/>
                 </Typography>}
             </div>
 

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,6 +1,6 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
 
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 export type SmallNavigationCardProps = {
     name: string,
@@ -17,9 +17,9 @@ export function SmallNavigationCard({
     return (
         <>
 
-            <ReactLink
+            <Link
                 tabIndex={0}
-                className={cn(cardMixin,
+                className={cls(cardMixin,
                     cardClickableMixin,
                     focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
@@ -39,7 +39,7 @@ export function SmallNavigationCard({
                 <div className={"p-4"}>
                     <ArrowForwardIcon color="primary"/>
                 </div>
-            </ReactLink>
+            </Link>
 
         </>);
 }