[feat]: JsonViewer component

[keiloktql]

Feature description

Feat: Add JsonViewer Component

Description

This PR introduces a new JsonViewer component to the registry, designed for visualizing JSON data with a rich set of features, including syntax highlighting, collapsible nodes, and mobile responsiveness.

Key Features

• Syntax Highlighting: Distinct colors for strings, numbers, booleans, and null values (with dark mode support).
• Collapsible Nodes: Objects and arrays can be expanded or collapsed.
  • Supports collapseOn prop (click or doubleClick).
  • Includes "Expand All" and "Collapse All" utility buttons.
  • defaultExpanded prop to control initial state (true, false, or a depth number).
• Smart Truncation:
  • Large arrays are automatically truncated (configurable via truncation prop).
  • Long strings (> 50 chars) wrap automatically.
  • Very long strings (> 180 chars) are clamped with a "Show More" / "Show Less" toggle.
• Enhanced Data Display:
  • URLs: Automatically detected and rendered as clickable links.
  • Colors: Hex and RGBA strings display a small color preview swatch.
  • Timestamps: Date strings and timestamps display a relative time hint (e.g., "// 2 hours ago").
• Mobile Optimized:
  • Truncation is automatically disabled on mobile for better readability.
  • Layout adjusts to ensure content is accessible on small screens.
• Developer Experience:
  • showLineNumbers: Toggle line numbers.
  • showColorIndent: Visual guide for nesting levels.
  • One-click "Copy" button for the raw JSON.

Affected component/components

tooltip

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

[keiloktql]

as proposed by @lekekbot , cheers 👍