@rebasepro/admin 0.0.1-canary.4f204c2

package/src/components/EntityCollectionTable/fields/VirtualTableUserSelect.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { User } from "@rebasepro/types";
+import { UserSelector } from "../../../components/UserSelector";
+
+export function VirtualTableUserSelect(props: {
+    name: string;
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | string[] | undefined;
+    updateValue: (newValue: (string | string[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple
+    } = props;
+
+    // For now we only support single-select in the table context via the new UserSelector
+    const singleValue = Array.isArray(internalValue) ? internalValue[0] ?? null : internalValue ?? null;
+
+    return (
+        <UserSelector
+            value={singleValue}
+            onValueChange={(userId) => {
+                updateValue(userId);
+            }}
+            disabled={disabled}
+            size={"small"}
+            clearable={true}
+            invisible={true}
+        />
+    );
+}

package/src/components/EntityCollectionTable/index.tsx

@@ -0,0 +1,14 @@
+export {
+    EntityCollectionTable
+} from "./EntityCollectionTable";
+
+export type {
+    EntityCollectionTableProps
+} from "./EntityCollectionTableProps";
+
+export * from "./PropertyTableCell";
+export * from "./EntityCollectionRowActions";
+
+export * from "./column_utils";
+
+export { VirtualTableInput } from "./fields/VirtualTableInput";

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+import { CircularProgress, cls, defaultBorderMixin, SearchBar } from "@rebasepro/ui";
+import { useLargeLayout, useTranslation } from "@rebasepro/core";
+
+interface CollectionTableToolbarProps {
+    loading: boolean;
+    actionsStart?: React.ReactNode;
+    actions?: React.ReactNode;
+    /**
+     * View mode toggle button, positioned left of the search bar.
+     */
+    viewModeToggle?: React.ReactNode;
+    title?: React.ReactNode,
+    onTextSearch?: (searchString?: string) => void;
+    /**
+     * When true the toolbar is in "compact" mode for the split-view left panel.
+     * - Search bar, loading spinner, and view-mode toggle are hidden.
+     * - Secondary actions remain inline (displayed horizontally).
+     * - Only `actionsStart` (filters) and the add button (last child of `actions`) remain visible.
+     */
+    compact?: boolean;
+}
+
+export function CollectionTableToolbar({
+    actions,
+    actionsStart,
+    loading,
+    onTextSearch,
+    title,
+    viewModeToggle,
+    compact = false
+}: CollectionTableToolbarProps) {
+
+    const largeLayout = useLargeLayout();
+    const { t } = useTranslation();
+
+    // Split actions into "primary" (add button = last child) and "secondary" (everything else)
+    const actionChildren = React.Children.toArray(actions);
+    const addButton = actionChildren.length > 0 ? actionChildren[actionChildren.length - 1] : null;
+    const secondaryActions = actionChildren.slice(0, -1);
+
+    return (
+        <div
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
+
+            <div className="flex items-center gap-1 md:mr-4 mr-2">
+
+                {/* View toggle — hidden in compact */}
+                <div className={cls(
+                    "transition-all duration-300 ease-out overflow-hidden",
+                    compact ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
+                )}>
+                    {viewModeToggle}
+                </div>
+
+                {title && <div className={"hidden lg:block"}>
+                    {title}
+                </div>}
+
+                {actionsStart}
+
+            </div>
+
+            <div className="flex items-center gap-1">
+
+                {/* Loading spinner — hidden in compact */}
+                {largeLayout && <div className={cls(
+                    "mr-4 transition-all duration-300 ease-out overflow-hidden",
+                    compact ? "w-0 opacity-0" : "w-[22px] opacity-100"
+                )}>
+                    {loading &&
+                        <CircularProgress size={"smallest"}/>}
+                </div>}
+
+                {/* Search bar — hidden in compact */}
+                <div className={cls(
+                    "transition-all duration-300 ease-out",
+                    compact ? "max-w-0 opacity-0 overflow-hidden" : "max-w-[300px] opacity-100"
+                )}>
+                    {onTextSearch &&
+                        <SearchBar
+                            key={"search-bar"}
+                            size={"small"}
+                            placeholder={t("search")}
+                            onTextSearch={onTextSearch}
+                            expandable={true}/>}
+                </div>
+
+                {/* Secondary actions — always inline */}
+                <div className="flex items-center gap-1">
+                    {secondaryActions}
+                </div>
+
+                {/* Add button — always visible */}
+                {addButton}
+
+            </div>
+
+        </div>
+    );
+}

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -0,0 +1,310 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import useMeasure from "react-use-measure";
+
+import { cls, Tooltip , iconSize } from "@rebasepro/ui";
+import { MinusCircleIcon } from "lucide-react";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { getRowHeight, TableSize } from "@rebasepro/core";
+import { ErrorTooltip } from "@rebasepro/core";
+
+interface EntityTableCellProps {
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    /**
+     * The value is used only to check changes and force re-renders
+     */
+    value?: any;
+    disabled: boolean;
+    savedTimestamp?: number;
+    error?: Error;
+    allowScroll?: boolean;
+    align: "right" | "left" | "center";
+    size: TableSize;
+    disabledTooltip?: string;
+    width: number;
+    showExpandIcon?: boolean;
+    removePadding?: boolean;
+    fullHeight?: boolean;
+    selected?: boolean;
+    hideOverflow?: boolean;
+    onSelect?: (cellRect: DOMRect | undefined) => void;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
+}
+
+type TableCellInnerProps = {
+    justifyContent: string;
+    scrollable: boolean;
+    faded: boolean;
+    fullHeight: boolean;
+    children: React.ReactNode;
+}
+
+const TableCellInner = ({
+    justifyContent,
+    scrollable,
+    faded,
+    fullHeight,
+    children
+}: TableCellInnerProps) => {
+    return (
+        <div className={cls("flex flex-col max-h-full w-full",
+            {
+                "items-start": faded || scrollable
+            })}
+            style={{
+                justifyContent,
+                height: fullHeight ? "100%" : undefined,
+                overflow: scrollable ? "auto" : undefined,
+                WebkitMaskImage: faded
+                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                    : undefined,
+                maskImage: faded
+                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                    : undefined
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export const EntityTableCell = React.memo<EntityTableCellProps>(
+    function EntityTableCell({
+        children,
+        actions,
+        size,
+        selected,
+        disabled,
+        disabledTooltip,
+        savedTimestamp,
+        error,
+        align,
+        allowScroll,
+        removePadding,
+        fullHeight,
+        onSelect,
+        width,
+        hideOverflow = true,
+        showExpandIcon = true,
+        sortableNodeRef,
+        sortableStyle,
+        sortableAttributes,
+        isDragging,
+        isDraggable,
+        frozen
+    }: EntityTableCellProps) {
+
+        const [measureRef, bounds] = useMeasure();
+        const ref = useRef<HTMLDivElement>(null);
+
+        const maxHeight = useMemo(() => getRowHeight(size), [size]);
+
+        const [onHover, setOnHover] = useState(false);
+        const [showSaved, setShowSaved] = useState(false);
+
+        const showError = !disabled && Boolean(error);
+
+        useEffect(() => {
+            if (savedTimestamp && savedTimestamp > 0) {
+                setShowSaved(true);
+                const handler = setTimeout(() => {
+                    setShowSaved(false);
+                }, 400);
+                return () => {
+                    clearTimeout(handler);
+                };
+            }
+            return undefined;
+        }, [savedTimestamp]);
+
+        let p = 0;
+        if (!removePadding) {
+            switch (size) {
+                case "l":
+                case "xl":
+                    p = 4;
+                    break;
+                case "m":
+                    p = 2;
+                    break;
+                case "s":
+                default:
+                    p = 1;
+                    break;
+            }
+        }
+
+        let justifyContent;
+        switch (align) {
+            case "right":
+                justifyContent = "flex-end";
+                break;
+            case "center":
+                justifyContent = "center";
+                break;
+            case "left":
+            default:
+                justifyContent = "flex-start";
+        }
+
+        // const onClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        //     if (event.detail === 3) {
+        //         doOpenPopup();
+        //     }
+        // }, [doOpenPopup]);
+
+        const onSelectCallback = useCallback(() => {
+            if (!onSelect) return;
+            const cellRect = ref && ref?.current?.getBoundingClientRect();
+            if (disabled) {
+                onSelect(undefined);
+            } else if (!selected && cellRect) {
+                onSelect(cellRect);
+            }
+        }, [ref, onSelect, selected, disabled]);
+
+        const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
+            event.stopPropagation();
+            event.preventDefault();
+            onSelectCallback();
+        }, [onSelectCallback]);
+
+        const isOverflowing = useMemo(() => {
+            if (bounds) {
+                return bounds.height > maxHeight;
+            }
+            return false;
+        }, [bounds, maxHeight]);
+
+        const isSelected = !showError && selected;
+
+        const scrollable = !disabled && allowScroll && isOverflowing;
+        const faded = !disabled && !allowScroll && isOverflowing;
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        const borderClass = showError
+            ? "border-red-500"
+            : isSelected
+                ? "border-primary"
+                : "border-transparent";
+
+        const result = <>
+            <div
+                className={cls(
+                    "transition-colors duration-500",
+                    `flex relative h-full rounded-md p-${p} border-4`,
+                    showSaved ? "bg-primary/20 dark:bg-primary/20" : (onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : ""),
+                    hideOverflow ? "overflow-hidden" : "",
+                    isSelected && !showSaved ? "bg-surface-50 dark:bg-surface-900" : "",
+                    borderClass
+                )}
+                ref={ref}
+                style={{
+                    justifyContent,
+                    alignItems: disabled || !isOverflowing ? "center" : undefined,
+                    width: width ?? "100%",
+                    textAlign: align
+                }}
+                tabIndex={selected || disabled ? undefined : 0}
+                onFocus={onFocus}
+                onMouseEnter={setOnHoverTrue}
+                onMouseMove={setOnHoverTrue}
+                onMouseLeave={setOnHoverFalse}
+            >
+
+                <ErrorBoundary>
+
+                    {fullHeight && !faded && children}
+
+                    {(!fullHeight || faded) && <TableCellInner
+                        fullHeight={fullHeight ?? false}
+                        justifyContent={justifyContent}
+                        scrollable={scrollable ?? false}
+                        faded={faded}>
+
+                        {!fullHeight && <div ref={measureRef}
+                            style={{
+                                display: "flex",
+                                width: "100%",
+                                justifyContent,
+                                height: fullHeight ? "100%" : undefined
+                            }}>
+                            {children}
+                        </div>}
+
+                    </TableCellInner>}
+                </ErrorBoundary>
+
+                {actions}
+
+                {/*{disabled && onHover && disabledTooltip &&*/}
+                {/*    <div className="absolute top-1 right-1 text-xs">*/}
+                {/*        <Tooltip title={disabledTooltip}>*/}
+                {/*            <MinusCircleIcon size={iconSize.smallest} color={"disabled"} className={"text-text-disabled"} />*/}
+                {/*        </Tooltip>*/}
+                {/*    </div>}*/}
+
+            </div>
+        </>;
+
+        // Wrap with sortable outer div when sortable props are provided
+        // Remove tabIndex from attributes to avoid capturing focus before cell content
+        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
+        const sortableContent = sortableNodeRef ? (
+            <div
+                ref={sortableNodeRef}
+                style={sortableStyle}
+                className={cls(
+                    "flex-shrink-0",
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                )}
+                {...sortableAttrsWithoutTabIndex}
+            >
+                {showError ? (
+                    <ErrorTooltip
+                        className={"flex h-full w-full"}
+                        align={"start"}
+                        title={error?.message ?? "Error"}>
+                        {result}
+                    </ErrorTooltip>
+                ) : result}
+            </div>
+        ) : (
+            showError ? (
+                <ErrorTooltip
+                    className={"flex h-full w-full"}
+                    align={"start"}
+                    title={error?.message ?? "Error"}>
+                    {result}
+                </ErrorTooltip>
+            ) : result
+        );
+
+        return sortableContent;
+    }, (a, b) => {
+        return a.error === b.error &&
+            a.value === b.value &&
+            a.disabled === b.disabled &&
+            a.savedTimestamp === b.savedTimestamp &&
+            a.allowScroll === b.allowScroll &&
+            a.align === b.align &&
+            a.size === b.size &&
+            a.disabledTooltip === b.disabledTooltip &&
+            a.width === b.width &&
+            a.showExpandIcon === b.showExpandIcon &&
+            a.removePadding === b.removePadding &&
+            a.fullHeight === b.fullHeight &&
+            a.selected === b.selected &&
+            a.isDragging === b.isDragging &&
+            a.isDraggable === b.isDraggable &&
+            a.frozen === b.frozen;
+    }) as React.FunctionComponent<EntityTableCellProps>;

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -0,0 +1,81 @@
+import { IconButton } from "@rebasepro/ui";
+import { AlertCircleIcon } from "lucide-react";
+import { ErrorTooltip } from "@rebasepro/core";
+import { useCallback, useEffect, useRef } from "react";
+
+export interface EntityTableCellActionsProps {
+    showError: false | Error | undefined;
+    disabled: boolean;
+    showExpandIcon: boolean | undefined;
+    selected: boolean | undefined;
+    openPopup?: (cellRect: DOMRect | undefined) => void;
+    children?: React.ReactNode;
+}
+
+export function EntityTableCellActions({
+    showError,
+    disabled,
+    showExpandIcon,
+    selected,
+    openPopup,
+    children
+}: EntityTableCellActionsProps) {
+
+    const ref = useRef<HTMLDivElement>(null);
+    const doOpenPopup = useCallback(() => {
+        if (openPopup) {
+            const cellRect = ref && ref?.current?.getBoundingClientRect();
+            openPopup(cellRect);
+        }
+    }, []);
+
+    const iconRef = useRef<HTMLButtonElement>(undefined);
+    useEffect(() => {
+        if (iconRef.current && selected) {
+            iconRef.current.focus({ preventScroll: true });
+        }
+    }, [selected]);
+
+    return <>
+        {(showError || (!disabled && showExpandIcon)) &&
+            <div ref={ref} className="absolute top-0.5 right-0.5 flex items-center">
+                {selected && children}
+
+                {selected && !disabled && showExpandIcon &&
+                    <IconButton
+                        ref={iconRef}
+                        color={"inherit"}
+                        size={"small"}
+                        onClick={doOpenPopup}>
+                        <svg
+                            fill={"#888"}
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24">
+                            <path className="cls-2"
+                                d="M20,5a1,1,0,0,0-1-1L14,4h0a1,1,0,0,0,0,2h2.57L13.29,9.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L18,7.42V10a1,1,0,0,0,1,1h0a1,1,0,0,0,1-1Z"/>
+                            <path className="cls-2"
+                                d="M10.71,13.29a1,1,0,0,0-1.42,0L6,16.57V14a1,1,0,0,0-1-1H5a1,1,0,0,0-1,1l0,5a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H7.42l3.29-3.29A1,1,0,0,0,10.71,13.29Z"/>
+                        </svg>
+                    </IconButton>
+                }
+
+                {showError && <ErrorTooltip
+                    side={"left"}
+                    title={showError.message}>
+                    <div
+                        className={"flex items-center justify-center"}
+                        style={{
+                            width: 32,
+                            height: 32
+                        }}>
+                        <AlertCircleIcon
+                        />
+                    </div>
+                </ErrorTooltip>
+                }
+
+            </div>
+        }
+    </>;
+}

package/src/components/EntityCollectionTable/internal/common.tsx

@@ -0,0 +1,73 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { ArrayProperty, Property } from "@rebasepro/types";
+
+export function getTableCellAlignment(property: Property): "right" | "left" | "center" {
+    if (property.type === "boolean") {
+        return "center";
+    } else if (property.type === "number") {
+        if (property.enum)
+            return "left";
+        return "right";
+    } else if (property.type === "date") {
+        return "right";
+    } else {
+        return "left";
+    }
+}
+
+export function getTablePropertyColumnWidth(property: Property): number {
+
+    if (property.columnWidth) {
+        return property.columnWidth;
+    }
+
+    if (property.type === "string") {
+        if (property.url) {
+            return 280;
+        } else if (property.storage) {
+            return 160;
+        } else if (property.enum) {
+            return 200;
+        } else if (property.multiline) {
+            return 300;
+        } else if (property.markdown) {
+            return 300;
+        } else if (property.email) {
+            return 200;
+        } else {
+            return 200;
+        }
+    } else if (property.type === "array") {
+        const arrayProperty = property as ArrayProperty;
+        if (arrayProperty.of) {
+            if (Array.isArray(property.of)) {
+                return 300;
+            } else {
+                return getTablePropertyColumnWidth(arrayProperty.of as Property);
+            }
+        } else {
+            return 300;
+        }
+    } else if (property.type === "number") {
+        if (property.enum) {
+            return 200;
+        }
+        return 140;
+    } else if (property.type === "map") {
+        return 360;
+    } else if (property.type === "date") {
+        return 200;
+    } else if (property.type === "reference") {
+        return 220;
+    } else if (property.type === "relation") {
+        return 280;
+    } else if (property.type === "boolean") {
+        return 140;
+    } else {
+        return 200;
+    }
+}
+
+export function getSubcollectionColumnId(collection: EntityCollection) {
+    return `subcollection:${collection.slug}`;
+}