@vendure/dashboard 3.4.1-master-202508050244 → 3.4.1-master-202508070243

package/src/lib/components/shared/universal-field-definition.ts

@@ -0,0 +1,118 @@
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
+import { ConfigArgType, CustomFieldType, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+
+/**
+ * Universal field definition that can represent both custom fields and configurable operation args
+ */
+export interface UniversalFieldDefinition {
+    name: string;
+    type: CustomFieldType | 'ID'; // Extends CustomFieldType with ID for config args
+    list?: boolean;
+    readonly?: boolean;
+    ui?: {
+        component?: DefaultFormComponentId | string;
+        options?: Array<{ value: string; label: string | Array<{ languageCode: string; value: string }> }>;
+        min?: number;
+        max?: number;
+        step?: number;
+        prefix?: string;
+        suffix?: string;
+        tab?: string;
+        fullWidth?: boolean;
+        spellcheck?: boolean;
+        selectionMode?: string;
+    };
+    entity?: string; // for relations
+    label?: string | Array<{ languageCode: string; value: string }>;
+    description?: string | Array<{ languageCode: string; value: string }>;
+}
+
+/**
+ * Convert a custom field config to universal field definition
+ */
+export function customFieldToUniversal(fieldDef: CustomFieldConfig): UniversalFieldDefinition {
+    const hasOptions = (fieldDef as any).options;
+    const hasUi = fieldDef.ui;
+    const hasNumericConfig =
+        (fieldDef as any).min !== undefined ||
+        (fieldDef as any).max !== undefined ||
+        (fieldDef as any).step !== undefined;
+
+    return {
+        name: fieldDef.name,
+        type: fieldDef.type as any,
+        list: fieldDef.list ?? false,
+        readonly: fieldDef.readonly ?? false,
+        ui:
+            hasUi || hasOptions || hasNumericConfig
+                ? {
+                      component: fieldDef.ui?.component,
+                      options: (fieldDef as any).options,
+                      ...((fieldDef as any).min != null && {
+                          min: (fieldDef as any).min,
+                      }),
+                      ...((fieldDef as any).max != null && {
+                          max: (fieldDef as any).max,
+                      }),
+                      ...((fieldDef as any).step != null && {
+                          step: (fieldDef as any).step,
+                      }),
+                      tab: fieldDef.ui?.tab,
+                      fullWidth: fieldDef.ui?.fullWidth,
+                  }
+                : undefined,
+        entity: (fieldDef as any).entity,
+        label: fieldDef.label,
+        description: fieldDef.description,
+    };
+}
+
+/**
+ * Convert a configurable operation arg definition to universal field definition
+ */
+export function configArgToUniversal(
+    definition: ConfigurableOperationDefFragment['args'][number],
+): UniversalFieldDefinition {
+    const ui = definition.ui;
+
+    return {
+        name: definition.name,
+        type: mapConfigArgType(definition.type as ConfigArgType),
+        list: definition.list ?? false,
+        readonly: false,
+        ui: ui
+            ? {
+                  component: ui.component,
+                  options: ui.options,
+                  min: ui.min ?? undefined,
+                  max: ui.max ?? undefined,
+                  step: ui.step ?? undefined,
+                  prefix: ui.prefix,
+                  suffix: ui.suffix,
+                  spellcheck: ui.spellcheck,
+                  selectionMode: ui.selectionMode,
+              }
+            : undefined,
+        entity: getEntityFromUiComponent(ui?.component),
+        label: definition.label,
+        description: definition.description,
+    };
+}
+
+function mapConfigArgType(configArgType: ConfigArgType): UniversalFieldDefinition['type'] {
+    // All ConfigArgType values are compatible with our extended type
+    return configArgType as UniversalFieldDefinition['type'];
+}
+
+function getEntityFromUiComponent(component?: string): string | undefined {
+    switch (component) {
+        case 'product-selector-form-input':
+        case 'product-multi-form-input':
+            return 'Product';
+        case 'customer-group-form-input':
+            return 'CustomerGroup';
+        default:
+            return undefined;
+    }
+}

package/src/lib/components/shared/universal-form-input.tsx

@@ -0,0 +1,175 @@
+import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+import { ControllerRenderProps } from 'react-hook-form';
+
+import { CustomFieldListInput } from '@/vdb/components/data-input/custom-field-list-input.js';
+import { StructFormInput } from '@/vdb/components/data-input/struct-form-input.js';
+import {
+    CustomFormComponent,
+    CustomFormComponentInputProps,
+} from '@/vdb/framework/form-engine/custom-form-component.js';
+
+import { ConfigurableOperationListInput } from '../data-input/configurable-operation-list-input.js';
+import { FacetValueInput } from '../data-input/facet-value-input.js';
+import { getDirectFormComponent } from './direct-form-component-map.js';
+import { UniversalFieldDefinition } from './universal-field-definition.js';
+import { UniversalInputComponent } from './universal-input-components.js';
+import { ValueMode } from './value-transformers.js';
+
+export interface UniversalFormInputProps {
+    fieldDef: UniversalFieldDefinition;
+    field: ControllerRenderProps<any, any>;
+    valueMode: ValueMode;
+    disabled?: boolean;
+    // Additional props for config args mode
+    position?: number;
+    // Additional props for custom fields mode
+    control?: any;
+    getTranslation?: (
+        input: Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+}
+
+/**
+ * Universal form input component that handles both custom fields and configurable operation args
+ * Maintains full backward compatibility with existing APIs while eliminating duplication
+ */
+export function UniversalFormInput({
+    fieldDef,
+    field,
+    valueMode,
+    disabled = false,
+    position,
+    control,
+    getTranslation,
+}: Readonly<UniversalFormInputProps>) {
+    const uiComponent = fieldDef.ui?.component;
+    const isList = fieldDef.list ?? false;
+    const isReadonly = disabled || fieldDef.readonly;
+
+    // Handle special case: facet-value-form-input (only in config args)
+    if (uiComponent === 'facet-value-form-input' && valueMode === 'json-string') {
+        return <FacetValueInput value={field.value} onChange={field.onChange} readOnly={isReadonly} />;
+    }
+
+    // Handle custom form components (custom fields mode)
+    if (uiComponent && valueMode === 'native') {
+        const fieldProps: CustomFormComponentInputProps = {
+            field: {
+                ...field,
+                disabled: isReadonly,
+            },
+            fieldState: {} as any, // This would be passed from the parent FormField
+            formState: {} as any, // This would be passed from the parent FormField
+        };
+
+        return <CustomFormComponent fieldDef={fieldDef as any} fieldProps={fieldProps} />;
+    }
+
+    // Handle direct component mapping (config args mode)
+    if (uiComponent && valueMode === 'json-string') {
+        const DirectComponent = getDirectFormComponent(uiComponent as DefaultFormComponentId);
+        if (DirectComponent) {
+            return (
+                <DirectComponent
+                    fieldDef={fieldDef}
+                    field={field}
+                    valueMode={valueMode}
+                    disabled={isReadonly}
+                />
+            );
+        }
+    }
+
+    // Handle struct fields (custom fields mode only)
+    if (fieldDef.type === 'struct' && valueMode === 'native') {
+        if (isList) {
+            return (
+                <CustomFieldListInput
+                    field={field}
+                    disabled={isReadonly}
+                    renderInput={(index, inputField) => (
+                        <StructFormInput
+                            field={inputField}
+                            fieldDef={fieldDef as any}
+                            control={control}
+                            getTranslation={getTranslation}
+                        />
+                    )}
+                    defaultValue={{}}
+                    isFullWidth={true}
+                />
+            );
+        }
+
+        return (
+            <StructFormInput
+                field={field}
+                fieldDef={fieldDef as any}
+                control={control}
+                getTranslation={getTranslation}
+            />
+        );
+    }
+
+    // Handle list fields
+    if (isList) {
+        if (valueMode === 'json-string') {
+            // Use ConfigurableOperationListInput for config args
+            return (
+                <ConfigurableOperationListInput
+                    definition={fieldDef as any}
+                    value={field.value}
+                    onChange={field.onChange}
+                    readOnly={isReadonly}
+                />
+            );
+        } else {
+            // Use CustomFieldListInput for custom fields
+            const getDefaultValue = () => {
+                switch (fieldDef.type) {
+                    case 'string':
+                    case 'localeString':
+                    case 'localeText':
+                        return '';
+                    case 'int':
+                    case 'float':
+                        return 0;
+                    case 'boolean':
+                        return false;
+                    case 'datetime':
+                        return '';
+                    case 'relation':
+                        return '';
+                    default:
+                        return '';
+                }
+            };
+
+            return (
+                <CustomFieldListInput
+                    field={field}
+                    disabled={isReadonly}
+                    renderInput={(index, inputField) => (
+                        <UniversalInputComponent
+                            fieldDef={{ ...fieldDef, list: false }}
+                            field={inputField}
+                            valueMode={valueMode}
+                            disabled={isReadonly}
+                        />
+                    )}
+                    defaultValue={getDefaultValue()}
+                />
+            );
+        }
+    }
+
+    // Fall back to consolidated input component
+    return (
+        <UniversalInputComponent
+            fieldDef={fieldDef}
+            field={field}
+            valueMode={valueMode}
+            disabled={isReadonly}
+        />
+    );
+}

package/src/lib/components/shared/universal-input-components.tsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import { ControllerRenderProps } from 'react-hook-form';
+
+import { AffixedInput } from '../data-input/affixed-input.js';
+import { DateTimeInput } from '../data-input/datetime-input.js';
+import { DefaultRelationInput } from '../data-input/default-relation-input.js';
+import { SelectWithOptions } from '../data-input/select-with-options.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 { UniversalFieldDefinition } from './universal-field-definition.js';
+import { ValueMode, transformValue } from './value-transformers.js';
+
+export interface UniversalInputComponentProps {
+    fieldDef: UniversalFieldDefinition;
+    field: ControllerRenderProps<any, any>;
+    valueMode: ValueMode;
+    disabled?: boolean;
+}
+
+// Component renderer interface for cleaner separation
+interface ComponentRendererProps {
+    fieldDef: UniversalFieldDefinition;
+    field: ControllerRenderProps<any, any>;
+    valueMode: ValueMode;
+    isReadonly: boolean;
+    transformedValue: any;
+    handleChange: (value: any) => void;
+    handleNumericChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleRegularNumericChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    handleTextChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Renders relation input component
+ */
+function renderRelationInput({ fieldDef, field, transformedValue, handleChange, isReadonly }: ComponentRendererProps) {
+    if (fieldDef.type !== 'relation' || !fieldDef.entity) return null;
+    
+    return (
+        <DefaultRelationInput
+            fieldDef={{
+                entity: fieldDef.entity,
+                list: fieldDef.list,
+            } as any}
+            field={{
+                ...field,
+                value: transformedValue,
+                onChange: handleChange,
+            }}
+            disabled={isReadonly}
+        />
+    );
+}
+
+/**
+ * Renders string field with options as select dropdown
+ */
+function renderSelectInput({ fieldDef, valueMode, transformedValue, handleChange, isReadonly, field }: ComponentRendererProps) {
+    if (fieldDef.type !== 'string' || !fieldDef.ui?.options) return null;
+
+    if (valueMode === 'json-string') {
+        return (
+            <Select value={transformedValue || ''} onValueChange={handleChange} disabled={isReadonly}>
+                <SelectTrigger className="bg-background mb-0">
+                    <SelectValue placeholder="Select an option..." />
+                </SelectTrigger>
+                <SelectContent>
+                    {fieldDef.ui.options.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                            {typeof option.label === 'string'
+                                ? option.label
+                                : Array.isArray(option.label)
+                                ? option.label[0]?.value || option.value
+                                : option.value}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        );
+    }
+
+    return (
+        <SelectWithOptions
+            field={{
+                ...field,
+                value: transformedValue,
+                onChange: handleChange,
+            }}
+            options={fieldDef.ui.options as any}
+            disabled={isReadonly}
+            isListField={fieldDef.list}
+        />
+    );
+}
+
+/**
+ * Renders numeric input components (int/float)
+ */
+function renderNumericInput({ fieldDef, valueMode, transformedValue, handleNumericChange, handleRegularNumericChange, isReadonly, field }: ComponentRendererProps) {
+    if (fieldDef.type !== 'int' && fieldDef.type !== 'float') return null;
+
+    const isFloat = fieldDef.type === 'float';
+    const min = fieldDef.ui?.min;
+    const max = fieldDef.ui?.max;
+    const step = fieldDef.ui?.step || (isFloat ? 0.01 : 1);
+    const prefix = fieldDef.ui?.prefix;
+    const suffix = fieldDef.ui?.suffix;
+
+    const shouldUseAffixedInput = prefix || suffix || valueMode === 'json-string';
+
+    if (shouldUseAffixedInput) {
+        const numericValue = transformedValue !== undefined && transformedValue !== '' 
+            ? (typeof transformedValue === 'number' ? transformedValue : parseFloat(transformedValue) || '') 
+            : '';
+
+        return (
+            <AffixedInput
+                type="number"
+                value={numericValue}
+                onChange={handleNumericChange}
+                disabled={isReadonly}
+                min={min}
+                max={max}
+                step={step}
+                prefix={prefix}
+                suffix={suffix}
+                className="bg-background"
+            />
+        );
+    }
+
+    return (
+        <Input
+            type="number"
+            value={transformedValue ?? ''}
+            onChange={handleRegularNumericChange}
+            onBlur={field.onBlur}
+            name={field.name}
+            disabled={isReadonly}
+            min={min}
+            max={max}
+            step={step}
+        />
+    );
+}
+
+/**
+ * Renders boolean input as switch
+ */
+function renderBooleanInput({ fieldDef, valueMode, transformedValue, handleChange, isReadonly }: ComponentRendererProps) {
+    if (fieldDef.type !== 'boolean') return null;
+
+    const boolValue = valueMode === 'json-string' 
+        ? (transformedValue === true || transformedValue === 'true')
+        : transformedValue;
+
+    return (
+        <Switch
+            checked={boolValue}
+            onCheckedChange={handleChange}
+            disabled={isReadonly}
+        />
+    );
+}
+
+/**
+ * Renders datetime input
+ */
+function renderDateTimeInput({ fieldDef, transformedValue, handleChange, isReadonly }: ComponentRendererProps) {
+    if (fieldDef.type !== 'datetime') return null;
+
+    return (
+        <DateTimeInput
+            value={transformedValue}
+            onChange={handleChange}
+            disabled={isReadonly}
+        />
+    );
+}
+
+/**
+ * Renders textarea for specific config args
+ */
+function renderTextareaInput({ fieldDef, valueMode, transformedValue, handleTextareaChange, isReadonly }: ComponentRendererProps) {
+    if (valueMode !== 'json-string' || fieldDef.ui?.component !== 'textarea-form-input') return null;
+
+    return (
+        <Textarea
+            value={transformedValue || ''}
+            onChange={handleTextareaChange}
+            disabled={isReadonly}
+            spellCheck={fieldDef.ui?.spellcheck ?? true}
+            placeholder="Enter text..."
+            rows={4}
+            className="bg-background"
+        />
+    );
+}
+
+/**
+ * Renders default text input
+ */
+function renderTextInput({ valueMode, transformedValue, handleTextChange, isReadonly, field }: ComponentRendererProps) {
+    return (
+        <Input
+            type="text"
+            value={transformedValue ?? ''}
+            onChange={handleTextChange}
+            onBlur={field.onBlur}
+            name={field.name}
+            disabled={isReadonly}
+            placeholder={valueMode === 'json-string' ? "Enter value..." : undefined}
+            className={valueMode === 'json-string' ? "bg-background" : undefined}
+        />
+    );
+}
+
+/**
+ * Consolidated input component for rendering form inputs based on field type
+ * This replaces the duplicate implementations in custom fields and config args
+ */
+export function UniversalInputComponent({
+    fieldDef,
+    field,
+    valueMode,
+    disabled = false,
+}: Readonly<UniversalInputComponentProps>) {
+    const isReadonly = disabled || fieldDef.readonly;
+
+    // Transform the field value for the component
+    const transformedValue = React.useMemo(() => {
+        return valueMode === 'json-string' 
+            ? transformValue(field.value, fieldDef, valueMode, 'parse')
+            : field.value;
+    }, [field.value, fieldDef, valueMode]);
+
+    // Transform onChange handler for the component
+    const handleChange = React.useCallback((newValue: any) => {
+        const serializedValue = valueMode === 'json-string'
+            ? transformValue(newValue, fieldDef, valueMode, 'serialize')
+            : newValue;
+        field.onChange(serializedValue);
+    }, [field.onChange, fieldDef, valueMode]);
+
+    // Pre-define all change handlers at the top level to follow Rules of Hooks
+    const handleNumericChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const val = e.target.valueAsNumber;
+        handleChange(isNaN(val) ? (valueMode === 'json-string' ? '' : undefined) : val);
+    }, [handleChange, valueMode]);
+
+    const handleRegularNumericChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const val = e.target.valueAsNumber;
+        handleChange(isNaN(val) ? undefined : val);
+    }, [handleChange]);
+
+    const handleTextareaChange = React.useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        handleChange(e.target.value);
+    }, [handleChange]);
+
+    const handleTextChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        handleChange(e.target.value);
+    }, [handleChange]);
+
+    // Create props object for all renderers
+    const rendererProps: ComponentRendererProps = {
+        fieldDef,
+        field,
+        valueMode,
+        isReadonly,
+        transformedValue,
+        handleChange,
+        handleNumericChange,
+        handleRegularNumericChange,
+        handleTextareaChange,
+        handleTextChange,
+    };
+
+    // Try each renderer in order, return the first match
+    return (
+        renderRelationInput(rendererProps) ||
+        renderSelectInput(rendererProps) ||
+        renderNumericInput(rendererProps) ||
+        renderBooleanInput(rendererProps) ||
+        renderDateTimeInput(rendererProps) ||
+        renderTextareaInput(rendererProps) ||
+        renderTextInput(rendererProps)
+    );
+}