[V0_FILE]typescriptreact:file="components/json-tree.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { ChevronRight, ChevronDown, Circle, Target } from "lucide-react" import { cn } from "@/lib/utils" import type { Mapping } from "@/components/json-mapper" interface JsonTreeProps { data: any type: "input" | "output" onDragStart?: (fieldPath: string) => void onDrop?: (fieldPath: string) => void mappings?: Mapping[] path?: string } export function JsonTree({ data, type, onDragStart, onDrop, mappings = [], path = "" }: JsonTreeProps) { const [expandedNodes, setExpandedNodes] = useState>(new Set(["", "data"])) const toggleNode = (nodePath: string) => { setExpandedNodes((prev) => { const newSet = new Set(prev) if (newSet.has(nodePath)) { newSet.delete(nodePath) } else { newSet.add(nodePath) } return newSet }) } const renderNode = (obj: any, currentPath: string, level = 0): React.ReactNode => { if (obj === null || obj === undefined) { return null } if (typeof obj !== "object") { // Leaf node const isSource = type === "input" const isTarget = type === "output" const isMapped = mappings.some((m) => (isSource ? m.sources.includes(currentPath) : m.target === currentPath)) return (

isSource && onDragStart?.(currentPath)} onDragOver={(e) => { if (isTarget) { e.preventDefault() } }} onDrop={(e) => { e.preventDefault() if (isTarget) { onDrop?.(currentPath) } }} style={{ marginLeft: `${level * 16}px` }} > {isSource ? : } {currentPath.split(".").pop()}: {JSON.stringify(obj)}

) } // Object/Array node const isExpanded = expandedNodes.has(currentPath) const keys = Object.keys(obj) return (

toggleNode(currentPath)} style={{ marginLeft: `${level * 16}px` }} > {isExpanded ? ( ) : ( )} {currentPath.split(".").pop() || "root"}

{isExpanded && (

{keys.map((key) => { const newPath = currentPath ? `${currentPath}.${key}` : key return renderNode(obj[key], newPath, level + 1) })}

)}

) } return

