ywana-core8 0.2.3 → 0.2.5

package/src/desktop/ApplicationMenu.js

@@ -0,0 +1,214 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useWindows } from './WindowContext'
+import { useAppManager } from './desktop'
+import './ApplicationMenu.css'
+
+/**
+ * ApplicationMenu - Full-screen overlay menu for launching applications
+ */
+export const ApplicationMenu = ({ isOpen, onClose }) => {
+    const appManager = useAppManager()
+    const [searchTerm, setSearchTerm] = useState('')
+    const [selectedCategory, setSelectedCategory] = useState('all')
+    const [apps, setApps] = useState([])
+    const [categories, setCategories] = useState([])
+    const searchInputRef = useRef(null)
+    const { createWindow } = useWindows()
+
+    // Load apps and categories
+    useEffect(() => {
+        const loadData = () => {
+            setApps(appManager.getAllApps())
+            setCategories(appManager.getAllCategories())
+        }
+
+        loadData()
+        appManager.addListener(loadData)
+
+        return () => {
+            appManager.removeListener(loadData)
+        }
+    }, [appManager])
+
+    // Focus search input when menu opens
+    useEffect(() => {
+        if (isOpen && searchInputRef.current) {
+            setTimeout(() => {
+                searchInputRef.current.focus()
+            }, 100)
+        }
+    }, [isOpen])
+
+    // Handle escape key to close menu
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose()
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown)
+            return () => document.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [isOpen, onClose])
+
+    // Filter apps based on search and category
+    const filteredApps = apps.filter(app => {
+        const matchesSearch = searchTerm === '' || 
+            app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            app.description.toLowerCase().includes(searchTerm.toLowerCase())
+        
+        const matchesCategory = selectedCategory === 'all' || 
+            app.category.toLowerCase() === selectedCategory.toLowerCase()
+        
+        return matchesSearch && matchesCategory
+    })
+
+    // Group filtered apps by category
+    const groupedApps = filteredApps.reduce((groups, app) => {
+        const category = app.category
+        if (!groups[category]) {
+            groups[category] = []
+        }
+        groups[category].push(app)
+        return groups
+    }, {})
+
+    // Handle app launch
+    const handleLaunchApp = (app) => {
+        createWindow({
+            id: `${app.id}-${Date.now()}`,
+            title: app.name,
+            icon: app.icon,
+            size: app.size,
+            toolbar: app.toolbar,
+            statusBar: app.statusBar,
+            content: app.component || (
+                <div style={{ padding: '20px', textAlign: 'center' }}>
+                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>{app.icon}</div>
+                    <h2>{app.name}</h2>
+                    <p style={{ color: '#666', marginBottom: '20px' }}>{app.description}</p>
+                    <p style={{ fontSize: '14px', color: '#999' }}>
+                        This is a placeholder for the {app.name} application.
+                    </p>
+                </div>
+            )
+        })
+        onClose()
+    }
+
+    // Handle category selection
+    const handleCategorySelect = (categoryId) => {
+        setSelectedCategory(categoryId)
+        setSearchTerm('')
+    }
+
+    if (!isOpen) return null
+
+    return (
+        <div className="application-menu-overlay" onClick={onClose}>
+            <div className="application-menu" onClick={(e) => e.stopPropagation()}>
+                {/* Header */}
+                <div className="application-menu__header">
+                    <h2>Applications</h2>
+                    <button 
+                        className="application-menu__close"
+                        onClick={onClose}
+                        title="Close menu"
+                    >
+                        ×
+                    </button>
+                </div>
+
+                {/* Search */}
+                <div className="application-menu__search">
+                    <input
+                        ref={searchInputRef}
+                        type="text"
+                        placeholder="Search applications..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="application-menu__search-input"
+                    />
+                </div>
+
+                {/* Categories */}
+                <div className="application-menu__categories">
+                    <button
+                        className={`application-menu__category ${selectedCategory === 'all' ? 'active' : ''}`}
+                        onClick={() => handleCategorySelect('all')}
+                    >
+                        <span className="category-icon">📱</span>
+                        All Apps
+                    </button>
+                    {categories.map(category => (
+                        <button
+                            key={category.id}
+                            className={`application-menu__category ${selectedCategory === category.id ? 'active' : ''}`}
+                            onClick={() => handleCategorySelect(category.id)}
+                        >
+                            <span className="category-icon">{category.icon}</span>
+                            {category.name}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Applications Grid */}
+                <div className="application-menu__content">
+                    {searchTerm && (
+                        <div className="application-menu__search-results">
+                            <h3>Search Results ({filteredApps.length})</h3>
+                            <div className="application-menu__apps-grid">
+                                {filteredApps.map(app => (
+                                    <div
+                                        key={app.id}
+                                        className="application-menu__app"
+                                        onClick={() => handleLaunchApp(app)}
+                                        title={app.description}
+                                    >
+                                        <div className="app-icon">{app.icon}</div>
+                                        <div className="app-name">{app.name}</div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {!searchTerm && (
+                        <div className="application-menu__categories-content">
+                            {Object.entries(groupedApps).map(([categoryName, categoryApps]) => (
+                                <div key={categoryName} className="application-menu__category-section">
+                                    <h3 className="category-title">{categoryName}</h3>
+                                    <div className="application-menu__apps-grid">
+                                        {categoryApps.map(app => (
+                                            <div
+                                                key={app.id}
+                                                className="application-menu__app"
+                                                onClick={() => handleLaunchApp(app)}
+                                                title={app.description}
+                                            >
+                                                <div className="app-icon">{app.icon}</div>
+                                                <div className="app-name">{app.name}</div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
+                    {filteredApps.length === 0 && (
+                        <div className="application-menu__no-results">
+                            <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
+                            <h3>No applications found</h3>
+                            <p>Try adjusting your search or category filter.</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ApplicationMenu

package/src/desktop/Desktop.stories.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Desktop } from './desktop.js'
+import { Desktop, useApplicationMenu, useAppManager } from './desktop.js'
+import { defaultAppManager } from './AppManager.js'
 
 /**
  * Basic Desktop with WindowManager
@@ -88,10 +89,10 @@ export const DarkDesktop = () => (
 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%', 
+      <div style={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
         transform: 'translate(-50%, -50%)',
         background: 'rgba(255,255,255,0.9)',
         color: '#333',
@@ -108,3 +109,259 @@ export const LightDesktop = () => (
     </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}`)
+      ]),
+      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>
+)
+
+/**
+ * Desktop with ApplicationMenu - Advanced with controls
+ */
+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 }
+    })
+  }, [])
+
+  return (
+    <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' }}>🎮 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>
+            </ul>
+          </div>
+        </div>
+
+        <DemoControls />
+      </Desktop>
+    </div>
+  )
+}