feat(#1984): style warning-level validation feedback differently from errors

[MaryamMehd]

Summary

Closes #1984

• Adds a new useValidationFeedbackSeverity hook that returns both the feedback message and its severity ('error' | 'warning'), sourced from targetConstraint.severityCode and OperationOutcome.issue.severity.
• Refactors the existing useValidationFeedback hook into a deprecated wrapper around the new hook (backwards-compatible).
• Updates all *Item.tsx components (~25 files) to consume the new hook and pass feedbackSeverity down to their field components.
• Updates all *Field.tsx components (~20 files) to accept feedbackSeverity and apply appropriate styling:
  • Error → red border + red helper text (existing behaviour, unchanged).
  • Warning → no red border + amber helper text (new behaviour).
• Adds unit tests for useValidationFeedbackSeverity covering error, warning, and parent-feedback scenarios.

---

How to test locally

1. Check out the branch and install dependencies

git checkout issue/1984-validation-feedback-severity
npm install

2. Build the renderer

cd packages/smart-forms-renderer
npm run build
cd ../..

3. Start the Playground app

cd apps/smart-forms-app
npm run dev

Open http://localhost:5173 in your browser and click Playground in the top navigation.

---

4. Load the test questionnaire

In the Playground, click the questionnaire JSON input area and paste the following questionnaire:

{
  "resourceType": "Questionnaire",
  "id": "test-1984-severity",
  "status": "active",
  "title": "Test – Validation Feedback Severity",
  "item": [
    {
      "linkId": "name",
      "text": "Full name (min 3 characters — ERROR level)",
      "type": "string",
      "extension": [
        {
          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-targetConstraint",
          "extension": [
            {
              "url": "key",
              "valueId": "name-min-length"
            },
            {
              "url": "severity",
              "valueCode": "error"
            },
            {
              "url": "expression",
              "valueString": "%resource.item.where(linkId='name').answer.value.length() >= 3"
            },
            {
              "url": "human",
              "valueString": "Full name must be at least 3 characters"
            }
          ]
        }
      ]
    },
    {
      "linkId": "nickname",
      "text": "Nickname (min 2 characters — WARNING level)",
      "type": "string",
      "extension": [
        {
          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-targetConstraint",
          "extension": [
            {
              "url": "key",
              "valueId": "nickname-min-length"
            },
            {
              "url": "severity",
              "valueCode": "warning"
            },
            {
              "url": "expression",
              "valueString": "%resource.item.where(linkId='nickname').answer.value.length() >= 2"
            },
            {
              "url": "human",
              "valueString": "Nickname is very short — are you sure?"
            }
          ]
        }
      ]
    }
  ]
}

Click Build Form (or equivalent) to render the questionnaire.

---

5. Expected behaviour

Field	What to type	Expected result
Full name (error)	Type "A" (1 char)	Red border + red helper text: "Full name must be at least 3 characters"
Full name (error)	Type "Alice" (≥ 3 chars)	Red border and message disappear
Nickname (warning)	Type "X" (1 char)	No red border + amber helper text: "Nickname is very short — are you sure?"
Nickname (warning)	Type "Al" (≥ 2 chars)	Amber message disappears

The key difference from before this fix: warning-level constraints no longer apply a red border — they use amber text only, making them visually distinct from hard errors.

---

6. Run unit tests

cd packages/smart-forms-renderer
npm run test

All tests should pass, including the new useValidationFeedbackSeverity.test.ts suite.

---

Made with Cursor