{renderNode(data, path)}

} [V0_FILE]typescriptreact:file="components/mapping-canvas.tsx" isMerged="true" "use client" import { useEffect, useState, type RefObject } from "react" import type { Mapping } from "@/components/json-mapper" interface MappingCanvasProps { mappings: Mapping[] selectedMapping: string | null onMappingSelect: (mappingId: string) => void containerRef: RefObject } export function MappingCanvas({ mappings, selectedMapping, onMappingSelect, containerRef }: MappingCanvasProps) { const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) useEffect(() => { const updateDimensions = () => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() setDimensions({ width: rect.width - 32, height: rect.height - 80 }) } } updateDimensions() window.addEventListener("resize", updateDimensions) return () => window.removeEventListener("resize", updateDimensions) }, [containerRef]) const renderMapping = (mapping: Mapping, index: number) => { const isSelected = selectedMapping === mapping.id const yPosition = 50 + index * 80 const hasTransform = mapping.transform && mapping.sources.length > 0 return ( {/* Connection Line */} onMappingSelect(mapping.id)} /> {/* Source Indicators */} {mapping.sources.map((source, sourceIndex) => ( onMappingSelect(mapping.id)} /> {source.split(".").pop()} ))} {/* Transform Node */} {hasTransform && ( onMappingSelect(mapping.id)} /> {mapping.transform.type} )} {/* Target Indicator */} {mapping.target && ( onMappingSelect(mapping.id)} /> {mapping.target.split(".").pop()} )} {/* Mapping Label */} Mapping {index + 1} ) } if (dimensions.width === 0) return null return (

) } [V0_FILE]typescriptreact:file="components/preview-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useMemo } from "react" import type { Mapping } from "@/components/json-mapper" import { Button } from "@/components/ui/button" import { Copy, Download } from "lucide-react" interface PreviewPanelProps { inputJson: any mappings: Mapping[] } // Helper functions moved before component const getValueByPath = (obj: any, path: string): any => { return path.split(".").reduce((current, key) => { return current && current[key] !== undefined ? current[key] : undefined }, obj) } const setValueByPath = (obj: any, path: string, value: any): void => { const keys = path.split(".") const lastKey = keys.pop()! const target = keys.reduce((current, key) => { if (!current[key]) { current[key] = {} } return current[key] }, obj) target[lastKey] = value } const applyTransform = (values: any[], transform: NonNullable): any => { switch (transform.type) { case "concat": return values.filter((v) => v !== undefined).join(" ") case "uppercase": return String(values[0] || "").toUpperCase() case "lowercase": return String(values[0] || "").toLowerCase() case "format": // Simple format implementation return String(values[0] || "") case "custom": // For demo purposes, just return first value return values[0] default: return values[0] } } export function PreviewPanel({ inputJson, mappings }: PreviewPanelProps) { const transformedOutput = useMemo(() => { const result: any = {} mappings.forEach((mapping) => { if (!mapping.target || mapping.sources.length === 0) return // Get source values const sourceValues = mapping.sources.map((sourcePath) => { return getValueByPath(inputJson, sourcePath) }) // Apply transformation let transformedValue: any if (mapping.transform) { transformedValue = applyTransform(sourceValues, mapping.transform) } else { transformedValue = sourceValues[0] } // Set target value setValueByPath(result, mapping.target, transformedValue) }) return result }, [inputJson, mappings]) const copyToClipboard = () => { navigator.clipboard.writeText(JSON.stringify(transformedOutput, null, 2)) } const downloadJson = () => { const blob = new Blob([JSON.stringify(transformedOutput, null, 2)], { type: "application/json", }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "transformed-output.json" a.click() URL.revokeObjectURL(url) } return (

Preview Output

{JSON.stringify(transformedOutput, null, 2)}

