JSON tree

"use client";

import { useEffect, useRef, useState } from "react";
import type { ComponentProps, CSSProperties, KeyboardEvent } from "react";
import "./json-tree.css";

export type JsonTreeProps = Omit<ComponentProps<"div">, "children"> & {
  /** Any JSON-like value: objects, arrays, strings, numbers, booleans, null. */
  data: unknown;
  /** Names the tree for assistive tech. */
  label: string;
  /** How many levels start open. 0 shows only the root. */
  defaultExpandDepth?: number;
  /** Text shown on the root row. */
  rootName?: string;
  /** Lists object keys in code point order instead of insertion order. */
  sortKeys?: boolean;
};

type Kind = "object" | "array" | "string" | "number" | "boolean" | "null" | "undefined" | "circular" | "other";

type Row =
  | {
      type: "node";
      id: string;
      path: string;
      parent: string | null;
      depth: number;
      name: string | null;
      kind: Kind;
      text: string;
      full?: string;
      size: number;
      open: boolean;
      pos: number;
      setSize: number;
    }
  | { type: "more"; id: string; path: string; parent: string; depth: number; count: number; pos: number; setSize: number };

const PAGE = 100;
const MAX_STRING = 80;
const IDENT = /^[A-Za-z_$][\w$]*$/;

function childPath(path: string, key: string | number) {
  if (typeof key === "number") return `${path}[${key}]`;
  if (IDENT.test(key)) return path ? `${path}.${key}` : key;
  return `${path}[${JSON.stringify(key)}]`;
}

function describe(value: unknown, ancestors: object[]): { kind: Kind; text: string; full?: string } {
  if (value === null) return { kind: "null", text: "null" };
  switch (typeof value) {
    case "string": {
      const shown = value.length > MAX_STRING ? `${value.slice(0, MAX_STRING)}…` : value;
      return { kind: "string", text: JSON.stringify(shown), full: value.length > MAX_STRING ? value : undefined };
    }
    case "number":
      return { kind: "number", text: String(value) };
    case "bigint":
      return { kind: "number", text: `${value}n` };
    case "boolean":
      return { kind: "boolean", text: String(value) };
    case "undefined":
      return { kind: "undefined", text: "undefined" };
    case "object":
      if (value instanceof Date) {
        return { kind: "string", text: Number.isNaN(value.getTime()) ? "Invalid date" : value.toISOString() };
      }
      if (ancestors.includes(value)) return { kind: "circular", text: "[Circular]" };
      return { kind: Array.isArray(value) ? "array" : "object", text: "" };
    case "function":
      return { kind: "other", text: `ƒ ${value.name || "anonymous"}()` };
    default:
      return { kind: "other", text: String(value) };
  }
}

async function copyText(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    const area = document.createElement("textarea");
    area.value = text;
    area.setAttribute("readonly", "");
    area.style.position = "fixed";
    area.style.opacity = "0";
    const back = document.activeElement;
    document.body.append(area);
    area.select();
    let ok = false;
    try {
      ok = document.execCommand("copy");
    } catch {
      ok = false;
    }
    area.remove();
    if (back instanceof HTMLElement) back.focus();
    return ok;
  }
}

