@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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/customer-group-input.tsx

@@ -1,5 +1,5 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { CustomerGroupChip } from '../shared/customer-group-chip.js';
 import { CustomerGroupSelector } from '../shared/customer-group-selector.js';

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

@@ -1,150 +1,136 @@
-"use client";
- 
-import * as React from "react";
-import { format } from "date-fns";
- 
-import { cn } from "@/lib/utils.js";
-import { Button } from "@/components/ui/button.js";
-import { Calendar } from "@/components/ui/calendar.js";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover.js";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area.js";
-import { CalendarClock } from "lucide-react";
+'use client';
+
+import { format } from 'date-fns';
+import * as React from 'react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import { Calendar } from '@/vdb/components/ui/calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { ScrollArea, ScrollBar } from '@/vdb/components/ui/scroll-area.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { CalendarClock } from 'lucide-react';
 
 export interface DateTimeInputProps {
-  value: Date | string | undefined;
-  onChange: (value: Date) => void;
+    value: Date | string | undefined;
+    onChange: (value: Date) => void;
+    disabled?: boolean;
 }
- 
+
 export function DateTimeInput(props: DateTimeInputProps) {
-  const date = props.value && props.value instanceof Date ? props.value.toISOString() : props.value ?? '';
-  const [isOpen, setIsOpen] = React.useState(false);
- 
-  const hours = Array.from({ length: 12 }, (_, i) => i + 1);
-  const handleDateSelect = (selectedDate: Date | undefined) => {
-    if (selectedDate) {
-      props.onChange(selectedDate);
-    }
-  };
- 
-  const handleTimeChange = (
-    type: "hour" | "minute" | "ampm",
-    value: string
-  ) => {
-    if (date) {
-      const newDate = new Date(date);
-      if (type === "hour") {
-        newDate.setHours(
-          (parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0)
-        );
-      } else if (type === "minute") {
-        newDate.setMinutes(parseInt(value));
-      } else if (type === "ampm") {
-        const currentHours = newDate.getHours();
-        newDate.setHours(
-          value === "PM" ? currentHours + 12 : currentHours - 12
-        );
-      }
-      props.onChange(newDate);
-    }
-  };
- 
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn(
-            "w-full justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarClock className="mr-2 h-4 w-4" />
-          {date ? (
-            format(date, "MM/dd/yyyy hh:mm aa")
-          ) : (
-            <span>MM/DD/YYYY hh:mm aa</span>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
-        <div className="sm:flex">
-          <Calendar
-            mode="single"
-            selected={new Date(date)}
-            onSelect={handleDateSelect}
-            initialFocus
-          />
-          <div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
-            <ScrollArea className="w-64 sm:w-auto">
-              <div className="flex sm:flex-col p-2">
-                {hours.reverse().map((hour) => (
-                  <Button
-                    key={hour}
-                    size="icon"
-                    variant={
-                      date && new Date(date).getHours() % 12 === hour % 12
-                        ? "default"
-                        : "ghost"
-                    }
-                    className="sm:w-full shrink-0 aspect-square"
-                    onClick={() => handleTimeChange("hour", hour.toString())}
-                  >
-                    {hour}
-                  </Button>
-                ))}
-              </div>
-              <ScrollBar orientation="horizontal" className="sm:hidden" />
-            </ScrollArea>
-            <ScrollArea className="w-64 sm:w-auto">
-              <div className="flex sm:flex-col p-2">
-                {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
-                  <Button
-                    key={minute}
-                    size="icon"
-                    variant={
-                      date && new Date(date).getMinutes() === minute
-                        ? "default"
-                        : "ghost"
-                    }
-                    className="sm:w-full shrink-0 aspect-square"
-                    onClick={() =>
-                      handleTimeChange("minute", minute.toString())
-                    }
-                  >
-                    {minute}
-                  </Button>
-                ))}
-              </div>
-              <ScrollBar orientation="horizontal" className="sm:hidden" />
-            </ScrollArea>
-            <ScrollArea className="">
-              <div className="flex sm:flex-col p-2">
-                {["AM", "PM"].map((ampm) => (
-                  <Button
-                    key={ampm}
-                    size="icon"
-                    variant={
-                      date &&
-                      ((ampm === "AM" && new Date(date).getHours() < 12) ||
-                        (ampm === "PM" && new Date(date).getHours() >= 12))
-                        ? "default"
-                        : "ghost"
-                    }
-                    className="sm:w-full shrink-0 aspect-square"
-                    onClick={() => handleTimeChange("ampm", ampm)}
-                  >
-                    {ampm}
-                  </Button>
-                ))}
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+    const { disabled = false } = props;
+    const date = props.value && props.value instanceof Date ? props.value.toISOString() : (props.value ?? '');
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const hours = Array.from({ length: 12 }, (_, i) => i + 1);
+    const handleDateSelect = (selectedDate: Date | undefined) => {
+        if (selectedDate) {
+            props.onChange(selectedDate);
+        }
+    };
+
+    const handleTimeChange = (type: 'hour' | 'minute' | 'ampm', value: string) => {
+        if (date) {
+            const newDate = new Date(date);
+            if (type === 'hour') {
+                newDate.setHours((parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0));
+            } else if (type === 'minute') {
+                newDate.setMinutes(parseInt(value));
+            } else if (type === 'ampm') {
+                const currentHours = newDate.getHours();
+                newDate.setHours(value === 'PM' ? currentHours + 12 : currentHours - 12);
+            }
+            props.onChange(newDate);
+        }
+    };
+
+    return (
+        <Popover open={isOpen} onOpenChange={disabled ? undefined : setIsOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    disabled={disabled}
+                    className={cn(
+                        'w-full justify-start text-left font-normal shadow-xs',
+                        !date && 'text-muted-foreground',
+                    )}
+                >
+                    <CalendarClock className="mr-2 h-4 w-4" />
+                    {date ? format(date, 'MM/dd/yyyy hh:mm aa') : <span>MM/DD/YYYY hh:mm aa</span>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0">
+                <div className="sm:flex">
+                    <Calendar
+                        mode="single"
+                        selected={new Date(date)}
+                        onSelect={handleDateSelect}
+                        initialFocus
+                    />
+                    <div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+                        <ScrollArea className="w-64 sm:w-auto">
+                            <div className="flex sm:flex-col p-2">
+                                {hours.reverse().map(hour => (
+                                    <Button
+                                        key={hour}
+                                        size="icon"
+                                        variant={
+                                            date && new Date(date).getHours() % 12 === hour % 12
+                                                ? 'default'
+                                                : 'ghost'
+                                        }
+                                        className="sm:w-full shrink-0 aspect-square"
+                                        onClick={() => handleTimeChange('hour', hour.toString())}
+                                    >
+                                        {hour}
+                                    </Button>
+                                ))}
+                            </div>
+                            <ScrollBar orientation="horizontal" className="sm:hidden" />
+                        </ScrollArea>
+                        <ScrollArea className="w-64 sm:w-auto">
+                            <div className="flex sm:flex-col p-2">
+                                {Array.from({ length: 12 }, (_, i) => i * 5).map(minute => (
+                                    <Button
+                                        key={minute}
+                                        size="icon"
+                                        variant={
+                                            date && new Date(date).getMinutes() === minute
+                                                ? 'default'
+                                                : 'ghost'
+                                        }
+                                        className="sm:w-full shrink-0 aspect-square"
+                                        onClick={() => handleTimeChange('minute', minute.toString())}
+                                    >
+                                        {minute}
+                                    </Button>
+                                ))}
+                            </div>
+                            <ScrollBar orientation="horizontal" className="sm:hidden" />
+                        </ScrollArea>
+                        <ScrollArea className="">
+                            <div className="flex sm:flex-col p-2">
+                                {['AM', 'PM'].map(ampm => (
+                                    <Button
+                                        key={ampm}
+                                        size="icon"
+                                        variant={
+                                            date &&
+                                            ((ampm === 'AM' && new Date(date).getHours() < 12) ||
+                                                (ampm === 'PM' && new Date(date).getHours() >= 12))
+                                                ? 'default'
+                                                : 'ghost'
+                                        }
+                                        className="sm:w-full shrink-0 aspect-square"
+                                        onClick={() => handleTimeChange('ampm', ampm)}
+                                    >
+                                        {ampm}
+                                    </Button>
+                                ))}
+                            </div>
+                        </ScrollArea>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}