Merge pull request #18 from open-formulieren/feature/2-plate-iban

✨ [#2] Add `licenseplate` and `iban` component

src/formio/components/iban.ts

@@ -0,0 +1,21 @@
+import {InputComponentSchema, MultipleCapable} from '..';
+
+type Validator = 'required';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type IbanInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+export interface BaseIbanComponentSchema extends Omit<IbanInputSchema, 'hideLabel' | 'disabled'> {
+  type: 'iban';
+  validateOn: 'blur';
+}
+
+/**
+ * @group Form.io components
+ * @category Concrete types
+ */
+export type IbanComponentSchema = MultipleCapable<BaseIbanComponentSchema>;

src/formio/components/index.ts

@@ -6,6 +6,8 @@ export * from './datetime';
 export * from './time';
 export * from './phonenumber';
 export * from './postcode';
+export * from './iban';
+export * from './licenseplate';
 export * from './number';
 export * from './file';
 

src/formio/components/licenseplate.ts

@@ -0,0 +1,34 @@
+import {InputComponentSchema, MultipleCapable} from '..';
+
+type Validator = 'required' | 'pattern';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type LicensePlateInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+export interface LicensePlateProperties {
+  type: 'licenseplate';
+  validate: {
+    pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$';
+  };
+  validateOn: 'blur';
+}
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+export type BaseLicensePlateComponentSchema = Omit<
+  LicensePlateInputSchema,
+  'hideLabel' | 'placeholder'
+> &
+  LicensePlateProperties;
+
+/**
+ * @group Form.io components
+ * @category Concrete types
+ */
+export type LicensePlateComponentSchema = MultipleCapable<BaseLicensePlateComponentSchema>;

src/formio/index.ts

@@ -4,6 +4,8 @@ import {
   DateTimeComponentSchema,
   EmailComponentSchema,
   FileComponentSchema,
+  IbanComponentSchema,
+  LicensePlateComponentSchema,
   NumberComponentSchema,
   PhoneNumberComponentSchema,
   PostcodeComponentSchema,
@@ -45,6 +47,9 @@ export type AnyComponentSchema =
   | PostcodeComponentSchema
   | FileComponentSchema
   | NumberComponentSchema
+  // special types
+  | IbanComponentSchema
+  | LicensePlateComponentSchema
   // layout
   | ContentComponentSchema;
 

test-d/formio/components/iban.test-d.ts

@@ -0,0 +1,129 @@
+import {expectAssignable, expectNotAssignable} from 'tsd';
+
+import {IbanComponentSchema} from '../../../lib';
+
+// minimal textfield component schema
+expectAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'blur',
+});
+
+
+// multiple false and appropriate default value type
+expectAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'blur',
+  multiple: false,
+  defaultValue: '',
+});
+
+// multiple true and appropriate default value type
+expectAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'blur',
+  multiple: true,
+  defaultValue: [''],
+});
+
+// full, correct schema
+expectAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  // basic tab
+  label: 'Some IBAN',
+  key: 'someIban',
+  description: '',
+  tooltip: 'A tooltip',
+  showInSummary: true,
+  showInEmail: false,
+  showInPDF: true,
+  multiple: false,
+  hidden: false,
+  clearOnHide: true,
+  isSensitiveData: true,
+  defaultValue: '',
+  // Advanced tab
+  conditional: {
+    show: undefined,
+    when: '',
+    eq: '',
+  },
+  // Validation tab
+  validate: {
+    required: false,
+    plugins: [],
+  },
+  translatedErrors: {nl: {required: 'Geef IBAN.'}},
+  errors: {required: 'Geef email.'},
+  // registration tab
+  registration: {
+    attribute: '',
+  },
+  // translations tab in builder form
+  openForms: {
+    translations: {
+      nl: {label: 'foo'},
+    },
+  },
+  // fixed but not editable
+  validateOn: 'blur',
+});
+
+// validateOn not `blur`
+expectNotAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'change',
+});
+
+// missing validateOn
+expectNotAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+});
+
+// invalid, multiple true and non-array default value
+expectNotAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'blur',
+  multiple: true,
+  defaultValue: '',
+});
+
+// invalid, multiple false and array default value
+expectNotAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'blur',
+  multiple: false,
+  defaultValue: [''],
+});
+
+// invalid, multiple true and wrong default value in array element
+expectNotAssignable<IbanComponentSchema>({
+  id: 'yejak',
+  type: 'iban',
+  key: 'someIban',
+  label: 'Some IBAN',
+  validateOn: 'blur',
+  multiple: true,
+  defaultValue: [0],
+});