JSON viewer

"use client";

import * as React from "react";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };

export interface JsonViewerProps {
  data: Json;
  /** Levels expanded on first render. */
  defaultExpandDepth?: number;
  rootName?: string;
  className?: string;
}

function Value({ v }: { v: Json }) {
  if (v === null) return <span className="c-key">null</span>;
  if (typeof v === "string") return <span className="c-str">&quot;{v}&quot;</span>;
  if (typeof v === "number") return <span className="c-num">{v}</span>;
  if (typeof v === "boolean") return <span className="c-key">{String(v)}</span>;
  return null;
}

function Node({ name, value, depth, expandDepth, last }: { name?: string; value: Json; depth: number; expandDepth: number; last: boolean }) {
  const [open, setOpen] = React.useState(depth < expandDepth);
  const isObj = value !== null && typeof value === "object";
  const entries = isObj ? (Array.isArray(value) ? value.map((v, i) => [String(i), v] as const) : Object.entries(value)) : [];
  const [openB, closeB] = Array.isArray(value) ? ["[", "]"] : ["{", "}"];
  const label = name !== undefined && <><span className="c-prop">{Array.isArray(value) || !/^\d+$/.test(name) ? `"${name}"` : name}</span>: </>;

  if (!isObj)
    return (
      <div className="pl-5">
        {label}
        <Value v={value} />
        {!last && ","}
      </div>
    );

  return (
    <div className={cn(depth > 0 && "pl-5")}>
      <button type="button" aria-expanded={open} onClick={() => setOpen((o) => !o)} className="-ml-5 inline-flex items-center rounded hover:bg-accent/60">
        <ChevronRight className={cn("size-4 text-muted-foreground transition-transform", open && "rotate-90")} />
        <span>{label}{openB}</span>
      </button>
      {open ? (
        <>
          {entries.map(([k, v], i) => (
            <Node key={k} name={Array.isArray(value) ? undefined : k} value={v} depth={depth + 1} expandDepth={expandDepth} last={i === entries.length - 1} />
          ))}
          <div>{closeB}{!last && ","}</div>
        </>
      ) : (
        <span className="text-muted-foreground"> {entries.length} {Array.isArray(value) ? "items" : "keys"} {closeB}{!last && ","}</span>
      )}
    </div>
  );
}

/** Collapsible JSON tree. */
export function JsonViewer({ data, defaultExpandDepth = 2, className }: JsonViewerProps) {
  return (
    <div className={cn("lode-code overflow-x-auto rounded-lg border border-border bg-card p-3 pl-7 font-mono text-[12.5px] leading-6", className)} role="tree">
      <Node value={data} depth={0} expandDepth={defaultExpandDepth} last />
    </div>
  );
}