Initial commit: add project files and README

src/components/ApiDocViewer.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback } from 'react'
+import { DocTree } from './DocTree'
+import { DocContent } from './DocContent'
+import { parseMarkdown, buildFileTree } from '@/lib/parser'
+import type { DocFile, ParsedDoc } from '@/lib/types'
+import { config } from '@/config'
+
+const modules = import.meta.glob('../docs/**/*.md', { as: 'raw', eager: true })
+
+const DOCS_FILES: Record<string, string> = Object.fromEntries(
+  Object.entries(modules).map(([path, content]) => {
+    const relativePath = path.replace('../docs/', '')
+    return [relativePath, content as string]
+  })
+)
+
+export const ApiDocViewer = () => {
+  const [fileTree, setFileTree] = useState<DocFile[]>([])
+  const [selectedPath, setSelectedPath] = useState<string | undefined>()
+  const [currentDoc, setCurrentDoc] = useState<ParsedDoc | null>(null)
+
+  useEffect(() => {
+    const files = Object.keys(DOCS_FILES)
+    const tree = buildFileTree(files, '/')
+    setFileTree(tree)
+    
+    if (files.length > 0) {
+      setSelectedPath(files[0])
+    }
+  }, [])
+
+  useEffect(() => {
+    if (selectedPath) {
+      const content = DOCS_FILES[selectedPath]
+      if (content) {
+        const parsed = parseMarkdown(content)
+        setCurrentDoc(parsed)
+      }
+    }
+  }, [selectedPath])
+
+  const handleSelect = useCallback((file: DocFile) => {
+    if (!file.isDir) {
+      setSelectedPath(file.relativePath)
+    }
+  }, [])
+
+  const handleReferenceClick = useCallback((ref: string) => {
+    const normalizedRef = ref.replace('.md', '').replace(/^\.\.\//, '')
+    const allFiles = Object.keys(DOCS_FILES)
+    const match = allFiles.find(f => f.replace('.md', '') === normalizedRef)
+    if (match) {
+      setSelectedPath(match)
+    }
+  }, [])
+
+  return (
+    <div className="flex h-screen bg-[#1e1e1e]">
+      <aside className="w-64 bg-[#252526] border-r border-[#3c3c3c] flex flex-col">
+        <div className="p-3 border-b border-[#3c3c3c]">
+          <h2 className="text-sm font-semibold text-gray-200">{config.sidebarTitle}</h2>
+        </div>
+        <div className="flex-1 overflow-hidden">
+          <DocTree
+            files={fileTree}
+            selectedPath={selectedPath}
+            onSelect={handleSelect}
+          />
+        </div>
+      </aside>
+
+      <main className="flex-1 overflow-hidden">
+        <DocContent
+          doc={currentDoc}
+          onReferenceClick={handleReferenceClick}
+        />
+      </main>
+    </div>
+  )
+}