@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/EntityCollectionView/BoardColumn.tsx

@@ -0,0 +1,158 @@
+import React, { memo, useMemo } from "react";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { BoardSortableList } from "./BoardSortableList";
+import { BoardColumnTitle } from "./BoardColumnTitle";
+import { BoardItem, BoardItemViewProps } from "./board_types";
+import { AddIcon, ChipColorKey, ChipColorScheme, cls, defaultBorderMixin, IconButton } from "@rebasepro/ui";
+
+export interface BoardColumnProps<M extends Record<string, unknown>> {
+    id: string;
+    title: string;
+    items: BoardItem<M>[];
+    index: number;
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    isDragging: boolean;
+    isDragOverColumn: boolean;
+    /**
+     * Whether column reordering is allowed (shows drag handle)
+     */
+    allowReorder?: boolean;
+    /**
+     * Whether items are loading for this column
+     */
+    loading?: boolean;
+    /**
+     * Whether there are more items to load
+     */
+    hasMore?: boolean;
+    /**
+     * Callback to load more items
+     */
+    onLoadMore?: () => void;
+    /**
+     * Callback to add a new item to this column
+     */
+    onAddItem?: () => void;
+    /**
+     * Total count of entities in this column
+     */
+    totalCount?: number;
+    /**
+     * Color of the column header indicator
+     */
+    color?: ChipColorKey | ChipColorScheme;
+    style?: React.CSSProperties;
+}
+
+// Memoized to prevent unnecessary re-renders when other columns change
+export const BoardColumn = memo(function BoardColumn<M extends Record<string, unknown>>({
+    id,
+    title,
+    items,
+    ItemComponent,
+    isDragging,
+    isDragOverColumn,
+    allowReorder = false,
+    loading = false,
+    hasMore = false,
+    onLoadMore,
+    onAddItem,
+    totalCount,
+    color,
+    style
+}: BoardColumnProps<M>) {
+    const {
+        setNodeRef,
+        attributes,
+        listeners,
+        isDragging: isColumnBeingDragged,
+        transform,
+        transition,
+    } = useSortable({
+        id,
+        data: { type: "COLUMN" },
+        disabled: !allowReorder
+    });
+
+    // Memoize combined style to avoid object recreation
+    const combinedStyle = useMemo(() => ({
+        ...style,
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isColumnBeingDragged ? 2 : 1,
+    }), [style, transform, transition, isColumnBeingDragged]);
+
+    // Only apply drag listeners if reordering is allowed
+    const dragListeners = allowReorder ? listeners : {};
+
+    // Memoize className to avoid recomputation
+    const columnClassName = useMemo(() => cls(
+        "border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md",
+        defaultBorderMixin,
+        isColumnBeingDragged ? "ring-2 ring-primary" : ""
+    ), [isColumnBeingDragged]);
+
+    const headerClassName = useMemo(() => cls(
+        "flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out",
+        isColumnBeingDragged
+            ? "bg-surface-100 dark:bg-surface-900"
+            : "bg-surface-50 hover:bg-surface-100 dark:bg-surface-950 dark:hover:bg-surface-900",
+        allowReorder ? "cursor-grab" : ""
+    ), [isColumnBeingDragged, allowReorder]);
+
+    // Memoize items IDs array to avoid recreating on each render
+    const itemIds = useMemo(() => items.map(i => i.id), [items]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={combinedStyle}
+            {...attributes}
+            className={columnClassName}
+        >
+            <div
+                {...dragListeners}
+                className={headerClassName}
+            >
+                <div className="flex items-center gap-2">
+                    <BoardColumnTitle aria-label={`${title} item list`} color={color}>
+                        {title}
+                    </BoardColumnTitle>
+                    {totalCount !== undefined && (
+                        <span className="text-xs text-surface-500 dark:text-surface-400">
+                            {totalCount}
+                        </span>
+                    )}
+                </div>
+                {onAddItem && (
+                    <IconButton
+                        size="small"
+                        onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation();
+                            onAddItem();
+                        }}
+                        className="opacity-60 hover:opacity-100"
+                    >
+                        <AddIcon size="small" />
+                    </IconButton>
+                )}
+            </div>
+            <SortableContext
+                items={itemIds}
+                strategy={verticalListSortingStrategy}
+            >
+                <BoardSortableList
+                    columnId={id}
+                    items={items}
+                    ItemComponent={ItemComponent}
+                    isDragging={isDragging}
+                    isDragOverColumn={isDragOverColumn}
+                    loading={loading}
+                    hasMore={hasMore}
+                    onLoadMore={onLoadMore}
+                />
+            </SortableContext>
+        </div>
+    );
+}) as <M extends Record<string, unknown>>(props: BoardColumnProps<M>) => React.ReactElement;

