@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,5 @@
 import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@firecms/ui";
+import React from "react"; // Import React
 
 export type NavigationCardProps = {
     name: string,
@@ -6,64 +7,72 @@ export type NavigationCardProps = {
     actions: React.ReactNode;
     icon: React.ReactNode;
     onClick?: () => void,
+    shrink?: boolean
 };
 
-export function NavigationCard({
+// Wrap the component with React.memo
+export const NavigationCard = React.memo(function NavigationCard({
                                    name,
                                    description,
                                    icon,
                                    actions,
                                    onClick,
+                                   shrink
                                }: NavigationCardProps) {
 
-    return (<Card
-        className={cls("h-full p-4 cursor-pointer min-h-[230px]")}
-        onClick={() => {
-            onClick?.();
-        }}>
+    return (
+        <Card
+            className={cls(
+                "h-full p-4 cursor-pointer min-h-[230px] transition-all duration-200 ease-in-out",
+                shrink && "w-full max-w-full min-h-0 scale-75"
+            )}
+            onClick={() => {
+                onClick?.();
+            }}
+        >
+
+            <div className="flex flex-col items-start h-full">
+                <div
+                    className="flex-grow w-full">
 
-        <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-surface-300 dark:text-surface-600">
 
-                <div
-                    className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+                        {icon}
 
-                    {icon}
+                        <div
+                            className="flex items-center gap-1"
+                            onClick={(event: React.MouseEvent) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }}>
 
-                    <div
-                        className="flex items-center gap-1"
-                        onClick={(event: React.MouseEvent) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }}>
+                            {actions}
 
-                        {actions}
+                        </div>
 
                     </div>
 
-                </div>
-
-                <Typography gutterBottom variant="h5"
-                            component="h2">
-                    {name}
-                </Typography>
+                    <Typography gutterBottom variant="h5"
+                                component="h2">
+                        {name}
+                    </Typography>
 
-                {description && <Typography variant="body2"
-                                            color="secondary"
-                                            component="div">
-                    <Markdown source={description} size={"small"}/>
-                </Typography>}
-            </div>
+                    {description && <Typography variant="body2"
+                                                color="secondary"
+                                                component="div">
+                        <Markdown source={description} size={"small"}/>
+                    </Typography>}
+                </div>
 
-            <div style={{ alignSelf: "flex-end" }}>
+                <div style={{ alignSelf: "flex-end" }}>
 
-                <div className={"p-4"}>
-                    <ArrowForwardIcon className="text-primary"/>
+                    <div className={"p-4"}>
+                        <ArrowForwardIcon className="text-primary"/>
+                    </div>
                 </div>
-            </div>
 
-        </div>
+            </div>
 
-    </Card>)
-}
+        </Card>)
+});

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,12 +1,13 @@
 import { useNavigate } from "react-router-dom";
 
 import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
