@vendure/dashboard 3.4.1-master-202508210231 → 3.4.1

package/src/lib/framework/component-registry/display-component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useComponentRegistry } from './component-registry.js';
+
+/**
+ * @description
+ * This component is used to delegate the rendering of a component to the component registry.
+ *
+ * @example
+ * ```ts
+ * <Delegate component="money.display.default" value={100} />
+ * ```
+ *
+ * @returns
+ */
+export function DisplayComponent(
+    props: Readonly<{
+        id: string;
+        value: any;
+    }>,
+): React.ReactNode {
+    const { getDisplayComponent } = useComponentRegistry();
+    const Component = getDisplayComponent(props.id.toString());
+    if (!Component) {
+        throw new Error(`Component with id ${props.id.toString()} not found`);
+    }
+    const { value, ...rest } = props;
+    return <Component value={value} {...rest} />;
+}

package/src/lib/framework/extension-api/display-component-extensions.tsx

@@ -22,20 +22,6 @@ export function getDisplayComponent(id: string): DataDisplayComponent | undefine
     return globalRegistry.get('displayComponents').get(id);
 }
 
-/**
- * @description
- * Gets a display component using the targeting properties.
- * Uses the same key pattern as registration: pageId_blockId_fieldName
- */
-export function getTargetedDisplayComponent(
-    pageId: string,
-    blockId: string,
-    field: string,
-): DataDisplayComponent | undefined {
-    const key = generateDisplayComponentKey(pageId, blockId, field);
-    return globalRegistry.get('displayComponents').get(key);
-}
-
 /**
  * @description
  * Generates a display component key based on the targeting properties.

package/src/lib/framework/extension-api/input-component-extensions.tsx

@@ -1,43 +1,45 @@
 import { CombinationModeInput } from '@/vdb/components/data-input/combination-mode-input.js';
-import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
-import { FacetValueInput } from '@/vdb/components/data-input/facet-value-input.js';
-import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
-import { ProductMultiInput } from '@/vdb/components/data-input/product-multi-selector.js';
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { DataInputComponent } from '../component-registry/component-registry.js';
+import { DefaultRelationInput } from '@/vdb/components/data-input/default-relation-input.js';
+import {
+    CustomerGroupInput,
+    FacetValueInput,
+    MoneyInput,
+    ProductMultiInput,
+    RichTextInput,
+    SelectWithOptions,
+} from '@/vdb/components/data-input/index.js';
+import { PasswordInput } from '@/vdb/components/data-input/password-input.js';
+import { TextareaInput } from '@/vdb/components/data-input/textarea-input.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
-globalRegistry.register('inputComponents', new Map<string, DataInputComponent>());
-
-// Create component functions for built-in components
-const TextInput: DataInputComponent = props => (
-    <Input {...props} onChange={e => props.onChange(e.target.value)} />
-);
-const NumberInput: DataInputComponent = props => (
-    <Input {...props} onChange={e => props.onChange(e.target.valueAsNumber)} type="number" />
-);
-const CheckboxInput: DataInputComponent = props => (
-    <Checkbox
-        {...props}
-        checked={props.value === 'true' || props.value === true}
-        onCheckedChange={value => props.onChange(value)}
-    />
-);
+globalRegistry.register('inputComponents', new Map<string, DashboardFormComponent>());
 
 // Register built-in input components
 const inputComponents = globalRegistry.get('inputComponents');
-inputComponents.set('vendure:moneyInput', MoneyInput);
-inputComponents.set('vendure:textInput', TextInput);
-inputComponents.set('vendure:numberInput', NumberInput);
-inputComponents.set('vendure:dateTimeInput', DateTimeInput);
-inputComponents.set('vendure:checkboxInput', CheckboxInput);
-inputComponents.set('vendure:facetValueInput', FacetValueInput);
-inputComponents.set('vendure:combinationModeInput', CombinationModeInput);
-inputComponents.set('vendure:productMultiInput', ProductMultiInput);
+inputComponents.set('facet-value-input', FacetValueInput);
+inputComponents.set('combination-mode-input', CombinationModeInput);
+inputComponents.set('product-multi-input', ProductMultiInput);
+inputComponents.set('currency-form-input', MoneyInput);
+inputComponents.set('customer-group-form-input', CustomerGroupInput);
+inputComponents.set('facet-value-form-input', FacetValueInput);
+inputComponents.set('json-editor-form-input', TextareaInput);
+inputComponents.set('textarea-form-input', TextareaInput);
+inputComponents.set('html-editor-form-input', RichTextInput);
+inputComponents.set('rich-text-form-input', RichTextInput);
+inputComponents.set('password-form-input', PasswordInput);
+inputComponents.set('product-selector-form-input', DefaultRelationInput);
+inputComponents.set('relation-form-input', DefaultRelationInput);
+inputComponents.set('select-form-input', SelectWithOptions);
+inputComponents.set('product-multi-form-input', ProductMultiInput);
+inputComponents.set('combination-mode-form-input', CombinationModeInput);
 
-export function getInputComponent(id: string): DataInputComponent | undefined {
-    return globalRegistry.get('inputComponents').get(id);
+export function getInputComponent(id: string | undefined): DashboardFormComponent | undefined {
+    if (!id) {
+        return undefined;
+    }
+    const inputComponent = globalRegistry.get('inputComponents').get(id);
+    return inputComponent;
 }
 
 /**
@@ -58,7 +60,7 @@ export function addInputComponent({
     pageId: string;
     blockId: string;
     field: string;
-    component: DataInputComponent;
+    component: DashboardFormComponent;
 }) {
     const inputComponents = globalRegistry.get('inputComponents');
 
@@ -71,3 +73,19 @@ export function addInputComponent({
     }
     inputComponents.set(key, component);
 }
+
+export function addCustomFieldInputComponent({
+    id,
+    component,
+}: {
+    id: string;
+    component: DashboardFormComponent;
+}) {
+    const inputComponents = globalRegistry.get('inputComponents');
+
+    if (inputComponents.has(id)) {
+        // eslint-disable-next-line no-console
+        console.warn(`Input component with key "${id}" is already registered and will be overwritten.`);
+    }
+    inputComponents.set(id, component);
+}

package/src/lib/framework/extension-api/logic/data-table.ts

@@ -4,28 +4,6 @@ import { addBulkAction, addListQueryDocument } from '../../data-table/data-table
 import { addDisplayComponent } from '../display-component-extensions.js';
 import { DashboardDataTableExtensionDefinition } from '../types/index.js';
 
-/**
- * @description
- * Generates a data table display component key based on the pageId and column name.
- * Uses the pattern: pageId_columnName
- */
-export function generateDataTableDisplayComponentKey(pageId: string, column: string): string {
-    return `${pageId}_${column}`;
-}
-
-/**
- * @description
- * Adds a display component for a specific column in a data table.
- */
-export function addDataTableDisplayComponent(
-    pageId: string,
-    column: string,
-    component: React.ComponentType<{ value: any; [key: string]: any }>,
-) {
-    const key = generateDataTableDisplayComponentKey(pageId, column);
-    addDisplayComponent({ pageId, blockId: 'list-table', field: column, component });
-}
-
 export function registerDataTableExtensions(dataTables?: DashboardDataTableExtensionDefinition[]) {
     if (dataTables) {
         for (const dataTable of dataTables) {
@@ -48,11 +26,10 @@ export function registerDataTableExtensions(dataTables?: DashboardDataTableExten
             }
             if (dataTable.displayComponents?.length) {
                 for (const displayComponent of dataTable.displayComponents) {
-                    addDataTableDisplayComponent(
-                        dataTable.pageId,
-                        displayComponent.column,
-                        displayComponent.component,
-                    );
+                    const blockId = dataTable.blockId ?? 'list-table';
+                    const { pageId } = dataTable;
+                    const { column, component } = displayComponent;
+                    addDisplayComponent({ pageId, blockId, field: column, component });
                 }
             }
         }

package/src/lib/framework/extension-api/logic/form-components.ts

@@ -1,4 +1,5 @@
-import { addCustomFormComponent } from '../../form-engine/custom-form-component-extensions.js';
+import { addCustomFieldInputComponent } from '@/vdb/framework/extension-api/input-component-extensions.js';
+
 import { DashboardCustomFormComponents } from '../types/form-components.js';
 
 export function registerFormComponentExtensions(customFormComponents?: DashboardCustomFormComponents) {
@@ -6,7 +7,7 @@ export function registerFormComponentExtensions(customFormComponents?: Dashboard
         // Handle custom field components
         if (customFormComponents.customFields) {
             for (const component of customFormComponents.customFields) {
-                addCustomFormComponent(component);
+                addCustomFieldInputComponent(component);
             }
         }
     }

package/src/lib/framework/extension-api/types/detail-forms.ts

@@ -1,7 +1,4 @@
-import {
-    DataDisplayComponent,
-    DataInputComponent,
-} from '@/vdb/framework/component-registry/component-registry.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { DocumentNode } from 'graphql';
 
 /**
@@ -29,35 +26,7 @@ export interface DashboardDetailFormInputComponent {
      * The React component that will be rendered as the input.
      * It should accept `value`, `onChange`, and other standard input props.
      */
-    component: DataInputComponent;
-}
-
-/**
- * @description
- * Allows you to define custom display components for specific fields in detail forms.
- * The pageId is already defined in the detail form extension, so only the blockId and field are needed.
- *
- * @docsCategory extensions
- * @docsPage DetailForms
- * @since 3.4.0
- */
-export interface DashboardDetailFormDisplayComponent {
-    /**
-     * @description
-     * The ID of the block where this display component should be used.
-     */
-    blockId: string;
-    /**
-     * @description
-     * The name of the field where this display component should be used.
-     */
-    field: string;
-    /**
-     * @description
-     * The React component that will be rendered as the display.
-     * It should accept `value` and other standard display props.
-     */
-    component: DataDisplayComponent;
+    component: DashboardFormComponent;
 }
 
 /**
@@ -86,9 +55,4 @@ export interface DashboardDetailFormExtensionDefinition {
      * Custom input components for specific fields in the detail form.
      */
     inputs?: DashboardDetailFormInputComponent[];
-    /**
-     * @description
-     * Custom display components for specific fields in the detail form.
-     */
-    displays?: DashboardDetailFormDisplayComponent[];
 }

package/src/lib/framework/extension-api/types/form-components.ts

@@ -1,6 +1,4 @@
-import type React from 'react';
-
-import { CustomFormComponentInputProps } from '../../form-engine/custom-form-component.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 
 /**
  * @description
@@ -21,7 +19,7 @@ export interface DashboardCustomFormComponent {
      * @description
      * The React component that will be rendered as the custom form input.
      */
-    component: React.FunctionComponent<CustomFormComponentInputProps>;
+    component: DashboardFormComponent;
 }
 
 /**

package/src/lib/framework/form-engine/custom-form-component-extensions.ts

@@ -1,32 +1,9 @@
 import { DocumentNode } from 'graphql';
 
-import { DashboardCustomFormComponent } from '../extension-api/extension-api-types.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
-import { CustomFormComponentInputProps } from './custom-form-component.js';
-
-globalRegistry.register(
-    'customFormComponents',
-    new Map<string, React.FunctionComponent<CustomFormComponentInputProps>>(),
-);
-
 globalRegistry.register('detailQueryDocumentRegistry', new Map<string, DocumentNode[]>());
 
-export function getCustomFormComponent(
-    id: string,
-): React.FunctionComponent<CustomFormComponentInputProps> | undefined {
-    return globalRegistry.get('customFormComponents').get(id);
-}
-
-export function addCustomFormComponent({ id, component }: DashboardCustomFormComponent) {
-    const customFormComponents = globalRegistry.get('customFormComponents');
-    if (customFormComponents.has(id)) {
-        // eslint-disable-next-line no-console
-        console.warn(`Custom form component with id "${id}" is already registered and will be overwritten.`);
-    }
-    customFormComponents.set(id, component);
-}
-
 export function getDetailQueryDocuments(pageId: string): DocumentNode[] {
     return globalRegistry.get('detailQueryDocumentRegistry').get(pageId) || [];
 }

package/src/lib/framework/form-engine/custom-form-component.tsx

@@ -1,33 +1,16 @@
-import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
-import {
-    ControllerFieldState,
-    ControllerRenderProps,
-    FieldPath,
-    FieldValues,
-    UseFormStateReturn,
-} from 'react-hook-form';
-import { getCustomFormComponent } from './custom-form-component-extensions.js';
+import { getInputComponent } from '@/vdb/framework/extension-api/input-component-extensions.js';
 
-export interface CustomFormComponentProps {
-    fieldProps: CustomFormComponentInputProps;
-    fieldDef: Pick<CustomFieldConfig, 'ui' | 'type' | 'name'>;
-}
-
-export interface CustomFormComponentInputProps<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-    field: ControllerRenderProps<TFieldValues, TName>;
-    fieldState: ControllerFieldState;
-    formState: UseFormStateReturn<TFieldValues>;
-}
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 
-export function CustomFormComponent({ fieldDef, fieldProps }: CustomFormComponentProps) {
-    const Component = getCustomFormComponent(fieldDef.ui?.component);
+export function CustomFormComponent(props: DashboardFormComponentProps) {
+    if (!props.fieldDef) {
+        return null;
+    }
+    const Component = getInputComponent(props.fieldDef.ui?.component);
 
     if (!Component) {
         return null;
     }
 
-    return <Component {...fieldProps} />;
+    return <Component {...props} />;
 }

package/src/lib/framework/form-engine/default-input-for-type.tsx

@@ -0,0 +1,35 @@
+import { BooleanInput } from '@/vdb/components/data-input/boolean-input.js';
+import { DefaultRelationInput } from '@/vdb/components/data-input/default-relation-input.js';
+import { DateTimeInput, SelectWithOptions } from '@/vdb/components/data-input/index.js';
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
+import { TextInput } from '@/vdb/components/data-input/text-input.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isStringFieldWithOptions } from '@/vdb/framework/form-engine/utils.js';
+
+/**
+ * Consolidated input component for rendering form inputs based on field type
+ * This replaces the duplicate implementations in custom fields and config args
+ */
+export function DefaultInputForType({ fieldDef, ...fieldProps }: Readonly<DashboardFormComponentProps>) {
+    const type = fieldDef?.type;
+    switch (type) {
+        case 'int':
+        case 'float':
+            return <NumberInput {...fieldProps} fieldDef={fieldDef} />;
+        case 'boolean':
+            return <BooleanInput {...fieldProps} fieldDef={fieldDef} />;
+        case 'datetime':
+            return <DateTimeInput {...fieldProps} fieldDef={fieldDef} />;
+        case 'relation':
+            return <DefaultRelationInput {...fieldProps} fieldDef={fieldDef} />;
+        case 'string': {
+            if (fieldDef && isStringFieldWithOptions(fieldDef)) {
+                return <SelectWithOptions {...fieldProps} fieldDef={fieldDef} />;
+            } else {
+                return <TextInput {...fieldProps} fieldDef={fieldDef} />;
+            }
+        }
+        default:
+            return <TextInput {...fieldProps} fieldDef={fieldDef} />;
+    }
+}