package/src/components/EntityCollectionView/BoardColumnTitle.tsx

@@ -0,0 +1,45 @@
+import { ChipColorKey, ChipColorScheme, getColorSchemeForKey, cls } from "@rebasepro/ui";
+import React, { useMemo } from "react";
+
+export interface BoardColumnTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    color?: ChipColorKey | ChipColorScheme;
+}
+
+export function BoardColumnTitle({
+    children,
+    className,
+    color,
+    ...props
+}: BoardColumnTitleProps) {
+    const colorScheme = useMemo(() => {
+        if (!color) return undefined;
+        if (typeof color === "string") {
+            return getColorSchemeForKey(color);
+        }
+        return color;
+    }, [color]);
+
+    return (
+        <h4
+            className={
+                cls("py-3 px-3 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2 flex items-center gap-3",
+                    "text-sm font-semibold text-surface-800 dark:text-surface-200",
+                    className)
+            }
+            {...props}
+        >
+            {colorScheme && (
+                <div
+                    className="w-3 h-3 rounded-full flex-shrink-0"
+                    style={{
+                        backgroundColor: colorScheme.color
+                    }}
+                />
+            )}
+            {children}
+        </h4>
+    );
+}

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 "@rebasepro/ui";
+import { BoardItem, BoardItemViewProps } from "./board_types";
+
+interface BoardSortableListProps<M extends Record<string, unknown>> {
+    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, unknown>>({
+    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, unknown>> {
+    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, unknown>>({
+    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, unknown>>(props: SortableItemProps<M>) => React.ReactElement;

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -0,0 +1,204 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { Property } from "@rebasepro/types";
+import React, { memo, useCallback, useMemo } from "react";
+import { Entity } from "@rebasepro/types";
+import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
+import { getEntityTitlePropertyKey } from "../../util/previews";
+import { IconForView } from "@rebasepro/core";
+import { Checkbox, cls, defaultBorderMixin } from "@rebasepro/ui";
+import { PropertyPreview } from "../../preview";
+import { useCustomizationController } from "@rebasepro/core";
+import { BoardItemViewProps } from "./board_types";
+import { getValueInPath } from "@rebasepro/utils";
+
+export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = 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, unknown> = Record<string, unknown>>({
+    item,
+    isDragging,
+    isGroupedOver,
+    style,
+    collection,
+    onClick,
+    selected,
+    onSelectionChange,
+    selectionEnabled = false
+}: EntityBoardCardProps<M>) {
+    const entity = item.entity;
+    const customizationController = useCustomizationController();
+
+    // v4: use collection directly without resolving
+    const titlePropertyKey = useMemo(
+        () => getEntityTitlePropertyKey(collection, customizationController.propertyConfigs),
+        [collection, customizationController.propertyConfigs]
+    );
+
+    const imagePropertyKey = useMemo(
+        () => getEntityImagePreviewPropertyKey(collection),
+        [collection]
+    );
+
+    const imageProperty = imagePropertyKey ? collection.properties[imagePropertyKey] : undefined;
+    const ofProp = imageProperty && "of" in imageProperty ? imageProperty.of : undefined;
+    const usedImageProperty = ofProp ? (Array.isArray(ofProp) ? ofProp[0] : ofProp) : imageProperty;
+
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined
+        ? ("of" in imageProperty
+            ? (((imageValue as unknown[]) ?? []).length > 0 ? (imageValue as unknown[])[0] : undefined)
+            : imageValue)
+        : undefined;
+
+    const titleValue = titlePropertyKey ? getValueInPath(entity.values, titlePropertyKey) : undefined;
+    const titleProperty = titlePropertyKey ? collection.properties[titlePropertyKey] as Property : 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, unknown>>(
+    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}
+            />
+        );
+    };
+}