feat: json-view

Author: tinywaves

packages/web/package.json

@@ -10,8 +10,31 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
+    "@mantine/carousel": "^9.4.1",
+    "@mantine/charts": "^9.4.1",
+    "@mantine/code-highlight": "^9.4.1",
+    "@mantine/core": "^9.4.1",
+    "@mantine/dates": "^9.4.1",
+    "@mantine/dropzone": "^9.4.1",
+    "@mantine/form": "^9.4.1",
+    "@mantine/hooks": "^9.4.1",
+    "@mantine/modals": "^9.4.1",
+    "@mantine/notifications": "^9.4.1",
+    "@mantine/nprogress": "^9.4.1",
+    "@mantine/spotlight": "^9.4.1",
+    "@mantine/tiptap": "^9.4.1",
+    "@tiptap/extension-link": "^3.27.1",
+    "@tiptap/pm": "^3.27.1",
+    "@tiptap/react": "^3.27.1",
+    "@tiptap/starter-kit": "^3.27.1",
+    "dayjs": "^1.11.21",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react-dom": "^19.2.7",
+    "react-json-view": "^1.21.3",
+    "react-router": "^8.1.0",
+    "recharts": "^3.9.2"
   },
   "devDependencies": {
     "@rsbuild/core": "^2.1.4",
@@ -20,6 +43,10 @@
     "@types/node": "catalog:",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.16",
+    "postcss-load-config": "^6.0.1",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
     "tailwindcss": "catalog:",
     "typescript": "catalog:"
   }

packages/web/postcss.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
+
+export default config;

packages/web/src/app.tsx

@@ -0,0 +1,21 @@
+import { useMemo, useState } from 'react';
+import { JsonInput } from '@mantine/core';
+import ReactJson from 'react-json-view';
+
+export default function JsonView() {
+  const [value, setValue] = useState('');
+  const json = useMemo(() => {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return {};
+    }
+  }, [value]);
+
+  return (
+    <>
+      <JsonInput value={value} onChange={setValue} />
+      <ReactJson src={json} />
+    </>
+  );
+}

packages/web/src/components/json-view.tsx

@@ -1,13 +1,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './app';
+import { HashRouter, Routes, Route } from 'react-router';
+import { MantineProvider } from '@mantine/core';
+import Layout from './layout';
+import JsonView from './components/json-view';
+import '@mantine/core/styles.css';
+import './index.css';
 
 const rootEl = document.getElementById('root');
 if (rootEl) {
   const root = ReactDOM.createRoot(rootEl);
   root.render(
     <React.StrictMode>
-      <App />
+      <MantineProvider>
+        <HashRouter>
+          <Routes>
+            <Route path="/" element={<Layout />}>
+              <Route path="json-view" element={<JsonView />} />
+            </Route>
+          </Routes>
+        </HashRouter>
+      </MantineProvider>
     </React.StrictMode>,
   );
 }

packages/web/src/index.tsx

@@ -0,0 +1,10 @@
+import { Outlet, Link } from 'react-router';
+
+export default function Layout() {
+  return (
+    <div className="h-screen">
+      <Link to="/json-view">Json View</Link>
+      <Outlet />
+    </div>
+  );
+}