create me a ui, where ✅ Prompt for AI Frontend Developer:Goal: Build a visual JSON data field mapper UI similar to Fiorano Mapper.🎯 Functional Requirements:Tree View for Input JSON StructureLeft pane: renders input JSON as a collapsible tree.Each leaf node (field) is draggable.Tree View for Output JSON StructureRight pane: renders output JSON structure as a collapsible tree.Leaf nodes are droppable targets for mapping.Mapping Canvas (Center Pane)Displays mapping lines from input fields to output fields.Allows defining transform functions in the middle (e.g. concat, format, uppercase).Supports multi-source to one-target mappings.Transformation LayerFor each mapping, allow user to input a transformation (e.g., concat(field1, field2)).Transformation is shown as a node in the middle of the connector line.Editor PanelShow a JSON/text editor or form to define/edit the transformation logic.Preview Panel (Optional)Show real-time preview of transformed output JSON.📥 Sample Input Mapping Rules (user input):plaintextCopyEditdata.account.name -> data.acc.name data.account.number -> data.acc.no data.account.field1, data.account.field2 -> data.acc.field12 (transform: concat) 📤 Expected Behavior:The UI parses this and renders:data.account.name node mapped to data.acc.name (with a line)data.account.field1 + field2 mapped to data.acc.field12 with a transform node in between
I'll create a comprehensive JSON data field mapper UI similar to Fiorano Mapper with drag-and-drop functionality, transformation nodes, and real-time preview.
I've created a comprehensive JSON data field mapper UI with all the requested features:
The UI comes pre-loaded with sample mappings that demonstrate the functionality, including a concatenation transform that combines field1 and field2 into field12.
I'll fix the initialization error by moving the helper functions before they're used in the useMemo hook.
The error has been fixed by moving the helper functions (getValueByPath, setValueByPath, and applyTransform) outside and before the component definition. This ensures they are properly initialized before being used in the useMemo hook.
The preview panel should now work correctly and display the transformed JSON output based on your mappings and transformations.