@firecms/core 3.0.1 → 3.1.0-canary.1df3b2c

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -0,0 +1,212 @@
+import React, { memo, useCallback, useMemo } from "react";
+import { Entity, EntityCollection, ResolvedProperty } from "../../types";
+import {
+    getEntityImagePreviewPropertyKey,
+    getEntityTitlePropertyKey,
+    getValueInPath,
+    IconForView,
+    resolveCollection
+} from "../../util";
+import { Checkbox, cls, defaultBorderMixin } from "@firecms/ui";
+import { PropertyPreview } from "../../preview";
+import { useAuthController, useCustomizationController } from "../../hooks";
+import { BoardItemViewProps } from "./board_types";
+
+export type EntityBoardCardProps<M extends Record<string, any> = any> = BoardItemViewProps<M> & {
+    collection: EntityCollection<M>;
+    onClick?: (entity: Entity<M>) => void;
+    selected?: boolean;
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
+    selectionEnabled?: boolean;
+};
+
+/**
+ * Compact card component for displaying an entity in a Kanban board.
+ * Shows thumbnail, title, and optional selection checkbox.
+ */
+function EntityBoardCardInner<M extends Record<string, any> = any>({
+                                                                       item,
+                                                                       isDragging,
+                                                                       isGroupedOver,
+                                                                       style,
+                                                                       collection,
+                                                                       onClick,
+                                                                       selected,
+                                                                       onSelectionChange,
+                                                                       selectionEnabled = false
+                                                                   }: EntityBoardCardProps<M>) {
+    const entity = item.entity;
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection,
+        path: entity.path,
+        values: entity.values,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }), [collection, entity.path, entity.values, customizationController.propertyConfigs, authController]);
+
+    const titlePropertyKey = useMemo(
+        () => getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs),
+        [resolvedCollection, customizationController.propertyConfigs]
+    );
+
+    const imagePropertyKey = useMemo(
+        () => getEntityImagePreviewPropertyKey(resolvedCollection),
+        [resolvedCollection]
+    );
+
+    const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
+
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined
+        ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0 ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
+    const titleValue = titlePropertyKey ? getValueInPath(entity.values, titlePropertyKey) : undefined;
+    const titleProperty = titlePropertyKey ? resolvedCollection.properties[titlePropertyKey] as ResolvedProperty : undefined;
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        // Cmd+click (Mac) or Ctrl+click (Windows) toggles selection
+        if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelectionChange?.(entity, !selected);
+            return;
+        }
+        if (onClick) {
+            e.stopPropagation();
+            onClick(entity);
+        }
+    }, [entity, onClick, onSelectionChange, selected, selectionEnabled]);
+
+    const handleCheckboxClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+    }, []);
+
+    const handleSelectionChange = useCallback((checked: boolean) => {
+        onSelectionChange?.(entity, checked);
+    }, [entity, onSelectionChange]);
+
+    // Memoize className computations
+    const backgroundColor = useMemo((): string => {
+        if (isDragging) {
+            return "bg-surface-100 dark:bg-surface-800";
+        }
+        if (isGroupedOver) {
+            return "bg-surface-200";
+        }
+        return "bg-white dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800";
+    }, [isDragging, isGroupedOver]);
+
+    const borderColor = useMemo((): string =>
+        isDragging ? "ring-2 ring-primary" : "", [isDragging]);
+
+    // Memoize the card className
+    const cardClassName = useMemo(() => cls(
+        "p-2 flex items-start border rounded-lg cursor-pointer transition-colors",
+        defaultBorderMixin,
+        borderColor,
+        backgroundColor,
+        selected && "ring-2 ring-primary"
+    ), [borderColor, backgroundColor, selected]);
+
+    return (
+        <div
+            style={style}
+            className="py-1"
+            data-is-dragging={isDragging}
+            data-testid={item.id}
+            onClick={handleClick}
+        >
+            <div className={cardClassName}>
+                {/* Thumbnail */}
+                {usedImageProperty && usedImageValue ? (
+                    <div className="w-10 h-10 rounded-md overflow-hidden shrink-0 mr-2">
+                        <PropertyPreview
+                            property={usedImageProperty}
+                            propertyKey={imagePropertyKey as string}
+                            size="small"
+                            value={usedImageValue}
+                            fill={true}
+                        />
+                    </div>
+                ) : (
+                    <div
+                        className="w-10 h-10 rounded-md bg-surface-100 dark:bg-surface-800 shrink-0 mr-2 flex items-center justify-center">
+                        <IconForView
+                            collectionOrView={collection}
+                            color="disabled"
+                            size="small"
+                        />
+                    </div>
+                )}
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                    {/* Title */}
+                    <div className="truncate text-sm font-medium">
+                        {titleProperty && titleValue ? (
+                            <PropertyPreview
+                                propertyKey={titlePropertyKey as string}
+                                value={titleValue}
+                                property={titleProperty}
+                                size="small"
+                            />
+                        ) : (
+                            <span className="text-surface-500">{entity.id}</span>
+                        )}
+                    </div>
+                    {/* ID */}
+                    <div className="text-xs text-surface-500 font-mono truncate">
+                        {entity.id}
+                    </div>
+                </div>
+
+                {/* Selection checkbox */}
+                {selectionEnabled && (
+                    <div className="ml-2 shrink-0" onClick={handleCheckboxClick}>
+                        <Checkbox
+                            checked={selected ?? false}
+                            onCheckedChange={handleSelectionChange}
+                            size="smallest"
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+// Memoized to prevent unnecessary re-renders when other cards in the board change
+export const EntityBoardCard = memo(EntityBoardCardInner) as typeof EntityBoardCardInner;
+
+/**
+ * Wrapper component that adapts EntityBoardCard to BoardItemViewProps interface
+ */
+export function createEntityBoardCardComponent<M extends Record<string, any>>(
+    collection: EntityCollection<M>,
+    options: {
+        onClick?: (entity: Entity<M>) => void;
+        isEntitySelected?: (entity: Entity<M>) => boolean;
+        onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
+        selectionEnabled?: boolean;
+    }
+): React.ComponentType<BoardItemViewProps<M>> {
+    return function EntityBoardCardWrapper(props: BoardItemViewProps<M>) {
+        return (
+            <EntityBoardCard
+                {...props}
+                collection={collection}
+                onClick={options.onClick}
+                selected={options.isEntitySelected?.(props.item.entity)}
+                onSelectionChange={options.onSelectionChange}
+                selectionEnabled={options.selectionEnabled}
+            />
+        );
+    };
+}

package/src/components/EntityCollectionView/EntityCard.tsx

@@ -0,0 +1,231 @@
+import React, { useMemo } from "react";
+import {
+    CollectionSize,
+    Entity,
+    EntityCollection,
+    ResolvedProperty
+} from "../../types";
+import {
+    getEntityImagePreviewPropertyKey,
+    getEntityPreviewKeys,
+    getEntityTitlePropertyKey,
+    getValueInPath,
+    IconForView,
+    resolveCollection
+} from "../../util";
+import {
+    Card,
+    Checkbox,
+    cls,
+    KeyboardTabIcon,
+    IconButton,
+    Skeleton,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
+import { PropertyPreview, SkeletonPropertyComponent } from "../../preview";
+import {
+    useAuthController,
+    useCustomizationController,
+    useNavigationController,
+    useSideEntityController
+} from "../../hooks";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+
+export type EntityCardProps<M extends Record<string, any> = any> = {
+    entity: Entity<M>;
+    collection: EntityCollection<M>;
+    onClick?: (entity: Entity<M>) => void;
+    selected?: boolean;
+    highlighted?: boolean;
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
+    selectionEnabled?: boolean;
+    /**
+     * Size of the card - affects checkbox styling
+     */
+    size?: CollectionSize;
+};
+
+/**
+ * Card component for displaying an entity in a grid view.
+ * Shows thumbnail, title, and preview properties.
+ */
+export function EntityCard<M extends Record<string, any> = any>({
+    entity,
+    collection,
+    onClick,
+    selected,
+    highlighted,
+    onSelectionChange,
+    selectionEnabled,
+    size = "m"
+}: EntityCardProps<M>) {
+    const authController = useAuthController();
+    const analyticsController = useAnalyticsController();
+    const sideEntityController = useSideEntityController();
+    const customizationController = useCustomizationController();
+    const navigationController = useNavigationController();
+
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection,
+        path: entity.path,
+        values: entity.values,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }), [collection, entity.path, entity.values]);
+
+    const titlePropertyKey = useMemo(
+        () => getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs),
+        [resolvedCollection, customizationController.propertyConfigs]
+    );
+
+    const imagePropertyKey = useMemo(
+        () => getEntityImagePreviewPropertyKey(resolvedCollection),
+        [resolvedCollection]
+    );
+
+    const previewKeys = useMemo(
+        () => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, undefined, 2)
+            .filter(key => key !== titlePropertyKey && key !== imagePropertyKey),
+        [authController, resolvedCollection, customizationController.propertyConfigs, titlePropertyKey, imagePropertyKey]
+    );
+
+    const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
+
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined
+        ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0 ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
+    const titleValue = titlePropertyKey ? getValueInPath(entity.values, titlePropertyKey) : undefined;
+    const titleProperty = titlePropertyKey ? resolvedCollection.properties[titlePropertyKey] as ResolvedProperty : undefined;
+
+    const handleClick = (e?: React.MouseEvent) => {
+        // Cmd+click (Mac) or Ctrl+click (Windows) toggles selection
+        if (e && (e.metaKey || e.ctrlKey) && selectionEnabled) {
+            e.preventDefault();
+            onSelectionChange?.(entity, !selected);
+            return;
+        }
+        if (onClick) {
+            onClick(entity);
+        }
+    };
+
+    const handleCheckboxClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+    };
+
+    const handleSelectionChange = (checked: boolean) => {
+        onSelectionChange?.(entity, checked);
+    };
+
+
+    return (
+        <Card
+            className={cls(
+                "cursor-pointer overflow-hidden group relative",
+                "transition-all duration-200",
+                "hover:shadow-lg hover:-translate-y-0.5",
+                selected && "ring-2 ring-primary",
+                highlighted && !selected && "ring-2 ring-primary ring-opacity-50"
+            )}
+            onClick={handleClick}
+        >
+            {/* Thumbnail area */}
+            <div className="aspect-[4/3] relative overflow-hidden bg-surface-100 dark:bg-surface-800">
+                {usedImageProperty && usedImageValue ? (
+                    <div className="w-full h-full">
+                        <PropertyPreview
+                            property={usedImageProperty}
+                            propertyKey={imagePropertyKey as string}
+                            size="medium"
+                            value={usedImageValue}
+                            fill={true}
+                        />
+                    </div>
+                ) : (
+                    <div className="w-full h-full flex items-center justify-center">
+                        <IconForView
+                            collectionOrView={collection}
+                            color="disabled"
+                            size="large"
+                        />
+                    </div>
+                )}
+
+                {/* Hover overlay */}
+                <div className={cls(
+                    "absolute inset-0 bg-black/0 group-hover:bg-black/10",
+                    "transition-colors duration-200"
+                )} />
+
+                {/* Selection checkbox */}
+                {selectionEnabled && (
+                    <div
+                        className={cls(
+                            "absolute",
+                            size === "xs" || size === "s" ? "top-1 left-1" : "top-2 left-2"
+                        )}
+                        onClick={handleCheckboxClick}
+                    >
+                        <Checkbox
+                            checked={selected ?? false}
+                            onCheckedChange={handleSelectionChange}
+                            size={size === "xs" ? "smallest" : "small"}
+                        />
+                    </div>
+                )}
+
+            </div>
+
+            {/* Content area */}
+            <div className="p-3">
+                {/* Entity ID */}
+                <Typography
+                    variant="caption"
+                    color="disabled"
+                    className="font-mono truncate block"
+                >
+                    {entity.id}
+                </Typography>
+
+                {/* Title */}
+                <div className="truncate my-1 text-sm font-medium min-h-[20px]">
+                    {titleProperty && titleValue ? (
+                        <PropertyPreview
+                            propertyKey={titlePropertyKey as string}
+                            value={titleValue}
+                            property={titleProperty}
+                            size="small"
+                        />
+                    ) : (
+                        <Typography variant="body2" className="text-surface-500">
+                            {entity.id}
+                        </Typography>
+                    )}
+                </div>
+
+                {/* Preview properties */}
+                {previewKeys.slice(0, 2).map((key) => {
+                    const property = resolvedCollection.properties[key] as ResolvedProperty;
+                    if (!property) return null;
+                    const value = getValueInPath(entity.values, key);
+                    return (
+                        <div key={key} className="truncate text-xs text-surface-600 dark:text-surface-400">
+                            <PropertyPreview
+                                propertyKey={key}
+                                value={value}
+                                property={property}
+                                size="small"
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        </Card>
+    );
+}