feat(core): Improve type-safety of custom ui input config

Relates to #414

packages/common/src/shared-types.ts

@@ -109,6 +109,34 @@ export type CustomFieldType = 'string' | 'localeString' | 'int' | 'float' | 'boo
  */
 export type ConfigArgType = 'string' | 'int' | 'float' | 'boolean' | 'datetime' | 'ID';
 
+/**
+ * The ids of the default form input components that ship with the
+ * Admin UI.
+ */
+export type DefaultFormComponentId =
+    | 'boolean-form-input'
+    | 'currency-form-input'
+    | 'date-form-input'
+    | 'facet-value-form-input'
+    | 'number-form-input'
+    | 'select-form-input'
+    | 'text-form-input';
+
+/**
+ * Used to defined the expected arguments for a given default form input component.
+ */
+type DefaultFormConfigHash = {
+    'date-form-input': { min?: string; max?: string; yearRange?: number };
+    'number-form-input': { min?: number; max?: number; step?: number; prefix?: string; suffix?: string };
+    'select-form-input': { options?: Array<{ value: string; label?: string }> };
+    'boolean-form-input': {};
+    'currency-form-input': {};
+    'facet-value-form-input': {};
+    'text-form-input': {};
+};
+
+export type DefaultFormComponentConfig<T extends DefaultFormComponentId> = DefaultFormConfigHash[T];
+
 export type CustomFieldsObject = { [key: string]: any };
 
 /**

packages/core/e2e/shipping-method.e2e-spec.ts

@@ -106,6 +106,7 @@ describe('ShippingMethod resolver', () => {
                     },
                     {
                         ui: {
+                            component: 'number-form-input',
                             suffix: '%',
                         },
                         description: null,

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

@@ -8,9 +8,8 @@ import {
     Maybe,
     StringFieldOption,
 } from '@vendure/common/lib/generated-types';
-import { ConfigArgType, ID } from '@vendure/common/lib/shared-types';
+import { ConfigArgType, DefaultFormComponentConfig, ID } from '@vendure/common/lib/shared-types';
 import { assertNever } from '@vendure/common/lib/shared-utils';
-import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 
 import { RequestContext } from '../api/common/request-context';
 
@@ -39,15 +38,26 @@ import { InjectableStrategy } from './types/injectable-strategy';
  */
 export type LocalizedStringArray = Array<Omit<LocalizedString, '__typename'>>;
 
+export type UiComponentConfig =
+    | ({ component: 'number-form-input' } & DefaultFormComponentConfig<'number-form-input'>)
+    | ({ component: 'date-form-input' } & DefaultFormComponentConfig<'date-form-input'>)
+    | ({ component: 'select-form-input' } & DefaultFormComponentConfig<'select-form-input'>)
+    | ({ component: 'text-form-input' } & DefaultFormComponentConfig<'text-form-input'>)
+    | ({ component: 'boolean-form-input' } & DefaultFormComponentConfig<'boolean-form-input'>)
+    | ({ component: 'currency-form-input' } & DefaultFormComponentConfig<'currency-form-input'>)
+    | ({ component: 'facet-value-form-input' } & DefaultFormComponentConfig<'facet-value-form-input'>)
+    | { component: string; [prop: string]: any };
+
+const d: UiComponentConfig = {
+    component: 'number-form-input',
+};
+
 export interface ConfigArgCommonDef<T extends ConfigArgType> {
     type: T;
     list?: boolean;
     label?: LocalizedStringArray;
     description?: LocalizedStringArray;
-    ui?: {
-        component?: string;
-        [prop: string]: any;
-    };
+    ui?: UiComponentConfig;
 }
 
 export type ConfigArgListDef<

packages/core/src/config/collection/default-collection-filters.ts

@@ -74,6 +74,7 @@ export const variantNameCollectionFilter = new CollectionFilter({
         operator: {
             type: 'string',
             ui: {
+                component: 'select-form-input',
                 options: [
                     { value: 'startsWith' },
                     { value: 'endsWith' },

packages/core/src/config/promotion/actions/facet-values-discount-action.ts

@@ -11,6 +11,7 @@ export const discountOnItemWithFacets = new PromotionItemAction({
         discount: {
             type: 'int',
             ui: {
+                component: 'number-form-input',
                 suffix: '%',
             },
         },

packages/core/src/config/promotion/actions/order-percentage-discount-action.ts

@@ -8,6 +8,7 @@ export const orderPercentageDiscount = new PromotionOrderAction({
         discount: {
             type: 'int',
             ui: {
+                component: 'number-form-input',
                 suffix: '%',
             },
         },

packages/core/src/config/shipping-method/default-shipping-calculator.ts

@@ -13,7 +13,7 @@ export const defaultShippingCalculator = new ShippingCalculator({
         },
         taxRate: {
             type: 'int',
-            ui: { suffix: '%' },
+            ui: { component: 'number-form-input', suffix: '%' },
             label: [{ languageCode: LanguageCode.en, value: 'Tax rate' }],
         },
     },