Merge pull request #21 from open-formulieren/feature/2-bsn

✨ [#2] Implement types for `bsn`
open-formulieren · Nov 13, 2023 · 68a544b · 68a544b
2 parents a9ac951 + 7748194
commit 68a544b
Show file tree

Hide file tree

Showing 4 changed files with 210 additions and 0 deletions.
diff --git a/src/formio/components/bsn.ts b/src/formio/components/bsn.ts
@@ -0,0 +1,30 @@
+import {InputComponentSchema, MultipleCapable, PrefillConfig} from '..';
+
+type Validator = 'required';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type BsnInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+export interface BsnProperties {
+  type: 'bsn';
+  inputMask: '999999999';
+  validateOn: 'blur';
+}
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+export type BaseBsnComponentSchema = Omit<BsnInputSchema, 'hideLabel' | 'placeholder'> &
+  BsnProperties &
+  PrefillConfig;
+
+/**
+ * @group Form.io components
+ * @category Concrete types
+ */
+export type BsnComponentSchema = MultipleCapable<BaseBsnComponentSchema>;
diff --git a/src/formio/components/index.ts b/src/formio/components/index.ts
@@ -9,6 +9,7 @@ export * from './phonenumber';
 export * from './postcode';
 export * from './iban';
 export * from './licenseplate';
+export * from './bsn';
 export * from './number';
 export * from './checkbox';
 export * from './selectboxes';

diff --git a/src/formio/index.ts b/src/formio/index.ts
@@ -1,4 +1,5 @@
 import {
+  BsnComponentSchema,
   CheckboxComponentSchema,
   ContentComponentSchema,
   CurrencyComponentSchema,
@@ -58,6 +59,7 @@ export type AnyComponentSchema =
   // special types
   | IbanComponentSchema
   | LicensePlateComponentSchema
+  | BsnComponentSchema
   // layout
   | ContentComponentSchema;
 

diff --git a/test-d/formio/components/bsn.test-d.ts b/test-d/formio/components/bsn.test-d.ts
@@ -0,0 +1,177 @@
+import {expectAssignable, expectNotAssignable} from 'tsd';
+
+import {BsnComponentSchema} from '../../../lib/';
+
+// minimal bsn component schema
+expectAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+});
+
+// multiple false and appropriate default value type
+expectAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+  multiple: false,
+  defaultValue: '123456789',
+});
+
+// multiple true and appropriate default value type
+expectAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+  multiple: true,
+  defaultValue: ['123456789'],
+});
+
+// full, correct schema
+expectAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  validateOn: 'blur',
+  // basic tab in builder form
+  label: 'Some input',
+  inputMask: '999999999',
+  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: [],
+  },
+  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: '',
+  },
+  // prefill tab in builder form
+  prefill: {
+    plugin: '',
+    attribute: '',
+    identifierRole: 'main',
+  },
+  // translations tab in builder form
+  openForms: {
+    translations: {
+      nl: {
+        label: 'foo',
+        description: 'bar',
+      },
+    },
+  },
+});
+
+// different component type
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'textfield',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+} as const);
+
+// using unsupported properties
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+  placeholder: 'no placeholder',
+} as const);
+
+// incorrect, invalid validator key
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validate: {
+    maxLength: 7,
+  },
+  validateOn: 'blur',
+} as const);
+
+// invalid, multiple true and non-array default value
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+  multiple: true,
+  defaultValue: '',
+} as const);
+
+// invalid, multiple false and array default value
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+  multiple: false,
+  defaultValue: [''],
+} as const);
+
+// invalid, multiple true and wrong default value in array element
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+  validateOn: 'blur',
+  multiple: true,
+  defaultValue: [123],
+} as const);
+
+// missing validateOn
+expectNotAssignable<BsnComponentSchema>({
+  id: 'yejak',
+  type: 'bsn',
+  key: 'someInput',
+  label: 'Some input',
+  inputMask: '999999999',
+});