Active Mappings: {mappings.filter((m) => m.sources.length > 0 && m.target).length} Total Mappings: {mappings.length}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { JsonMapper } from "@/components/json-mapper" export default function Home() { return (

JSON Data Field Mapper

Visual mapping tool for JSON data transformation

) } [V0_FILE]typescriptreact:file="components/json-mapper.tsx" isEdit="true" "use client" import { useState, useRef, useCallback } from "react" import { Card } from "@/components/ui/card" import { JsonTree } from "@/components/json-tree" import { MappingCanvas } from "@/components/mapping-canvas" import { TransformEditor } from "@/components/transform-editor" import { PreviewPanel } from "@/components/preview-panel" import { JsonStructureEditor } from "@/components/json-structure-editor" import { Button } from "@/components/ui/button" import { Trash2, Plus, Settings } from "lucide-react" export interface Mapping { id: string sources: string[] target: string transform?: { type: "concat" | "format" | "uppercase" | "lowercase" | "custom" expression?: string } } const defaultInputJson = { user: { personalInfo: { firstName: "John", lastName: "Doe", email: "john.doe@example.com", phone: "+1-555-0123", }, account: { id: "user_12345", type: "premium", balance: 1250.75, currency: "USD", status: "active", }, preferences: { language: "en", timezone: "UTC-5", notifications: true, }, }, metadata: { timestamp: "2024-01-15T10:30:00Z", source: "api_v2", version: "1.2.3", }, } const defaultOutputStructure = { profile: { fullName: "", contactInfo: { email: "", phone: "", }, accountDetails: { userId: "", accountType: "", currentBalance: "", accountStatus: "", }, }, settings: { locale: "", timezone: "", enableNotifications: "", }, system: { processedAt: "", dataSource: "", apiVersion: "", }, } export function JsonMapper() { const [inputJson, setInputJson] = useState(defaultInputJson) const [outputStructure, setOutputStructure] = useState(defaultOutputStructure) const [showStructureEditor, setShowStructureEditor] = useState(false) const [mappings, setMappings] = useState([ { id: "1", sources: ["user.personalInfo.firstName", "user.personalInfo.lastName"], target: "profile.fullName", transform: { type: "concat", expression: 'concat(firstName, " ", lastName)', }, }, { id: "2", sources: ["user.personalInfo.email"], target: "profile.contactInfo.email", }, { id: "3", sources: ["user.account.id"], target: "profile.accountDetails.userId", }, ]) const [selectedMapping, setSelectedMapping] = useState(null) const [draggedField, setDraggedField] = useState(null) const canvasRef = useRef(null) const handleDragStart = useCallback((fieldPath: string) => { setDraggedField(fieldPath) }, []) const handleDrop = useCallback( (targetPath: string) => { if (!draggedField) return // Check if mapping already exists const existingMapping = mappings.find((m) => m.target === targetPath) if (existingMapping) { // Add to existing mapping sources if (!existingMapping.sources.includes(draggedField)) { setMappings((prev) => prev.map((m) => (m.id === existingMapping.id ? { ...m, sources: [...m.sources, draggedField] } : m)), ) } } else { // Create new mapping const newMapping: Mapping = { id: Date.now().toString(), sources: [draggedField], target: targetPath, } setMappings((prev) => [...prev, newMapping]) } setDraggedField(null) }, [draggedField, mappings], ) const handleMappingSelect = useCallback((mappingId: string) => { setSelectedMapping(mappingId) }, []) const handleMappingUpdate = useCallback((mappingId: string, updates: Partial) => { setMappings((prev) => prev.map((m) => (m.id === mappingId ? { ...m, ...updates } : m))) }, []) const handleMappingDelete = useCallback( (mappingId: string) => { setMappings((prev) => prev.filter((m) => m.id !== mappingId)) if (selectedMapping === mappingId) { setSelectedMapping(null) } }, [selectedMapping], ) const addNewMapping = useCallback(() => { const newMapping: Mapping = { id: Date.now().toString(), sources: [], target: "", } setMappings((prev) => [...prev, newMapping]) setSelectedMapping(newMapping.id) }, []) const handleStructureUpdate = useCallback((inputJson: any, outputStructure: any) => { setInputJson(inputJson) setOutputStructure(outputStructure) // Clear existing mappings when structure changes setMappings([]) setSelectedMapping(null) }, []) return (

{/* Structure Editor Toggle */}

JSON Structure Configuration

Define your input and output JSON structures

{showStructureEditor && (

)} {/* Main Mapping Interface */}

{/* Input JSON Tree */}

Input JSON Structure

{Object.keys(inputJson).length} root keys

{/* Mapping Canvas */}

Mapping Canvas

{selectedMapping && ( )}

{/* Output JSON Tree */}

Output JSON Structure

{Object.keys(outputStructure).length} root keys

{/* Bottom Panels */}

{/* Transform Editor */} m.id === selectedMapping) : null} onUpdate={handleMappingUpdate} /> {/* Preview Panel */}

) } [V0_FILE]typescriptreact:file="components/json-structure-editor.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription } from "@/components/ui/alert" import { Save, RotateCcw, AlertCircle } from "lucide-react" interface JsonStructureEditorProps { inputJson: any outputStructure: any onUpdate: (inputJson: any, outputStructure: any) => void } export function JsonStructureEditor({ inputJson, outputStructure, onUpdate }: JsonStructureEditorProps) { const [inputJsonText, setInputJsonText] = useState(JSON.stringify(inputJson, null, 2)) const [outputStructureText, setOutputStructureText] = useState(JSON.stringify(outputStructure, null, 2)) const [errors, setErrors] = useState<{ input?: string; output?: string }>({}) const validateAndUpdate = () => { const newErrors: { input?: string; output?: string } = {} try { const parsedInput = JSON.parse(inputJsonText) try { const parsedOutput = JSON.parse(outputStructureText) // If both are valid, update onUpdate(parsedInput, parsedOutput) setErrors({}) } catch (outputError) { newErrors.output = "Invalid JSON format in output structure" } } catch (inputError) { newErrors.input = "Invalid JSON format in input structure" } setErrors(newErrors) } const resetToDefaults = () => { const defaultInput = { user: { personalInfo: { firstName: "John", lastName: "Doe", email: "john.doe@example.com", phone: "+1-555-0123", }, account: { id: "user_12345", type: "premium", balance: 1250.75, currency: "USD", status: "active", }, preferences: { language: "en", timezone: "UTC-5", notifications: true, }, }, metadata: { timestamp: "2024-01-15T10:30:00Z", source: "api_v2", version: "1.2.3", }, } const defaultOutput = { profile: { fullName: "", contactInfo: { email: "", phone: "", }, accountDetails: { userId: "", accountType: "", currentBalance: "", accountStatus: "", }, }, settings: { locale: "", timezone: "", enableNotifications: "", }, system: { processedAt: "", dataSource: "", apiVersion: "", }, } setInputJsonText(JSON.stringify(defaultInput, null, 2)) setOutputStructureText(JSON.stringify(defaultOutput, null, 2)) setErrors({}) } return (