+import { NavigationEntry, PluginHomePageActionsProps } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { IconButton, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { IconButton, StarIcon } from "@firecms/ui";
 import { NavigationCard } from "./NavigationCard";
 import { SmallNavigationCard } from "./SmallNavigationCard";
+import React from "react";
 
 /**
  * This is the component used in the home page to render a card for each
@@ -29,9 +30,11 @@ export function NavigationCardBinding({
                                           name,
                                           description,
                                           onClick,
-                                          type
-                                      }: TopNavigationEntry & {
-    onClick?: () => void
+                                          type,
+                                          shrink
+                                      }: NavigationEntry & {
+    onClick?: () => void,
+    shrink?: boolean // <-- add shrink prop type
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
@@ -47,6 +50,7 @@ export function NavigationCardBinding({
         ? [
             <IconButton
                 key={"favourite"}
+                size={"small"}
                 onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -60,14 +64,9 @@ export function NavigationCardBinding({
                         );
                     }
                 }}>
-                {
-                    favourite
-                        ? <StarIcon
-                            size={18}
-                            className={"text-secondary"}/>
-                        : <StarBorderIcon
-                            size={18}
-                            className={"text-gray-400 dark:text-gray-500"}/>}
+                <StarIcon
+                    size={"small"}
+                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
             </IconButton>
         ]
         : [];
@@ -96,7 +95,7 @@ export function NavigationCardBinding({
     if (type === "admin") {
         return <SmallNavigationCard icon={collectionIcon}
                                     name={name}
-                                    url={url}/>
+                                    url={url}/>;
     }
 
     return <NavigationCard
@@ -112,5 +111,7 @@ export function NavigationCardBinding({
                     [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
                 );
             }
-        }}/>;
+        }}
+        shrink={shrink}
+    />;
 }

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,39 +1,153 @@
-import { PropsWithChildren } from "react";
-import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import React, { PropsWithChildren, useState } from "react";
+import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@firecms/ui";
 
 export function NavigationGroup({
                                     children,
-                                    group
+                                    group,
+                                    minimised,
+                                    isPreview,
+                                    isPotentialCardDropTarget,
+                                    onEditGroup,
+                                    dndDisabled,
+                                    collapsed,
+                                    onToggleCollapsed
                                 }: PropsWithChildren<{
-    group: string | undefined
+    group: string | undefined,
+    minimised?: boolean,
+    isPreview?: boolean,
+    isPotentialCardDropTarget?: boolean,
+    onEditGroup?: (groupName: string) => void;
+    dndDisabled?: boolean;
+    collapsed?: boolean;
+    onToggleCollapsed?: () => void;
 }>) {
-    const userConfigurationPersistence = useUserConfigurationPersistence();
+
+    const [isHovered, setIsHovered] = useState(false);
+    const currentGroupName = group ?? "Views";
+
+    // Show caret only when not in preview and there is a toggle handler
+    const showCaret = !isPreview && !!onToggleCollapsed;
+
+    // Helper for the title content (left side)
+    const TitleContent = (
+        <div className={cls("flex items-center", isPreview ? "px-1 py-0.5" : "")}
+        >
+            <Typography
+                variant={isPreview ? "body2" : "caption"}
+                component={"h2"}
+                color="secondary"
+                className={cls(
+                    "p-4 py-2 rounded",
+                    "font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                )}
+            >
+                {currentGroupName}
+            </Typography>
+            {!isPreview && onEditGroup && !dndDisabled && (
+                <IconButton
+                    size="smallest"
+                    onClick={(e) => {
+                        e.stopPropagation(); // Prevent toggle on click
+                        onEditGroup(currentGroupName);
+                    }}
+                    className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
+                >
+                    <EditIcon size="smallest"/>
+                </IconButton>
+            )}
+        </div>
+    );
+
     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")));
+        <div className={cls(
+            !isPotentialCardDropTarget ? "my-10" : "my-6",
+            "transition-all duration-200 ease-in-out"
+        )}
+        >
+            {/* Preview: static header + content (no caret / no collapse) */}
+            {isPreview && (
+                <>
+                    <div
+                        className={cls(
+                            "flex items-center justify-between w-full",
+                          "p-4 py-2"
+                        )}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                    >
+                        {TitleContent}
+                    </div>
+                    {children}
+                </>
+            )}
+
+            {/* Interactive collapsible version when a toggle handler is provided */}
+            {!isPreview && showCaret && (
+                <ExpandablePanel
+                    invisible
+                    expanded={!collapsed}
+                    onExpandedChange={(open) => {
+                        if (open !== !collapsed) {
+                            onToggleCollapsed?.();
+                        }
+                    }}
+                    className={cls("mt-6")}
+                    titleClassName={cls(
+                        "min-h-0 p-0 border-none",
+                        "rounded-t flex items-center justify-between w-full",
+                        "hover:bg-transparent",
+                        "cursor-pointer select-none"
+                    )}
+                    innerClassName={cls("mt-4", !minimised ? "pt-0" : "")}
+                    title={
+                        <div
+                            onMouseEnter={() => setIsHovered(true)}
+                            onMouseLeave={() => setIsHovered(false)}
+                            className="flex items-center"
+                        >
+                            {TitleContent}
+                        </div>
                     }
-                }
-            }}
-            title={<Typography color={"secondary"}
-                               className="font-medium ml-1">
-                {group?.toUpperCase() ?? "Views".toUpperCase()}
-            </Typography>}>
-
-            <div className="mb-8">
-                {children}
-            </div>
-        </ExpandablePanel>
+                >
+                    {minimised ? (
+                        <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                             style={{ minHeight: "50px" }}>
+                        </div>
+                    ) : (
+                        <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                            {children}
+                        </div>
+                    )}
+                </ExpandablePanel>
+            )}
+
+            {/* Non-collapsible (no caret) runtime, keep old behavior */}
+            {!isPreview && !showCaret && (
+                <>
+                    <div
+                        className={cls(
+                            "flex items-center justify-between w-full",
+                            "mt-6"
+                        )}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                    >
+                        {TitleContent}
+                    </div>
+
+                    {!collapsed && (
+                        minimised ? (
+                            <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                                 style={{ minHeight: "50px" }}>
+                            </div>
+                        ) : (
+                            <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                                {children}
+                            </div>
+                        )
+                    )}
+                </>
+            )}
+        </div>
     );
 }

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@firecms/ui";
+
+interface RenameGroupDialogProps {
+    open: boolean;
+    initialName: string;
+    existingGroupNames: string[]; // Names of other existing groups to check for duplicates
+    onClose: () => void;
+    onRename: (newName: string) => void;
+}
+
+export function RenameGroupDialog({
+                                      open,
+                                      initialName,
+                                      existingGroupNames,
+                                      onClose,
+                                      onRename
+                                  }: RenameGroupDialogProps) {
+    const [name, setName] = useState(initialName);
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
+
+    useEffect(() => {
+        if (open) {
+            setName(initialName);
+            setError(null);
+            // Focus and select text when dialog opens
+            setTimeout(() => { // setTimeout to ensure the input is rendered and focusable
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.select();
+                }
+            }, 100);
+        }
+    }, [initialName, open]);
+
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const newName = event.target.value;
+        setName(newName);
+        if (!newName.trim()) {
+            setError("Group name cannot be empty.");
+        } else if (existingGroupNames.includes(newName.trim())) {
+            setError("This group name already exists.");
+        } else {
+            setError(null);
+        }
+    };
+
+    const handleSave = () => {
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            setError("Group name cannot be empty.");
+            return;
+        }
+        if (existingGroupNames.includes(trimmedName)) {
+            setError("This group name already exists.");
+            return;
+        }
+        if (!error) {
+            onRename(trimmedName);
+            onClose();
+        }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (event.key === "Enter") {
+            event.preventDefault(); // Prevent default form submission behavior
+            const trimmedName = name.trim();
+            // We need to check the error state directly as well,
+            // because the error state might not have updated if the user types and immediately hits enter.
+            let currentError = null;
+            if (!trimmedName) {
+                currentError = "Group name cannot be empty.";
+            } else if (existingGroupNames.includes(trimmedName)) {
+                currentError = "This group name already exists.";
+            }
+
+            if (!currentError && trimmedName) {
+                handleSave();
+            } else if (currentError) {
+                setError(currentError); // Ensure error is displayed if trying to submit with Enter
+            }
+        }
+    };
+
+    const handleClose = () => {
+        setName(initialName);
+        setError(null);
+        onClose();
+    };
+
+    if (!open) return null;
+
+    return (
+        <Dialog open={open}>
+            <DialogTitle>Rename Group</DialogTitle>
+            <DialogContent>
+                <TextField
+                    inputRef={inputRef} // Pass the ref to the TextField
+                    label="Group Name"
+                    value={name}
+                    onChange={handleNameChange}
+                    onKeyDown={handleKeyDown} // Added onKeyDown handler
+                    error={!!error}
+                    aria-describedby={error ? "group-name-error" : undefined}
+                />
+                {error && <p id="group-name-error" style={{ display: "none" }}>{error}</p>}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}
+                        color={"primary"}
+                        variant="text">
+                    Cancel
+                </Button>
+                <Button onClick={handleSave}
+                        color={"primary"}
+                        disabled={!!error || !name.trim()}>
+                    Save
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, Typography, } from "@firecms/ui";
 
 import { Link } from "react-router-dom";
 
@@ -21,7 +21,6 @@ export function SmallNavigationCard({
                 tabIndex={0}
                 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 ")}
                 to={url}
             >

package/src/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
 
 export function NotFoundPage() {
@@ -17,7 +17,7 @@ export function NotFoundPage() {
                 </Typography>
                 <Button
                     variant={"text"}
-                    component={ReactLink}
+                    component={Link}
                     to={"/"}>Back to home</Button>
             </div>
         </div>

package/src/components/PropertyConfigBadge.tsx

@@ -2,16 +2,22 @@ import { getIconForWidget } from "../util";
 import { PropertyConfig } from "../types";
 import { getDefaultFieldConfig } from "../core";
 
-export function PropertyConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
+export function PropertyConfigBadge({
+                                        propertyConfig,
+                                        disabled
+                                    }: {
+    propertyConfig: PropertyConfig | undefined,
+    disabled?: boolean
+}): React.ReactNode {
+    const classes = "h-8 w-8 flex items-center justify-center rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
 
     return <div
         className={classes}
         style={{
-            background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
+            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
         }}>
-        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
+        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "small") : getIconForWidget(defaultPropertyConfig, "small")}
     </div>
 }

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,47 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children,
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+            {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}