feat: complete a simple json visualiser
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
import { useMemo } from "react"
|
||||
import jp, { PathComponent } from "jsonpath"
|
||||
import _ from "lodash"
|
||||
|
||||
export interface JsonTreeNodeProps {
|
||||
data: unknown
|
||||
path: PathComponent[]
|
||||
matchedPaths: string[]
|
||||
}
|
||||
|
||||
export default function JsonTreeNode({ data, path, matchedPaths }: JsonTreeNodeProps) {
|
||||
const currentPathString = useMemo(() => jp.stringify(path), [path])
|
||||
const isMatched = matchedPaths.includes(currentPathString)
|
||||
|
||||
const highlightClass = isMatched ? "bg-yellow-200 ring-2 ring-yellow-400 rounded-sm" : ""
|
||||
|
||||
if (_.isObject(data) && data != null) {
|
||||
const isArray = Array.isArray(data)
|
||||
const entries = Object.entries(data)
|
||||
|
||||
return (
|
||||
<div className="ml-6 border-l border-slate-200 pl-3 transition-all">
|
||||
<span className="text-slate-500">{isArray ? "[" : "{"}</span>
|
||||
{entries.map(([key, value], index) => {
|
||||
const nextPath = [...path, isArray ? Number(key) : key]
|
||||
|
||||
return (
|
||||
<div key={key} className="my-1">
|
||||
{!isArray && <span className="text-indigo-600 font-medium">"{key}": </span>}
|
||||
<JsonTreeNode data={value} path={nextPath} matchedPaths={matchedPaths} />
|
||||
{index < entries.length - 1 && <span className="text-slate-400">,</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<span className="text-slate-500">{isArray ? "]" : "}"}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderValue = () => {
|
||||
if (typeof data === "string") return <span className="text-emerald-600">"{data}"</span>
|
||||
if (typeof data === "number") return <span className="text-blue-600">{data}</span>
|
||||
if (typeof data === "boolean") return <span className="text-orange-600">{String(data)}</span>
|
||||
return <span className="text-gray-400">null</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-block px-1 transition-colors duration-200 ${highlightClass}`}>
|
||||
{renderValue()}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
+94
-121
@@ -1,138 +1,111 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import { useMemo, useState } from "react"
|
||||
import jp from "jsonpath"
|
||||
import JsonTreeNode from "@/components/json-tree-node"
|
||||
|
||||
/**
|
||||
* Home page component that displays the main landing content.
|
||||
*/
|
||||
export default function Home() {
|
||||
const initialData = {
|
||||
centre_id: "LON-01",
|
||||
location: "London",
|
||||
is_active: true,
|
||||
staff_members: [
|
||||
{ id: 101, name: "Alice", roles: ["Admin", "Manager"] },
|
||||
{ id: 102, name: "Bob", roles: ["Developer"] },
|
||||
],
|
||||
config: {
|
||||
colour_scheme: "Dark Mode",
|
||||
retention_days: 30,
|
||||
},
|
||||
}
|
||||
|
||||
const [jsonInput, setJsonInput] = useState<string>(JSON.stringify(initialData, null, 2))
|
||||
const [query, setQuery] = useState<string>("$.staff_members[*].name")
|
||||
|
||||
// 计算匹配结果
|
||||
const result = useMemo(() => {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonInput)
|
||||
const nodes = jp.nodes(parsed, query)
|
||||
return {
|
||||
parsed,
|
||||
matchedPaths: nodes.map((n) => jp.stringify(n.path)),
|
||||
error: null,
|
||||
}
|
||||
} catch (e) {
|
||||
return { parsed: null, matchedPaths: [], error: (e as Error).message }
|
||||
}
|
||||
}, [jsonInput, query])
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Hero Section */}
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl">
|
||||
Welcome to OnixByte React Template
|
||||
</h1>
|
||||
<p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
|
||||
A modern React application template with <b>TypeScript</b>, <b>Tailwind CSS</b>,{" "}
|
||||
<b>Redux</b>, and <b>React Router</b> for seamless navigation.
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-900">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
<header className="flex flex-col gap-2">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-800">
|
||||
TypeScript JSONPath Explorer
|
||||
</h1>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Debug and visualises your JSONPath queries with real-time highlighting.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="mt-12">
|
||||
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Feature 1 */}
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<svg
|
||||
className="h-8 w-8 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Fast Development</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
Built with Vite for lightning-fast development experience and hot module
|
||||
replacement.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* 控制面板 */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
JSON Source
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
className="w-full h-100 p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none"
|
||||
value={jsonInput}
|
||||
onChange={(e) => setJsonInput(e.target.value)}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
|
||||
<label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
|
||||
JSONPath Expression
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full p-3 font-mono text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="e.g. $..roles"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<svg
|
||||
className="h-8 w-8 text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
{/* 可视化面板 */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
|
||||
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Visualised Result
|
||||
</span>
|
||||
<span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
|
||||
{result.matchedPaths.length} matches
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 overflow-auto max-h-[580px] font-mono text-sm leading-relaxed">
|
||||
{result.error ? (
|
||||
<div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs">
|
||||
<strong>Error:</strong> {result.error}
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Type Safety</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
Full TypeScript support with strict type checking for better code quality and
|
||||
developer experience.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<JsonTreeNode
|
||||
data={result.parsed}
|
||||
path={["$"]}
|
||||
matchedPaths={result.matchedPaths}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<svg
|
||||
className="h-8 w-8 text-purple-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Modern Styling</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
Tailwind CSS for utility-first styling with responsive design and modern UI
|
||||
components.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="bg-blue-50 rounded-lg p-6 text-center">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">Ready to start building?</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Explore the navigation above to see React Router in action, or check out the source code
|
||||
to understand the implementation.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<Link
|
||||
to="/about"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Learn More
|
||||
</Link>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Get in Touch
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user