JSON Structure Editor

{(errors.input || errors.output) && ( {errors.input &&

Input JSON: {errors.input}

} {errors.output &&

Output JSON: {errors.output}

} )}

{/* Input JSON Editor */}

Input JSON Structure

Define the structure of your input data with sample values

setInputJsonText(e.target.value)}
            className={`font-mono text-xs h-64 ${errors.input ? "border-red-500" : ""}`}
            placeholder="Enter your input JSON structure..."
          />
        </div>

{/* Output JSON Editor */}
        <div className="space-y-2">
          <Label htmlFor="output-json" className="text-sm font-medium">
            Output JSON Structure
          </Label>
          <p className="text-xs text-gray-600">
            Define the desired output structure (use empty strings for mapped fields)
          </p>
          <Textarea
            id="output-json"
            value={outputStructureText}
            onChange={(e) => setOutputStructureText(e.target.value)}
            className={`font-mono text-xs h-64 ${errors.output ? "border-red-500" : ""}`}
            placeholder="Enter your output JSON structure..."
          />
        </div>
      </div>

<div className="bg-blue-50 p-3 rounded-lg">
        <h5 className="font-medium text-sm mb-2">Tips:</h5>
        <ul className="text-xs text-gray-700 space-y-1">
          <li>• Input JSON should contain sample data to demonstrate the structure</li>
          <li>• Output JSON should use empty strings ("") for fields that will be mapped</li>
          <li>• Nested objects are supported - drag from any level to any level</li>
          <li>• Changes will clear existing mappings to prevent conflicts</li>
        </ul>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/transform-editor.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import type { Mapping } from "@/components/json-mapper"
import { Save } from "lucide-react"

interface TransformEditorProps {
  selectedMapping: Mapping | null
  onUpdate: (mappingId: string, updates: Partial<Mapping>) => void
}