export function JsonTree({
  data,
  label,
  defaultExpandDepth = 1,
  rootName,
  sortKeys = false,
  className,
  ...rest
}: JsonTreeProps) {
  const [toggled, setToggled] = useState<Map<string, boolean>>(() => new Map());
  const [shown, setShown] = useState<Map<string, number>>(() => new Map());
  const [active, setActive] = useState("");
  const [copied, setCopied] = useState<string | null>(null);
  const [status, setStatus] = useState("");
  const rowEls = useRef(new Map<string, HTMLLIElement>());
  const pendingFocus = useRef<number | null>(null);

  // After "show more", the first new row takes the place (and the focus) of the more row.
  useEffect(() => {
    const index = pendingFocus.current;
    if (index === null) return;
    pendingFocus.current = null;
    const row = rows[Math.min(index, rows.length - 1)];
    setActive(row.id);
    rowEls.current.get(row.id)?.focus();
  });

  useEffect(() => {
    if (copied === null) return;
    const t = setTimeout(() => setCopied(null), 1600);
    return () => clearTimeout(t);
  }, [copied]);

  const rows: Row[] = [];

  function walk(
    value: unknown,
    path: string,
    name: string | null,
    parent: string | null,
    depth: number,
    ancestors: object[],
    pos: number,
    setSize: number,
  ) {
    const d = describe(value, ancestors);
    const container = d.kind === "object" || d.kind === "array";
    const obj = container && typeof value === "object" && value !== null ? value : null;
    const keys: (string | number)[] = obj
      ? Array.isArray(obj)
        ? obj.map((_, i) => i)
        : sortKeys
          ? Object.keys(obj).sort()
          : Object.keys(obj)
      : [];
    const open = obj ? (toggled.get(path) ?? depth < defaultExpandDepth) : false;
    rows.push({
      type: "node",
      id: path,
      path,
      parent,
      depth,
      name,
      kind: d.kind,
      text: d.text,
      full: d.full,
      size: keys.length,
      open,
      pos,
      setSize,
    });
    if (!obj || !open) return;
    const limit = shown.get(path) ?? PAGE;
    const visible = keys.slice(0, limit);
    const more = keys.length - visible.length;
    const childSet = visible.length + (more > 0 ? 1 : 0);
    const nextAncestors = [...ancestors, obj];
    visible.forEach((k, i) => {
      const child = (obj as Record<string | number, unknown>)[k];
      walk(child, childPath(path, k), String(k), path, depth + 1, nextAncestors, i + 1, childSet);
    });
    if (more > 0) {
      rows.push({
        type: "more",
        id: `${path}\u0000more`,
        path,
        parent: path,
        depth: depth + 1,
        count: Math.min(PAGE, more),
        pos: childSet,
        setSize: childSet,
      });
    }
  }

  walk(data, "", rootName ?? null, null, 0, [], 1, 1);

  const activeIndex = Math.max(0, rows.findIndex((r) => r.id === active));
  const activeId = rows[activeIndex].id;

  function focusRow(id: string) {
    setActive(id);
    rowEls.current.get(id)?.focus();
  }

  function setOpen(path: string, open: boolean) {
    setToggled((m) => new Map(m).set(path, open));
  }

  function revealMore(row: Row) {
    const index = rows.indexOf(row);
    if (rowEls.current.get(row.id) === document.activeElement) pendingFocus.current = index;
    setShown((m) => new Map(m).set(row.path, (m.get(row.path) ?? PAGE) + PAGE));
  }

  async function copy(path: string) {
    const ok = await copyText(path);
    if (ok) {
      setCopied(path);
      setStatus(`Copied ${path}`);
    } else {
      setStatus("Copy failed");
    }
  }

  function activate(row: Row) {
    if (row.type === "more") revealMore(row);
    else if (row.kind === "object" || row.kind === "array") setOpen(row.path, !row.open);
  }

  function onKeyDown(e: KeyboardEvent<HTMLLIElement>, row: Row, index: number) {
    const expandable = row.type === "node" && (row.kind === "object" || row.kind === "array");
    switch (e.key) {
      case "ArrowDown":
        if (index < rows.length - 1) focusRow(rows[index + 1].id);
        break;
      case "ArrowUp":
        if (index > 0) focusRow(rows[index - 1].id);
        break;
      case "Home":
        focusRow(rows[0].id);
        break;
      case "End":
        focusRow(rows[rows.length - 1].id);
        break;
      case "ArrowRight":
        if (!expandable || row.type !== "node") break;
        if (!row.open) setOpen(row.path, true);
        else if (row.size > 0) focusRow(rows[index + 1].id);
        break;
      case "ArrowLeft":
        if (row.type === "node" && expandable && row.open) setOpen(row.path, false);
        else if (row.parent !== null) focusRow(row.parent);
        break;
      case "Enter":
      case " ":
        activate(row);
        break;
      case "c":
      case "C":
        if (!(e.ctrlKey || e.metaKey) || row.type !== "node" || row.depth === 0) return;
        if (window.getSelection()?.isCollapsed === false) return;
        void copy(row.path);
        break;
      default:
        return;
    }
    e.preventDefault();
    e.stopPropagation();
  }

  return (
    <div {...rest} className={["eq-json-tree", className].filter(Boolean).join(" ")}>
      <ul className="eq-json-tree-list" role="tree" aria-label={label}>
        {rows.map((row, index) => {
          const common = {
            ref: (el: HTMLLIElement | null) => {
              if (el) rowEls.current.set(row.id, el);
              else rowEls.current.delete(row.id);
            },
            role: "treeitem",
            "aria-level": row.depth + 1,
            "aria-posinset": row.pos,
            "aria-setsize": row.setSize,
            tabIndex: row.id === activeId ? 0 : -1,
            style: { "--_depth": row.depth } as CSSProperties,
            onFocus: () => setActive(row.id),
            onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => onKeyDown(e, row, index),
          };
          if (row.type === "more") {
            return (
              <li
                key={row.id}
                {...common}
                className="eq-json-tree-row eq-json-tree-more"
                onClick={() => revealMore(row)}
              >
                <span className="eq-json-tree-spacer" aria-hidden="true" />
                Show {row.count} more
              </li>
            );
          }
          const expandable = row.kind === "object" || row.kind === "array";
          return (
            <li
              key={row.id}
              {...common}
              className="eq-json-tree-row"
              aria-expanded={expandable ? row.open : undefined}
              onClick={() => {
                focusRow(row.id);
                activate(row);
              }}
            >
              {expandable ? (
                <svg
                  className="eq-json-tree-chevron"
                  viewBox="0 0 12 12"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden="true"
                >
                  <path d="M4.5 3 7.5 6l-3 3" />
                </svg>
              ) : (
                <span className="eq-json-tree-spacer" aria-hidden="true" />
              )}
              {row.name !== null && (
                <span className="eq-json-tree-key">
                  {row.name}
                  {row.depth > 0 && <span className="eq-json-tree-punct">: </span>}
                </span>
              )}
              {expandable ? (
                <span className="eq-json-tree-count">
                  {row.kind === "array" ? `[${row.size}]` : `{${row.size}}`}
                </span>
              ) : (
                <span className="eq-json-tree-value" data-kind={row.kind} title={row.full}>
                  {row.text}
                </span>
              )}
              {row.depth > 0 && (
                <button
                  type="button"
                  className="eq-json-tree-copy"
                  tabIndex={-1}
                  aria-hidden="true"
                  title={`Copy path ${row.path}`}
                  data-copied={copied === row.path || undefined}
                  onClick={(e) => {
                    e.stopPropagation();
                    void copy(row.path);
                  }}
                >
                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    {copied === row.path ? (
                      <path key="tick" className="eq-json-tree-tick" d="m3.5 8.5 3 3 6-7" pathLength="1" />
                    ) : (
                      <path key="copy" d="M5.5 5.5V3.5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2M3.5 5.5h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z" />
                    )}
                  </svg>
                </button>
              )}
            </li>
          );
        })}
      </ul>
      <span className="eq-json-tree-status" role="status">
        {status}
      </span>
    </div>
  );
}