Move desktop and e2e into examples/ directory

- desktop/ → examples/django-react-desktop-app/ - e2e/ → examples/django-react-site/ - example/ → examples/django-react-site/backend/ - Update Dockerfile.test, Makefile, playwright config, and django.config.mjs path references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 20:41:20 -04:00
parent c866142770
commit eee352d908
51 changed files with 5983 additions and 10 deletions
--- a/examples/django-react-desktop-app/frontend/index.html
+++ b/examples/django-react-desktop-app/frontend/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mizan Desktop</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: system-ui, -apple-system, sans-serif; background: #0f0f0f; color: #e0e0e0; }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
--- a/examples/django-react-desktop-app/frontend/package.json
+++ b/examples/django-react-desktop-app/frontend/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "mizan-desktop-frontend",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5173",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@rythazhur/mizan": "file:../../react",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
--- a/examples/django-react-desktop-app/frontend/src/App.tsx
+++ b/examples/django-react-desktop-app/frontend/src/App.tsx
@@ -0,0 +1,215 @@
+import { useState, useEffect, useCallback } from 'react'
+import { MizanProvider, useMizan, useMizanStatus } from '@rythazhur/mizan'
+
+// ─── System Info ────────────────────────────────────────────────────────────
+
+function SystemInfo() {
+    const { call } = useMizan()
+    const [info, setInfo] = useState<Record<string, unknown> | null>(null)
+
+    useEffect(() => {
+        call('system_info').then(setInfo).catch(() => {})
+    }, [call])
+
+    if (!info) return <div style={styles.card}>Loading system info...</div>
+
+    return (
+        <div style={styles.card}>
+            <h2 style={styles.h2}>System</h2>
+            <table style={styles.table}>
+                <tbody>
+                    {Object.entries(info).map(([k, v]) => (
+                        <tr key={k}>
+                            <td style={styles.label}>{k}</td>
+                            <td style={styles.value}>{String(v)}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+// ─── Connection Status ──────────────────────────────────────────────────────
+
+function StatusBar() {
+    const status = useMizanStatus()
+    return (
+        <div style={{ ...styles.statusBar, color: status === 'connected' ? '#4ade80' : '#f87171' }}>
+            {status}
+        </div>
+    )
+}
+
+// ─── Notes ──────────────────────────────────────────────────────────────────
+
+type Note = { id: number; title: string; content: string; pinned: boolean; updated_at: string }
+
+function Notes() {
+    const { call } = useMizan()
+    const [notes, setNotes] = useState<Note[]>([])
+    const [selected, setSelected] = useState<Note | null>(null)
+    const [title, setTitle] = useState('')
+    const [content, setContent] = useState('')
+
+    const refresh = useCallback(() => {
+        call<{ notes: Note[] }>('list_notes').then(d => setNotes(d.notes)).catch(() => {})
+    }, [call])
+
+    useEffect(() => { refresh() }, [refresh])
+
+    const create = async () => {
+        if (!title.trim()) return
+        await call('create_note', { title, content })
+        setTitle('')
+        setContent('')
+        refresh()
+    }
+
+    const save = async () => {
+        if (!selected) return
+        await call('update_note', { id: selected.id, title, content })
+        setSelected(null)
+        setTitle('')
+        setContent('')
+        refresh()
+    }
+
+    const remove = async (id: number) => {
+        await call('delete_note', { id })
+        if (selected?.id === id) { setSelected(null); setTitle(''); setContent('') }
+        refresh()
+    }
+
+    const select = (n: Note) => {
+        setSelected(n)
+        setTitle(n.title)
+        setContent(n.content)
+    }
+
+    return (
+        <div style={styles.card}>
+            <h2 style={styles.h2}>Notes ({notes.length})</h2>
+            <div style={{ display: 'flex', gap: 12 }}>
+                <div style={{ flex: 1 }}>
+                    {notes.map(n => (
+                        <div
+                            key={n.id}
+                            onClick={() => select(n)}
+                            style={{
+                                ...styles.noteItem,
+                                borderLeft: selected?.id === n.id ? '3px solid #6cf' : '3px solid transparent',
+                            }}
+                        >
+                            <span>{n.pinned ? '\u{1f4cc} ' : ''}{n.title}</span>
+                            <button onClick={e => { e.stopPropagation(); remove(n.id) }} style={styles.deleteBtn}>x</button>
+                        </div>
+                    ))}
+                    {notes.length === 0 && <div style={{ color: '#666', padding: 8 }}>No notes yet</div>}
+                </div>
+                <div style={{ flex: 2 }}>
+                    <input
+                        value={title}
+                        onChange={e => setTitle(e.target.value)}
+                        placeholder="Title"
+                        style={styles.input}
+                    />
+                    <textarea
+                        value={content}
+                        onChange={e => setContent(e.target.value)}
+                        placeholder="Content"
+                        rows={6}
+                        style={{ ...styles.input, resize: 'vertical' }}
+                    />
+                    <button onClick={selected ? save : create} style={styles.btn}>
+                        {selected ? 'Save' : 'Create'}
+                    </button>
+                    {selected && (
+                        <button onClick={() => { setSelected(null); setTitle(''); setContent('') }} style={{ ...styles.btn, background: '#333' }}>
+                            Cancel
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+// ─── File Browser ───────────────────────────────────────────────────────────
+
+type FileEntry = { name: string; path: string; is_dir: boolean; size: number }
+
+function FileBrowser() {
+    const { call } = useMizan()
+    const [dir, setDir] = useState('~')
+    const [entries, setEntries] = useState<FileEntry[]>([])
+    const [parent, setParent] = useState<string | null>(null)
+
+    const browse = useCallback((d: string) => {
+        call<{ directory: string; entries: FileEntry[]; parent: string | null }>('list_files', { directory: d })
+            .then(data => {
+                setDir(data.directory)
+                setEntries(data.entries.slice(0, 50))
+                setParent(data.parent)
+            })
+            .catch(() => {})
+    }, [call])
+
+    useEffect(() => { browse('~') }, [browse])
+
+    return (
+        <div style={styles.card}>
+            <h2 style={styles.h2}>Files</h2>
+            <div style={{ color: '#888', fontSize: 13, marginBottom: 8 }}>{dir}</div>
+            {parent && (
+                <div onClick={() => browse(parent)} style={{ ...styles.fileItem, color: '#6cf', cursor: 'pointer' }}>
+                    ../ (parent)
+                </div>
+            )}
+            {entries.map(e => (
+                <div
+                    key={e.path}
+                    onClick={() => e.is_dir && browse(e.path)}
+                    style={{ ...styles.fileItem, cursor: e.is_dir ? 'pointer' : 'default', color: e.is_dir ? '#6cf' : '#ccc' }}
+                >
+                    {e.is_dir ? '\u{1f4c1}' : '\u{1f4c4}'} {e.name}
+                    {!e.is_dir && <span style={{ color: '#666', marginLeft: 8 }}>{(e.size / 1024).toFixed(1)}K</span>}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+// ─── App ────────────────────────────────────────────────────────────────────
+
+export function App() {
+    return (
+        <MizanProvider baseUrl="/api/mizan" autoConnect={false}>
+            <div style={{ maxWidth: 960, margin: '0 auto', padding: 24 }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+                    <h1 style={{ fontSize: 24, color: '#fff' }}>mizan Desktop</h1>
+                    <StatusBar />
+                </div>
+                <SystemInfo />
+                <Notes />
+                <FileBrowser />
+            </div>
+        </MizanProvider>
+    )
+}
+
+// ─── Styles ─────────────────────────────────────────────────────────────────
+
+const styles: Record<string, React.CSSProperties> = {
+    card: { background: '#1a1a1a', borderRadius: 8, padding: 20, marginBottom: 16 },
+    h2: { fontSize: 16, marginBottom: 12, color: '#aaa', textTransform: 'uppercase', letterSpacing: 1 },
+    table: { width: '100%', fontSize: 14 },
+    label: { padding: '4px 12px 4px 0', color: '#888', whiteSpace: 'nowrap' },
+    value: { padding: '4px 0', wordBreak: 'break-all' },
+    input: { width: '100%', padding: '8px 12px', marginBottom: 8, background: '#111', border: '1px solid #333', borderRadius: 4, color: '#e0e0e0', fontSize: 14 },
+    btn: { padding: '8px 16px', background: '#2563eb', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer', marginRight: 8, fontSize: 14 },
+    noteItem: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', cursor: 'pointer', borderRadius: 4, marginBottom: 2 },
+    deleteBtn: { background: 'none', border: 'none', color: '#666', cursor: 'pointer', fontSize: 14, padding: '2px 6px' },
+    fileItem: { padding: '4px 8px', fontSize: 14 },
+    statusBar: { fontSize: 12, fontFamily: 'monospace' },
+}
--- a/examples/django-react-desktop-app/frontend/src/main.tsx
+++ b/examples/django-react-desktop-app/frontend/src/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+
+createRoot(document.getElementById('root')!).render(<App />)
--- a/examples/django-react-desktop-app/frontend/tsconfig.json
+++ b/examples/django-react-desktop-app/frontend/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
--- a/examples/django-react-desktop-app/frontend/vite.config.ts
+++ b/examples/django-react-desktop-app/frontend/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        proxy: {
+            '/api': 'http://127.0.0.1:8765',
+            '/ws': { target: 'ws://127.0.0.1:8765', ws: true },
+        },
+    },
+})