export function TransformEditor({ selectedMapping, onUpdate }: TransformEditorProps) {
  const [transformType, setTransformType] = useState<string>("noTransform")
  const [customExpression, setCustomExpression] = useState("")

useEffect(() => {
    if (selectedMapping) {
      setTransformType(selectedMapping.transform?.type || "noTransform")
      setCustomExpression(selectedMapping.transform?.expression || getDefaultExpression(transformType))
    } else {
      setTransformType("noTransform")
      setCustomExpression("")
    }
  }, [selectedMapping])

const handleSave = () => {
    if (!selectedMapping) return

const updates: Partial<Mapping> = {
      transform:
        transformType !== "noTransform"
          ? {
              type: transformType as any,
              expression: customExpression || getDefaultExpression(transformType),
            }
          : undefined,
    }

onUpdate(selectedMapping.id, updates)
  }

const getDefaultExpression = (type: string): string => {
    switch (type) {
      case "concat":
        return "concat(field1, field2)"
      case "uppercase":
        return "uppercase(field1)"
      case "lowercase":
        return "lowercase(field1)"
      case "format":
        return 'format(field1, "format_string")'
      default:
        return ""
    }
  }

const generateExpression = () => {
    if (!selectedMapping || transformType === "noTransform") return

let expression = ""
    const fieldNames = selectedMapping.sources.map((s) => s.split(".").pop())

switch (transformType) {
      case "concat":
        expression = `concat(${fieldNames.join(", ")})`
        break
      case "uppercase":
        expression = `uppercase(${fieldNames[0] || "field"})`
        break
      case "lowercase":
        expression = `lowercase(${fieldNames[0] || "field"})`
        break
      case "format":
        expression = `format(${fieldNames[0] || "field"}, "format_string")`
        break
      default:
        expression = fieldNames[0] || "field"
    }

setCustomExpression(expression)
  }

if (!selectedMapping) {
    return (
      <div>
        <h3 className="font-semibold text-sm mb-4">Transform Editor</h3>
        <p className="text-sm text-gray-500">Select a mapping to edit transformations</p>
      </div>
    )
  }

return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold text-sm">Transform Editor</h3>
        <Button size="sm" onClick={handleSave}>
          <Save className="w-4 h-4 mr-1" />
          Save
        </Button>
      </div>

<div className="space-y-4">
        <div>
          <Label className="text-xs">Mapping Details</Label>
          <div className="mt-1 p-2 bg-gray-50 rounded text-xs font-mono">
            <div>
              <strong>Sources:</strong> {selectedMapping.sources.join(", ") || "None"}
            </div>
            <div>
              <strong>Target:</strong> {selectedMapping.target || "None"}
            </div>
          </div>
        </div>

<div>
          <Label htmlFor="transform-type" className="text-xs">
            Transform Type
          </Label>
          <Select value={transformType} onValueChange={setTransformType}>
            <SelectTrigger className="mt-1">
              <SelectValue placeholder="Select transform type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="noTransform">No Transform</SelectItem>
              <SelectItem value="concat">Concatenate</SelectItem>
              <SelectItem value="uppercase">Uppercase</SelectItem>
              <SelectItem value="lowercase">Lowercase</SelectItem>
              <SelectItem value="format">Format</SelectItem>
              <SelectItem value="custom">Custom</SelectItem>
            </SelectContent>
          </Select>
        </div>

{transformType !== "noTransform" && (
          <div>
            <div className="flex items-center justify-between">
              <Label htmlFor="expression" className="text-xs">
                Transform Expression
              </Label>
              <Button size="sm" variant="outline" onClick={generateExpression} className="text-xs h-6 bg-transparent">
                Generate
              </Button>
            </div>
            <Textarea
              id="expression"
              value={customExpression}
              onChange={(e) => setCustomExpression(e.target.value)}
              placeholder="Enter transform expression..."
              className="mt-1 font-mono text-xs"
              rows={3}
            />
            <p className="text-xs text-gray-500 mt-1">
              Examples: concat(field1, " ", field2), uppercase(field1), format(field1, "YYYY-MM-DD")
            </p>
          </div>
        )}

<div className="pt-2 border-t">
          <Label className="text-xs">Available Functions</Label>
          <div className="mt-1 text-xs text-gray-600 space-y-1">
            <div>
              <code>concat(a, b, ...)</code> - Concatenate values
            </div>
            <div>
              <code>uppercase(text)</code> - Convert to uppercase
            </div>
            <div>
              <code>lowercase(text)</code> - Convert to lowercase
            </div>
            <div>
              <code>format(value, pattern)</code> - Format value
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>