ywana-core8 0.2.6 → 0.2.9

package/src/desktop/Desktop.stories.jsx

@@ -1,536 +1,175 @@
-import React from 'react'
-import { Desktop, useApplicationMenu, useAppManager } from './desktop.js'
-import { defaultAppManager } from './AppManager.js'
-
-/**
- * Basic Desktop with WindowManager
- */
-export const BasicDesktop = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop>
-      <div style={{ 
-        position: 'absolute', 
-        top: '50%', 
-        left: '50%', 
-        transform: 'translate(-50%, -50%)',
-        background: 'rgba(255,255,255,0.9)',
-        padding: '20px',
-        borderRadius: '8px',
-        textAlign: 'center',
-        maxWidth: '400px',
-        pointerEvents: 'none'
-      }}>
-        <h3>🖥️ Desktop with WindowManager</h3>
-        <p>This desktop uses the new WindowManager system.</p>
-        <p><strong>To test:</strong></p>
-        <ul style={{ textAlign: 'left', margin: '16px 0' }}>
-          <li>Click <strong>"+ Create Window"</strong> button (taskbar)</li>
-          <li>Windows will appear with automatic positioning</li>
-          <li>Check the debug info (taskbar)</li>
-          <li>Right-click for context menu (console)</li>
-        </ul>
-        <p><small>💡 Windows are rendered in the Workspace</small></p>
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * Desktop with custom size
- */
-export const CustomSizeDesktop = () => (
-  <div style={{ height: '400px', width: '800px', position: 'relative', overflow: 'hidden', margin: '0 auto', border: '2px solid #ccc' }}>
-    <Desktop desktopSize={{ width: 800, height: 400 }}>
-      <div style={{ 
-        position: 'absolute', 
-        bottom: '20px', 
-        left: '20px',
-        background: 'rgba(255,255,255,0.9)',
-        padding: '12px',
-        borderRadius: '4px',
-        fontSize: '12px'
-      }}>
-        <strong>Custom Size:</strong> 800x400px
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * Dark theme desktop
- */
-export const DarkDesktop = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop className="desktop--dark">
-      <div style={{ 
-        position: 'absolute', 
-        top: '50%', 
-        left: '50%', 
-        transform: 'translate(-50%, -50%)',
-        background: 'rgba(0,0,0,0.8)',
-        color: 'white',
-        padding: '20px',
-        borderRadius: '8px',
-        textAlign: 'center',
-        maxWidth: '400px',
-        pointerEvents: 'none'
-      }}>
-        <h3>🌙 Dark Desktop</h3>
-        <p>Desktop with dark theme variant.</p>
-        <p>Create windows to see them on the dark background.</p>
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * Light theme desktop
- */
-export const LightDesktop = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop className="desktop--light">
-      <div style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        background: 'rgba(255,255,255,0.9)',
-        color: '#333',
-        padding: '20px',
-        borderRadius: '8px',
-        textAlign: 'center',
-        maxWidth: '400px',
-        pointerEvents: 'none'
-      }}>
-        <h3>☀️ Light Desktop</h3>
-        <p>Desktop with light theme variant.</p>
-        <p>Clean and minimal appearance.</p>
-      </div>
-    </Desktop>
-  </div>
-)
-
-// Component that demonstrates using both AppProvider hooks
-const DemoControls = () => {
-  const { isOpen, open, close, toggle } = useApplicationMenu()
-  const appManager = useAppManager()
-  const [appCount, setAppCount] = React.useState(0)
-
-  React.useEffect(() => {
-    const updateCount = () => setAppCount(appManager.getAllApps().length)
-    updateCount()
-    appManager.addListener(updateCount)
-    return () => appManager.removeListener(updateCount)
-  }, [appManager])
-
-  const addCustomApp = () => {
-    const randomId = `custom-app-${Date.now()}`
-    appManager.registerApp({
-      id: randomId,
-      name: `Custom App ${Math.floor(Math.random() * 100)}`,
-      description: 'Dynamically added application',
-      icon: ['🎨', '🎯', '🎪', '🎭', '🎨'][Math.floor(Math.random() * 5)],
-      category: 'Custom',
-      component: React.createElement('div', {
-        style: { padding: '20px', textAlign: 'center' }
-      }, [
-        React.createElement('h2', { key: 'title' }, 'Dynamic App'),
-        React.createElement('p', { key: 'desc' }, 'This app was added dynamically using AppManager!'),
-        React.createElement('p', { key: 'id' }, `ID: ${randomId}`)
-      ]),
+import React, { useState } from 'react'
+import { Desktop } from './desktop.js'
+
+// Complete desktop configuration
+const desktopConfig = {
+  categories: [
+    { id: 'system', name: 'System', icon: '⚙️', color: '#607d8b' },
+    { id: 'productivity', name: 'Productivity', icon: '📊', color: '#2196f3' },
+    { id: 'utilities', name: 'Utilities', icon: '🔧', color: '#ff9800' },
+    { id: 'internet', name: 'Internet', icon: '🌐', color: '#4caf50' },
+    { id: 'development', name: 'Development', icon: '💻', color: '#9c27b0' },
+    { id: 'media', name: 'Media', icon: '🎬', color: '#e91e63' },
+    { id: 'games', name: 'Games', icon: '🎮', color: '#f44336' }
+  ],
+  applications: [
+    {
+      id: 'file-explorer',
+      name: 'File Explorer',
+      description: 'Browse and manage files',
+      icon: '📁',
+      category: 'System',
+      component: null,
+      size: { width: 600, height: 400 }
+    },
+    {
+      id: 'text-editor',
+      name: 'Text Editor',
+      description: 'Edit text files',
+      icon: '📝',
+      category: 'Productivity',
+      component: null,
+      size: { width: 500, height: 350 }
+    },
+    {
+      id: 'calculator',
+      name: 'Calculator',
+      description: 'Perform calculations',
+      icon: '🧮',
+      category: 'Utilities',
+      component: null,
+      size: { width: 300, height: 400 }
+    },
+    {
+      id: 'settings',
+      name: 'Settings',
+      description: 'System configuration',
+      icon: '⚙️',
+      category: 'System',
+      component: null,
+      size: { width: 450, height: 300 }
+    },
+    {
+      id: 'browser',
+      name: 'Web Browser',
+      description: 'Browse the internet',
+      icon: '🌐',
+      category: 'Internet',
+      component: null,
+      size: { width: 800, height: 500 }
+    },
+    {
+      id: 'terminal',
+      name: 'Terminal',
+      description: 'Command line interface',
+      icon: '💻',
+      category: 'Development',
+      component: null,
+      size: { width: 700, height: 400 }
+    },
+    {
+      id: 'image-viewer',
+      name: 'Image Viewer',
+      description: 'View and edit images',
+      icon: '🖼️',
+      category: 'Media',
+      component: null,
+      size: { width: 600, height: 500 }
+    },
+    {
+      id: 'music-player',
+      name: 'Music Player',
+      description: 'Play audio files',
+      icon: '🎵',
+      category: 'Media',
+      component: null,
       size: { width: 400, height: 300 }
-    })
-  }
-
-  return (
-    <div style={{
-      position: 'absolute',
-      top: '20px',
-      right: '20px',
-      background: 'rgba(255,255,255,0.9)',
-      padding: '20px',
-      borderRadius: '8px',
-      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-      maxWidth: '300px'
-    }}>
-      <h4 style={{ margin: '0 0 15px 0' }}>🎮 App Controls</h4>
-      <p style={{ margin: '0 0 10px 0', fontSize: '14px', color: '#666' }}>
-        Menu: <strong>{isOpen ? 'Open' : 'Closed'}</strong><br/>
-        Apps: <strong>{appCount}</strong>
-      </p>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-        <button
-          onClick={open}
-          style={{
-            padding: '8px 12px',
-            background: '#4caf50',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '12px'
-          }}
-        >
-          Open Menu
-        </button>
-        <button
-          onClick={close}
-          style={{
-            padding: '8px 12px',
-            background: '#f44336',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '12px'
-          }}
-        >
-          Close Menu
-        </button>
-        <button
-          onClick={toggle}
-          style={{
-            padding: '8px 12px',
-            background: '#2196f3',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '12px'
-          }}
-        >
-          Toggle Menu
-        </button>
-        <hr style={{ margin: '10px 0', border: 'none', borderTop: '1px solid #eee' }} />
-        <button
-          onClick={addCustomApp}
-          style={{
-            padding: '8px 12px',
-            background: '#ff9800',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '12px'
-          }}
-        >
-          Add Custom App
-        </button>
-      </div>
-    </div>
-  )
+    }
+  ]
 }
 
-/**
- * Desktop with ApplicationMenu - Basic functionality
- */
-export const ApplicationMenuBasic = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop desktopSize={{ width: 1200, height: 600 }}>
-      <div style={{
-        position: 'absolute',
-        top: '20px',
-        left: '20px',
-        background: 'rgba(255,255,255,0.9)',
-        padding: '20px',
-        borderRadius: '8px',
-        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-        maxWidth: '400px'
-      }}>
-        <h3 style={{ margin: '0 0 15px 0' }}>🚀 Application Menu Demo</h3>
-        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-          Click the <strong>"Start"</strong> button in the taskbar to open the Application Menu.
-          Browse applications by category and launch them to create windows.
-        </p>
-        <div style={{ fontSize: '14px', color: '#666' }}>
-          <p><strong>Features:</strong></p>
-          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-            <li>Browse apps by category</li>
-            <li>Search functionality</li>
-            <li>Launch applications as windows</li>
-            <li>Full-screen overlay menu</li>
-          </ul>
-        </div>
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * Windows Theme Desktop
- */
-export const WindowsTheme = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop theme="windows" desktopSize={{ width: 1200, height: 600 }}>
-      <div style={{
-        position: 'absolute',
-        top: '20px',
-        left: '20px',
-        background: 'rgba(255,255,255,0.9)',
-        padding: '20px',
-        borderRadius: '8px',
-        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-        maxWidth: '400px'
-      }}>
-        <h3 style={{ margin: '0 0 15px 0' }}>🪟 Windows Theme</h3>
-        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-          Windows-inspired desktop theme with Segoe UI font, blue gradient background,
-          and Windows-style window controls and taskbar.
-        </p>
-        <div style={{ fontSize: '14px', color: '#666' }}>
-          <p><strong>Features:</strong></p>
-          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-            <li>Windows 11 inspired design</li>
-            <li>Segoe UI font family</li>
-            <li>Blue gradient background</li>
-            <li>Windows-style window controls</li>
-          </ul>
-        </div>
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * macOS Theme Desktop
- */
-export const MacOSTheme = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop theme="macos" desktopSize={{ width: 1200, height: 600 }}>
-      <div style={{
-        position: 'absolute',
-        top: '20px',
-        left: '20px',
-        background: 'rgba(255,255,255,0.9)',
-        padding: '20px',
-        borderRadius: '16px',
-        boxShadow: '0 8px 25px rgba(0,0,0,0.15)',
-        maxWidth: '400px',
-        backdropFilter: 'blur(20px)'
-      }}>
-        <h3 style={{ margin: '0 0 15px 0' }}>🍎 macOS Theme</h3>
-        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-          macOS-inspired desktop theme with SF Pro Display font, purple gradient background,
-          and signature traffic light window controls.
-        </p>
-        <div style={{ fontSize: '14px', color: '#666' }}>
-          <p><strong>Features:</strong></p>
-          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-            <li>macOS Big Sur/Monterey design</li>
-            <li>SF Pro Display font family</li>
-            <li>Purple gradient background</li>
-            <li>Traffic light window controls</li>
-          </ul>
-        </div>
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * Linux Theme Desktop
- */
-export const LinuxTheme = () => (
-  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop theme="linux" desktopSize={{ width: 1200, height: 600 }}>
-      <div style={{
-        position: 'absolute',
-        top: '20px',
-        left: '20px',
-        background: 'rgba(255,255,255,0.9)',
-        padding: '20px',
-        borderRadius: '12px',
-        boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
-        maxWidth: '400px'
-      }}>
-        <h3 style={{ margin: '0 0 15px 0' }}>🐧 Linux Theme</h3>
-        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-          Linux GNOME-inspired desktop theme with Ubuntu font, dark gradient background,
-          and colorful circular window controls.
-        </p>
-        <div style={{ fontSize: '14px', color: '#666' }}>
-          <p><strong>Features:</strong></p>
-          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-            <li>GNOME/Ubuntu inspired design</li>
-            <li>Ubuntu/Cantarell font family</li>
-            <li>Dark gradient background</li>
-            <li>Colorful circular controls</li>
-          </ul>
-        </div>
-      </div>
-    </Desktop>
-  </div>
-)
-
-/**
- * Theme Comparison - All three themes side by side
- */
-export const ThemeComparison = () => (
+// Theme selector component
+const ThemeSelector = ({ currentTheme, onThemeChange }) => (
   <div style={{
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gap: '20px',
-    padding: '20px',
-    height: '600px'
+    position: 'absolute',
+    top: '10px',
+    right: '10px',
+    background: 'rgba(0,0,0,0.8)',
+    color: 'white',
+    padding: '8px 12px',
+    borderRadius: '6px',
+    fontSize: '12px',
+    zIndex: 20000,
+    display: 'flex',
+    gap: '8px',
+    alignItems: 'center'
   }}>
-    <div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
-      <div style={{
-        position: 'absolute',
-        top: '5px',
-        left: '5px',
-        background: 'rgba(0,0,0,0.7)',
-        color: 'white',
-        padding: '4px 8px',
-        borderRadius: '4px',
-        fontSize: '12px',
-        zIndex: 1000
-      }}>
-        Windows
-      </div>
-      <Desktop theme="windows" desktopSize={{ width: 400, height: 560 }} />
-    </div>
-
-    <div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
-      <div style={{
-        position: 'absolute',
-        top: '5px',
-        left: '5px',
-        background: 'rgba(0,0,0,0.7)',
+    <span>Theme:</span>
+    <select
+      value={currentTheme}
+      onChange={(e) => onThemeChange(e.target.value)}
+      style={{
+        background: 'rgba(255,255,255,0.2)',
         color: 'white',
-        padding: '4px 8px',
+        border: '1px solid rgba(255,255,255,0.3)',
         borderRadius: '4px',
-        fontSize: '12px',
-        zIndex: 1000
-      }}>
-        macOS
-      </div>
-      <Desktop theme="macos" desktopSize={{ width: 400, height: 560 }} />
-    </div>
-
-    <div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
-      <div style={{
-        position: 'absolute',
-        top: '5px',
-        left: '5px',
-        background: 'rgba(0,0,0,0.7)',
-        color: 'white',
-        padding: '4px 8px',
-        borderRadius: '4px',
-        fontSize: '12px',
-        zIndex: 1000
-      }}>
-        Linux
-      </div>
-      <Desktop theme="linux" desktopSize={{ width: 400, height: 560 }} />
-    </div>
+        padding: '2px 6px'
+      }}
+    >
+      <option value="default">Default</option>
+      <option value="windows">Windows</option>
+      <option value="macos">macOS</option>
+      <option value="linux">Linux</option>
+    </select>
   </div>
 )
 
 /**
- * Desktop with ApplicationMenu - Advanced with controls
+ * Complete Desktop Demo - All Features
  */
-export const ApplicationMenuAdvanced = () => {
-  // Setup custom apps
-  React.useEffect(() => {
-    // Register some custom applications
-    defaultAppManager.registerApp({
-      id: 'advanced-calculator',
-      name: 'Advanced Calculator',
-      description: 'Scientific calculator with advanced functions',
-      icon: '🧮',
-      category: 'Utilities',
-      component: React.createElement('div', {
-        style: { padding: '20px', textAlign: 'center' }
-      }, [
-        React.createElement('h2', { key: 'title' }, '🧮 Advanced Calculator'),
-        React.createElement('p', { key: 'desc' }, 'A powerful calculator with scientific functions.'),
-        React.createElement('div', {
-          key: 'buttons',
-          style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px', marginTop: '20px' }
-        }, [
-          ...['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+'].map((btn, i) =>
-            React.createElement('button', {
-              key: i,
-              style: {
-                padding: '12px',
-                background: '#f0f0f0',
-                border: '1px solid #ccc',
-                borderRadius: '4px',
-                cursor: 'pointer'
-              }
-            }, btn)
-          )
-        ])
-      ]),
-      size: { width: 300, height: 400 }
-    })
-
-    defaultAppManager.registerApp({
-      id: 'text-editor-pro',
-      name: 'Text Editor Pro',
-      description: 'Professional text editor with syntax highlighting',
-      icon: '📝',
-      category: 'Productivity',
-      component: React.createElement('div', {
-        style: { padding: '20px', height: '100%', display: 'flex', flexDirection: 'column' }
-      }, [
-        React.createElement('div', {
-          key: 'toolbar',
-          style: { marginBottom: '10px', display: 'flex', gap: '10px' }
-        }, [
-          React.createElement('button', { key: 'new', style: { padding: '5px 10px', fontSize: '12px' } }, 'New'),
-          React.createElement('button', { key: 'open', style: { padding: '5px 10px', fontSize: '12px' } }, 'Open'),
-          React.createElement('button', { key: 'save', style: { padding: '5px 10px', fontSize: '12px' } }, 'Save')
-        ]),
-        React.createElement('textarea', {
-          key: 'editor',
-          style: {
-            flex: 1,
-            border: '1px solid #ccc',
-            padding: '10px',
-            fontFamily: 'monospace',
-            fontSize: '14px',
-            resize: 'none'
-          },
-          placeholder: 'Start typing your code here...',
-          defaultValue: '// Welcome to Text Editor Pro!\nfunction hello() {\n  console.log("Hello, World!");\n}'
-        })
-      ]),
-      size: { width: 600, height: 400 }
-    })
-  }, [])
+export const CompleteDesktop = () => {
+  const [theme, setTheme] = useState('default')
 
   return (
     <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-      <Desktop desktopSize={{ width: 1200, height: 600 }}>
+      <ThemeSelector currentTheme={theme} onThemeChange={setTheme} />
+
+      <Desktop
+        theme={theme === 'default' ? undefined : theme}
+        desktopSize={{ width: 1200, height: 600 }}
+        desktopConfig={desktopConfig}
+      >
         <div style={{
           position: 'absolute',
-          top: '20px',
-          left: '20px',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           background: 'rgba(255,255,255,0.9)',
           padding: '20px',
           borderRadius: '8px',
-          boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-          maxWidth: '400px'
+          textAlign: 'center',
+          maxWidth: '500px',
+          pointerEvents: 'none',
+          boxShadow: '0 4px 20px rgba(0,0,0,0.1)'
         }}>
-          <h3 style={{ margin: '0 0 15px 0' }}>🎮 AppProvider + AppManager</h3>
-          <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-            This demo shows AppProvider and AppManager collaboration. Use the controls
-            on the right to manage the menu and add custom applications dynamically.
-          </p>
-          <div style={{ fontSize: '14px', color: '#666' }}>
-            <p><strong>Advanced Features:</strong></p>
-            <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-              <li>Dynamic app registration</li>
-              <li>Real-time app count updates</li>
-              <li>Custom app components</li>
-              <li>Context-based state management</li>
+          <h3>🖥️ Complete Desktop System</h3>
+          <p>This desktop demonstrates all features:</p>
+
+          <div style={{ textAlign: 'left', margin: '16px 0' }}>
+            <h4>🎯 Features to Test:</h4>
+            <ul>
+              <li><strong>Start Menu:</strong> Click "Start" button</li>
+              <li><strong>Applications:</strong> Browse categories and launch apps</li>
+              <li><strong>Window Management:</strong> Create, move, resize windows</li>
+              <li><strong>Layout Controls:</strong> Use Cascade, Tile, Center, Clear buttons</li>
+              <li><strong>Themes:</strong> Switch between Windows, macOS, Linux themes</li>
+              <li><strong>Responsive:</strong> Windows stay within workspace bounds</li>
             </ul>
+
+            <h4>🎨 Current Theme: <span style={{color: '#2196f3'}}>{theme}</span></h4>
+            <p><em>Change theme using the selector in top-right corner</em></p>
           </div>
         </div>
-
-        <DemoControls />
       </Desktop>
     </div>
   )