Skip to content

Conversation

@mokhld
Copy link
Contributor

@mokhld mokhld commented Oct 23, 2025

This spike replaces the hardcoded instructionText logic with a more flexible composition pattern, letting components include other components via before and after properties.

Sister PR DEFRA/forms-engine-plugin#228

Changes

forms-model
• types.ts: Added ComposableComponent interface with before and after props; extended ComponentDef accordingly
• form-definition/index.ts: Updated schema to allow before and after (using Joi.any() for spike simplicity — recursive validation needed later)

forms-engine-plugin
ComposableComponentCollection.ts: New class extending ComponentCollection to support before/after relationships
component-renderer.ts: New helper for recursively rendering composable components while preserving type integrity
QuestionPageController.ts: Detects composable components and switches to ComposableComponentCollection, otherwise defaults to the regular collection

How It Works
1. Components can define before and after subcomponents
2. Engine detects composable components and uses the enhanced collection
3. Rendering order: before → main → after
4. Fully backward compatible — existing forms continue to work


{
  "type": "EmailAddressField",
  "name": "email",
  "title": "Email address",
  "before": {
    "type": "InsetText",
    "content": "Important: We'll only use this to send confirmation"
  },
  "after": {
    "type": "Details",
    "title": "Why we need your email",
    "content": "Your email helps us send confirmations..."
  }
}
Screenshot 2025-10-22 at 16 51 43

- Introduced a new module for composable settings fields, allowing components to have additional fields rendered before or after them.
- Updated the mapping functions to include composable settings in the component definitions.
- Enhanced the form definition schema to accommodate before/after component rendering.
@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
10.4% Coverage on New Code (required ≥ 90%)
2 New Critical Issues (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants