@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/CollectionTableBinding/table_bindings.tsx

@@ -1,350 +0,0 @@
-import React from "react";
-import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
-import { TableSize, useCustomizationController } from "@rebasepro/app";
-import {
-    VirtualTableInput,
-    VirtualTableNumberInput,
-    VirtualTableSwitch,
-    VirtualTableDateField
-} from "@rebasepro/ui";
-
-import { VirtualTableSelect } from "./fields/VirtualTableSelect";
-import { VirtualTableUserSelect } from "./fields/VirtualTableUserSelect";
-import { TableStorageUpload } from "./fields/TableStorageUpload";
-import { TableReferenceField } from "./fields/TableReferenceField";
-import { TableRelationField } from "./fields/TableRelationField";
-import { TableRelationSelectorField } from "./fields/TableRelationSelectorField";
-
-import { getPreviewSizeFrom } from "../../preview/util";
-
-export interface TableFieldBindingProps<T = unknown> {
-    propertyKey: string;
-    property: Property;
-    internalValue: T;
-    updateValue: (newValue: T | null) => void;
-    error?: Error;
-    validationError?: Error;
-    disabled: boolean;
-    selected: boolean;
-    size: TableSize;
-    align: "left" | "center" | "right";
-    entity: Entity<Record<string, unknown>>;
-    path: string;
-    openPopup?: (cellRect: DOMRect | undefined) => void;
-}
-
-export interface TableFieldConfig {
-    Component: React.ComponentType<TableFieldBindingProps>;
-    fullHeight?: boolean;
-    allowScroll?: boolean;
-    removePadding?: boolean;
-    showExpandIcon?: boolean;
-    hideOverflow?: boolean;
-    includeActions?: boolean;
-}
-
-export function isStorageProperty(property: Property) {
-    if (property.type === "string" && property.admin?.markdown)
-        return false;
-    if (property.type === "string" && (property as StringProperty).storage)
-        return true;
-    if (property.type === "array") {
-        if (Array.isArray(property.of)) {
-            return false;
-        } else {
-            return ((property as ArrayProperty).of as Property)?.type === "string" &&
-                ((property as ArrayProperty).of as StringProperty)?.storage
-        }
-    }
-    return false;
-}
-
-export function getTableBindingForProperty(
-    property: Property,
-    selected: boolean
-): TableFieldConfig | undefined {
-    const isAStorageProperty = isStorageProperty(property);
-
-    if (isAStorageProperty) {
-        return {
-            Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: TableFieldBindingProps) => (
-                <TableStorageUpload
-                    error={validationError ?? error}
-                    disabled={disabled}
-                    focused={selected}
-                    selected={selected}
-                    openPopup={openPopup}
-                    property={property as StringProperty | ArrayProperty}
-                    entity={entity}
-                    path={path}
-                    value={internalValue as string | string[] | null}
-                    previewSize={getPreviewSizeFrom(size)}
-                    updateValue={updateValue}
-                    propertyKey={propertyKey}
-                />
-            ),
-            includeActions: false,
-            showExpandIcon: true,
-            fullHeight: true,
-            removePadding: true
-        };
-    } else if (selected && property.type === "number") {
-        const numberProperty = property as NumberProperty;
-        if (numberProperty.enum) {
-            return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
-                    <VirtualTableSelect
-                        name={propertyKey}
-                        multiple={false}
-                        disabled={disabled}
-                        focused={selected}
-                        valueType={"number"}
-                        small={getPreviewSizeFrom(size) !== "medium"}
-                        enumValues={numberProperty.enum!}
-                        error={validationError ?? error}
-                        internalValue={internalValue as string | number}
-                        updateValue={updateValue}
-                    />
-                ),
-                fullHeight: true
-            };
-        } else {
-            return {
-                Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }: TableFieldBindingProps) => (
-                    <VirtualTableNumberInput
-                        align={align}
-                        error={validationError ?? error}
-                        focused={selected}
-                        disabled={disabled}
-                        value={internalValue as number}
-                        updateValue={updateValue}
-                    />
-                ),
-                allowScroll: true
-            };
-        }
-    } else if (selected && property.type === "string") {
-        const stringProperty = property as StringProperty;
-        if (stringProperty.enum) {
-            return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
-                    <VirtualTableSelect
-                        name={propertyKey}
-                        multiple={false}
-                        focused={selected}
-                        disabled={disabled}
-                        valueType={"string"}
-                        small={getPreviewSizeFrom(size) !== "medium"}
-                        enumValues={stringProperty.enum!}
-                        error={validationError ?? error}
-                        internalValue={internalValue as string | number}
-                        updateValue={updateValue}
-                    />
-                ),
-                fullHeight: true
-            };
-        } else if (stringProperty.userSelect) {
-            return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
-                    <VirtualTableUserSelect
-                        name={propertyKey}
-                        multiple={false}
-                        focused={selected}
-                        disabled={disabled}
-                        small={getPreviewSizeFrom(size) !== "medium"}
-                        error={validationError ?? error}
-                        internalValue={internalValue as string}
-                        updateValue={updateValue}
-                    />
-                ),
-                fullHeight: true
-            };
-        } else if (stringProperty.admin?.markdown || !stringProperty.storage) {
-            const multiline = Boolean(stringProperty.admin?.multiline) || Boolean(stringProperty.admin?.markdown);
-            return {
-                Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
-                    <VirtualTableInput
-                        error={validationError ?? error}
-                        disabled={disabled}
-                        multiline={multiline}
-                        focused={selected}
-                        value={internalValue as string}
-                        updateValue={updateValue}
-                    />
-                ),
-                allowScroll: true
-            };
-        }
-    } else if (property.type === "boolean") {
-        return {
-            Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
-                <VirtualTableSwitch
-                    error={validationError ?? error}
-                    disabled={disabled}
-                    focused={selected}
-                    internalValue={internalValue as boolean}
-                    updateValue={updateValue}
-                />
-            )
-        };
-    } else if (property.type === "date") {
-        return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, size, property, internalValue, updateValue }: TableFieldBindingProps) => {
-                const { locale } = useCustomizationController();
-                return (
-                    <VirtualTableDateField
-                        name={propertyKey}
-                        error={validationError ?? error}
-                        disabled={disabled}
-                        small={getPreviewSizeFrom(size) !== "medium"}
-                        mode={(property as DateProperty).mode}
-                        focused={selected}
-                        internalValue={internalValue as Date}
-                        updateValue={updateValue}
-                        locale={locale}
-                    />
-                );
-            },
-            fullHeight: true,
-            hideOverflow: false,
-            allowScroll: false
-        };
-    } else if (property.type === "reference") {
-        if ((property as ReferenceProperty).path) {
-            return {
-                Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) => {
-                    return (
-                    <TableReferenceField
-                        name={propertyKey}
-                        internalValue={internalValue as EntityReference}
-                        updateValue={updateValue}
-                        disabled={disabled}
-                        size={size}
-                        path={(property as ReferenceProperty).path!}
-                        multiselect={false}
-                        previewProperties={(property as ReferenceProperty).admin?.previewProperties}
-                        includeId={(property as ReferenceProperty).admin?.includeId}
-                        includeEntityLink={(property as ReferenceProperty).admin?.includeEntityLink}
-                        title={property.name ?? propertyKey}
-                        fixedFilter={(property as ReferenceProperty).admin?.fixedFilter}
-                    />
-                    );
-                },
-                allowScroll: false
-            };
-        }
-    } else if (property.type === "relation") {
-        if ((property as RelationProperty).relation) {
-            if ((property as RelationProperty).admin?.widget === "dialog") {
-                return {
-                    Component: RelationDialogBindingComponent,
-                    allowScroll: false
-                };
-            } else if (selected) {
-                // Gated on `selected`, like the number and string editors above.
-                // This one mounts a live picker against the *target* collection,
-                // and the cell is rendered once per visible row: ungated, opening
-                // a table with one relation column fired a request — or, on the
-                // realtime path, a subscription — per row, for data nobody had
-                // asked to see. Unselected cells fall through to PropertyPreview.
-                return {
-                    Component: RelationSelectorBindingComponent,
-                    allowScroll: false
-                };
-            }
-        }
-    } else if (property.type === "array") {
-        const arrayProperty = (property as ArrayProperty);
-
-        if (!arrayProperty.of && !arrayProperty.oneOf) {
-            throw Error("You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property");
-        } else if (arrayProperty.of && !Array.isArray(arrayProperty.of)) {
-            const ofProp = arrayProperty.of as Property;
-            if (ofProp.type === "string" || ofProp.type === "number") {
-                if (selected && ofProp.enum) {
-                    return {
-                        Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
-                            <VirtualTableSelect
-                                name={propertyKey}
-                                multiple={true}
-                                disabled={disabled}
-                                focused={selected}
-                                small={getPreviewSizeFrom(size) !== "medium"}
-                                valueType={ofProp.type}
-                                enumValues={ofProp.enum!}
-                                error={validationError ?? error}
-                                internalValue={internalValue as string | number}
-                                updateValue={updateValue}
-                            />
-                        ),
-                        allowScroll: true,
-                        fullHeight: true,
-                        hideOverflow: false
-                    };
-                }
-            } else if (ofProp.type === "reference") {
-                const refOfProp = ofProp as ReferenceProperty;
-                if (refOfProp.path) {
-                    return {
-                        Component: ({ propertyKey, disabled, internalValue, updateValue, size }: TableFieldBindingProps) => (
-                            <TableReferenceField
-                                name={propertyKey}
-                                disabled={disabled}
-                                internalValue={internalValue as EntityReference[]}
-                                updateValue={updateValue}
-                                size={size}
-                                multiselect={true}
-                                path={refOfProp.path!}
-                                previewProperties={refOfProp.admin?.previewProperties}
-                                title={arrayProperty.name}
-                                fixedFilter={refOfProp.admin?.fixedFilter}
-                                includeId={refOfProp.admin?.includeId}
-                                includeEntityLink={refOfProp.admin?.includeEntityLink}
-                            />
-                        ),
-                        allowScroll: false
-                    };
-                }
-            }
-        }
-    }
-
-    return undefined;
-}
-
-/** Stable component for relation fields rendered with the dialog widget */
-function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) {
-    const relProp = property as RelationProperty;
-    return (
-        <TableRelationField
-            name={propertyKey}
-            internalValue={internalValue as EntityRelation}
-            updateValue={updateValue}
-            disabled={disabled}
-            size={size}
-            multiselect={false}
-            relation={relProp.relation!}
-            previewProperties={relProp.admin?.previewProperties}
-            includeId={relProp.admin?.includeId}
-            includeEntityLink={relProp.admin?.includeEntityLink}
-            title={relProp.name ?? propertyKey}
-            fixedFilter={relProp.admin?.fixedFilter}
-        />
-    );
-}
-
-/** Stable component for relation fields rendered with the inline selector */
-function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: TableFieldBindingProps) {
-    const relProp = property as RelationProperty;
-    return (
-        <TableRelationSelectorField
-            name={propertyKey}
-            internalValue={internalValue as EntityRelation}
-            updateValue={updateValue}
-            disabled={disabled}
-            size={"small"}
-            relation={relProp.relation!}
-            fixedFilter={relProp.admin?.fixedFilter}
-        />
-    );
-}

