@vendure/dashboard 3.4.1-master-202508210231 → 3.4.1

package/src/lib/components/data-input/configurable-operation-list-input.tsx

@@ -1,414 +1,39 @@
-import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { ConfigArgType } from '@vendure/core';
-import { Plus, X } from 'lucide-react';
-import { useState } from 'react';
-import { Button } from '../ui/button.js';
-import { Input } from '../ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
-import { Switch } from '../ui/switch.js';
-import { Textarea } from '../ui/textarea.js';
-import { DateTimeInput } from './datetime-input.js';
-
-export interface EnhancedListInputProps {
-    definition: ConfigurableOperationDefFragment['args'][number];
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}
+import { FormControlAdapter } from '@/vdb/framework/form-engine/form-control-adapter.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isCustomFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+import { ControllerRenderProps } from 'react-hook-form';
 
 /**
  * A dynamic array input component for configurable operation arguments that handle lists of values.
- *
- * This component allows users to add, edit, and remove multiple items from an array-type argument.
- * Each item in the array is rendered using the appropriate input control based on the argument's
- * type and UI configuration (e.g., text input, select dropdown, boolean switch, date picker).
- *
- * The component supports:
- * - Adding new items with appropriate input controls
- * - Editing existing items inline
- * - Removing items from the array
- * - Various data types: string, number, boolean, datetime, currency
- * - Multiple UI components: select, textarea, currency input, etc.
- * - Keyboard shortcuts (Enter to add items)
- * - Read-only mode for display purposes
- *
- * Used primarily in configurable operations (promotions, shipping methods, payment methods)
- * where an argument accepts multiple values, such as a list of product IDs, category codes,
- * or discount amounts.
- *
- * @example
- * // For a promotion condition that accepts multiple product category codes
- * <EnhancedListInput
- *   definition={argDefinition}
- *   value='["electronics", "books", "clothing"]'
- *   onChange={handleChange}
- * />
  */
 export function ConfigurableOperationListInput({
-    definition,
+    fieldDef,
     value,
     onChange,
-    readOnly,
-}: Readonly<EnhancedListInputProps>) {
-    const [newItemValue, setNewItemValue] = useState('');
-
-    // Parse the current array value
-    const arrayValue = parseArrayValue(value);
-
-    const handleArrayChange = (newArray: string[]) => {
-        onChange(JSON.stringify(newArray));
-    };
-
-    const handleAddItem = () => {
-        if (newItemValue.trim()) {
-            const newArray = [...arrayValue, newItemValue.trim()];
-            handleArrayChange(newArray);
-            setNewItemValue('');
-        }
-    };
-
-    const handleRemoveItem = (index: number) => {
-        const newArray = arrayValue.filter((_, i) => i !== index);
-        handleArrayChange(newArray);
-    };
-
-    const handleUpdateItem = (index: number, newValue: string) => {
-        const newArray = arrayValue.map((item, i) => (i === index ? newValue : item));
-        handleArrayChange(newArray);
-    };
-
-    const handleKeyPress = (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            handleAddItem();
-        }
-    };
-
-    // Render individual item input based on the underlying type
-    const renderItemInput = (itemValue: string, index: number) => {
-        const argType = definition.type as ConfigArgType;
-        const uiComponent = (definition.ui as any)?.component;
-
-        const commonProps = {
-            value: itemValue,
-            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-                handleUpdateItem(index, e.target.value),
-            disabled: readOnly,
-        };
-
-        switch (uiComponent) {
-            case 'boolean-form-input':
-                return (
-                    <Switch
-                        checked={itemValue === 'true'}
-                        onCheckedChange={checked => handleUpdateItem(index, checked.toString())}
-                        disabled={readOnly}
-                    />
-                );
-
-            case 'select-form-input': {
-                const options = (definition.ui as any)?.options || [];
-                return (
-                    <Select
-                        value={itemValue}
-                        onValueChange={val => handleUpdateItem(index, val)}
-                        disabled={readOnly}
-                    >
-                        <SelectTrigger>
-                            <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {options.map((option: any) => (
-                                <SelectItem key={option.value} value={option.value}>
-                                    {typeof option.label === 'string'
-                                        ? option.label
-                                        : option.label?.[0]?.value || option.value}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                );
-            }
-            case 'textarea-form-input':
-                return (
-                    <Textarea
-                        {...commonProps}
-                        placeholder="Enter text..."
-                        rows={2}
-                        className="bg-background"
-                    />
-                );
-
-            case 'date-form-input':
-                return (
-                    <DateTimeInput
-                        value={itemValue ? new Date(itemValue) : new Date()}
-                        onChange={val => handleUpdateItem(index, val.toISOString())}
-                        disabled={readOnly}
-                    />
-                );
-
-            case 'number-form-input': {
-                const ui = definition.ui as any;
-                const isFloat = argType === 'float';
-                return (
-                    <Input
-                        type="number"
-                        value={itemValue}
-                        onChange={e => handleUpdateItem(index, e.target.value)}
-                        disabled={readOnly}
-                        min={ui?.min}
-                        max={ui?.max}
-                        step={ui?.step || (isFloat ? 0.01 : 1)}
-                    />
-                );
-            }
-            case 'currency-form-input':
-                return (
-                    <div className="flex items-center">
-                        <span className="mr-2 text-sm text-muted-foreground">$</span>
-                        <Input
-                            type="number"
-                            value={itemValue}
-                            onChange={e => handleUpdateItem(index, e.target.value)}
-                            disabled={readOnly}
-                            min={0}
-                            step={1}
-                            className="flex-1"
-                        />
-                    </div>
-                );
-        }
-
-        // Fall back to type-based rendering
-        switch (argType) {
-            case 'boolean':
-                return (
-                    <Switch
-                        checked={itemValue === 'true'}
-                        onCheckedChange={checked => handleUpdateItem(index, checked.toString())}
-                        disabled={readOnly}
-                    />
-                );
-
-            case 'int':
-            case 'float': {
-                const isFloat = argType === 'float';
-                return (
-                    <Input
-                        type="number"
-                        value={itemValue}
-                        onChange={e => handleUpdateItem(index, e.target.value)}
-                        disabled={readOnly}
-                        step={isFloat ? 0.01 : 1}
-                    />
-                );
-            }
-            case 'datetime':
-                return (
-                    <DateTimeInput
-                        value={itemValue ? new Date(itemValue) : new Date()}
-                        onChange={val => handleUpdateItem(index, val.toISOString())}
-                        disabled={readOnly}
-                    />
-                );
-
-            default:
-                return <Input type="text" {...commonProps} placeholder="Enter value..." />;
-        }
-    };
-
-    // Render new item input (similar logic but for newItemValue)
-    const renderNewItemInput = () => {
-        const argType = definition.type as ConfigArgType;
-        const uiComponent = (definition.ui as any)?.component;
-
-        const commonProps = {
-            value: newItemValue,
-            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-                setNewItemValue(e.target.value),
-            disabled: readOnly,
-            onKeyPress: handleKeyPress,
-        };
-
-        switch (uiComponent) {
-            case 'boolean-form-input': {
-                return (
-                    <Switch
-                        checked={newItemValue === 'true'}
-                        onCheckedChange={checked => setNewItemValue(checked.toString())}
-                        disabled={readOnly}
-                    />
-                );
-            }
-            case 'select-form-input': {
-                const options = (definition.ui as any)?.options || [];
-                return (
-                    <Select value={newItemValue} onValueChange={setNewItemValue} disabled={readOnly}>
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select value..." />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {options.map((option: any) => (
-                                <SelectItem key={option.value} value={option.value}>
-                                    {typeof option.label === 'string'
-                                        ? option.label
-                                        : option.label?.[0]?.value || option.value}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                );
-            }
-            case 'textarea-form-input': {
-                return (
-                    <Textarea
-                        {...commonProps}
-                        placeholder="Enter text..."
-                        rows={2}
-                        className="bg-background"
-                    />
-                );
-            }
-            case 'date-form-input': {
-                return <DateTimeInput value={newItemValue} onChange={setNewItemValue} disabled={readOnly} />;
-            }
-            case 'number-form-input': {
-                const ui = definition.ui as any;
-                const isFloat = argType === 'float';
-                return (
-                    <Input
-                        type="number"
-                        value={newItemValue}
-                        onChange={e => setNewItemValue(e.target.value)}
-                        disabled={readOnly}
-                        min={ui?.min}
-                        max={ui?.max}
-                        step={ui?.step || (isFloat ? 0.01 : 1)}
-                        placeholder="Enter number..."
-                        onKeyPress={handleKeyPress}
-                        className="bg-background"
-                    />
-                );
-            }
-            case 'currency-form-input': {
-                return (
-                    <div className="flex items-center">
-                        <span className="mr-2 text-sm text-muted-foreground">$</span>
-                        <Input
-                            type="number"
-                            value={newItemValue}
-                            onChange={e => setNewItemValue(e.target.value)}
-                            disabled={readOnly}
-                            min={0}
-                            step={1}
-                            placeholder="Enter amount..."
-                            onKeyPress={handleKeyPress}
-                            className="flex-1 bg-background"
-                        />
-                    </div>
-                );
-            }
-        }
-
-        // Fall back to type-based rendering
-        switch (argType) {
-            case 'boolean':
-                return (
-                    <Switch
-                        checked={newItemValue === 'true'}
-                        onCheckedChange={checked => setNewItemValue(checked.toString())}
-                        disabled={readOnly}
-                    />
-                );
-            case 'int':
-            case 'float': {
-                const isFloat = argType === 'float';
-                return (
-                    <Input
-                        type="number"
-                        value={newItemValue}
-                        onChange={e => setNewItemValue(e.target.value)}
-                        disabled={readOnly}
-                        step={isFloat ? 0.01 : 1}
-                        placeholder="Enter number..."
-                        onKeyPress={handleKeyPress}
-                        className="bg-background"
-                    />
-                );
-            }
-            case 'datetime': {
-                return (
-                    <DateTimeInput
-                        value={newItemValue ? new Date(newItemValue) : new Date()}
-                        onChange={val => setNewItemValue(val.toISOString())}
-                        disabled={readOnly}
-                    />
-                );
-            }
-            default: {
-                return (
-                    <Input
-                        type="text"
-                        {...commonProps}
-                        placeholder="Enter value..."
-                        className="bg-background"
-                    />
-                );
-            }
-        }
-    };
-
-    if (readOnly) {
-        return (
-            <div className="space-y-2">
-                {arrayValue.map((item, index) => (
-                    <div key={index + item} className="flex items-center gap-2 p-2 bg-muted rounded-md">
-                        <span className="flex-1">{item}</span>
-                    </div>
-                ))}
-                {arrayValue.length === 0 && <div className="text-sm text-muted-foreground">No items</div>}
-            </div>
-        );
+}: Readonly<DashboardFormComponentProps>) {
+    if (!fieldDef || isCustomFieldConfig(fieldDef)) {
+        return null;
     }
-
+    const arrayValue = parseArrayValue(value);
     return (
         <div className="space-y-2">
-            {/* Existing items */}
-            {arrayValue.map((item, index) => (
-                <div key={index + item} className="flex items-center gap-2">
-                    <div className="flex-1">{renderItemInput(item, index)}</div>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleRemoveItem(index)}
-                        disabled={readOnly}
-                        type="button"
-                    >
-                        <X className="h-4 w-4" />
-                    </Button>
-                </div>
-            ))}
-
-            {/* Add new item */}
-            <div className="flex items-center gap-2 p-2 border border-dashed rounded-md">
-                <div className="flex-1">{renderNewItemInput()}</div>
-                <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleAddItem}
-                    disabled={readOnly || !newItemValue.trim()}
-                    type="button"
-                >
-                    <Plus className="h-4 w-4" />
-                </Button>
-            </div>
-
-            {arrayValue.length === 0 && (
-                <div className="text-sm text-muted-foreground">
-                    No items added yet. Use the input above to add items.
-                </div>
-            )}
+            {arrayValue.map((item, index) => {
+                const field = {
+                    value: item,
+                    onChange,
+                    disabled: false,
+                    onBlur: () => {},
+                    name: fieldDef.name,
+                    ref: () => {},
+                } satisfies ControllerRenderProps<any, any>;
+                return (
+                    <div key={`array-item-${index}`} className="flex items-center gap-2">
+                        <div className="flex-1">
+                            <FormControlAdapter field={field} fieldDef={fieldDef} valueMode="native" />
+                        </div>
+                    </div>
+                );
+            })}
         </div>
     );
 }

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

