add editable fields

[ricardo-devis-agullo]

Editable fields

Overview

This PR introduces a significant enhancement to the OpenComponents registry UI, transforming the static component information display into an interactive interface that allows developers to dynamically test and configure component parameters directly in the browser.

Key Changes

Interactive Parameter Input System

Enhanced Parameter Display Logic (src/registry/routes/component-info.ts)

• Modified getParams() function to intelligently select parameter values, prioritizing default values over examples
• Parameters are now included if they have either a default value or an example, improving the user experience for optional parameters

Dynamic Input Rendering (src/registry/views/partials/component-parameters.tsx)

• Replaced static parameter display with interactive input fields
• Added type-specific input rendering:
  • text inputs for string parameters
  • number inputs for numeric parameters
  • checkbox inputs for boolean parameters
• Each input is pre-populated with appropriate default/example values
• Removed the static table header for a cleaner, more focused interface

Real-time Parameter Synchronization (src/registry/views/static/info.ts)

• Implemented updateHrefFromParameters() function that dynamically constructs component URLs based on parameter values
• Added event handlers for parameter input changes that automatically update the component href
• Enhanced keyboard interaction: Enter key on parameter inputs now triggers preview refresh
• Immediate preview updates for boolean parameters via checkbox changes

Improved User Experience

• Updated help text to mention Enter key functionality for parameter inputs
• Better visual hierarchy in parameter display with clearer labeling
• More intuitive interaction patterns for different parameter types

Technical Implementation

The implementation follows a progressive enhancement approach:

1. Server-side: Enhanced parameter extraction logic that intelligently handles defaults vs examples
2. Client-side: JavaScript-driven parameter synchronization that maintains URL state
3. UI Layer: Type-aware input rendering that adapts to parameter specifications

The system maintains backward compatibility while providing a significantly improved developer experience for component testing and configuration.

Impact

This enhancement transforms the registry from a static documentation viewer into an interactive component testing environment, enabling developers to:

• Instantly test different parameter combinations
• Understand parameter behavior through immediate visual feedback
• Streamline the component development and testing workflow

The changes are particularly valuable for components with complex parameter configurations, making the registry a more effective tool for component discovery and validation.