@firecms/core 3.0.1 → 3.1.0-canary.7d91b7c

package/src/components/EntityCollectionView/BoardSortableList.tsx

@@ -0,0 +1,172 @@
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { CircularProgress, cls } from "@firecms/ui";
+import { BoardItem, BoardItemViewProps } from "./board_types";
+
+interface BoardSortableListProps<M extends Record<string, any>> {
+    columnId: string;
+    items: BoardItem<M>[];
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    isDragging: boolean;
+    isDragOverColumn: boolean;
+    loading?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+}
+
+export function BoardSortableList<M extends Record<string, any>>({
+    columnId,
+    items,
+    ItemComponent,
+    isDragging,
+    isDragOverColumn,
+    loading = false,
+    hasMore = false,
+    onLoadMore,
+}: BoardSortableListProps<M>) {
+    const {
+        setNodeRef,
+    } = useDroppable({
+        id: columnId,
+        data: { type: "ITEM-LIST" }
+    });
+
+    // Infinite scroll sentinel ref - must be inside scrollable container
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const isLoadingRef = useRef(false);
+    isLoadingRef.current = loading;
+    const lastLoadTimeRef = useRef(0);
+
+    // Set up IntersectionObserver for infinite scroll
+    useEffect(() => {
+        if (!sentinelRef.current || !hasMore || !onLoadMore) return;
+
+        const sentinel = sentinelRef.current;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const now = Date.now();
+                if (
+                    entries[0].isIntersecting &&
+                    hasMore &&
+                    !isLoadingRef.current &&
+                    now - lastLoadTimeRef.current > 500
+                ) {
+                    lastLoadTimeRef.current = now;
+                    onLoadMore();
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        observer.observe(sentinel);
+
+        // Check if sentinel is already visible when effect runs
+        // This handles the case where the sentinel was visible before the observer was created
+        const rect = sentinel.getBoundingClientRect();
+        const containerRect = sentinel.parentElement?.getBoundingClientRect();
+        if (containerRect && rect.top < containerRect.bottom && rect.bottom > containerRect.top) {
+            const now = Date.now();
+            if (hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+                lastLoadTimeRef.current = now;
+                onLoadMore();
+            }
+        }
+
+        return () => observer.disconnect();
+    }, [hasMore, onLoadMore]);
+
+    // Memoize className to avoid recomputation on every render
+    const containerClassName = useMemo(() => cls(
+        "flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto no-scrollbar flex-1 rounded-md",
+        isDragging && isDragOverColumn
+            ? "bg-surface-accent-200 dark:bg-surface-800"
+            : isDragging
+                ? "bg-surface-50 dark:bg-surface-950 hover:bg-surface-accent-100 dark:hover:bg-surface-800"
+                : "bg-surface-50 dark:bg-surface-950"
+    ), [isDragging, isDragOverColumn]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={containerClassName}
+            style={{ minHeight: 80 }}
+        >
+            {items.length === 0 && !loading ? (
+                <div className="flex-1 flex items-center justify-center">
+                    <span className="text-xs text-surface-400 dark:text-surface-500">
+                        No items
+                    </span>
+                </div>
+            ) : (
+                <>
+                    {items.map((item, index) => (
+                        <SortableItem
+                            key={item.id}
+                            item={item}
+                            index={index}
+                            columnId={columnId}
+                            ItemComponent={ItemComponent}
+                        />
+                    ))}
+                    {/* Infinite scroll sentinel - inside scrollable container */}
+                    {(loading || hasMore) && (
+                        <div ref={sentinelRef} className="flex items-center justify-center py-2 min-h-6">
+                            {loading && <CircularProgress size="smallest" />}
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
+
+interface SortableItemProps<M extends Record<string, any>> {
+    item: BoardItem<M>;
+    index: number;
+    columnId: string;
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+}
+
+// Memoized to prevent unnecessary re-renders when other items in the list change
+const SortableItem = memo(function SortableItem<M extends Record<string, any>>({
+    item,
+    index,
+    columnId,
+    ItemComponent,
+}: SortableItemProps<M>) {
+    const {
+        setNodeRef,
+        attributes,
+        listeners,
+        isDragging: isItemBeingDragged,
+        transform,
+        transition,
+    } = useSortable({
+        id: item.id,
+        data: {
+            type: "ITEM",
+            columnId
+        }
+    });
+
+    // Memoize style object to prevent object recreation on each render
+    const sortableStyle = useMemo(() => ({
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isItemBeingDragged ? 2 : 1,
+        opacity: isItemBeingDragged ? 0 : 1,
+    }), [transform, transition, isItemBeingDragged]);
+
+    return (
+        <div ref={setNodeRef} style={sortableStyle} {...attributes} {...listeners}>
+            <ItemComponent
+                item={item}
+                isDragging={isItemBeingDragged}
+                index={index}
+            />
+        </div>
+    );
+}) as <M extends Record<string, any>>(props: SortableItemProps<M>) => React.ReactElement;

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="line-clamp-2 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,235 @@
+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) {
+            analyticsController.onAnalyticsEvent?.("card_view_entity_click", {
+                path: entity.path,
+                entityId: entity.id
+            });
+            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>
+    );
+}