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-designer#1164

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

…llection and ComponentRenderer

- Introduced ComposableComponentCollection to handle components with before/after relationships.
- Implemented ComponentRenderer for rendering components dynamically based on their definitions.
- Updated QuestionPageController and SummaryPageController to utilize ComposableComponentCollection when applicable.
- Added a new HTML partial for dynamic component rendering based on type.
@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 90%)
3 New Major Issues (required ≤ 0)

See analysis details on SonarQube Cloud

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

@mokhld mokhld changed the title (POC) feat: Add composable component support with new ComposableComponentCo… (POC) feat: Add composable component support Oct 23, 2025
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