refactor(admin-ui): Refactor custom field control types

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/code-editor-form-input/json-editor-form-input.component.ts

@@ -49,13 +49,16 @@ export class JsonEditorFormInputComponent implements FormInputComponent, AfterVi
     formControl: FormControl;
     config: DefaultFormComponentConfig<'json-editor-form-input'>;
     isValid = true;
-    height: DefaultFormComponentConfig<'json-editor-form-input'>['height'];
     errorMessage: string | undefined;
     @ViewChild('editor') private editorElementRef: ElementRef<HTMLDivElement>;
     jar: CodeJar;
 
     constructor(private changeDetector: ChangeDetectorRef) {}
 
+    get height() {
+        return this.config.ui?.height || this.config.height;
+    }
+
     ngOnInit() {
         this.formControl.addValidators(jsonValidator());
     }

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/date-form-input/date-form-input.component.html

@@ -1,8 +1,8 @@
 <vdr-datetime-picker
     [formControl]="formControl"
-    [min]="config?.min"
-    [max]="config?.max"
-    [yearRange]="config?.yearRange"
+    [min]="min"
+    [max]="max"
+    [yearRange]="yearRange"
     [readonly]="readonly"
 >
 </vdr-datetime-picker>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/date-form-input/date-form-input.component.ts

@@ -22,4 +22,13 @@ export class DateFormInputComponent implements FormInputComponent {
     @Input() readonly: boolean;
     formControl: FormControl;
     config: DefaultFormComponentConfig<'date-form-input'>;
+    get min() {
+        return this.config.ui?.min || this.config.min;
+    }
+    get max() {
+        return this.config.ui?.max || this.config.max;
+    }
+    get yearRange() {
+        return this.config.ui?.yearRange || this.config.yearRange;
+    }
 }

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/number-form-input/number-form-input.component.html

@@ -1,10 +1,13 @@
-<vdr-affixed-input [suffix]="config?.suffix" [prefix]="config?.prefix">
+<vdr-affixed-input
+    [suffix]="suffix"
+    [prefix]="prefix"
+>
     <input
         type="number"
         [readonly]="readonly"
-        [min]="config?.min"
-        [max]="config?.max"
-        [step]="config?.step"
+        [min]="min"
+        [max]="max"
+        [step]="step"
         [formControl]="formControl"
     />
 </vdr-affixed-input>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/number-form-input/number-form-input.component.ts

@@ -22,4 +22,20 @@ export class NumberFormInputComponent implements FormInputComponent {
     @Input() readonly: boolean;
     formControl: FormControl;
     config: DefaultFormComponentConfig<'number-form-input'>;
+
+    get prefix() {
+        return this.config.ui?.prefix || this.config.prefix;
+    }
+    get suffix() {
+        return this.config.ui?.suffix || this.config.suffix;
+    }
+    get min() {
+        return this.config.ui?.min || this.config.min;
+    }
+    get max() {
+        return this.config.ui?.max || this.config.max;
+    }
+    get step() {
+        return this.config.ui?.step || this.config.step;
+    }
 }

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.html

@@ -1,6 +1,6 @@
 <select clrSelect [formControl]="formControl" [vdrDisabled]="readonly">
     <option *ngIf="config.nullable" [ngValue]="null"></option>
-    <option *ngFor="let option of config.options" [value]="option.value">
+    <option *ngFor="let option of options" [value]="option.value">
         {{ (option | customFieldLabel) || option.label || option.value }}
     </option>
 </select>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.ts

@@ -24,4 +24,8 @@ export class SelectFormInputComponent implements FormInputComponent {
     @Input() readonly: boolean;
     formControl: FormControl;
     config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment;
+
+    get options() {
+        return this.config.ui?.options || this.config.options;
+    }
 }

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/text-form-input/text-form-input.component.html

@@ -1,5 +1,6 @@
-<input
-    type="text"
-    [readonly]="readonly"
-    [formControl]="formControl"
-/>
+<vdr-affixed-input
+    [suffix]="suffix"
+    [prefix]="prefix"
+>
+    <input type="text" [readonly]="readonly" [formControl]="formControl" />
+</vdr-affixed-input>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/text-form-input/text-form-input.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 
 import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
 
@@ -21,5 +21,13 @@ export class TextFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId = 'text-form-input';
     readonly: boolean;
     formControl: FormControl;
-    config: InputComponentConfig;
+    config: DefaultFormComponentConfig<'text-form-input'>;
+
+    get prefix() {
+        return this.config.ui?.prefix || this.config.prefix;
+    }
+
+    get suffix() {
+        return this.config.ui?.suffix || this.config.suffix;
+    }
 }

packages/common/src/shared-types.ts

@@ -147,7 +147,7 @@ export type DefaultFormComponentId =
 
 /**
  * @description
- * Used to defined the expected arguments for a given default form input component.
+ * Used to define the expected arguments for a given default form input component.
  *
  * @docsCategory ConfigurableOperationDef
  */
@@ -166,33 +166,30 @@ type DefaultFormConfigHash = {
     'select-form-input': {
         options?: Array<{ value: string; label?: Array<Omit<LocalizedString, '__typename'>> }>;
     };
-    'text-form-input': {};
+    'text-form-input': { prefix?: string; suffix?: string };
     'textarea-form-input': {
         spellcheck?: boolean;
     };
 };
 
-export type DefaultFormComponentConfig<T extends DefaultFormComponentId> = DefaultFormConfigHash[T];
+export type DefaultFormComponentUiConfig<T extends DefaultFormComponentId | string> =
+    T extends DefaultFormComponentId ? DefaultFormConfigHash[T] : any;
 
-export type UiComponentConfig = (
-    | ({ component: 'boolean-form-input' } & DefaultFormComponentConfig<'boolean-form-input'>)
-    | ({ component: 'currency-form-input' } & DefaultFormComponentConfig<'currency-form-input'>)
-    | ({ component: 'customer-group-form-input' } & DefaultFormComponentConfig<'customer-group-form-input'>)
-    | ({ component: 'date-form-input' } & DefaultFormComponentConfig<'date-form-input'>)
-    | ({ component: 'facet-value-form-input' } & DefaultFormComponentConfig<'facet-value-form-input'>)
-    | ({ component: 'json-editor-form-input' } & DefaultFormComponentConfig<'json-editor-form-input'>)
-    | ({ component: 'number-form-input' } & DefaultFormComponentConfig<'number-form-input'>)
-    | ({ component: 'password-form-input' } & DefaultFormComponentConfig<'password-form-input'>)
-    | ({
-          component: 'product-selector-form-input';
-      } & DefaultFormComponentConfig<'product-selector-form-input'>)
-    | ({ component: 'relation-form-input' } & DefaultFormComponentConfig<'relation-form-input'>)
-    | ({ component: 'rich-text-form-input' } & DefaultFormComponentConfig<'rich-text-form-input'>)
-    | ({ component: 'select-form-input' } & DefaultFormComponentConfig<'select-form-input'>)
-    | ({ component: 'text-form-input' } & DefaultFormComponentConfig<'text-form-input'>)
-    | ({ component: 'textarea-form-input' } & DefaultFormComponentConfig<'textarea-form-input'>)
-    | { component: string; [prop: string]: any }
-) & { tab?: string };
+export type DefaultFormComponentConfig<T extends DefaultFormComponentId | string> =
+    DefaultFormComponentUiConfig<T> & {
+        ui?: DefaultFormComponentUiConfig<T>;
+    };
+
+export type UiComponentConfig<T extends DefaultFormComponentId | string> = T extends DefaultFormComponentId
+    ? {
+          component: T;
+          tab?: string;
+      } & DefaultFormConfigHash[T]
+    : {
+          component: string;
+          tab?: string;
+          [prop: string]: any;
+      };
 
 export type CustomFieldsObject = { [key: string]: any };
 

packages/core/src/common/configurable-operation.ts

@@ -49,7 +49,7 @@ export interface ConfigArgCommonDef<T extends ConfigArgType> {
     list?: boolean;
     label?: LocalizedStringArray;
     description?: LocalizedStringArray;
-    ui?: UiComponentConfig;
+    ui?: UiComponentConfig<string>;
 }
 
 export type ConfigArgListDef<

packages/core/src/config/custom-field/custom-field-types.ts

@@ -13,6 +13,7 @@ import {
 import {
     CustomFieldsObject,
     CustomFieldType,
+    DefaultFormComponentId,
     Type,
     UiComponentConfig,
 } from '@vendure/common/lib/shared-types';
@@ -40,7 +41,7 @@ export type BaseTypedCustomFieldConfig<T extends CustomFieldType, C extends Cust
      */
     public?: boolean;
     nullable?: boolean;
-    ui?: UiComponentConfig;
+    ui?: UiComponentConfig<DefaultFormComponentId | string>;
 };
 
 /**