@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -1,51 +1,395 @@
-import { InputComponent } from '@/framework/component-registry/dynamic-component.js';
-import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { InputComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';
 import { ConfigArgType } from '@vendure/core';
+import { AffixedInput } from '../data-input/affixed-input.js';
+import { ConfigurableOperationListInput } from '../data-input/configurable-operation-list-input.js';
+import { DateTimeInput } from '../data-input/datetime-input.js';
+import { DefaultRelationInput } from '../data-input/default-relation-input.js';
 import { FacetValueInput } from '../data-input/facet-value-input.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';
 
 export interface ConfigurableOperationArgInputProps {
     definition: ConfigurableOperationDefFragment['args'][number];
     readOnly?: boolean;
     value: string;
     onChange: (value: any) => void;
+    position?: number;
 }
 
+/**
+ * Maps Vendure UI component names to their corresponding Dashboard input component IDs
+ */
+const UI_COMPONENT_MAP = {
+    'number-form-input': 'vendure:numberInput',
+    'currency-form-input': 'vendure:currencyInput',
+    'facet-value-form-input': 'facet-value-input',
+    'product-selector-form-input': 'vendure:productSelectorInput',
+    'customer-group-form-input': 'vendure:customerGroupInput',
+    'date-form-input': 'date-input',
+    'textarea-form-input': 'textarea-input',
+    'password-form-input': 'vendure:passwordInput',
+    'json-editor-form-input': 'vendure:jsonEditorInput',
+    'html-editor-form-input': 'vendure:htmlEditorInput',
+    'rich-text-form-input': 'vendure:richTextInput',
+    'boolean-form-input': 'boolean-input',
+    'select-form-input': 'select-input',
+    'text-form-input': 'vendure:textInput',
+    'product-multi-form-input': 'vendure:productMultiInput',
+    'combination-mode-form-input': 'vendure:combinationModeInput',
+    'relation-form-input': 'vendure:relationInput',
+    'struct-form-input': 'vendure:structInput',
+} as const;
+
 export function ConfigurableOperationArgInput({
     definition,
     value,
     onChange,
     readOnly,
-}: ConfigurableOperationArgInputProps) {
-    if ((definition.ui as any)?.component === 'facet-value-form-input') {
-        return <FacetValueInput value={value} onChange={onChange} readOnly={readOnly} />;
+    position,
+}: Readonly<ConfigurableOperationArgInputProps>) {
+    const uiComponent = (definition.ui as any)?.component;
+    const argType = definition.type as ConfigArgType;
+    const isList = definition.list ?? false;
+
+    // Handle specific UI components first
+    if (uiComponent) {
+        switch (uiComponent) {
+            case 'product-selector-form-input': {
+                const entityType =
+                    (definition.ui as any)?.selectionMode === 'variant' ? 'ProductVariant' : 'Product';
+                const isMultiple = (definition.ui as any)?.multiple ?? false;
+                return (
+                    <DefaultRelationInput
+                        fieldDef={
+                            {
+                                entity: entityType,
+                                list: isMultiple,
+                            } as RelationCustomFieldConfig
+                        }
+                        field={{
+                            value,
+                            onChange,
+                            onBlur: () => {},
+                            name: '',
+                            ref: () => {},
+                        }}
+                        disabled={readOnly}
+                    />
+                );
+            }
+            case 'customer-group-form-input': {
+                const isCustomerGroupMultiple = (definition.ui as any)?.multiple ?? false;
+                return (
+                    <DefaultRelationInput
+                        fieldDef={
+                            {
+                                entity: 'CustomerGroup',
+                                list: isCustomerGroupMultiple,
+                            } as RelationCustomFieldConfig
+                        }
+                        field={{
+                            value,
+                            onChange,
+                            onBlur: () => {},
+                            name: '',
+                            ref: () => {},
+                        }}
+                        disabled={readOnly}
+                    />
+                );
+            }
+            case 'facet-value-form-input': {
+                return <FacetValueInput value={value} onChange={onChange} readOnly={readOnly} />;
+            }
+            case 'select-form-input': {
+                return (
+                    <SelectInput
+                        definition={definition}
+                        value={value}
+                        onChange={onChange}
+                        readOnly={readOnly}
+                    />
+                );
+            }
+            case 'textarea-form-input': {
+                return (
+                    <TextareaInput
+                        definition={definition}
+                        value={value}
+                        onChange={onChange}
+                        readOnly={readOnly}
+                    />
+                );
+            }
+            case 'date-form-input': {
+                return <DateTimeInput value={value} onChange={onChange} disabled={readOnly} />;
+            }
+            case 'boolean-form-input': {
+                return <BooleanInput value={value} onChange={onChange} readOnly={readOnly} />;
+            }
+            case 'number-form-input': {
+                return (
+                    <NumberInput
+                        definition={definition}
+                        value={value}
+                        onChange={onChange}
+                        readOnly={readOnly}
+                    />
+                );
+            }
+            case 'currency-form-input': {
+                return (
+                    <CurrencyInput
+                        definition={definition}
+                        value={value}
+                        onChange={onChange}
+                        readOnly={readOnly}
+                    />
+                );
+            }
+            default: {
+                // Try to use the component registry for other UI components
+                const componentId = UI_COMPONENT_MAP[uiComponent as keyof typeof UI_COMPONENT_MAP];
+                if (componentId) {
+                    try {
+                        return (
+                            <InputComponent
+                                id={componentId}
+                                value={value}
+                                onChange={onChange}
+                                readOnly={readOnly}
+                                position={position}
+                                definition={definition}
+                                {...(definition.ui as any)}
+                            />
+                        );
+                    } catch (error) {
+                        console.warn(
+                            `Failed to load UI component ${uiComponent}, falling back to type-based input`,
+                        );
+                    }
+                }
+            }
+        }
+    }
+
+    // Handle list fields with array wrapper
+    if (isList) {
+        return (
+            <ConfigurableOperationListInput
+                definition={definition}
+                value={value}
+                onChange={onChange}
+                readOnly={readOnly}
+            />
+        );
     }
-    switch (definition.type as ConfigArgType) {
+
+    // Fall back to type-based rendering
+    switch (argType) {
         case 'boolean':
+            return <BooleanInput value={value} onChange={onChange} readOnly={readOnly} />;
+
+        case 'int':
+        case 'float':
             return (
-                <InputComponent
-                    id="vendure:checkboxInput"
-                    value={value}
-                    onChange={(value: any) => onChange(value)}
-                    readOnly={readOnly}
-                />
+                <NumberInput definition={definition} value={value} onChange={onChange} readOnly={readOnly} />
             );
-        case 'string':
+
+        case 'datetime':
+            return <DateTimeInput value={value} onChange={onChange} disabled={readOnly} />;
+
+        case 'ID':
+            // ID fields typically need specialized selectors
             return (
-                <InputComponent
-                    id="vendure:textInput"
-                    value={value}
-                    onChange={(value: any) => onChange(value)}
-                    readOnly={readOnly}
+                <Input
+                    type="text"
+                    value={value || ''}
+                    onChange={e => onChange(e.target.value)}
+                    disabled={readOnly}
+                    placeholder="Enter ID..."
+                    className="bg-background"
                 />
             );
+
+        case 'string':
         default:
             return (
-                <InputComponent
-                    id="vendure:textInput"
-                    value={value}
-                    onChange={(value: any) => onChange(value)}
-                    readOnly={readOnly}
+                <Input
+                    type="text"
+                    value={value || ''}
+                    onChange={e => onChange(e.target.value)}
+                    disabled={readOnly}
+                    className="bg-background"
                 />
             );
     }
 }
+
+/**
+ * Boolean input component
+ */
+function BooleanInput({
+    value,
+    onChange,
+    readOnly,
+}: Readonly<{
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}>) {
+    const boolValue = value === 'true';
+
+    return (
+        <Switch
+            checked={boolValue}
+            onCheckedChange={checked => onChange(checked.toString())}
+            disabled={readOnly}
+        />
+    );
+}
+
+/**
+ * Number input component with support for UI configuration
+ */
+function NumberInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: Readonly<{
+    definition: ConfigurableOperationDefFragment['args'][number];
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}>) {
+    const ui = definition.ui as any;
+    const isFloat = (definition.type as ConfigArgType) === 'float';
+    const min = ui?.min;
+    const max = ui?.max;
+    const step = ui?.step || (isFloat ? 0.01 : 1);
+    const prefix = ui?.prefix;
+    const suffix = ui?.suffix;
+
+    const numericValue = value ? parseFloat(value) : '';
+
+    return (
+        <AffixedInput
+            type="number"
+            value={numericValue}
+            onChange={e => {
+                const val = e.target.valueAsNumber;
+                onChange(isNaN(val) ? '' : val.toString());
+            }}
+            disabled={readOnly}
+            min={min}
+            max={max}
+            step={step}
+            prefix={prefix}
+            suffix={suffix}
+            className="bg-background"
+        />
+    );
+}
+
+/**
+ * Currency input component
+ */
+function CurrencyInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: Readonly<{
+    definition: ConfigurableOperationDefFragment['args'][number];
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}>) {
+    const numericValue = value ? parseInt(value, 10) : '';
+
+    return (
+        <AffixedInput
+            type="number"
+            value={numericValue}
+            onChange={e => {
+                const val = e.target.valueAsNumber;
+                onChange(isNaN(val) ? '0' : val.toString());
+            }}
+            disabled={readOnly}
+            min={0}
+            step={1}
+            prefix="$"
+            className="bg-background"
+        />
+    );
+}
+
+/**
+ * Select input component with options
+ */
+function SelectInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: Readonly<{
+    definition: ConfigurableOperationDefFragment['args'][number];
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}>) {
+    const ui = definition.ui as any;
+    const options = ui?.options || [];
+
+    return (
+        <Select value={value} onValueChange={onChange} disabled={readOnly}>
+            <SelectTrigger className="bg-background mb-0">
+                <SelectValue placeholder="Select an option..." />
+            </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>
+    );
+}
+
+/**
+ * Textarea input component
+ */
+function TextareaInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: Readonly<{
+    definition: ConfigurableOperationDefFragment['args'][number];
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}>) {
+    const ui = definition.ui as any;
+    const spellcheck = ui?.spellcheck ?? true;
+
+    return (
+        <Textarea
+            value={value || ''}
+            onChange={e => onChange(e.target.value)}
+            disabled={readOnly}
+            spellCheck={spellcheck}
+            placeholder="Enter text..."
+            rows={4}
+            className="bg-background"
+        />
+    );
+}

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -1,12 +1,11 @@
-import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { X } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import * as React from 'react';
+import { Button } from '../ui/button.js';
+import { Card, CardContent, CardHeader } from '../ui/card.js';
 import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
