BN-78 | Implement config validation using JSON Schema for Widgets

[mohan-13]

Note

Thank you for your contribution. Please find the details of this pull request below.

JIRA → BN-78

Description

• Implements runtime configuration validation for widgets using JSON Schema, establishing type consistency across the configuration by using unknown till config is validated and allows widgets to typecast into their respective types.

---

Key Features

• ConfigValidator Component - Reusable validation wrapper with error UI for invalid configurations
• useConfigValidation Hook - Centralized validation logic with Ajv JSON Schema validation
• Type Consistency - Standardized unknown type for config until the Widget level which can define its own type for subsequent access.
• VitalFlowSheet Integration - Reference implementation with JSON schema validation

---

Implementation Details

• UI Components

  • New ConfigValidator component with error display and styling
  • Integrated into VitalFlowSheet as validation wrapper

• Custom Hooks

  • useConfigValidation hook for schema-based validation with Ajv
  • Returns validation state and detailed error messages

• Type Definitions

  • Updated WidgetProps.config and ControlConfig.config to unknown
  • Refactored registry to use unknown consistently
  • Safe type narrowing after validation

• Performance & Optimization

  • Validation occurs once at widget mount
  • Memoized validation results

• Internationalisation

  • Added CONFIG_VALIDATION_ERROR and CONFIG_VALIDATION_DETAILS labels
  • Spanish translations included

---

Testing & Type Definitions

• Unit Tests

  • ConfigValidator component tests
  • useConfigValidation hook tests
  • Updated VitalFlowSheet tests

• Integration Tests

  • Full validation flow tests for VitalFlowsheet validating where validation hook is called
  • Error handling and edge cases covered

• Type Definitions

  • JSON Schema for VitalFlowSheet config
  • Type-safe interfaces with proper narrowing

---

Screenshots

Feature / State	Screenshot
With Error in Configuration
Valid config (Widget loads as is)

Note: Please ensure sensitive information is not included in screenshots.

---

Next Steps

• Apply validation pattern to remaining widgets
• Expand JSON schemas for other widget types

---

Important

Checklist

• Code adheres to project linting and formatting standards.
• New components added to Storybook.
• Tests written and passing (unit + integration).
• Labels and text support i18n.
• Follows accessibility and responsive design guidelines.
• PR reviewed by at least one other developer.

---

Reviewer(s)

@bahnew/developers
Kindly review the proposed changes when convenient. Your feedback is appreciated.

---

[PratitiP]

We can use tanstack query useQuery hook to call validateConfig as queryFunction

[PratitiP]

Can we do this more javascript way using Module pattern with closures instead of class-based singleton pattern? which might align better with modern JavaScript practices.
But we can take this up later as refactoring.