@firecms/core 3.0.0-canary.98 → 3.0.0-rc.1

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,13 +1,35 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
-import { ArrayProperty, FieldProps, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../types";
+import {
+    FieldProps,
+    PropertyOrBuilder,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
+    StorageConfig
+} from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
-import { getIconForProperty, isReadOnly } from "../../util";
-import { useSnackbarController, useStorageSource } from "../../hooks";
-import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
+import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
+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 "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
@@ -16,13 +38,12 @@ import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    focusedMixin,
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
+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"
@@ -30,13 +51,6 @@ const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0
 
 type StorageUploadFieldProps = FieldProps<string | string[]>;
 
-/**
- * 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 StorageUploadFieldBinding({
                                               propertyKey,
                                               value,
@@ -44,18 +58,20 @@ export function StorageUploadFieldBinding({
                                               error,
                                               showError,
                                               autoFocus,
-                                              tableMode,
+                                              minimalistView,
                                               property,
                                               includeDescription,
                                               context,
                                               isSubmitting,
                                           }: StorageUploadFieldProps) {
 
+    const authController = useAuthController();
+
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
     const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
+    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,
@@ -83,22 +99,29 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        authController
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     return (
 
         <>
 
-            {!tableMode &&
-                <LabelWithIcon icon={getIconForProperty(property, "small")}
-                               required={property.validation?.required}
-                               title={property.name}
-                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+            {!minimalistView &&
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
                 name={propertyKey}
                 disabled={disabled ?? false}
                 autoFocus={autoFocus ?? false}
-                property={property}
+                property={resolvedProperty}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
@@ -117,13 +140,101 @@ export function StorageUploadFieldBinding({
     );
 }
 
+interface SortableStorageItemProps {
+    id: number;
+    entry: StorageFieldItem;
+    property: ResolvedStringProperty;
+    name: string;
+    metadata?: Record<string, unknown>;
+    storagePathBuilder: (file: File) => string;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => 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}/>
+        );
+    } else if (entry.file) {
+        child = (
+            <StorageUploadProgress
+                entry={entry}
+                metadata={metadata}
+                storagePath={storagePathBuilder(entry.file)}
+                onFileUploadComplete={onFileUploadComplete}
+                imageSize={getImageSizeNumber(entry.size)}
+                simple={false}
+            />
+        );
+    }
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            {...attributes}
+            {...listeners}
+            className={cls("rounded-md m-1")}
+            tabIndex={-1}
+        >
+            {child}
+        </div>
+    );
+}
+
 function FileDropComponent({
                                storage,
                                disabled,
-                               isDraggingOver,
                                onFilesAdded,
                                multipleFilesSupported,
-                               droppableProvided,
                                autoFocus,
                                internalValue,
                                property,
@@ -131,26 +242,24 @@ function FileDropComponent({
                                metadata,
                                storagePathBuilder,
                                onFileUploadComplete,
-                               size,
                                name,
-                               helpText
+                               helpText,
+                               isDndItemDragging
                            }: {
     storage: StorageConfig,
     disabled: boolean,
-    isDraggingOver: boolean,
-    droppableProvided: any,
-    onFilesAdded: (acceptedFiles: File[]) => void,
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
     multipleFilesSupported: boolean,
     autoFocus: boolean,
     internalValue: StorageFieldItem[],
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
-    metadata: any,
+    metadata?: any,
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
-    size: PreviewSize,
     name: string,
-    helpText: string
+    helpText: string,
+    isDndItemDragging?: boolean
 }) {
 
     const snackbarContext = useSnackbarController();
@@ -158,19 +267,22 @@ function FileDropComponent({
     const {
         getRootProps,
         getInputProps,
-        isDragActive,
+        isDragActive, // This is for files dragged from OS
         isDragAccept,
         isDragReject
     } = useDropzone({
-            accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a, ...b }), {}) : undefined,
-            disabled: disabled || isDraggingOver,
+            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
+                ...acc,
+                [ext]: []
+            }), {}) : undefined,
+            disabled: disabled || isDndItemDragging,
             noDragEventsBubbling: true,
             maxSize: storage.maxSize,
             onDrop: onFilesAdded,
-            onDropRejected: (fileRejections, event) => {
+            onDropRejected: (fileRejections) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        console.log("Error uploading file: ", error);
+                        console.error("Error uploading file: ", error);
                         if (error.code === "file-too-large") {
                             snackbarContext.open({
                                 type: "error",
@@ -194,91 +306,54 @@ function FileDropComponent({
             className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
-                focusedMixin,
                 {
                     [nonActiveDropClasses]: !isDragActive,
-                    [activeDropClasses]: isDragActive,
-                    [rejectDropClasses]: isDragReject,
-                    [acceptDropClasses]: isDragAccept,
-                    [disabledClasses]: disabled
+                    [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
-                {...droppableProvided.droppableProps}
-                ref={droppableProvided.innerRef}
-                className={cls("flex items-center p-1 no-scrollbar",
+                className={cls("flex items-center p-1 px-4 no-scrollbar",
                     multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
                     multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
                 )}
             >
-
                 <input
                     autoFocus={autoFocus}
                     {...getInputProps()} />
 
-                {internalValue.map((entry, index) => {
-                    let child: any;
-                    if (entry.storagePathOrDownloadUrl) {
-                        child = (
-                            <StorageItemPreview
-                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                                property={property}
-                                disabled={disabled}
-                                value={entry.storagePathOrDownloadUrl}
-                                onRemove={onClear}
-                                size={entry.size}/>
-                        );
-                    } else if (entry.file) {
-                        child = (
-                            <StorageUploadProgress
-                                entry={entry}
-                                metadata={metadata}
-                                storagePath={storagePathBuilder(entry.file)}
-                                onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
-                                simple={false}
-                            />
-                        );
-                    }
-
-                    return (
-                        <Draggable
-                            key={`array_field_${name}_${entry.id}`}
-                            draggableId={`array_field_${name}_${entry.id}`}
-                            index={index}>
-                            {(provided, snapshot) => (
-                                <div
-                                    tabIndex={-1}
-                                    ref={provided.innerRef}
-                                    {...provided.draggableProps}
-                                    {...provided.dragHandleProps}
-                                    className={cls(focusedMixin, "rounded-md")}
-                                    style={{
-                                        ...provided.draggableProps.style
-                                    }}
-                                >
-                                    {child}
-                                </div>
-                            )}
-                        </Draggable>
-                    );
-                })
-                }
-
-                {droppableProvided.placeholder}
-
+                {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
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
-
         </div>
     );
 }
@@ -293,7 +368,7 @@ export interface StorageUploadProps {
     autoFocus: boolean;
     disabled: boolean;
     storage: StorageConfig;
-    onFilesAdded: (acceptedFiles: File[]) => void;
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>; // Updated from useStorageUploadController
     storagePathBuilder: (file: File) => string;
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
 }
@@ -301,7 +376,7 @@ export interface StorageUploadProps {
 export function StorageUpload({
                                   property,
                                   name,
-                                  value,
+                                  value, // This is internalValue from useStorageUploadController
                                   setInternalValue,
                                   onChange,
                                   multipleFilesSupported,
@@ -328,10 +403,10 @@ export function StorageUpload({
     }
 
     const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const [isDndItemDragging, setIsDndItemDragging] = useState(false);
 
     const moveItem = useCallback((fromIndex: number, toIndex: number) => {
-        if (!multipleFilesSupported) return;
+        if (!multipleFilesSupported || fromIndex === toIndex) return;
         const newValue = [...value];
         const item = newValue[fromIndex];
         newValue.splice(fromIndex, 1);
@@ -343,84 +418,88 @@ export function StorageUpload({
         onChange(fieldValue);
     }, [multipleFilesSupported, onChange, setInternalValue, value]);
 
-    const onDragEnd = useCallback((result: any) => {
-        // dropped outside the list
-        if (!result.destination) {
-            return;
-        }
-
-        moveItem(result.source.index, result.destination.index);
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 5, // Start dragging after 5px movement
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    );
 
-    }, [moveItem])
+    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) {
-            const newValue: StorageFieldItem[] = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
+            newValue = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
             onChange(newValue.filter(v => !!v.storagePathOrDownloadUrl).map(v => v.storagePathOrDownloadUrl as string));
-            setInternalValue(newValue);
         } else {
+            newValue = [];
             onChange(null);
-            setInternalValue([]);
         }
-    }, [value, multipleFilesSupported, onChange]);
+        setInternalValue(newValue);
+    }, [value, multipleFilesSupported, onChange, setInternalValue]);
 
     const helpText = multipleFilesSupported
-        ? "Drag 'n' drop some files here, or click to select files"
+        ? "Drag 'n' drop some files here, or click to select files. Drag to reorder."
         : "Drag 'n' drop a file here, or click to select one";
 
     const renderProperty: ResolvedStringProperty = multipleFilesSupported
-        ? (property as ArrayProperty<string[]>).of as ResolvedStringProperty
+        ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty
         : property as ResolvedStringProperty;
 
-    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <Droppable
-                droppableId={`droppable_${name}`}
-                direction="horizontal"
-                renderClone={(provided, snapshot, rubric) => {
-                    const entry = value[rubric.source.index];
-                    return (
-                        <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            style={
-                                provided.draggableProps.style
-                            }
-                            className="rounded"
-                        >
-                            <StorageItemPreview
-                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                                placeholder={true}
-                                property={renderProperty}
-                                disabled={true}
-                                value={entry.storagePathOrDownloadUrl as string}
-                                onRemove={onClear}
-                                size={entry.size}/>
-                        </div>
-                    );
-                }}
-            >
-                {(provided, snapshot) => {
-                    return <FileDropComponent storage={storage}
-                                              disabled={disabled}
-                                              isDraggingOver={snapshot.isDraggingOver}
-                                              droppableProvided={provided}
-                                              onFilesAdded={onFilesAdded}
-                                              multipleFilesSupported={multipleFilesSupported}
-                                              autoFocus={autoFocus}
-                                              internalValue={value}
-                                              property={renderProperty}
-                                              onClear={onClear}
-                                              metadata={metadata}
-                                              storagePathBuilder={storagePathBuilder}
-                                              onFileUploadComplete={onFileUploadComplete}
-                                              size={size}
-                                              name={name}
-                                              helpText={helpText}/>
-                }}
-            </Droppable>
-        </DragDropContext>
-    );
+    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

@@ -5,6 +5,7 @@ import { getIconForProperty } from "../../util";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SwitchFieldProps = FieldProps<boolean>;
 
@@ -15,18 +16,18 @@ type SwitchFieldProps = FieldProps<boolean>;
  * and tables to the specified properties.
  * @group Form fields
  */
-export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
-                                                                                   propertyKey,
-                                                                                   value,
-                                                                                   setValue,
-                                                                                   error,
-                                                                                   showError,
-                                                                                   autoFocus,
-                                                                                   disabled,
-                                                                                   touched,
-                                                                                   property,
-                                                                                   includeDescription
-                                                                               }: SwitchFieldProps, ref) {
+export const SwitchFieldBinding = function SwitchFieldBinding({
+                                                                  propertyKey,
+                                                                  value,
+                                                                  setValue,
+                                                                  error,
+                                                                  showError,
+                                                                  autoFocus,
+                                                                  disabled,
+                                                                  size = "large",
+                                                                  property,
+                                                                  includeDescription
+                                                              }: SwitchFieldProps) {
 
     useClearRestoreValue({
         property,
@@ -37,17 +38,21 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
     return (
         <>
 
-            <BooleanSwitchWithLabel
-                value={value}
-                onValueChange={(v) => setValue(v)}
-                error={showError}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                size={"large"}
-            />
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <BooleanSwitchWithLabel
+                    value={value}
+                    onValueChange={(v) => setValue(v)}
+                    error={showError}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    disabled={disabled}
+                    autoFocus={autoFocus}
+                    size={size}
+                />
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -57,4 +62,4 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
         </>
 
     );
-});
+};