feat(dashboard): scaffold React + Vite app with Tailwind, Zustand, and core dependency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-22 10:58:03 +08:00 · 2026-03-14 17:51:50 +08:00
parent e1fd03ec38
commit 39dfffc4f4
11 changed files with 1517 additions and 11 deletions
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Understand Anything</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,28 @@
+{
+  "name": "@understand-anything/dashboard",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@understand-anything/core": "workspace:*",
+    "@xyflow/react": "^12.0.0",
+    "@monaco-editor/react": "^4.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
@@ -0,0 +1,9 @@
+function App() {
+  return (
+    <div className="h-screen w-screen bg-gray-900 text-white flex items-center justify-center">
+      <h1 className="text-2xl font-bold">Understand Anything</h1>
+    </div>
+  );
+}
+
+export default App;
@@ -0,0 +1 @@
+@import "tailwindcss";
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,40 @@
+import { create } from "zustand";
+import type { KnowledgeGraph } from "@understand-anything/core";
+
+interface DashboardStore {
+  graph: KnowledgeGraph | null;
+  selectedNodeId: string | null;
+  searchQuery: string;
+  searchResults: string[]; // node IDs
+
+  setGraph: (graph: KnowledgeGraph) => void;
+  selectNode: (nodeId: string | null) => void;
+  setSearchQuery: (query: string) => void;
+}
+
+export const useDashboardStore = create<DashboardStore>()((set, get) => ({
+  graph: null,
+  selectedNodeId: null,
+  searchQuery: "",
+  searchResults: [],
+
+  setGraph: (graph) => set({ graph }),
+  selectNode: (nodeId) => set({ selectedNodeId: nodeId }),
+  setSearchQuery: (query) => {
+    const graph = get().graph;
+    if (!graph || !query.trim()) {
+      set({ searchQuery: query, searchResults: [] });
+      return;
+    }
+    const lower = query.toLowerCase();
+    const results = graph.nodes
+      .filter(
+        (node) =>
+          node.name.toLowerCase().includes(lower) ||
+          node.summary.toLowerCase().includes(lower) ||
+          node.tags.some((tag) => tag.toLowerCase().includes(lower)),
+      )
+      .map((n) => n.id);
+    set({ searchQuery: query, searchResults: results });
+  },
+}));
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsBuildInfoFile",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }]
+}
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});