-import { Input } from '../ui/input.js';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
-import { Button } from '../ui/button.js';
-import { Trash } from 'lucide-react';
 
 export interface ConfigurableOperationInputProps {
     operationDefinition: ConfigurableOperationDefFragment;
@@ -28,7 +27,7 @@ export function ConfigurableOperationInput({
     value,
     onChange,
     onRemove,
-}: ConfigurableOperationInputProps) {
+}: Readonly<ConfigurableOperationInputProps>) {
     const form = useForm({
         defaultValues: {
             ...value,
@@ -42,54 +41,94 @@ export function ConfigurableOperationInput({
         if (argIndex === -1) {
             updatedArgs = [...value.arguments, { name, value: stringValue }];
         } else {
-            updatedArgs = value.arguments.map(arg => (arg.name === name ? { ...arg, value: stringValue } : arg));
+            updatedArgs = value.arguments.map(arg =>
+                arg.name === name ? { ...arg, value: stringValue } : arg,
+            );
         }
         const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
         onChange(newVal);
     };
 
-
     return (
-        <Form {...form}>
-            <div className="space-y-4">
-                <div className="flex flex-row justify-between">
-                    {!hideDescription && (
-                        <div className="font-medium">
-                            {' '}
-                            {interpolateDescription(operationDefinition, value.arguments)}
+        <div>
+            <Card className="bg-muted/50 shadow-none">
+                <CardHeader className="pb-3">
+                    <div className="flex items-start justify-between">
+                        <div className="flex-1 min-w-0">
+                            {!hideDescription && (
+                                <div className="font-medium text-sm text-foreground leading-relaxed">
+                                    {interpolateDescription(operationDefinition, value.arguments)}
+                                </div>
+                            )}
+
+                            {operationDefinition.code && (
+                                <div className="text-xs text-muted-foreground mt-1 font-mono">
+                                    {operationDefinition.code}
+                                </div>
+                            )}
                         </div>
-                    )}
-                    {removable !== false && (
-                        <Button variant="outline" size="icon" onClick={onRemove}>
-                            <Trash />
-                        </Button>
-                    )}
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                    {operationDefinition.args.map(arg => {
-                        const argValue = value.arguments.find(a => a.name === arg.name)?.value || '';
-                        return (
-                            <FormField
-                                key={arg.name}
-                                name={`args.${arg.name}`}
-                                render={() => (
-                                <FormItem>
-                                    <FormLabel>{arg.label || arg.name}</FormLabel>
-                                    <FormControl>
-                                        <ConfigurableOperationArgInput
-                                            definition={arg}
-                                            value={argValue}
-                                            onChange={value => handleInputChange(arg.name, value)}
-                                        />
-                                        </FormControl>
-                                    </FormItem>
-                                )}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        </Form>
+
+                        {removable !== false && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={onRemove}
+                                className="h-8 w-8 p-0 hover:bg-destructive/10 hover:text-destructive"
+                                disabled={readonly}
+                            >
+                                <X className="h-3.5 w-3.5" />
+                            </Button>
+                        )}
+                    </div>
+                </CardHeader>
+
+                {operationDefinition.args && operationDefinition.args.length > 0 && (
+                    <CardContent className="pt-0">
+                        <Form {...form}>
+                            <div className="space-y-4">
+                                <div
+                                    className={`grid gap-4 ${operationDefinition.args.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`}
+                                >
+                                    {operationDefinition.args
+                                        .filter(
+                                            arg =>
+                                                arg.ui?.component !== 'combination-mode-form-input',
+                                        )
+                                        .map(arg => {
+                                            const argValue =
+                                                value.arguments.find(a => a.name === arg.name)?.value || '';
+                                            return (
+                                                <FormField
+                                                    key={arg.name}
+                                                    name={`args.${arg.name}`}
+                                                    render={() => (
+                                                        <FormItem className="space-y-2">
+                                                            <FormLabel className="text-sm font-medium text-foreground">
+                                                                {arg.label || arg.name}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <ConfigurableOperationArgInput
+                                                                    definition={arg}
+                                                                    value={argValue}
+                                                                    onChange={value =>
+                                                                        handleInputChange(arg.name, value)
+                                                                    }
+                                                                    readOnly={readonly}
+                                                                    position={position}
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            );
+                                        })}
+                                </div>
+                            </div>
+                        </Form>
+                    </CardContent>
+                )}
+            </Card>
+        </div>
     );
 }