Create a JSON tree visualizer

[Devessier]

Inspired by https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree

• Created a reusable JSON tree visualizer
• For now, the visualizer is only meant to render raw JSON. It can't determine if a string is a UUID and display a specific icon.

Demo

CleanShot.2025-02-28.at.15.36.16.mp4

[greptile-apps]

PR Summary

This PR introduces a comprehensive JSON tree visualizer component that renders JSON data in an interactive, collapsible tree structure with appropriate visual styling and icons for different data types.

• Created a modular component architecture with specialized renderers for different JSON types (arrays, objects, primitives) in JsonArrayNode.tsx, JsonObjectNode.tsx, and JsonValueNode.tsx
• Implemented collapsible tree functionality with smooth animations using JsonArrow.tsx and Framer Motion
• Added proper indentation and hierarchical display with JsonList.tsx that adjusts padding based on nesting depth
• Included type-specific icons from Tabler Icons to visually distinguish between different JSON data types
• Created comprehensive Storybook stories in JsonTree.stories.tsx demonstrating all supported JSON structures and nesting patterns

_{14 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: The '[null]' string representation for null values includes square brackets which might be confusing as it suggests an array. Consider using just 'null' for clarity.

[greptile-apps]

style: Icon type is set to any which loses type safety. Consider using IconComponent | undefined instead for better type checking.

Suggested change

	label?: never;
	Icon?: any;
	}
	label?: never;
	Icon?: IconComponent | undefined;
	}