Feat DF-662: Allows new component to be added with minimal effort

designer/README.md

@@ -107,6 +107,85 @@ npm run test:since <commit-hash>
 npm run test:uncommitted
 ```
 
+## Adding a new question type (component type)
+
+To add a new question type, you will need to add the new type to a series of files. As an example, if we were to add a new `UnicornField` question type and wanted it to be selectable as a new question from the 'question ype' radio list, (assuming we are happy to use a default 'preview' implementation for the time being), you have to add:
+
+model/src/components/enums.ts:
+
+```
+  UnicornField = ‘UnicornField’
+```
+
+model/src/components/types.ts:
+
+```
+  export interface UnicornFieldComponent extends FormFieldBase {
+    type: ComponentType.UnicornField
+      options: FormFieldBase['options'] & {
+        condition?: string
+      }
+    }
+
+    . . .
+
+  export type InputFieldsComponentsDef =
+    | TextFieldComponent
+    . . .
+    | UnicornFieldComponent
+```
+
+model/src/components/component-types.ts:
+
+```
+{
+  name: 'UnicornField',
+  title: 'Unicorn field',
+  type: ComponentType.UnicornField,
+  hint: '',
+  options: {},
+  schema: {}
+}
+
+```
+
+client/src/i18n/translations/en.translation.json:
+
+```
+  fieldTypeToName: {
+    . . .
+    "UnicornField": "Unicorn field",
+    "UnicornField_info": "For internal processing"
+```
+
+model/src/form/form-editor/index.ts:
+
+```
+export const questionTypeSchema = Joi.string()
+. . .
+ComponentType.UnicornField
+)
+. . .
+```
+
+designer/server/src/models/forms/editor-v2/question-type.js:
+
+```
+const questionTypeRadioItems = /** @type {FormEditorCheckbox[]} */ ([
+. . .
+{
+    text: 'Unicorn',
+    hint: {
+      text: 'Rainbows and stuff'
+    },
+    value: ComponentType.UnicornField
+  },
+. . .
+```
+
+Further work would be required to define advanced field settings (if appropriate), and potentially to validate/handle the payload being saved from the 'question details' screen.
+Later, work would be required to properly implement the preview (this would involve changes to forms-runner to handle the new component class generation so error messages can be retrieved).
+
 ## License
 
 THIS INFORMATION IS LICENSED UNDER THE CONDITIONS OF THE OPEN GOVERNMENT LICENCE found at:

designer/client/src/javascripts/preview.js

@@ -39,12 +39,7 @@ export function showHideForJs() {
  * @returns {PreviewQuestion}
  */
 export function setupPreview(componentType) {
-  const PreviewConstructor =
-    /** @type {() => PreviewQuestion} */
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    (SetupPreview[componentType] ?? SetupPreview.Question)
-
-  const preview = PreviewConstructor()
+  const preview = SetupPreview(componentType)
 
   showHideForJs()
 

designer/client/src/javascripts/preview/date-input.test.js

@@ -1,3 +1,5 @@
+import { ComponentType } from '@defra/forms-model'
+
 import {
   questionDetailsLeftPanelHTML,
   questionDetailsPreviewHTML
@@ -10,7 +12,7 @@ describe('date-input', () => {
   it('should create class', () => {
     document.body.innerHTML =
       questionDetailsLeftPanelHTML + questionDetailsPreviewHTML
-    const res = SetupPreview.DatePartsField()
+    const res = SetupPreview(ComponentType.DatePartsField)
     expect(res.renderInput).toEqual({
       id: 'dateInput',
       name: 'dateInput',

designer/client/src/javascripts/preview/declaration.test.js

@@ -1,4 +1,4 @@
-import { DeclarationQuestion } from '@defra/forms-model'
+import { ComponentType, DeclarationQuestion } from '@defra/forms-model'
 
 import {
   questionDetailsLeftPanelHTML,
@@ -122,7 +122,7 @@ describe('declaration', () => {
         questionDetailsPreviewHTML +
         declarationHTML
       const question = /** @type {DeclarationQuestion} */ (
-        SetupPreview.DeclarationField()
+        SetupPreview(ComponentType.DeclarationField)
       )
       const declarationTextEl = /** @type {HTMLTextAreaElement | null} */ (
         document.getElementById('declarationText')
@@ -146,7 +146,7 @@ describe('declaration', () => {
         questionDetailsPreviewHTML +
         declarationHTML
       const question = /** @type {DeclarationQuestion} */ (
-        SetupPreview.DeclarationField()
+        SetupPreview(ComponentType.DeclarationField)
       )
       const declarationTextEl = /** @type {HTMLTextAreaElement | null} */ (
         document.getElementById('declarationText')
@@ -169,7 +169,7 @@ describe('declaration', () => {
         questionDetailsPreviewHTML +
         declarationHTML
       const question = /** @type {DeclarationQuestion} */ (
-        SetupPreview.DeclarationField()
+        SetupPreview(ComponentType.DeclarationField)
       )
       const declarationTextEl = /** @type {HTMLTextAreaElement | null} */ (
         document.getElementById('declarationText')
@@ -200,7 +200,7 @@ describe('declaration', () => {
         questionDetailsPreviewHTML +
         declarationHTML
       const res = /** @type {DeclarationQuestion} */ (
-        SetupPreview.DeclarationField()
+        SetupPreview(ComponentType.DeclarationField)
       )
       expect(res).toBeInstanceOf(DeclarationQuestion)
       expect(res).toBeDefined()
@@ -213,7 +213,7 @@ describe('declaration', () => {
         questionDetailsPreviewHTML +
         declarationHTML
       const res = /** @type {DeclarationQuestion} */ (
-        SetupPreview.DeclarationField()
+        SetupPreview(ComponentType.DeclarationField)
       )
       expect(res.question).toBe('Which quest would you like to pick?')
       expect(res.hintText).toBe('Choose one adventure that best suits you.')
@@ -231,7 +231,7 @@ describe('declaration', () => {
         questionDetailsPreviewHTML +
         emptyDeclarationHTML
       const res = /** @type {DeclarationQuestion} */ (
-        SetupPreview.DeclarationField()
+        SetupPreview(ComponentType.DeclarationField)
       )
       expect(res.declarationText).toBe('')
     })

designer/client/src/javascripts/preview/email-address.test.js

@@ -1,4 +1,4 @@
-import { EmailAddressQuestion } from '@defra/forms-model'
+import { ComponentType, EmailAddressQuestion } from '@defra/forms-model'
 
 import {
   questionDetailsLeftPanelHTML,
@@ -13,7 +13,7 @@ describe('email', () => {
     it('should create class', () => {
       document.body.innerHTML =
         questionDetailsLeftPanelHTML + questionDetailsPreviewHTML
-      const res = SetupPreview.EmailAddressField()
+      const res = SetupPreview(ComponentType.EmailAddressField)
       expect(res).toBeInstanceOf(EmailAddressQuestion)
       expect(res).toBeDefined()
       expect(res.renderInput).toEqual({

designer/client/src/javascripts/preview/list-sortable.test.js

@@ -1,4 +1,8 @@
-import { ListSortableQuestion } from '@defra/forms-model'
+import {
+  ComponentType,
+  ListSortableQuestion,
+  PreviewTypeEnum
+} from '@defra/forms-model'
 
 import {
   list1HTML,
@@ -82,7 +86,7 @@ describe('list-sortable', () => {
       document.body.innerHTML =
         questionDetailsLeftPanelHTML + questionDetailsPreviewTabsHTML
       const preview = /** @type {ListSortableQuestion} */ (
-        SetupPreview.RadiosField()
+        SetupPreview(ComponentType.RadiosField)
       )
       expect(preview.renderInput.fieldset?.legend.text).toBe(
         'Which quest would you like to pick?'
@@ -497,7 +501,7 @@ describe('list-sortable', () => {
     describe('editPanelListeners', () => {
       it('should update the List class when listeners are called', () => {
         const preview = /** @type {ListSortableQuestion} */ (
-          SetupPreview.ListSortable()
+          SetupPreview(PreviewTypeEnum.ListSortable)
         )
         const listEventListeners = new ListSortableEventListeners(
           preview,
@@ -586,7 +590,7 @@ describe('list-sortable', () => {
           '<button id="edit-options-button">Re-order</button>' +
           '<button id="add-option-button">Add item</button>' +
           list1HTML
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
         const reorderButton = /** @type {HTMLElement} */ (
           document.getElementById('edit-options-button')
         )
@@ -602,7 +606,7 @@ describe('list-sortable', () => {
           '<button id="edit-options-button">Done</button>' +
           '<button id="add-option-button">Add item</button>' +
           list1HTML
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
         const reorderButton = /** @type {HTMLElement} */ (
           document.getElementById('edit-options-button')
         )
@@ -633,7 +637,7 @@ describe('list-sortable', () => {
           x.textContent = 'Not up or down'
         })
 
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
         const reorderButton = /** @type {HTMLElement} */ (
           document.getElementById('edit-options-button')
         )
@@ -649,7 +653,7 @@ describe('list-sortable', () => {
           '<button id="edit-options-button">Re-order</button>' +
           '<button id="add-option-button">Add item</button>' +
           list1HTML
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
         const reorderButton = /** @type {HTMLElement} */ (
           document.getElementById('edit-options-button')
         )
@@ -690,7 +694,7 @@ describe('list-sortable', () => {
           '<button id="edit-options-button">Re-order</button>' +
           '<button id="add-option-button">Add item</button>' +
           list1HTML
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
         const reorderButton = /** @type {HTMLElement} */ (
           document.getElementById('edit-options-button')
         )
@@ -911,15 +915,15 @@ describe('list-sortable', () => {
         '<button id="add-option-button">Add item</button>' +
         listEmptyHTML
       const preview = /** @type {ListSortableQuestion} */ (
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
       )
       expect(preview.listElementObjects).toHaveLength(0)
       document.body.innerHTML =
         '<button id="edit-options-button">Done</button>' +
         '<button id="add-option-button">Add item</button>' +
         list1HTML
       const preview2 = /** @type {ListSortableQuestion} */ (
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
       )
       preview.resyncPreviewAfterReorder()
       expect(preview2.listElementObjects).toHaveLength(4)

designer/client/src/javascripts/preview/list.test.js

@@ -1,4 +1,4 @@
-import { ListQuestion } from '@defra/forms-model'
+import { ListQuestion, PreviewTypeEnum } from '@defra/forms-model'
 
 import { list1HTML } from '~/src/javascripts/preview/__stubs__/list'
 import { questionDetailsStubPanels } from '~/src/javascripts/preview/__stubs__/question.js'
@@ -141,7 +141,7 @@ describe('list', () => {
     it('should setup', () => {
       document.body.innerHTML = list1HTML
       const preview = /** @type {ListSortableQuestion} */ (
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
       )
       expect(preview.renderInput.fieldset?.legend.text).toBe('Question')
     })
@@ -192,7 +192,7 @@ describe('list', () => {
     describe('editPanelListeners', () => {
       it('should update the List class when listeners are called', () => {
         const preview = /** @type {ListQuestion} */ (
-          SetupPreview.ListSortable()
+          SetupPreview(PreviewTypeEnum.ListSortable)
         )
         const listEventListeners = new ListEventListeners(
           preview,
@@ -331,7 +331,7 @@ describe('list', () => {
 
     it('should highlight', () => {
       const preview = /** @type {ListSortableQuestion} */ (
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
       )
       preview.highlight = `${baronListItemId}-hint`
       expect(preview.list[3]).toMatchObject({
@@ -341,7 +341,7 @@ describe('list', () => {
 
     it('should handle edge cases', () => {
       const preview = /** @type {ListSortableQuestion} */ (
-        SetupPreview.ListSortable()
+        SetupPreview(PreviewTypeEnum.ListSortable)
       )
       expect(preview.list).toEqual(expectedList)
       preview.updateValue(undefined, 'new-value')
@@ -359,7 +359,9 @@ describe('list', () => {
 
   describe('editFieldHasFocus', () => {
     it('should return true for list text field', () => {
-      const preview = /** @type {ListQuestion} */ (SetupPreview.ListSortable())
+      const preview = /** @type {ListQuestion} */ (
+        SetupPreview(PreviewTypeEnum.ListSortable)
+      )
       const listEventListeners = new ListEventListeners(
         preview,
         questionElements,

designer/client/src/javascripts/preview/phone-number.test.js

@@ -1,4 +1,4 @@
-import { PhoneNumberQuestion } from '@defra/forms-model'
+import { ComponentType, PhoneNumberQuestion } from '@defra/forms-model'
 
 import {
   questionDetailsLeftPanelHTML,
@@ -13,7 +13,7 @@ describe('phone number', () => {
     it('should create class', () => {
       document.body.innerHTML =
         questionDetailsLeftPanelHTML + questionDetailsPreviewHTML
-      const res = SetupPreview.TelephoneNumberField()
+      const res = SetupPreview(ComponentType.TelephoneNumberField)
       expect(res).toBeInstanceOf(PhoneNumberQuestion)
       expect(res).toBeDefined()
       expect(res.renderInput).toEqual({

designer/client/src/javascripts/preview/question.test.js

@@ -1,3 +1,5 @@
+import { PreviewTypeEnum } from '@defra/forms-model'
+
 import {
   questionDetailsLeftPanelHTML,
   questionDetailsPreviewHTML
@@ -74,7 +76,7 @@ describe('question', () => {
     it('should create class', () => {
       document.body.innerHTML =
         questionDetailsLeftPanelHTML + questionDetailsPreviewHTML
-      const res = SetupPreview.Question()
+      const res = SetupPreview(PreviewTypeEnum.Question)
       expect(res).toBeDefined()
       expect(res.renderInput).toEqual({
         id: expect.stringContaining('inputField'),
@@ -101,7 +103,7 @@ describe('question', () => {
     it('should handle changed values', () => {
       document.body.innerHTML =
         questionDetailsLeftPanelHTML + questionDetailsPreviewHTML
-      const res = SetupPreview.Question()
+      const res = SetupPreview(PreviewTypeEnum.Question)
       expect(res.titleText).toBe('Which quest would you like to pick?')
       expect(res.question).toBe('Which quest would you like to pick?')
       expect(res.hintText).toBe('Choose one adventure that best suits you.')
@@ -118,7 +120,7 @@ describe('question', () => {
     it('should handle missing values', () => {
       document.body.innerHTML =
         questionDetailsLeftPanelHTML + questionDetailsPreviewHTML
-      const res = SetupPreview.Question()
+      const res = SetupPreview(PreviewTypeEnum.Question)
       res.question = ''
       expect(res.titleText).toBe('Question')
       res.hintText = ''
@@ -141,7 +143,7 @@ describe('question', () => {
     })
 
     it('should highlight', () => {
-      const preview = SetupPreview.Question()
+      const preview = SetupPreview(PreviewTypeEnum.Question)
       preview.highlight = `hintText`
       expect(preview).toMatchObject({
         hint: { text: 'Hint text' }