Migrate UI from Vue.js to React+TypeScript

REACT_MIGRATION.md

@@ -0,0 +1,123 @@
+# React UI Migration - Summary
+
+## What Changed
+
+The UI package (`packages/ui`) has been completely migrated from Vue.js to React+TypeScript.
+
+## Migration Details
+
+### Technology Stack
+
+**Before (Vue):**
+- Vue 3.4.27
+- Vuetify 3.6.7
+- Pinia 2.1.7
+- JavaScript
+- Vite 5.2.11
+
+**After (React):**
+- React 18.3.1
+- TypeScript 5.7.3
+- Zustand 4.5.7
+- Custom styled components
+- Vite 5.4.14
+
+### Files Changed
+
+**Created:**
+- `packages/ui/src/App.tsx` - Main React application component
+- `packages/ui/src/main.tsx` - React application entry point
+- `packages/ui/src/index.ts` - Library exports
+- `packages/ui/src/index.css` - Global styles
+- `packages/ui/src/components/Home.tsx` - Main streaming component
+- `packages/ui/src/components/device/DeviceActions.tsx` - Device configuration
+- `packages/ui/src/components/device/DeviceControls.tsx` - Device controls
+- `packages/ui/src/components/file/FileList.tsx` - File management
+- `packages/ui/src/components/file/FileUpload.tsx` - File upload
+- `packages/ui/src/stores/adb.ts` - ADB state management
+- `packages/ui/src/stores/file.ts` - File state management
+- `packages/ui/src/stores/toast.ts` - Toast notification state
+- `packages/ui/tsconfig.json` - TypeScript configuration
+- `packages/ui/tsconfig.node.json` - TypeScript node configuration
+- `packages/ui/vite.config.ts` - Vite configuration for React
+- `packages/ui/USAGE.md` - Library usage guide
+- `packages/ui/MIGRATION.md` - Vue to React migration guide
+
+**Removed:**
+- All `.vue` files (replaced with `.tsx`)
+- All Vue-specific plugins and configuration
+- Pinia store files (replaced with Zustand)
+- Vuetify dependencies
+- Vue Router (single page app now)
+
+**Unchanged:**
+- `packages/ui/src/services/` - All service files (framework-agnostic)
+- `packages/ui/src/utils/` - All utility files (framework-agnostic)
+- `packages/api/` - Backend server (100% compatible)
+
+### Backend Compatibility
+
+✅ **Zero backend changes required**
+
+The React UI maintains full compatibility with the existing Node.js backend:
+- Same WebSocket protocol
+- Same API endpoints
+- Same message formats
+- Same authentication flow
+
+## How to Use
+
+### Development
+
+```bash
+cd packages/ui
+pnpm install
+pnpm dev
+```
+
+### Production Build
+
+```bash
+cd packages/ui
+pnpm build
+```
+
+### As a Library
+
+```tsx
+import { Home } from '@scrcpy-streaming/ui'
+
+function App() {
+  return <Home />
+}
+```
+
+See `packages/ui/USAGE.md` for detailed documentation.
+
+## Testing
+
+The build and development server have been tested and are working correctly.
+
+For full end-to-end testing:
+1. Start the backend server: `cd packages/api && pnpm start`
+2. Start the UI: `cd packages/ui && pnpm dev`
+3. Navigate to http://localhost:3000
+
+## Benefits
+
+1. **TypeScript Support**: Full type safety throughout the codebase
+2. **Modern Stack**: React is the industry standard with excellent tooling
+3. **Better Performance**: React's virtual DOM and optimization
+4. **Library Ready**: Can be imported as a component in other projects
+5. **Maintainability**: Cleaner component structure and state management
+6. **Community**: Larger ecosystem and more resources
+
+## Migration for Developers
+
+If you were familiar with the Vue version, see `packages/ui/MIGRATION.md` for a detailed comparison and migration guide.
+
+## Questions?
+
+- See `packages/ui/README.md` for setup instructions
+- See `packages/ui/USAGE.md` for library usage
+- See `packages/ui/MIGRATION.md` for Vue to React changes

packages/ui/EXAMPLES.md