@@ -1,4 +1,5 @@
 import { Button } from '@/vdb/components/ui/button.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { useLingui } from '@/vdb/lib/trans.js';
 import {
     closestCenter,
@@ -26,9 +27,7 @@ interface ListItemWithId {
     value: any;
 }
 
-interface CustomFieldListInputProps {
-    field: ControllerRenderProps<any, any>;
-    disabled?: boolean;
+interface CustomFieldListInputProps extends DashboardFormComponentProps {
     renderInput: (index: number, inputField: ControllerRenderProps<any, any>) => React.ReactNode;
     defaultValue?: any;
 }
@@ -148,7 +147,7 @@ function generateId(): string {
 
 // Convert flat array to array with stable IDs
 function convertToItemsWithIds(values: any[], existingItems?: ListItemWithId[]): ListItemWithId[] {
-    if (!values || values.length === 0) return [];
+    if (!values || !Array.isArray(values) || values.length === 0) return [];
 
     return values.map((value, index) => {
         // Try to reuse existing ID if the value matches and index is within bounds
@@ -170,13 +169,8 @@ function convertToFlatArray(itemsWithIds: ListItemWithId[]): any[] {
     return itemsWithIds.map(item => item.value);
 }
 
-export function CustomFieldListInput({
-    field,
-    disabled,
-    renderInput,
-    defaultValue,
-    isFullWidth = false,
-}: CustomFieldListInputProps & { isFullWidth?: boolean }) {
+export const CustomFieldListInput = ({ renderInput, defaultValue, ...fieldProps }: CustomFieldListInputProps) => {
+    const { value, onChange, disabled } = fieldProps;
     const { i18n } = useLingui();
     const sensors = useSensors(
         useSensor(PointerSensor),
@@ -187,18 +181,18 @@ export function CustomFieldListInput({
 
     // Keep track of items with stable IDs
     const [itemsWithIds, setItemsWithIds] = useState<ListItemWithId[]>(() =>
-        convertToItemsWithIds(field.value || []),
+        convertToItemsWithIds(value || []),
     );
 
     // Update items when field value changes externally (e.g., form reset, initial load)
     useEffect(() => {
-        const newItems = convertToItemsWithIds(field.value || [], itemsWithIds);
+        const newItems = convertToItemsWithIds(value || [], itemsWithIds);
         if (
             JSON.stringify(convertToFlatArray(newItems)) !== JSON.stringify(convertToFlatArray(itemsWithIds))
         ) {
             setItemsWithIds(newItems);
         }
-    }, [field.value, itemsWithIds]);
+    }, [value, itemsWithIds]);
 
     const itemIds = useMemo(() => itemsWithIds.map(item => item._id), [itemsWithIds]);
 
@@ -209,25 +203,25 @@ export function CustomFieldListInput({
         };
         const newItemsWithIds = [...itemsWithIds, newItem];
         setItemsWithIds(newItemsWithIds);
-        field.onChange(convertToFlatArray(newItemsWithIds));
-    }, [itemsWithIds, defaultValue, field]);
+        onChange(convertToFlatArray(newItemsWithIds));
+    }, [itemsWithIds, defaultValue, onChange]);
 
     const handleRemoveItem = useCallback(
         (id: string) => {
             const newItemsWithIds = itemsWithIds.filter(item => item._id !== id);
             setItemsWithIds(newItemsWithIds);
-            field.onChange(convertToFlatArray(newItemsWithIds));
+            onChange(convertToFlatArray(newItemsWithIds));
         },
-        [itemsWithIds, field],
+        [itemsWithIds, onChange],
     );
 
     const handleItemChange = useCallback(
         (id: string, value: any) => {
             const newItemsWithIds = itemsWithIds.map(item => (item._id === id ? { ...item, value } : item));
             setItemsWithIds(newItemsWithIds);
-            field.onChange(convertToFlatArray(newItemsWithIds));
+            onChange(convertToFlatArray(newItemsWithIds));
         },
-        [itemsWithIds, field],
+        [itemsWithIds, onChange],
     );
 
     const handleDragEnd = useCallback(
@@ -240,10 +234,10 @@ export function CustomFieldListInput({
 
                 const newItemsWithIds = arrayMove(itemsWithIds, oldIndex, newIndex);
                 setItemsWithIds(newItemsWithIds);
-                field.onChange(convertToFlatArray(newItemsWithIds));
+                onChange(convertToFlatArray(newItemsWithIds));
             }
         },
-        [itemIds, itemsWithIds, field],
+        [itemIds, itemsWithIds, onChange],
     );
 
     const containerClasses = useMemo(() => {
@@ -278,8 +272,7 @@ export function CustomFieldListInput({
                                 renderInput={renderInput}
                                 onRemove={handleRemoveItem}
                                 onItemChange={handleItemChange}
-                                field={field}
-                                isFullWidth={isFullWidth}
+                                field={fieldProps}
                             />
                         ))}
                     </SortableContext>
@@ -294,4 +287,4 @@ export function CustomFieldListInput({
             )}
         </div>
     );
-}
+};

package/src/lib/components/data-input/customer-group-input.tsx

@@ -4,6 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import { CustomerGroupChip } from '../shared/customer-group-chip.js';
 import { CustomerGroupSelector } from '../shared/customer-group-selector.js';
 
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+
 const customerGroupsDocument = graphql(`
     query GetCustomerGroups($options: CustomerGroupListOptions) {
         customerGroups(options: $options) {
@@ -20,14 +22,8 @@ export interface CustomerGroup {
     name: string;
 }
 
-export interface CustomerGroupInputProps {
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}
-
-export function CustomerGroupInput(props: CustomerGroupInputProps) {
-    const ids = decodeIds(props.value);
+export function CustomerGroupInput({ value, onChange, disabled }: Readonly<DashboardFormComponentProps>) {
+    const ids = decodeIds(value);
     const { data: groups } = useQuery({
         queryKey: ['customerGroups', ids],
         queryFn: () =>
@@ -42,12 +38,12 @@ export function CustomerGroupInput(props: CustomerGroupInputProps) {
 
     const onValueSelectHandler = (value: CustomerGroup) => {
         const newIds = new Set([...ids, value.id]);
-        props.onChange(JSON.stringify(Array.from(newIds)));
+        onChange(JSON.stringify(Array.from(newIds)));
     };
 
     const onValueRemoveHandler = (id: string) => {
         const newIds = new Set(ids.filter(existingId => existingId !== id));
-        props.onChange(JSON.stringify(Array.from(newIds)));
+        onChange(JSON.stringify(Array.from(newIds)));
     };
 
     return (
@@ -58,7 +54,7 @@ export function CustomerGroupInput(props: CustomerGroupInputProps) {
                 ))}
             </div>
 
-            <CustomerGroupSelector onSelect={onValueSelectHandler} readOnly={props.readOnly} />
+            <CustomerGroupSelector onSelect={onValueSelectHandler} readOnly={disabled} />
         </div>
     );
 }

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

@@ -7,24 +7,20 @@ 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 { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { CalendarClock } from 'lucide-react';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
-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 ?? '');
+export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
+    const readOnly = isReadonlyField(fieldDef);
+    const date = value && value instanceof Date ? value.toISOString() : (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);
+            onChange(selectedDate.toISOString());
         }
     };
 
@@ -39,16 +35,16 @@ export function DateTimeInput(props: DateTimeInputProps) {
                 const currentHours = newDate.getHours();
                 newDate.setHours(value === 'PM' ? currentHours + 12 : currentHours - 12);
             }
-            props.onChange(newDate);
+            onChange(newDate);
         }
     };
 
     return (
-        <Popover open={isOpen} onOpenChange={disabled ? undefined : setIsOpen}>
+        <Popover open={isOpen} onOpenChange={readOnly ? undefined : setIsOpen}>
             <PopoverTrigger asChild>
                 <Button
                     variant="outline"
-                    disabled={disabled}
+                    disabled={readOnly}
                     className={cn(
                         'w-full justify-start text-left font-normal shadow-xs',
                         !date && 'text-muted-foreground',