package/src/components/CollectionViewBinding/BoardCardBinding.tsx

@@ -1,263 +0,0 @@
-
-import React, { memo, useCallback, useMemo } from "react";
-import { Entity } from "@rebasepro/types";
-import { Checkbox, Chip, cls, defaultBorderMixin, Markdown } from "@rebasepro/ui";
-import { PropertyPreview } from "../../preview";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
-import { IconForView } from "@rebasepro/app";
-import { BoardItemViewProps } from "@rebasepro/ui";
-import { useCollectionSlotKeys, useEntitySlots } from "./usePreviewSlots";
-import { SlotValue, TagChips } from "./SlotValue";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export type BoardCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<Entity<M>> & {
-    collection: AdminCollection<M>;
-    onClick?: (entity: Entity<M>) => void;
-    selected?: boolean;
-    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
-    selectionEnabled?: boolean;
-};
-
-/**
- * Compact card component for displaying a entity in a Kanban board.
- * Uses the shared slot system for consistent preview rendering.
- *
- * Selection UX: The checkbox overlays on top of the image/icon thumbnail area,
- * revealed on card hover or when the card is selected. This keeps the card
- * layout clean while providing intuitive selection affordance.
- */
-function BoardCardBindingInner<M extends Record<string, unknown> = Record<string, unknown>>({
-    item,
-    isDragging,
-    isGroupedOver,
-    style,
-    collection,
-    onClick,
-    selected,
-    onSelectionChange,
-    selectionEnabled = false
-}: BoardCardBindingProps<M>) {
-    const entity = item.data;
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-
-    const slotKeys = useCollectionSlotKeys(
-        collection as AdminCollection<Record<string, unknown>>,
-        authController,
-        customizationController.propertyConfigs
-    );
-
-    const slots = useEntitySlots(
-        entity as Entity<Record<string, unknown>>,
-        collection as AdminCollection<Record<string, unknown>>,
-        slotKeys
-    );
-
-    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 handleThumbnailClick = useCallback((e: React.MouseEvent) => {
-        if (!selectionEnabled) return;
-        e.stopPropagation();
-        e.preventDefault();
-        onSelectionChange?.(entity, !selected);
-    }, [entity, onSelectionChange, selected, selectionEnabled]);
-
-    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 dark:bg-surface-700";
-        }
-        return "bg-white dark:bg-surface-800 hover:bg-surface-50 dark:hover:bg-surface-700";
-    }, [isDragging, isGroupedOver]);
-
-    const borderColor = useMemo((): string =>
-        isDragging ? "ring-2 ring-primary" : "", [isDragging]);
-
-    // Memoize the card className — use CSS group for hover-reveal of checkbox
-    const cardClassName = useMemo(() => cls(
-        "group/card p-2 flex items-start border rounded-lg cursor-pointer transition-all duration-200",
-        defaultBorderMixin,
-        borderColor,
-        backgroundColor,
-        selected
-            ? "ring-2 ring-primary bg-primary/[0.03] dark:bg-primary/[0.06]"
-            : "hover:shadow-sm"
-    ), [borderColor, backgroundColor, selected]);
-
-    return (
-        <div
-            style={style}
-            className="py-1"
-            data-is-dragging={isDragging}
-            data-testid={item.id}
-            onClick={handleClick}
-        >
-            <div className={cardClassName}>
-                {/* Thumbnail area with selection overlay */}
-                <div
-                    className="relative w-10 h-10 rounded-md shrink-0 mr-2"
-                    onClick={handleThumbnailClick}
-                >
-                    {/* Image or fallback icon */}
-                    {slots.image ? (
-                        <div className={cls(
-                            "w-10 h-10 rounded-md overflow-hidden transition-opacity duration-200",
-                            selectionEnabled && "group-hover/card:opacity-30",
-                            selected && "opacity-0"
-                        )}>
-                            <SlotValue slot={slots.image} size="small" fill={true}/>
-                        </div>
-                    ) : (
-                        <div className={cls(
-                            "w-10 h-10 rounded-md bg-surface-100 dark:bg-surface-900 flex items-center justify-center transition-opacity duration-200",
-                            selectionEnabled && "group-hover/card:opacity-30",
-                            selected && "opacity-0"
-                        )}>
-                            <IconForView
-                                collectionOrView={collection}
-                                color="disabled"
-                                size="small"
-                            />
-                        </div>
-                    )}
-
-                    {/* Selection checkbox overlay — always in the DOM, visibility controlled by CSS */}
-                    <div className={cls(
-                        "absolute inset-0 flex items-center justify-center rounded-md transition-[opacity,background-color] duration-200",
-                        !selectionEnabled && "invisible pointer-events-none",
-                        selectionEnabled && (selected
-                            ? "opacity-100 bg-primary/10 dark:bg-primary/20"
-                            : "opacity-0 group-hover/card:opacity-100")
-                    )}>
-                        <div className={cls(
-                            "transition-transform duration-200",
-                            selected
-                                ? "scale-100"
-                                : "scale-75 group-hover/card:scale-100"
-                        )}>
-                            <Checkbox
-                                checked={selected ?? false}
-                                onCheckedChange={handleSelectionChange}
-                                size="small"
-                                padding={false}
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 min-w-0">
-                    {/* Title slot */}
-                    <div className="line-clamp-2 text-sm font-medium">
-                        {slots.title ? (
-                            <SlotValue slot={slots.title} size="small"/>
-                        ) : (
-                            <span className="text-surface-500">{entity.id}</span>
-                        )}
-                    </div>
-                    {/* Subtitle / Description */}
-                    {slots.subtitle ? (
-                        <div className="text-xs text-surface-500 mt-1 line-clamp-3 opacity-80">
-                            {typeof slots.subtitle.value === "string" ? (
-                                <Markdown source={slots.subtitle.value} size="small" />
-                            ) : (
-                                <SlotValue slot={slots.subtitle} size="small"/>
-                            )}
-                        </div>
-                    ) : (
-                        <div className="text-xs text-surface-500 font-mono truncate mt-1">
-                            {entity.id}
-                        </div>
-                    )}
-                    {/* Relation chips slot */}
-                    {slots.relations.length > 0 && (
-                        <div className="flex items-center gap-1 mt-1 overflow-hidden max-w-full flex-wrap">
-                            {slots.relations.map((rel) => (
-                                rel.items.map((item) => (
-                                    <Chip
-                                        key={`${rel.propertyKey}-${item.id}`}
-                                        size="smallest"
-                                        colorScheme={rel.colorScheme}
-                                        className="!text-[10px] !leading-tight !py-0 shrink-0 max-w-[90px] truncate"
-                                    >
-                                        {item.displayName}
-                                    </Chip>
-                                ))
-                            ))}
-                            {slots.relations.some(r => r.totalCount > r.items.length) && (
-                                <span className="text-[10px] text-surface-400 dark:text-surface-500 shrink-0">
-                                    +{slots.relations.reduce((acc, r) => acc + Math.max(0, r.totalCount - r.items.length), 0)}
-                                </span>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Tags slot */}
-                    {slots.tags && (
-                        <div className="flex items-center gap-1 mt-1 flex-wrap">
-                            <TagChips slot={slots.tags} max={3}/>
-                        </div>
-                    )}
-
-                    {/* Date slot — a board card is a list row without the image, and
-                        the row shows it. The status is deliberately not repeated
-                        here: on a board grouped by it, the column header is already
-                        saying it. */}
-                    {slots.date && (
-                        <div className="text-[10px] text-surface-500 dark:text-surface-400 mt-1">
-                            {slots.date.formatted}
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-// Memoized to prevent unnecessary re-renders when other cards in the board change
-export const BoardCardBinding = memo(BoardCardBindingInner) as typeof BoardCardBindingInner;
-
-/**
- * Wrapper component that adapts BoardCardBinding to BoardItemViewProps interface
- */
-export function createBoardCardBindingComponent<M extends Record<string, unknown>>(
-    collection: AdminCollection<M>,
-    options: {
-        onClick?: (entity: Entity<M>) => void;
-        isEntitySelected?: (entity: Entity<M>) => boolean;
-        onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
-        selectionEnabled?: boolean;
-    }
-): React.ComponentType<BoardItemViewProps<Entity<M>>> {
-    return function BoardCardBindingWrapper(props: BoardItemViewProps<Entity<M>>) {
-        return (
-            <BoardCardBinding
-                {...props}
-                collection={collection}
-                onClick={options.onClick}
-                selected={options.isEntitySelected?.(props.item.data)}
-                onSelectionChange={options.onSelectionChange}
-                selectionEnabled={options.selectionEnabled}
-            />
-        );
-    };
-}