package/src/lib/framework/form-engine/form-control-adapter.tsx

@@ -0,0 +1,192 @@
+import { JSX, useMemo } from 'react';
+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 { ConfigurableOperationListInput } from '../../components/data-input/configurable-operation-list-input.js';
+
+import { getInputComponent } from '@/vdb/framework/extension-api/input-component-extensions.js';
+import {
+    ConfigurableFieldDef,
+    DashboardFormComponent,
+} from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isCustomFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+import { DefaultInputForType } from './default-input-for-type.js';
+import { transformValue, ValueMode } from './value-transformers.js';
+
+export interface FormControlAdapterProps {
+    fieldDef: ConfigurableFieldDef;
+    field: ControllerRenderProps<any, any>;
+    valueMode: ValueMode;
+}
+
+/**
+ * Gets the default value for list inputs based on field type
+ */
+function getDefaultValueForType(fieldType: string): any {
+    switch (fieldType) {
+        case 'string':
+        case 'localeString':
+        case 'localeText':
+            return '';
+        case 'int':
+        case 'float':
+            return 0;
+        case 'boolean':
+            return false;
+        default:
+            return '';
+    }
+}
+
+/**
+ * Validates if a custom component is correctly configured for list fields
+ */
+function validateCustomComponent(
+    CustomComponent: any,
+    componentId: string,
+    fieldName: string,
+    isList: boolean,
+): void {
+    if (!CustomComponent.metadata?.isListInput || CustomComponent.metadata.isListInput === 'dynamic') {
+        return;
+    }
+
+    const isConfiguredForList = CustomComponent.metadata.isListInput === true;
+    if (isConfiguredForList !== isList) {
+        // eslint-disable-next-line no-console
+        console.warn([
+            `Custom component ${componentId} is not correctly configured for the ${fieldName} field:`,
+            `The component ${isConfiguredForList ? 'is' : 'is not'} configured as a list input, but the field ${isList ? 'is' : 'is not'} a list field.`,
+        ]);
+    }
+}
+
+/**
+ * Determines if a custom component can be used for the given field configuration
+ */
+function canUseCustomComponent(
+    CustomComponent: DashboardFormComponent | undefined,
+    isList: boolean,
+): CustomComponent is DashboardFormComponent {
+    if (!CustomComponent) return false;
+
+    const listInputMode = CustomComponent.metadata?.isListInput;
+
+    // Dynamic components can handle both list and non-list
+    if (listInputMode === 'dynamic') return true;
+
+    // Exact match: both are list or both are non-list
+    return (isList && listInputMode === true) || (!isList && listInputMode !== true);
+}
+
+/**
+ * Renders struct field inputs
+ */
+function renderStructField(
+    fieldDef: ConfigurableFieldDef,
+    field: ControllerRenderProps<any, any>,
+    fieldWithTransform: ControllerRenderProps<any, any>,
+    isList: boolean,
+    isReadonly: boolean,
+): JSX.Element {
+    if (isList) {
+        return (
+            <CustomFieldListInput
+                {...field}
+                disabled={isReadonly}
+                renderInput={(index, inputField) => (
+                    <StructFormInput {...fieldWithTransform} fieldDef={fieldDef} />
+                )}
+                defaultValue={{}}
+            />
+        );
+    }
+    return <StructFormInput {...fieldWithTransform} fieldDef={fieldDef} />;
+}
+
+/**
+ * Renders list field inputs
+ */
+function renderListField(
+    fieldDef: ConfigurableFieldDef,
+    field: ControllerRenderProps<any, any>,
+    fieldWithTransform: ControllerRenderProps<any, any>,
+    valueMode: ValueMode,
+    isReadonly: boolean,
+): JSX.Element {
+    if (valueMode === 'json-string') {
+        return <ConfigurableOperationListInput {...fieldWithTransform} fieldDef={fieldDef} />;
+    }
+
+    if (fieldDef.type === 'relation') {
+        return <DefaultInputForType {...fieldWithTransform} fieldDef={fieldDef} />;
+    }
+
+    if (fieldDef.type === 'string') {
+        return <DefaultInputForType {...fieldWithTransform} fieldDef={fieldDef} />;
+    }
+
+    return (
+        <CustomFieldListInput
+            {...field}
+            disabled={isReadonly}
+            renderInput={(index, inputField) => <DefaultInputForType {...inputField} fieldDef={fieldDef} />}
+            defaultValue={getDefaultValueForType(fieldDef.type)}
+        />
+    );
+}
+
+/**
+ * This is a wrapper component around the final DashboardFormComponent instances.
+ *
+ * It is responsible for ensuring the correct props get passed to the final component,
+ * and for handling differences between form control use between:
+ *
+ * - Auto-generated forms
+ * - Custom field forms
+ * - Configurable operation forms
+ */
+export function FormControlAdapter({ fieldDef, field, valueMode }: Readonly<FormControlAdapterProps>) {
+    const isList = fieldDef.list ?? false;
+    const isReadonly = isCustomFieldConfig(fieldDef) ? fieldDef.readonly === true : false;
+    const componentId = fieldDef.ui?.component as string | undefined;
+
+    const fieldWithTransform = useMemo(() => {
+        const fieldOnChange = field.onChange.bind(field);
+        const transformedField: FormControlAdapterProps['field'] = {
+            ...field,
+            value: transformValue(field.value, fieldDef, valueMode, 'parse'),
+            onChange: (newValue: any) => {
+                const serializedValue = transformValue(newValue, fieldDef, valueMode, 'serialize');
+                fieldOnChange(serializedValue);
+            },
+        };
+        return transformedField;
+    }, [field.name, field.value, field.onChange, fieldDef, valueMode]);
+
+    const CustomComponent = getInputComponent(componentId);
+
+    // Try to use custom component if available and compatible
+    if (canUseCustomComponent(CustomComponent, isList)) {
+        return <CustomComponent {...fieldWithTransform} fieldDef={fieldDef} />;
+    }
+
+    // Validate custom component configuration for debugging
+    if (CustomComponent) {
+        validateCustomComponent(CustomComponent, componentId!, fieldDef.name, isList);
+    }
+
+    // Handle struct fields (custom fields mode only)
+    if (fieldDef.type === 'struct' && valueMode === 'native') {
+        return renderStructField(fieldDef, field, fieldWithTransform, isList, isReadonly);
+    }
+
+    // Handle list fields
+    if (isList) {
+        return renderListField(fieldDef, field, fieldWithTransform, valueMode, isReadonly);
+    }
+
+    // Default case: non-list, non-struct fields
+    return <DefaultInputForType {...fieldWithTransform} fieldDef={fieldDef} />;
+}