@rebasepro/cms 0.17.3 → 0.18.1

package/src/components/CollectionTableBinding/fields/TableStorageUpload.tsx

@@ -1,324 +0,0 @@
-import type { ArrayProperty, StringProperty } from "@rebasepro/types";
-import * as React from "react";
-import { useMemo } from "react";
-
-import { Entity, StorageConfig } from "@rebasepro/types";
-import { PreviewSize } from "../../../types";
-import { useDropzone } from "react-dropzone";
-import { PropertyPreview } from "../../../preview";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { cls, IconButton, PencilIcon, Typography } from "@rebasepro/ui";
-import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController, StorageSourceContext } from "@rebasepro/app";
-import { getThumbnailMeasure } from "../../../preview/util";
-import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { EntityTableCellActions } from "../internal/EntityTableCellActions";
-
-const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const activeDropClasses = "pt-0 border-2 border-solid"
-const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500 bg-green-50 dark:bg-green-900"
-const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500 bg-red-50 dark:bg-red-900"
-
-/**
- * Field that allows to upload files to Google Cloud Storage.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function TableStorageUpload(props: {
-    propertyKey: string;
-    error: Error | undefined;
-    disabled: boolean;
-    value: string | string[] | null;
-    updateValue: (newValue: (string | string[] | null)) => void;
-    selected: boolean;
-    focused: boolean;
-    property: StringProperty | ArrayProperty;
-    entity: Entity<Record<string, unknown>>;
-    path: string;
-    previewSize: PreviewSize;
-    openPopup?: (cellRect?: DOMRect) => void;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-}) {
-
-    const {
-        propertyKey,
-        error,
-        selected,
-        openPopup,
-        value,
-        disabled,
-        property,
-        entity,
-        path,
-        previewSize,
-        updateValue
-    } = props;
-
-    const storageSource = useStorageSource();
-
-    const {
-        internalValue,
-        setInternalValue,
-        onFilesAdded,
-        storage,
-        onFileUploadComplete,
-        storagePathBuilder,
-        multipleFilesSupported,
-        resolvedStorageSource
-    } = useStorageUploadController({
-        entityValues: entity.values,
-        entityId: entity.id,
-        path,
-        property: property as StringProperty,
-        propertyKey,
-        storageSource,
-        onChange: updateValue,
-        value,
-        disabled
-    });
-
-    return (
-
-        <StorageSourceContext.Provider value={resolvedStorageSource}>
-            <StorageUpload
-                internalValue={internalValue}
-                setInternalValue={setInternalValue}
-                name={propertyKey}
-                disabled={disabled}
-                autoFocus={false}
-                openPopup={openPopup}
-                error={error}
-                selected={selected}
-                property={property}
-                onChange={updateValue}
-                entity={entity}
-                storagePathBuilder={storagePathBuilder}
-                storage={storage}
-                multipleFilesSupported={multipleFilesSupported}
-                onFilesAdded={onFilesAdded}
-                onFileUploadComplete={onFileUploadComplete}
-                previewSize={previewSize}/>
-        </StorageSourceContext.Provider>
-
-    );
-}
-
-interface StorageUploadProps {
-    internalValue: StorageFieldItem[];
-    setInternalValue: (v: StorageFieldItem[]) => void;
-    name: string;
-    error?: Error;
-    property: StringProperty | ArrayProperty;
-    onChange: (value: string | string[] | null) => void;
-    multipleFilesSupported: boolean;
-    autoFocus: boolean;
-    selected: boolean;
-    disabled: boolean;
-    entity: Entity<Record<string, unknown>>;
-    previewSize: PreviewSize;
-    storage: StorageConfig;
-    onFilesAdded: (acceptedFiles: File[]) => void;
-    storagePathBuilder: (file: File) => string;
-    openPopup?: (cellRect?: DOMRect) => void;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
-}
-
-function StorageUpload({
-    property,
-    name,
-    internalValue,
-    setInternalValue,
-    openPopup,
-    entity,
-    selected,
-    error,
-    onChange,
-    multipleFilesSupported,
-    previewSize: previewSizeInput,
-    disabled,
-    autoFocus,
-    storage,
-    onFilesAdded,
-    onFileUploadComplete,
-    storagePathBuilder
-}: StorageUploadProps) {
-
-    const previewSize = previewSizeInput;
-    if (multipleFilesSupported) {
-        const arrayProperty = property as ArrayProperty;
-        if (Array.isArray(arrayProperty.of)) {
-            throw Error("Using array properties instead of single one in `of` in ArrayProperty");
-        }
-        if (arrayProperty.of) {
-            if (arrayProperty.of.type !== "string") {
-                throw Error("Storage field using array must be of data type string");
-            }
-        } else {
-            throw Error("Storage field using array must be of data type string");
-        }
-    }
-
-    const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const hasValue = Boolean(internalValue);
-
-    const snackbarContext = useSnackbarController();
-    const { t } = useTranslation();
-
-    const {
-        open,
-        getRootProps,
-        getInputProps,
-        isDragActive,
-        isDragAccept,
-        isDragReject
-    } = useDropzone({
-        accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a,
-...b }), {}) : undefined,
-        disabled,
-        maxSize: storage.maxSize,
-        noClick: true,
-        noKeyboard: true,
-        onDrop: onFilesAdded,
-        onDropRejected: (fileRejections, event) => {
-            for (const fileRejection of fileRejections) {
-                for (const error of fileRejection.errors) {
-                    console.error("Error uploading file: ", error);
-                    if (error.code === "file-too-large") {
-                        snackbarContext.open({
-                            type: "error",
-                            message: t("error_uploading_file_size", { maxSize: String(storage.maxSize) })
-                        });
-                    } else if (error.code === "file-invalid-type") {
-                        snackbarContext.open({
-                            type: "error",
-                            message: t("error_uploading_file_type")
-                        });
-                    }
-                }
-            }
-        }
-    }
-    );
-
-    const { ...rootProps } = getRootProps();
-
-    const helpText = multipleFilesSupported
-        ? t("drag_drop_files")
-        : t("drag_drop_file");
-
-    const renderProperty = multipleFilesSupported
-        ? (property as ArrayProperty).of as StringProperty
-        : property as StringProperty;
-
-    const imageSize = useMemo(() => getThumbnailMeasure(previewSize), [previewSize]);
-    const showError = !disabled && error;
-
-    return (
-        <div {...rootProps}
-            className={cls(dropZoneClasses,
-                "relative w-full h-full flex",
-                `justify-${hasValue ? "start" : "center"}`,
-                isDragActive ? activeDropClasses : "",
-                isDragAccept ? acceptDropClasses : "",
-                isDragReject ? rejectDropClasses : ""
-            )}
-        >
-
-            <input autoFocus={autoFocus} {...getInputProps()}/>
-
-            {internalValue.map((entry, index) => {
-                let child;
-                if (entry.storagePathOrDownloadUrl) {
-                    child = (
-                        <TableStorageItemPreview
-                            key={`storage_preview_${index}`}
-                            propertyKey={name}
-                            property={renderProperty}
-                            value={entry.storagePathOrDownloadUrl}
-                            entity={entity}
-                            size={previewSize}/>
-                    );
-                } else if (entry.file) {
-                    child = (
-                        <StorageUploadProgress
-                            key={`storage_progress_${index}`}
-                            entry={entry}
-                            metadata={metadata}
-                            storagePath={storagePathBuilder(entry.file)}
-                            onFileUploadComplete={onFileUploadComplete}
-                            imageSize={imageSize}
-                            simple={true}
-                        />
-                    );
-                }
-
-                return child;
-            })}
-
-            {!internalValue && <div
-                className="grow m-2 max-w-[200px]"
-                onClick={open}>
-                <Typography
-                    className="text-surface-400 dark:text-surface-600"
-                    variant={"body2"}
-                    align={"center"}>
-                    {helpText}
-                </Typography>
-            </div>}
-
-            <EntityTableCellActions
-                showError={showError}
-                disabled={disabled}
-                showExpandIcon={true}
-                selected={selected}
-                openPopup={!disabled ? openPopup : undefined}>
-                <IconButton
-                    color={"inherit"}
-                    size={"small"}
-                    onClick={open}>
-                    <PencilIcon className={"text-surface-500"}/>
-                </IconButton>
-            </EntityTableCellActions>
-
-        </div>
-    );
-
-}
-
-interface TableStorageItemPreviewProps {
-    propertyKey: string;
-    property: StringProperty;
-    value: string,
-    size: PreviewSize;
-    entity: Entity<Record<string, unknown>>;
-}
-
-export function TableStorageItemPreview({
-    propertyKey,
-    property,
-    value,
-    size,
-    entity
-}: TableStorageItemPreviewProps) {
-
-    return (
-        <div
-            className={"relative p-2 max-w-full"}
-        >
-
-            {value &&
-                <ErrorBoundary>
-                    <PropertyPreview
-                        propertyKey={propertyKey}
-                        value={value}
-                        property={property}
-                        // entity={entity}
-                        size={size}/>
-                </ErrorBoundary>
-            }
-
-        </div>
-    );
-
-}

package/src/components/CollectionTableBinding/fields/VirtualTableSelect.tsx

@@ -1,132 +0,0 @@
-import { EnumValues } from "@rebasepro/types";
-import { EnumValuesChip } from "../../../preview";
-import React, { useCallback, useEffect } from "react";
-import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@rebasepro/ui";
-import { resolveEnumValues } from "@rebasepro/common";
-
-export function VirtualTableSelect(props: {
-    name: string;
-    enumValues: EnumValues;
-    error: Error | undefined;
-    multiple: boolean;
-    disabled: boolean;
-    small: boolean;
-    internalValue: string | number | string[] | number[] | undefined;
-    valueType: "string" | "number";
-    updateValue: (newValue: (string | number | string[] | number[] | null)) => void;
-    focused: boolean;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-}) {
-
-    const {
-        enumValues,
-        internalValue,
-        disabled,
-        small,
-        focused,
-        updateValue,
-        multiple,
-        valueType
-    } = props;
-
-    const validValue = (Array.isArray(internalValue) && multiple) ||
-        (!Array.isArray(internalValue) && !multiple);
-
-    const ref = React.useRef<HTMLButtonElement>(null);
-    useEffect(() => {
-        if (ref.current && focused) {
-            ref.current?.focus({ preventScroll: true });
-        }
-    }, [focused, ref]);
-
-    const onChange = useCallback((updatedValue: string | string[]) => {
-        if (valueType === "number") {
-            if (multiple) {
-                const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
-                updateValue(newValue);
-            } else {
-                updateValue(parseFloat(updatedValue as string));
-            }
-        } else if (valueType === "string") {
-            if (!updatedValue)
-                updateValue(null)
-            else
-                updateValue(updatedValue);
-        } else {
-            throw Error("Missing mapping in TableSelect");
-        }
-    }, [multiple, updateValue, valueType]);
-
-    const resolvedEnumValues = resolveEnumValues(enumValues);
-
-    const renderValue = (enumKey?: string | number) => {
-        return <EnumValuesChip
-            key={`${enumKey}`}
-            enumKey={String(enumKey)}
-            enumValues={enumValues}
-            size={small ? "small" : "medium"}/>;
-    };
-
-    // When the dropdown closes (including on escape), restore focus to the trigger
-    const handleOpenChange = useCallback((open: boolean) => {
-        if (!open && ref.current) {
-            // Use setTimeout to ensure focus is restored after Radix finishes its cleanup
-            setTimeout(() => {
-                ref.current?.focus({ preventScroll: true });
-            }, 0);
-        }
-    }, []);
-
-    return (
-        multiple
-            ? <MultiSelect
-                inputRef={ref}
-                className="w-full h-full p-0 bg-transparent outline-none"
-                position={"item-aligned"}
-                disabled={disabled}
-                includeClear={false}
-                useChips={false}
-                value={validValue
-                    ? ((internalValue as (string | number)[]).map(v => v.toString()))
-                    : ([])}
-                onValueChange={onChange}
-                onOpenChange={handleOpenChange}>
-                {resolvedEnumValues?.map((enumConfig) => (
-                    <MultiSelectItem
-                        key={enumConfig.id}
-                        value={String(enumConfig.id)}>
-                        <EnumValuesChip
-                            enumKey={enumConfig.id}
-                            enumValues={enumValues}
-                            size={small ? "small" : "medium"}/>
-                    </MultiSelectItem>
-                ))}
-            </MultiSelect>
-            : <Select
-                inputRef={ref}
-                fullWidth={true}
-                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
-                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
-                position={"item-aligned"}
-                disabled={disabled}
-                padding={false}
-                value={validValue
-                    ? internalValue?.toString()
-                    : ""}
-                onValueChange={onChange}
-                onOpenChange={handleOpenChange}
-                renderValue={renderValue}>
-                {resolvedEnumValues?.map((enumConfig) => (
-                    <SelectItem
-                        key={enumConfig.id}
-                        value={String(enumConfig.id)}>
-                        <EnumValuesChip
-                            enumKey={enumConfig.id}
-                            enumValues={enumValues}
-                            size={small ? "small" : "medium"}/>
-                    </SelectItem>
-                ))}
-            </Select>
-
-    );
-}

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

@@ -1,41 +0,0 @@
-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/CollectionTableBinding/index.tsx

@@ -1,14 +0,0 @@
-export {
-    CollectionTableBinding
-} from "./CollectionTableBinding";
-
-export type {
-    CollectionTableBindingProps
-} from "./CollectionTableBindingProps";
-
-export * from "./PropertyTableCell";
-export * from "./CollectionRowActions";
-
-export * from "./column_utils";
-
-export { VirtualTableInput } from "@rebasepro/ui";

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

@@ -1,96 +0,0 @@
-import React from "react";
-
-import { CircularProgress, cls, defaultBorderMixin, SearchBar } from "@rebasepro/ui";
-import { useLargeLayout, useTranslation } from "@rebasepro/app";
-
-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;
-    /**
-     * Initial search string to pre-populate the search bar (e.g. from URL params).
-     */
-    initialSearchText?: string;
-    /**
-     * 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,
-    initialSearchText,
-    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 min-w-0">
-
-                {/* View toggle — hidden in compact */}
-                {!compact && viewModeToggle}
-
-                {title && <div className={"flex items-center"}>
-                    {title}
-                </div>}
-
-                {actionsStart}
-
-            </div>
-
-            <div className="flex items-center gap-1">
-
-                {/* Loading spinner — hidden in compact */}
-                {largeLayout && !compact && loading && (
-                    <div className="mr-4">
-                        <CircularProgress size={"smallest"}/>
-                    </div>
-                )}
-
-                {/* Search bar — hidden in compact */}
-                {!compact && onTextSearch &&
-                    <SearchBar
-                        key={"search-bar"}
-                        size={"small"}
-                        placeholder={t("search")}
-                        onTextSearch={onTextSearch}
-                        expandable={true}
-                        initialValue={initialSearchText}/>}
-
-                {/* Secondary actions — always inline */}
-                <div className="flex items-center gap-1">
-                    {secondaryActions}
-                </div>
-
-                {/* Add button — always visible */}
-                {addButton}
-
-            </div>
-
-        </div>
-    );
-}