@@ -0,0 +1,239 @@
+# Example: Using SCWS React UI
+
+This example shows how to integrate the SCWS React UI component into your own React application.
+
+## Installation
+
+First, install the package:
+
+```bash
+npm install @scrcpy-streaming/ui
+# or
+pnpm add @scrcpy-streaming/ui
+# or
+yarn add @scrcpy-streaming/ui
+```
+
+## Example 1: Basic Usage
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Home } from '@scrcpy-streaming/ui';
+
+function App() {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Home />
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+## Example 2: With Custom Header
+
+```tsx
+import React from 'react';
+import { Home } from '@scrcpy-streaming/ui';
+
+function App() {
+  return (
+    <div>
+      <header style={{
+        padding: '20px',
+        backgroundColor: '#1976d2',
+        color: 'white'
+      }}>
+        <h1>My Android Streaming App</h1>
+      </header>
+      <main style={{ padding: '20px' }}>
+        <Home />
+      </main>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Example 3: With State Management
+
+```tsx
+import React, { useEffect } from 'react';
+import { Home, useAdbStore, useFileStore } from '@scrcpy-streaming/ui';
+
+function App() {
+  const adbStore = useAdbStore();
+  const fileStore = useFileStore();
+
+  useEffect(() => {
+    // Initialize stores on mount
+    const init = async () => {
+      await adbStore.metainfo();
+      await fileStore.getUplaods();
+      await fileStore.getApps();
+    };
+    init();
+  }, []);
+
+  return (
+    <div>
+      <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
+        <h2>Device Status</h2>
+        <p>Connected Device: {adbStore.device || 'None'}</p>
+        <p>Available Devices: {adbStore.devices.length}</p>
+        <p>Uploaded Files: {fileStore.files.length}</p>
+        <p>Available Apps: {fileStore.apps.length}</p>
+      </div>
+      <Home />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Example 4: Custom Wrapper with Styles
+
+```tsx
+import React from 'react';
+import { Home } from '@scrcpy-streaming/ui';
+import './App.css';
+
+function App() {
+  return (
+    <div className="app-container">
+      <div className="sidebar">
+        <h3>Controls</h3>
+        <ul>
+          <li>Use mouse to touch the screen</li>
+          <li>Use keyboard for typing</li>
+          <li>Ctrl+V to paste</li>
+        </ul>
+      </div>
+      <div className="main-content">
+        <Home />
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+// App.css
+/*
+.app-container {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 250px;
+  padding: 20px;
+  background: #f5f5f5;
+  border-right: 1px solid #ddd;
+}
+
+.main-content {
+  flex: 1;
+  overflow: auto;
+}
+*/
+```
+
+## Example 5: Multiple Pages with React Router
+
+```tsx
+import React from 'react';
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+import { Home } from '@scrcpy-streaming/ui';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <nav style={{ padding: '20px', backgroundColor: '#333', color: 'white' }}>
+        <Link to="/" style={{ color: 'white', marginRight: '20px' }}>Home</Link>
+        <Link to="/stream" style={{ color: 'white' }}>Stream</Link>
+      </nav>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/stream" element={<Home />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function HomePage() {
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1>Welcome</h1>
+      <p>Click "Stream" to start Android device streaming.</p>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Configuration
+
+Set the backend WebSocket URL:
+
+```bash
+# .env file
+VITE_BACKEND_WS_URL=ws://localhost:8080
+```
+
+Or in your Vite config:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  define: {
+    'import.meta.env.VITE_BACKEND_WS_URL': JSON.stringify('ws://your-backend:8080')
+  }
+})
+```
+
+## Backend Setup
+
+Ensure the backend server is running:
+
+```bash
+cd packages/api
+pnpm install
+pnpm start
+```
+
+The backend should expose:
+- WebSocket endpoint at `ws://localhost:8080`
+- REST API endpoints at `http://localhost:8080/api`
+
+## Troubleshooting
+
+**WebSocket connection fails:**
+- Check that the backend is running
+- Verify VITE_BACKEND_WS_URL is correct
+- Check browser console for error messages
+
+**No devices shown:**
+- Ensure ADB server is running
+- Connect Android device with USB debugging enabled
+- Run `adb devices` to verify device is connected
+
+**Video not displaying:**
+- Check browser supports WebCodecs API
+- Try changing video codec in UI
+- Check browser console for errors
+
+## Additional Resources
+
+- [Full Documentation](./USAGE.md)
+- [Migration Guide](./MIGRATION.md)
+- [API Reference](./README.md)