From b12577cb02e3b438f067365e9f60a28928d8ed07 Mon Sep 17 00:00:00 2001 From: Viicos <65306057+Viicos@users.noreply.github.com> Date: Thu, 26 Oct 2023 16:22:54 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20[#2]=20Add=20`licenseplate`=20c?= =?UTF-8?q?omponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/formio/components/index.ts | 1 + src/formio/components/licenseplate.ts | 35 ++++ src/formio/index.ts | 3 + .../formio/components/licenseplate.test-d.ts | 179 ++++++++++++++++++ 4 files changed, 218 insertions(+) create mode 100644 src/formio/components/licenseplate.ts create mode 100644 test-d/formio/components/licenseplate.test-d.ts diff --git a/src/formio/components/index.ts b/src/formio/components/index.ts index 54aa360..8d02311 100644 --- a/src/formio/components/index.ts +++ b/src/formio/components/index.ts @@ -6,6 +6,7 @@ export * from './datetime'; export * from './time'; export * from './phonenumber'; export * from './postcode'; +export * from './licenseplate'; export * from './number'; export * from './file'; diff --git a/src/formio/components/licenseplate.ts b/src/formio/components/licenseplate.ts new file mode 100644 index 0000000..f040119 --- /dev/null +++ b/src/formio/components/licenseplate.ts @@ -0,0 +1,35 @@ +import {InputComponentSchema, MultipleCapable} from '..'; + +type Validator = 'required'; +type TranslatableKeys = 'label' | 'description' | 'tooltip'; + +export type LicensePlateInputSchema = InputComponentSchema; + +/** + * @group Form.io components + * @category Base types + */ +export interface LicensePlateProperties { + 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 & { + type: 'licenseplate'; + }; + +/** + * @group Form.io components + * @category Concrete types + */ +export type LicensePlateComponentSchema = MultipleCapable; diff --git a/src/formio/index.ts b/src/formio/index.ts index a7e6e6a..82a9a7f 100644 --- a/src/formio/index.ts +++ b/src/formio/index.ts @@ -4,6 +4,7 @@ import { DateTimeComponentSchema, EmailComponentSchema, FileComponentSchema, + LicensePlateComponentSchema, NumberComponentSchema, PhoneNumberComponentSchema, PostcodeComponentSchema, @@ -45,6 +46,8 @@ export type AnyComponentSchema = | PostcodeComponentSchema | FileComponentSchema | NumberComponentSchema + // special types + | LicensePlateComponentSchema // layout | ContentComponentSchema; diff --git a/test-d/formio/components/licenseplate.test-d.ts b/test-d/formio/components/licenseplate.test-d.ts new file mode 100644 index 0000000..5d438eb --- /dev/null +++ b/test-d/formio/components/licenseplate.test-d.ts @@ -0,0 +1,179 @@ +import {expectAssignable, expectNotAssignable} from 'tsd'; + +import {LicensePlateComponentSchema} from '../../../lib/'; + +// minimal postcode component schema +expectAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', +}); + +// multiple false and appropriate default value type +expectAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', + multiple: false, + defaultValue: 'AA-123-AA', +}); + +// multiple true and appropriate default value type +expectAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', + multiple: true, + defaultValue: ['AA-123-AA'], +}); + +// full, correct schema +expectAssignable({ + id: 'yejak', + type: 'licenseplate', + validateOn: 'blur', + // basic tab in builder form + label: 'Some input', + key: 'someInput', + description: 'A description', + tooltip: 'A tooltip', + showInSummary: true, + showInEmail: false, + showInPDF: true, + multiple: false, + hidden: false, + clearOnHide: true, + isSensitiveData: true, + defaultValue: '', + disabled: false, + // advanced tab in builder form + conditional: { + show: undefined, + when: undefined, + eq: undefined, + }, + // validation tab in builder form + validate: { + required: false, + plugins: [], + // FIXED/constant, can't be edited + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + translatedErrors: { + nl: { + required: 'Je moet een waarde opgeven!!!', + }, + }, + errors: { + // translatedErrors is converted into errors by the backend + required: 'Je moet een waarde opgeven!!!', + }, + // registration tab in builder form + registration: { + attribute: '', + }, + // translations tab in builder form + openForms: { + translations: { + nl: { + label: 'foo', + description: 'bar', + }, + }, + }, +}); + +// different component type +expectNotAssignable({ + id: 'yejak', + type: 'textfield', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', +} as const); + +// using unsupported properties +expectNotAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', + placeholder: 'no placeholder', +} as const); + +// incorrect, invalid validator key +expectNotAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + maxLength: 7, + }, + validateOn: 'blur', +} as const); + +// invalid, multiple true and non-array default value +expectNotAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', + multiple: true, + defaultValue: '', +} as const); + +// invalid, multiple false and array default value +expectNotAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', + multiple: false, + defaultValue: [''], +} as const); + +// invalid, multiple true and wrong default value in array element +expectNotAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, + validateOn: 'blur', + multiple: true, + defaultValue: [123], +} as const); From e9103cf458e78bc7e28075cd9da3c748c6fb3227 Mon Sep 17 00:00:00 2001 From: Viicos <65306057+Viicos@users.noreply.github.com> Date: Thu, 26 Oct 2023 16:26:31 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20[#2]=20Add=20`iban`=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/formio/components/iban.ts | 21 +++++ src/formio/components/index.ts | 1 + src/formio/index.ts | 2 + test-d/formio/components/iban.test-d.ts | 115 ++++++++++++++++++++++++ 4 files changed, 139 insertions(+) create mode 100644 src/formio/components/iban.ts create mode 100644 test-d/formio/components/iban.test-d.ts diff --git a/src/formio/components/iban.ts b/src/formio/components/iban.ts new file mode 100644 index 0000000..f7f84ef --- /dev/null +++ b/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; + +/** + * @group Form.io components + * @category Base types + */ +export interface BaseIbanComponentSchema extends Omit { + type: 'iban'; + validateOn?: 'blur'; +} + +/** + * @group Form.io components + * @category Concrete types + */ +export type IbanComponentSchema = MultipleCapable; diff --git a/src/formio/components/index.ts b/src/formio/components/index.ts index 8d02311..dd0f9f6 100644 --- a/src/formio/components/index.ts +++ b/src/formio/components/index.ts @@ -6,6 +6,7 @@ export * from './datetime'; export * from './time'; export * from './phonenumber'; export * from './postcode'; +export * from './iban'; export * from './licenseplate'; export * from './number'; export * from './file'; diff --git a/src/formio/index.ts b/src/formio/index.ts index 82a9a7f..132618a 100644 --- a/src/formio/index.ts +++ b/src/formio/index.ts @@ -4,6 +4,7 @@ import { DateTimeComponentSchema, EmailComponentSchema, FileComponentSchema, + IbanComponentSchema, LicensePlateComponentSchema, NumberComponentSchema, PhoneNumberComponentSchema, @@ -47,6 +48,7 @@ export type AnyComponentSchema = | FileComponentSchema | NumberComponentSchema // special types + | IbanComponentSchema | LicensePlateComponentSchema // layout | ContentComponentSchema; diff --git a/test-d/formio/components/iban.test-d.ts b/test-d/formio/components/iban.test-d.ts new file mode 100644 index 0000000..dd965cd --- /dev/null +++ b/test-d/formio/components/iban.test-d.ts @@ -0,0 +1,115 @@ +import {expectAssignable, expectNotAssignable} from 'tsd'; + +import {IbanComponentSchema} from '../../../lib'; + +// minimal textfield component schema +expectAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', +}); + + +// multiple false and appropriate default value type +expectAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', + multiple: false, + defaultValue: '', +}); + +// multiple true and appropriate default value type +expectAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', + multiple: true, + defaultValue: [''], +}); + +// full, correct schema +expectAssignable({ + 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 email.'}}, + 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({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', + validateOn: 'change', +}); + +// invalid, multiple true and non-array default value +expectNotAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', + multiple: true, + defaultValue: '', +}); + +// invalid, multiple false and array default value +expectNotAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', + multiple: false, + defaultValue: [''], +}); + +// invalid, multiple true and wrong default value in array element +expectNotAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', + multiple: true, + defaultValue: [0], +}); From d6c01f155cf9924fab634a4db5718158061ec29b Mon Sep 17 00:00:00 2001 From: Viicos <65306057+Viicos@users.noreply.github.com> Date: Fri, 27 Oct 2023 14:47:04 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=A8=20[#2]=20PR=20feedback?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/formio/components/iban.ts | 2 +- src/formio/components/licenseplate.ts | 9 ++++----- test-d/formio/components/iban.test-d.ts | 16 +++++++++++++++- test-d/formio/components/licenseplate.test-d.ts | 11 +++++++++++ 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/formio/components/iban.ts b/src/formio/components/iban.ts index f7f84ef..23a081b 100644 --- a/src/formio/components/iban.ts +++ b/src/formio/components/iban.ts @@ -11,7 +11,7 @@ export type IbanInputSchema = InputComponentSchema { type: 'iban'; - validateOn?: 'blur'; + validateOn: 'blur'; } /** diff --git a/src/formio/components/licenseplate.ts b/src/formio/components/licenseplate.ts index f040119..00d921c 100644 --- a/src/formio/components/licenseplate.ts +++ b/src/formio/components/licenseplate.ts @@ -1,6 +1,6 @@ import {InputComponentSchema, MultipleCapable} from '..'; -type Validator = 'required'; +type Validator = 'required' | 'pattern'; type TranslatableKeys = 'label' | 'description' | 'tooltip'; export type LicensePlateInputSchema = InputComponentSchema; @@ -10,10 +10,11 @@ export type LicensePlateInputSchema = InputComponentSchema & - LicensePlateProperties & { - type: 'licenseplate'; - }; + LicensePlateProperties; /** * @group Form.io components diff --git a/test-d/formio/components/iban.test-d.ts b/test-d/formio/components/iban.test-d.ts index dd965cd..687fab2 100644 --- a/test-d/formio/components/iban.test-d.ts +++ b/test-d/formio/components/iban.test-d.ts @@ -8,6 +8,7 @@ expectAssignable({ type: 'iban', key: 'someIban', label: 'Some IBAN', + validateOn: 'blur', }); @@ -17,6 +18,7 @@ expectAssignable({ type: 'iban', key: 'someIban', label: 'Some IBAN', + validateOn: 'blur', multiple: false, defaultValue: '', }); @@ -27,6 +29,7 @@ expectAssignable({ type: 'iban', key: 'someIban', label: 'Some IBAN', + validateOn: 'blur', multiple: true, defaultValue: [''], }); @@ -59,7 +62,7 @@ expectAssignable({ required: false, plugins: [], }, - translatedErrors: {nl: {required: 'Geef email.'}}, + translatedErrors: {nl: {required: 'Geef IBAN.'}}, errors: {required: 'Geef email.'}, // registration tab registration: { @@ -84,12 +87,21 @@ expectNotAssignable({ validateOn: 'change', }); +// missing validateOn +expectNotAssignable({ + id: 'yejak', + type: 'iban', + key: 'someIban', + label: 'Some IBAN', +}); + // invalid, multiple true and non-array default value expectNotAssignable({ id: 'yejak', type: 'iban', key: 'someIban', label: 'Some IBAN', + validateOn: 'blur', multiple: true, defaultValue: '', }); @@ -100,6 +112,7 @@ expectNotAssignable({ type: 'iban', key: 'someIban', label: 'Some IBAN', + validateOn: 'blur', multiple: false, defaultValue: [''], }); @@ -110,6 +123,7 @@ expectNotAssignable({ type: 'iban', key: 'someIban', label: 'Some IBAN', + validateOn: 'blur', multiple: true, defaultValue: [0], }); diff --git a/test-d/formio/components/licenseplate.test-d.ts b/test-d/formio/components/licenseplate.test-d.ts index 5d438eb..d2934f6 100644 --- a/test-d/formio/components/licenseplate.test-d.ts +++ b/test-d/formio/components/licenseplate.test-d.ts @@ -177,3 +177,14 @@ expectNotAssignable({ multiple: true, defaultValue: [123], } as const); + +// missing validateOn +expectNotAssignable({ + id: 'yejak', + type: 'licenseplate', + key: 'someInput', + label: 'Some input', + validate: { + pattern: '^[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}\\-[a-zA-Z0-9]{1,3}$', + }, +});