@rebasepro/cms 0.17.3 → 0.18.1

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,521 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { ArrayProperty, StringProperty } from "@rebasepro/types";
-import React, { useCallback, useState } from "react";
-
-import { StorageConfig } from "@rebasepro/types";
-import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useDropzone } from "react-dropzone";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-
-import { isDisabled, isReadOnly } from "@rebasepro/app";
-import { getIconForProperty } from "../../util/property_utils";
-import { useAuthController, useSnackbarController, useStorageSource, useTranslation } from "@rebasepro/app";
-import { StorageSourceContext } from "@rebasepro/app";
-import {
-    closestCenter,
-    DndContext,
-    DragEndEvent,
-    DragStartEvent,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors
-} from "@dnd-kit/core";
-import {
-    horizontalListSortingStrategy,
-    SortableContext,
-    sortableKeyboardCoordinates,
-    useSortable
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { StorageFieldItem, useStorageUploadController } from "@rebasepro/app";
-import { StorageUploadProgress } from "../components/StorageUploadProgress";
-import { StorageItemPreview } from "../components/StorageItemPreview";
-import {
-    cls,
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    Typography
-} from "@rebasepro/ui";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-
-// Height comes from the thumbnails now. It used to be a flat `min-h-[254px]`
-// on top of another 250px inside, so a field holding one small image
-// reserved close to 300px of the form for mostly empty space.
-// One fixed height for the whole zone — 126px of preview row, 34px of hint,
-// and the padding between. Pinned on the root rather than on the children
-// because the hint reflows once files exist ("Drag to reorder"), and any
-// content-driven height makes a filled field taller than the same field
-// empty. Extra thumbnails scroll horizontally instead of growing it.
-const dropZoneClasses = "box-border relative pt-[2px] h-[172px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = fieldBackgroundDisabledMixin;
-const nonActiveDropClasses = fieldBackgroundHoverMixin
-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"
-const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
-
-export function StorageUploadFieldBinding({
-                                              propertyKey,
-                                              value,
-                                              setValue,
-                                              error,
-                                              showError,
-                                              autoFocus,
-                                              minimalistView,
-                                              property,
-                                              includeDescription,
-                                              hideLabel,
-                                              context,
-                                              isSubmitting
-                                          }: FieldProps<StringProperty | ArrayProperty>) {
-
-    const authController = useAuthController();
-
-    const storageSource = useStorageSource();
-    const disabled = isReadOnly(property) || isDisabled(property) || isSubmitting || context.disabled;
-
-    const {
-        internalValue,
-        setInternalValue,
-        onFilesAdded,
-        storage,
-        onFileUploadComplete,
-        storagePathBuilder,
-        multipleFilesSupported,
-        resolvedStorageSource
-    } = useStorageUploadController({
-        entityValues: context.values,
-        entityId: context.entityId,
-        path: context.path,
-        property,
-        propertyKey,
-        value: value as string | string[] | null,
-        storageSource,
-        disabled: disabled ?? false,
-        onChange: setValue
-    });
-
-    useClearRestoreValue<string | string[]>({
-        property,
-        value: value as string | string[] | null,
-        setValue
-    });
-
-    return (
-
-        <>
-
-            {!minimalistView && !hideLabel &&
-                <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
-
-            <StorageSourceContext.Provider value={resolvedStorageSource}>
-                <StorageUpload
-                    value={internalValue}
-                    name={propertyKey}
-                    disabled={disabled ?? false}
-                    autoFocus={autoFocus ?? false}
-                    property={property}
-                    onChange={setValue}
-                    setInternalValue={setInternalValue}
-                    onFilesAdded={onFilesAdded}
-                    onFileUploadComplete={onFileUploadComplete}
-                    storagePathBuilder={storagePathBuilder}
-                    storage={storage}
-                    multipleFilesSupported={multipleFilesSupported}/>
-            </StorageSourceContext.Provider>
-
-            <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
-
-        </>
-    );
-}
-
-interface SortableStorageItemProps {
-    id: number;
-    entry: StorageFieldItem;
-    property: StringProperty;
-    name: string;
-    metadata?: Record<string, unknown>;
-    storagePathBuilder: (file: File) => string;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
-    onClear: (clearedStoragePathOrDownloadUrl: string) => void;
-    disabled: boolean;
-    isSortable: boolean; // Kept for consistency, though dnd-kit handles sortability via context
-}
-
-function SortableStorageItem({
-                                 id,
-                                 entry,
-                                 property,
-                                 metadata,
-                                 storagePathBuilder,
-                                 onFileUploadComplete,
-                                 onClear,
-                                 disabled
-                             }: SortableStorageItemProps) {
-
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging
-    } = useSortable({ id });
-
-    const style: React.CSSProperties = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        zIndex: isDragging ? 100 : undefined
-    };
-
-    const getImageSizeNumber = (previewSize: PreviewSize): number => {
-        switch (previewSize) {
-            case "small":
-                return 40;
-            case "medium":
-                return 118;
-            case "large":
-                return 220;
-            default:
-                return 118;
-        }
-    };
-
-    let child: React.ReactNode;
-    if (entry.storagePathOrDownloadUrl) {
-        child = (
-            <StorageItemPreview
-                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                property={property}
-                disabled={disabled}
-                value={entry.storagePathOrDownloadUrl}
-                onRemove={() => onClear(entry.storagePathOrDownloadUrl!)}
-                size={entry.size as PreviewSize}/>
-        );
-    } else if (entry.file) {
-        child = (
-            <StorageUploadProgress
-                entry={entry}
-                metadata={metadata}
-                storagePath={storagePathBuilder(entry.file)}
-                onFileUploadComplete={onFileUploadComplete}
-                imageSize={getImageSizeNumber(entry.size as PreviewSize)}
-                simple={false}
-            />
-        );
-    }
-
-    return (
-        <div
-            ref={setNodeRef}
-            style={style}
-            {...attributes}
-            {...listeners}
-            // No vertical margin: the strip already pads itself, and `m-1` made
-            // each item 8px taller than the row's content box — enough to make a
-            // field holding one image scroll vertically behind a hidden
-            // scrollbar. `shrink-0` keeps thumbnails square once there are more
-            // of them than fit across.
-            className={cls("rounded-md shrink-0")}
-            tabIndex={-1}
-        >
-            {child}
-        </div>
-    );
-}
-
-function FileDropComponent({
-                               storage,
-                               disabled,
-                               onFilesAdded,
-                               multipleFilesSupported,
-                               autoFocus,
-                               internalValue,
-                               property,
-                               onClear,
-                               metadata,
-                               storagePathBuilder,
-                               onFileUploadComplete,
-                               name,
-                               helpText,
-                               isDndItemDragging
-                           }: {
-    storage: StorageConfig,
-    disabled: boolean,
-    onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
-    multipleFilesSupported: boolean,
-    autoFocus: boolean,
-    internalValue: StorageFieldItem[],
-    property: StringProperty,
-    onClear: (clearedStoragePathOrDownloadUrl: string) => void,
-    metadata?: Record<string, unknown>,
-    storagePathBuilder: (file: File) => string,
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>,
-    name: string,
-    helpText: string,
-    isDndItemDragging?: boolean
-}) {
-
-    const snackbarContext = useSnackbarController();
-
-    const {
-        getRootProps,
-        getInputProps,
-        isDragActive, // This is for files dragged from OS
-        isDragAccept,
-        isDragReject
-    } = useDropzone({
-            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
-                ...acc,
-                [ext]: []
-            }), {}) : undefined,
-            disabled: disabled || isDndItemDragging,
-            noDragEventsBubbling: true,
-            maxSize: storage.maxSize,
-            onDrop: onFilesAdded,
-            onDropRejected: (fileRejections) => {
-                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: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                            });
-                        } else if (error.code === "file-invalid-type") {
-                            snackbarContext.open({
-                                type: "error",
-                                message: "Error uploading file: File type is not supported"
-                            });
-                        }
-                    }
-                }
-            }
-        }
-    );
-
-    return (
-        <div
-            {...getRootProps()}
-            className={cls(
-                fieldBackgroundMixin,
-                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
-                dropZoneClasses,
-                multipleFilesSupported && internalValue.length ? "" : "flex",
-                {
-                    [nonActiveDropClasses]: !isDragActive,
-                    [activeDropClasses]: isDragActive, // OS file drag active
-                    [rejectDropClasses]: isDragReject, // OS file drag reject
-                    [acceptDropClasses]: isDragAccept, // OS file drag accept
-                    [disabledClasses]: disabled || isDndItemDragging // Visually disable if internal drag
-                })}
-        >
-            <div
-                className={cls("flex items-center gap-2 p-1 px-3 no-scrollbar",
-                    // Horizontal only. `overflow-auto` scrolls both axes, so any
-                    // pixel of vertical overflow turned the field into a
-                    // scrollable box with nothing visible to scroll to.
-                    multipleFilesSupported && internalValue.length ? "overflow-x-auto overflow-y-hidden" : "",
-                    // A fixed height, not a minimum: the 118px preview overflowed
-                    // a `min-h`, so a field with a file stood taller than the same
-                    // field empty. 126px is the preview plus its padding.
-                    "h-[126px]"
-                )}
-            >
-                <input
-                    autoFocus={autoFocus}
-                    {...getInputProps()}/>
-
-                {internalValue.map((entry) => (
-                    <SortableStorageItem
-                        key={entry.id}
-                        id={entry.id}
-                        entry={entry}
-                        property={property}
-                        name={name}
-                        metadata={metadata}
-                        storagePathBuilder={storagePathBuilder}
-                        onFileUploadComplete={onFileUploadComplete}
-                        onClear={onClear}
-                        disabled={disabled}
-                        isSortable={multipleFilesSupported}
-                    />
-                ))}
-
-                {/* Placeholder for empty dropzone text is handled by the outer Typography */}
-            </div>
-
-            <div
-                // Two lines' worth, fixed: the hint gains "Drag to reorder" once
-                // the field holds something, and a reflow there put the filled
-                // state 25px taller than the empty one.
-                className="box-border mx-3 mb-2.5 h-[34px] flex items-center justify-center text-center">
-                <Typography align={"center"}
-                            variant={"caption"}
-                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
-                    {helpText}
-                </Typography>
-            </div>
-        </div>
-    );
-}
-
-export interface StorageUploadProps {
-    value: StorageFieldItem[];
-    setInternalValue: (v: StorageFieldItem[]) => void;
-    name: string;
-    property: StringProperty | ArrayProperty;
-    onChange: (value: string | string[] | null) => void;
-    multipleFilesSupported: boolean;
-    autoFocus: boolean;
-    disabled: boolean;
-    storage: StorageConfig;
-    onFilesAdded: (acceptedFiles: File[]) => Promise<void>; // Updated from useStorageUploadController
-    storagePathBuilder: (file: File) => string;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
-}
-
-export function StorageUpload({
-                                  property,
-                                  name,
-                                  value, // This is internalValue from useStorageUploadController
-                                  setInternalValue,
-                                  onChange,
-                                  multipleFilesSupported,
-                                  onFileUploadComplete,
-                                  disabled,
-                                  onFilesAdded,
-                                  autoFocus,
-                                  storage,
-                                  storagePathBuilder
-                              }: StorageUploadProps) {
-
-    if (multipleFilesSupported) {
-        const arrayProperty = property as ArrayProperty;
-        if (arrayProperty.of) {
-            if (Array.isArray(arrayProperty.of)) {
-                throw Error("Storage field using array must be of data type string");
-            }
-            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 [isDndItemDragging, setIsDndItemDragging] = useState(false);
-
-    const moveItem = useCallback((fromIndex: number, toIndex: number) => {
-        if (!multipleFilesSupported || fromIndex === toIndex) return;
-        const newValue = [...value];
-        const item = newValue[fromIndex];
-        newValue.splice(fromIndex, 1);
-        newValue.splice(toIndex, 0, item);
-        setInternalValue(newValue);
-        const fieldValue = newValue
-            .filter(e => !!e.storagePathOrDownloadUrl)
-            .map(e => e.storagePathOrDownloadUrl as string);
-        onChange(fieldValue);
-    }, [multipleFilesSupported, onChange, setInternalValue, value]);
-
-    const sensors = useSensors(
-        useSensor(PointerSensor, {
-            activationConstraint: {
-                distance: 5 // Start dragging after 5px movement
-            }
-        }),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates
-        })
-    );
-
-    const handleDragStart = useCallback((event: DragStartEvent) => {
-        setIsDndItemDragging(true);
-    }, []);
-
-    const handleDragEnd = useCallback((event: DragEndEvent) => {
-        setIsDndItemDragging(false);
-        const {
-            active,
-            over
-        } = event;
-        if (over && active.id !== over.id) {
-            const oldIndex = value.findIndex(item => item.id === active.id);
-            const newIndex = value.findIndex(item => item.id === over.id);
-            if (oldIndex !== -1 && newIndex !== -1) {
-                moveItem(oldIndex, newIndex);
-            }
-        }
-    }, [value, moveItem]);
-
-    const onClear = useCallback((clearedStoragePathOrDownloadUrl: string) => {
-        let newValue: StorageFieldItem[];
-        if (multipleFilesSupported) {
-            newValue = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
-            onChange(newValue.filter(v => !!v.storagePathOrDownloadUrl).map(v => v.storagePathOrDownloadUrl as string));
-        } else {
-            newValue = [];
-            onChange(null);
-        }
-        setInternalValue(newValue);
-    }, [value, multipleFilesSupported, onChange, setInternalValue]);
-
-    const { t } = useTranslation();
-    const helpText = multipleFilesSupported
-        ? t("drag_drop_multiple")
-        : t("drag_drop_single");
-
-    const renderProperty: StringProperty = multipleFilesSupported
-        ? (property as ArrayProperty).of as StringProperty
-        : property as StringProperty;
-
-    const fileDropProps = {
-        storage,
-        disabled,
-        onFilesAdded,
-        multipleFilesSupported,
-        autoFocus,
-        internalValue: value, // Pass current internalValue
-        property: renderProperty,
-        onClear,
-        metadata,
-        storagePathBuilder,
-        onFileUploadComplete,
-        name,
-        helpText,
-        isDndItemDragging // Pass this down
-    };
-
-    if (multipleFilesSupported) {
-        return (
-            <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragStart={handleDragStart}
-                onDragEnd={handleDragEnd}
-            >
-                <SortableContext items={(value ?? []).map(v => v.id)} strategy={horizontalListSortingStrategy}>
-                    <FileDropComponent {...fileDropProps}/>
-                </SortableContext>
-            </DndContext>
-        );
-    } else {
-        // For single file, no D&D context is needed
-        return <FileDropComponent {...fileDropProps} isDndItemDragging={false}/>;
-    }
-}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -1,70 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { BooleanProperty } from "@rebasepro/types";
-import React from "react";
-
-;
-import { getIconForProperty } from "../../util/property_utils";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIcon } from "../components/LabelWithIcon";
-import { BooleanSwitchWithLabel } from "@rebasepro/ui";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-
-/**
- * Simple boolean switch biding to a boolean property.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export const SwitchFieldBinding = function SwitchFieldBinding({
-                                                                  propertyKey,
-                                                                  value,
-                                                                  setValue,
-                                                                  error,
-                                                                  showError,
-                                                                  autoFocus,
-                                                                  disabled,
-                                                                  size = "large",
-                                                                  property,
-                                                                  includeDescription,
-                                                                  hideLabel
-                                                              }: FieldProps<BooleanProperty>) {
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    return (
-        <>
-
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                <BooleanSwitchWithLabel
-                    value={value as boolean | null}
-                    onValueChange={(v) => setValue(v)}
-                    error={showError}
-                    // The control is `justify-between`, so with the label lifted
-                    // out the switch would drift to the far edge of an otherwise
-                    // empty box. Anchor it to the start instead.
-                    position={hideLabel ? "start" : undefined}
-                    label={hideLabel ? undefined : <LabelWithIcon
-                        icon={getIconForProperty(property, "small")}
-                        required={property.validation?.required}
-                        title={property.name ?? propertyKey}/>}
-                    disabled={disabled}
-                    autoFocus={autoFocus}
-                    size={size}
-                />
-            </PropertyIdCopyTooltip>
-
-            <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
-        </>
-
-    );
-};