@vendure/dashboard 3.3.8-master-202507260236 → 3.3.8-master-202507300243

package/src/lib/components/data-input/custom-field-list-input.tsx

@@ -0,0 +1,297 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import {
+    closestCenter,
+    DndContext,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, Plus, X } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ControllerRenderProps } from 'react-hook-form';
+
+interface ListItemWithId {
+    _id: string;
+    value: any;
+}
+
+interface CustomFieldListInputProps {
+    field: ControllerRenderProps<any, any>;
+    disabled?: boolean;
+    renderInput: (index: number, inputField: ControllerRenderProps<any, any>) => React.ReactNode;
+    defaultValue?: any;
+}
+
+interface SortableItemProps {
+    itemWithId: ListItemWithId;
+    index: number;
+    disabled?: boolean;
+    renderInput: (index: number, inputField: ControllerRenderProps<any, any>) => React.ReactNode;
+    onRemove: (id: string) => void;
+    onItemChange: (id: string, value: any) => void;
+    field: ControllerRenderProps<any, any>;
+    isFullWidth?: boolean;
+}
+
+function SortableItem({
+    itemWithId,
+    index,
+    disabled,
+    renderInput,
+    onRemove,
+    onItemChange,
+    field,
+    isFullWidth = false,
+}: Readonly<SortableItemProps>) {
+    const { i18n } = useLingui();
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: itemWithId._id,
+        disabled,
+    });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    const DragHandle = !disabled && (
+        <div
+            {...attributes}
+            {...listeners}
+            className="cursor-move text-muted-foreground hover:text-foreground transition-colors"
+            title={i18n.t('Drag to reorder')}
+        >
+            <GripVertical className="h-4 w-4" />
+        </div>
+    );
+
+    const RemoveButton = !disabled && (
+        <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onRemove(itemWithId._id)}
+            className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
+            title={i18n.t('Remove item')}
+        >
+            <X className="h-3 w-3" />
+        </Button>
+    );
+
+    if (!isFullWidth) {
+        // Inline layout for single-line inputs
+        return (
+            <div
+                ref={setNodeRef}
+                style={style}
+                className={`group relative flex items-center gap-2 p-2 border rounded-lg bg-card hover:bg-accent/50 transition-colors ${
+                    isDragging ? 'opacity-50 shadow-lg' : ''
+                }`}
+            >
+                {DragHandle}
+                <div className="flex-1">
+                    {renderInput(index, {
+                        name: `${field.name}.${index}`,
+                        value: itemWithId.value,
+                        onChange: value => onItemChange(itemWithId._id, value),
+                        onBlur: field.onBlur,
+                        ref: field.ref,
+                    } as ControllerRenderProps<any, any>)}
+                </div>
+                {RemoveButton}
+            </div>
+        );
+    }
+
+    // Full-width layout for complex inputs
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            className={`group relative border rounded-lg bg-card hover:bg-accent/50 transition-colors ${
+                isDragging ? 'opacity-50 shadow-lg' : ''
+            }`}
+        >
+            <div className="flex items-center justify-between px-3 py-2 border-b">
+                {DragHandle}
+                <div className="flex-1" />
+                {RemoveButton}
+            </div>
+            <div className="p-3">
+                {renderInput(index, {
+                    name: `${field.name}.${index}`,
+                    value: itemWithId.value,
+                    onChange: value => onItemChange(itemWithId._id, value),
+                    onBlur: field.onBlur,
+                    ref: field.ref,
+                } as ControllerRenderProps<any, any>)}
+            </div>
+        </div>
+    );
+}
+
+// Generate unique IDs for list items
+function generateId(): string {
+    return `item-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+// Convert flat array to array with stable IDs
+function convertToItemsWithIds(values: any[], existingItems?: ListItemWithId[]): ListItemWithId[] {
+    if (!values || values.length === 0) return [];
+
+    return values.map((value, index) => {
+        // Try to reuse existing ID if the value matches and index is within bounds
+        const existingItem = existingItems?.[index];
+        if (existingItem && JSON.stringify(existingItem.value) === JSON.stringify(value)) {
+            return existingItem;
+        }
+
+        // Otherwise create new item with new ID
+        return {
+            _id: generateId(),
+            value,
+        };
+    });
+}
+
+// Convert array with IDs back to flat array
+function convertToFlatArray(itemsWithIds: ListItemWithId[]): any[] {
+    return itemsWithIds.map(item => item.value);
+}
+
+export function CustomFieldListInput({
+    field,
+    disabled,
+    renderInput,
+    defaultValue,
+    isFullWidth = false,
+}: CustomFieldListInputProps & { isFullWidth?: boolean }) {
+    const { i18n } = useLingui();
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+    );
+
+    // Keep track of items with stable IDs
+    const [itemsWithIds, setItemsWithIds] = useState<ListItemWithId[]>(() =>
+        convertToItemsWithIds(field.value || []),
+    );
+
+    // Update items when field value changes externally (e.g., form reset, initial load)
+    useEffect(() => {
+        const newItems = convertToItemsWithIds(field.value || [], itemsWithIds);
+        if (
+            JSON.stringify(convertToFlatArray(newItems)) !== JSON.stringify(convertToFlatArray(itemsWithIds))
+        ) {
+            setItemsWithIds(newItems);
+        }
+    }, [field.value, itemsWithIds]);
+
+    const itemIds = useMemo(() => itemsWithIds.map(item => item._id), [itemsWithIds]);
+
+    const handleAddItem = useCallback(() => {
+        const newItem: ListItemWithId = {
+            _id: generateId(),
+            value: defaultValue ?? '',
+        };
+        const newItemsWithIds = [...itemsWithIds, newItem];
+        setItemsWithIds(newItemsWithIds);
+        field.onChange(convertToFlatArray(newItemsWithIds));
+    }, [itemsWithIds, defaultValue, field]);
+
+    const handleRemoveItem = useCallback(
+        (id: string) => {
+            const newItemsWithIds = itemsWithIds.filter(item => item._id !== id);
+            setItemsWithIds(newItemsWithIds);
+            field.onChange(convertToFlatArray(newItemsWithIds));
+        },
+        [itemsWithIds, field],
+    );
+
+    const handleItemChange = useCallback(
+        (id: string, value: any) => {
+            const newItemsWithIds = itemsWithIds.map(item => (item._id === id ? { ...item, value } : item));
+            setItemsWithIds(newItemsWithIds);
+            field.onChange(convertToFlatArray(newItemsWithIds));
+        },
+        [itemsWithIds, field],
+    );
+
+    const handleDragEnd = useCallback(
+        (event: any) => {
+            const { active, over } = event;
+
+            if (over && active.id !== over.id) {
+                const oldIndex = itemIds.indexOf(active.id);
+                const newIndex = itemIds.indexOf(over.id);
+
+                const newItemsWithIds = arrayMove(itemsWithIds, oldIndex, newIndex);
+                setItemsWithIds(newItemsWithIds);
+                field.onChange(convertToFlatArray(newItemsWithIds));
+            }
+        },
+        [itemIds, itemsWithIds, field],
+    );
+
+    const containerClasses = useMemo(() => {
+        const contentClasses =
+            'overflow-y-auto resize-y border-b rounded bg-muted/30 bg-background p-1 space-y-1';
+
+        if (itemsWithIds.length === 0) {
+            return `hidden`;
+        } else if (itemsWithIds.length > 5) {
+            return `h-[200px] ${contentClasses}`;
+        } else {
+            return `min-h-[100px] ${contentClasses}`;
+        }
+    }, [itemsWithIds.length]);
+
+    return (
+        <div className="space-y-2">
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+                modifiers={[restrictToVerticalAxis]}
+            >
+                <div className={containerClasses}>
+                    <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+                        {itemsWithIds.map((itemWithId, index) => (
+                            <SortableItem
+                                key={itemWithId._id}
+                                itemWithId={itemWithId}
+                                index={index}
+                                disabled={disabled}
+                                renderInput={renderInput}
+                                onRemove={handleRemoveItem}
+                                onItemChange={handleItemChange}
+                                field={field}
+                                isFullWidth={isFullWidth}
+                            />
+                        ))}
+                    </SortableContext>
+                </div>
+            </DndContext>
+
+            {!disabled && (
+                <Button type="button" variant="outline" size="sm" onClick={handleAddItem} className="w-full">
+                    <Plus className="h-4 w-4 mr-2" />
+                    {i18n.t('Add item')}
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-input/datetime-input.tsx

@@ -13,9 +13,11 @@ import { CalendarClock } from 'lucide-react';
 export interface DateTimeInputProps {
     value: Date | string | undefined;
     onChange: (value: Date) => void;
+    disabled?: boolean;
 }
 
 export function DateTimeInput(props: DateTimeInputProps) {
+    const { disabled = false } = props;
     const date = props.value && props.value instanceof Date ? props.value.toISOString() : (props.value ?? '');
     const [isOpen, setIsOpen] = React.useState(false);
 
@@ -42,12 +44,13 @@ export function DateTimeInput(props: DateTimeInputProps) {
     };
 
     return (
-        <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <Popover open={isOpen} onOpenChange={disabled ? undefined : setIsOpen}>
             <PopoverTrigger asChild>
                 <Button
                     variant="outline"
+                    disabled={disabled}
                     className={cn(
-                        'w-full justify-start text-left font-normal',
+                        'w-full justify-start text-left font-normal shadow-xs',
                         !date && 'text-muted-foreground',
                     )}
                 >