@defra/forms-engine-plugin 0.0.1

package/src/server/plugins/engine/components/List.test.ts

@@ -0,0 +1,76 @@
+import { ComponentType, type ListComponent } from '@defra/forms-model'
+
+import { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'
+import { type Guidance } from '~/src/server/plugins/engine/components/helpers.js'
+import { FormModel } from '~/src/server/plugins/engine/models/FormModel.js'
+import definition from '~/test/form/definitions/basic.js'
+
+describe('List', () => {
+  let model: FormModel
+
+  beforeEach(() => {
+    model = new FormModel(definition, {
+      basePath: 'test'
+    })
+  })
+
+  describe('Defaults', () => {
+    let def: ListComponent
+    let collection: ComponentCollection
+    let guidance: Guidance
+
+    beforeEach(() => {
+      def = {
+        title: 'List guidance',
+        name: 'myComponent',
+        type: ComponentType.List,
+        list: 'licenceLengthDays',
+        options: {}
+      } satisfies ListComponent
+
+      collection = new ComponentCollection([def], { model })
+      guidance = collection.guidance[0]
+    })
+
+    describe('View model', () => {
+      it('sets Nunjucks component defaults', () => {
+        const viewModel = guidance.getViewModel()
+
+        expect(viewModel).toEqual(
+          expect.objectContaining({
+            attributes: {},
+            content: {
+              title: def.title,
+              text: ''
+            }
+          })
+        )
+      })
+    })
+
+    describe('List items', () => {
+      it('returns list items', () => {
+        expect(guidance).toHaveProperty('items', [
+          {
+            text: '1 day',
+            value: 1,
+            description:
+              'Valid for 24 hours from the start time that you select'
+          },
+          {
+            text: '8 day',
+            value: 8,
+            description:
+              'Valid for 8 consecutive days from the start time that you select'
+          },
+          {
+            text: '12 months',
+            value: 365,
+            description:
+              '12-month licences are now valid for 365 days from their start date and can be purchased at any time during the year'
+          }
+        ])
+      })
+    })
+  })
+})

package/src/server/plugins/engine/components/List.ts

@@ -0,0 +1,72 @@
+import {
+  type Item,
+  type List as ListType,
+  type ListComponent
+} from '@defra/forms-model'
+
+import { ComponentBase } from '~/src/server/plugins/engine/components/ComponentBase.js'
+import { type ListItem } from '~/src/server/plugins/engine/components/types.js'
+
+export class List extends ComponentBase {
+  declare options: ListComponent['options']
+  hint: ListComponent['hint']
+  list?: ListType
+
+  get items(): Item[] {
+    return this.list?.items ?? []
+  }
+
+  constructor(
+    def: ListComponent,
+    props: ConstructorParameters<typeof ComponentBase>[1]
+  ) {
+    super(def, props)
+
+    const { hint, list, options } = def
+    const { model } = props
+
+    this.hint = hint
+    this.list = model.getList(list)
+    this.options = options
+  }
+
+  getViewModel() {
+    const { items: listItems, options, viewModel } = this
+
+    let { classes, content, items, type } = viewModel
+
+    if (options.type) {
+      type = options.type
+    }
+
+    if (options.bold) {
+      classes ??= ''
+      classes = `${classes} govuk-!-font-weight-bold`.trim()
+    }
+
+    content = {
+      title: !options.hideTitle ? this.title : undefined,
+      text: this.hint ?? ''
+    }
+
+    items = listItems.map((item) => {
+      const itemModel: ListItem = { ...item }
+
+      if (item.description) {
+        itemModel.hint = {
+          text: item.description
+        }
+      }
+
+      return itemModel
+    })
+
+    return {
+      ...viewModel,
+      type,
+      classes,
+      content,
+      items
+    }
+  }
+}

package/src/server/plugins/engine/components/ListFormComponent.ts

@@ -0,0 +1,140 @@
+import {
+  type Item,
+  type List,
+  type ListComponentsDef,
+  type SelectionComponentsDef,
+  type YesNoFieldComponent
+} from '@defra/forms-model'
+import joi, {
+  type ArraySchema,
+  type BooleanSchema,
+  type NumberSchema,
+  type StringSchema
+} from 'joi'
+
+import { FormComponent } from '~/src/server/plugins/engine/components/FormComponent.js'
+import { type ListItem } from '~/src/server/plugins/engine/components/types.js'
+import {
+  type FormPayload,
+  type FormSubmissionError,
+  type FormSubmissionState
+} from '~/src/server/plugins/engine/types.js'
+
+export class ListFormComponent extends FormComponent {
+  declare options: Extract<
+    SelectionComponentsDef,
+    { options: object }
+  >['options']
+
+  declare formSchema:
+    | ArraySchema<string>
+    | ArraySchema<number>
+    | BooleanSchema<string>
+    | NumberSchema<string>
+    | NumberSchema
+    | StringSchema
+
+  declare stateSchema:
+    | ArraySchema<string>
+    | ArraySchema<number>
+    | BooleanSchema<string>
+    | NumberSchema<string>
+    | NumberSchema
+    | StringSchema
+
+  list?: List
+  listType: List['type'] = 'string'
+
+  get items(): Item[] {
+    return this.list?.items ?? []
+  }
+
+  get values(): Item['value'][] {
+    return this.items.map(({ value }) => value)
+  }
+
+  constructor(
+    def:
+      | SelectionComponentsDef // Allow for Yes/No field custom list
+      | (YesNoFieldComponent & Pick<ListComponentsDef, 'list'>),
+    props: ConstructorParameters<typeof FormComponent>[1]
+  ) {
+    super(def, props)
+
+    const { options, title } = def
+    const { model } = props
+
+    if ('list' in def) {
+      this.list = model.getList(def.list)
+      this.listType = this.list?.type ?? 'string'
+    }
+
+    let formSchema = joi[this.listType]()
+      .valid(...this.values)
+      .label(title)
+      .required()
+
+    if (options.customValidationMessages) {
+      formSchema = formSchema.messages(options.customValidationMessages)
+    }
+
+    this.formSchema = formSchema
+    this.stateSchema = formSchema.default(null).allow(null)
+    this.options = options
+  }
+
+  getFormValueFromState(
+    state: FormSubmissionState
+  ): Item['value'] | Item['value'][] | undefined {
+    const { name, items } = this
+
+    const value = state[name]
+
+    // Allow for array values via subclass
+    const values = this.isValue(value) ? [value].flat() : []
+    const selected = items.filter((item) => values.includes(item.value))
+
+    return selected.at(0)?.value
+  }
+
+  getDisplayStringFromState(state: FormSubmissionState) {
+    const { items } = this
+
+    // Allow for array values via subclass
+    const value = this.getFormValueFromState(state)
+    const values = [value ?? []].flat()
+
+    return items
+      .filter((item) => values.includes(item.value))
+      .map((item) => item.text)
+      .join(', ')
+  }
+
+  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
+    const { items: listItems } = this
+
+    const viewModel = super.getViewModel(payload, errors)
+    const { value } = viewModel
+
+    // Support multiple values for checkboxes
+    const values = this.isValue(value) ? [value].flat() : []
+
+    const items = listItems.map((item) => {
+      const selected = values.includes(item.value)
+      const itemModel: ListItem = { ...item, selected }
+
+      if (item.description) {
+        itemModel.hint = {
+          text: item.description
+        }
+      }
+
+      return itemModel
+    })
+
+    return {
+      ...viewModel,
+      items
+    }
+  }
+}