Skip to content

feat: migrate frontend to React with resizable panels and view tabs - #21

Merged
humzakhan merged 5 commits into
mainfrom
humzakhan/phase2-react-migration
Mar 13, 2026
Merged

humzakhan merged 5 commits into
mainfrom
humzakhan/phase2-react-migration

Conversation

@humzakhan

Copy link
Copy Markdown
Owner

Summary

  • Migrate entire frontend from vanilla TypeScript classes to React 18 functional components
  • Add Framer Motion for smooth view transitions between tabs
  • Add react-resizable-panels for VS Code-like resizable layout
  • Add four view tabs: Architecture, Dependencies, Data Models, Call Flow
  • Architecture Map view fully ported; other three are placeholders for Phases 3-6
  • Add Vite dev server proxy to /api for local development

New Dependencies

  • react, react-dom, @vitejs/plugin-react
  • @xyflow/react (for future graph views)
  • framer-motion (view transitions)
  • react-resizable-panels (layout)
  • react-shiki (code highlighting)

Test plan

  • TypeScript compiles clean (tsc --noEmit)
  • Vite production build succeeds
  • Architecture view preserves Cytoscape graph with card overlays
  • All four tabs render and switch with animation
  • NavTree, SearchBar, DetailPanel work as React components
  • Resizable panels work for sidebar and detail panel

Add new dependencies for the React-based frontend:
- react, react-dom, @vitejs/plugin-react
- @xyflow/react for graph visualization
- framer-motion for animations
- react-resizable-panels for VS Code-like layout
- react-shiki for code highlighting

Update vite.config.ts with React plugin and API proxy.
Update tsconfig.json with JSX support.
- layerColors.ts: centralized color constants and layer hints
- useReportData.ts: React context and hook for loading report data
  from API, embedded JSON, or dev fixture
Port Toolbar, SearchBar, NavTree, DetailPanel, and StatusBar from
vanilla TypeScript classes to React functional components with hooks.
Same visual behavior, now composable with React props/state.
- ArchitectureMap.tsx: Cytoscape.js graph with card overlays (ported)
- DependencyGraph.tsx: placeholder for Phase 4
- DataModels.tsx: placeholder for Phase 5
- CallFlow.tsx: placeholder for Phase 6

All views integrated into the tab navigation system.
- App.tsx: main component with resizable panel layout, view switching
  with Framer Motion transitions, and coordinated selection state
- main.tsx: React 18 createRoot entry point with StrictMode
- Remove old vanilla TypeScript component and view files
- Update CSS to work with React panel layout instead of CSS grid
@humzakhan
humzakhan force-pushed the humzakhan/phase2-react-migration branch from 7aa0044 to 76f8105 Compare March 13, 2026 18:03
@humzakhan
humzakhan merged commit b4b5179 into main Mar 13, 2026
2 checks passed
@humzakhan
humzakhan deleted the humzakhan/phase2-react-migration branch March 13, 2026 18:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant