ywana-core8 0.2.3 → 0.2.5

package/src/desktop/desktop.js

@@ -1,8 +1,56 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState, createContext, useContext } from 'react'
 import { WindowProvider, useWindows } from './WindowContext'
 import { Window } from './window'
+import { ApplicationMenu } from './ApplicationMenu'
+import { defaultAppManager } from './AppManager'
 import './desktop.css'
 
+/**
+ * Context for Application state
+ */
+const AppContext = createContext()
+
+export const useApplicationMenu = () => {
+    const context = useContext(AppContext)
+    if (!context) {
+        throw new Error('useApplicationMenu must be used within AppProvider')
+    }
+    return context.applicationMenu
+}
+
+export const useAppManager = () => {
+    const context = useContext(AppContext)
+    if (!context) {
+        throw new Error('useAppManager must be used within AppProvider')
+    }
+    return context.appManager
+}
+
+/**
+ * AppProvider - Provides Application state and AppManager to React components
+ */
+export const AppProvider = ({ children, appManager = defaultAppManager }) => {
+    const [isApplicationMenuOpen, setIsApplicationMenuOpen] = useState(false)
+
+    const value = {
+        // Application Menu state
+        applicationMenu: {
+            isOpen: isApplicationMenuOpen,
+            open: () => setIsApplicationMenuOpen(true),
+            close: () => setIsApplicationMenuOpen(false),
+            toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
+        },
+        // App Manager instance
+        appManager: appManager
+    }
+
+    return (
+        <AppContext.Provider value={value}>
+            {children}
+        </AppContext.Provider>
+    )
+}
+
 /**
  * Desktop layout component - manages overall desktop structure and sizing
  */
@@ -90,18 +138,7 @@ export const Workspace = ({ children }) => {
                     statusBar={window.statusBar}
                 >
                     <div style={{ padding: '16px' }}>
-                        <h3>Window: {window.title}</h3>
-                        <p><strong>ID:</strong> {window.id}</p>
-                        <p><strong>Position:</strong> {window.position.x}, {window.position.y}</p>
-                        <p><strong>Size:</strong> {window.size.width} × {window.size.height}</p>
-                        <p><strong>Z-Index:</strong> {window.zIndex}</p>
-                        <p><strong>Status:</strong> {window.minimized ? 'Minimized' : window.maximized ? 'Maximized' : 'Normal'}</p>
-
-                        <div style={{ marginTop: '16px', padding: '12px', background: '#f8f9fa', borderRadius: '4px' }}>
-                            <p><strong>Window Content Area</strong></p>
-                            <p>This is where your application content would go.</p>
-                            <p>The window is fully draggable and has working minimize, maximize, and close buttons.</p>
-                        </div>
+                        {window.content}
                     </div>
                 </Window>
             ))}
@@ -123,6 +160,8 @@ export const DesktopTaskbar = () => {
         closeWindow
     } = useWindows()
 
+    const { open: openApplicationMenu } = useApplicationMenu()
+
     const handleCreateWindow = () => {
         const windowTypes = [
             { title: 'File Explorer', icon: '📁', size: { width: 600, height: 400 } },
@@ -182,34 +221,57 @@ export const DesktopTaskbar = () => {
 
     return (
         <div style={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: '50px',
-            background: 'rgba(0,0,0,0.8)',
-            display: 'flex',
-            alignItems: 'center',
-            padding: '0 16px',
-            gap: '8px'
-        }}>
-            {/* Create window button */}
-            <button
-                onClick={handleCreateWindow}
-                style={{
-                    padding: '8px 12px',
-                    background: '#1976d2',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '12px',
-                    flexShrink: 0
-                }}
-                title="Create new window"
-            >
-                +
-            </button>
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: '50px',
+                background: 'rgba(0,0,0,0.8)',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0 16px',
+                gap: '8px'
+            }}>
+                {/* Start button */}
+                <button
+                    onClick={openApplicationMenu}
+                    style={{
+                        padding: '8px 16px',
+                        background: '#1976d2',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        fontSize: '14px',
+                        fontWeight: 'bold',
+                        flexShrink: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '6px'
+                    }}
+                    title="Open application menu"
+                >
+                    <span style={{ fontSize: '16px' }}>🚀</span>
+                    Start
+                </button>
+
+                {/* Create window button (for testing) */}
+                <button
+                    onClick={handleCreateWindow}
+                    style={{
+                        padding: '8px 12px',
+                        background: '#666',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        fontSize: '12px',
+                        flexShrink: 0
+                    }}
+                    title="Create random window (for testing)"
+                >
+                    +
+                </button>
 
             {/* Separator */}
             <div style={{
@@ -303,9 +365,11 @@ export const DesktopTaskbar = () => {
 }
 
 /**
- * Main Desktop component with WindowProvider
+ * Internal Desktop component that uses the contexts
  */
-export const Desktop = ({ desktopSize, children, ...props }) => {
+const DesktopInternal = ({ desktopSize, children, ...props }) => {
+    const { isOpen, close } = useApplicationMenu()
+
     return (
         <WindowProvider desktopSize={desktopSize}>
             <DesktopLayout {...props}>
@@ -313,7 +377,24 @@ export const Desktop = ({ desktopSize, children, ...props }) => {
                     {children}
                 </Workspace>
                 <DesktopTaskbar />
+                <ApplicationMenu
+                    isOpen={isOpen}
+                    onClose={close}
+                />
             </DesktopLayout>
         </WindowProvider>
     )
 }
+
+/**
+ * Main Desktop component with AppProvider wrapper
+ */
+export const Desktop = ({ desktopSize, children, ...props }) => {
+    return (
+        <AppProvider>
+            <DesktopInternal desktopSize={desktopSize} {...props}>
+                {children}
+            </DesktopInternal>
+        </AppProvider>
+    )
+}

package/src/desktop/index.js

@@ -1,6 +1,10 @@
 // Desktop Components - Window management system for web applications
-export { Desktop, Workspace, DesktopTaskbar } from './desktop'
+export { Desktop, Workspace, DesktopTaskbar, AppProvider, useApplicationMenu, useAppManager } from './desktop'
 export { Window } from './window'
+export { ApplicationMenu } from './ApplicationMenu'
+
+// Application Management
+export { AppManager, defaultAppManager } from './AppManager'
 
 // Window Management
 export { WindowManager } from './WindowManager'

package/src/examples/ApplicationMenuExample.js

@@ -0,0 +1,361 @@
+import React from 'react'
+import { Desktop, AppProvider, AppManager, defaultAppManager, useApplicationMenu, useAppManager } from '../desktop'
+
+// Example custom components for applications
+const TextEditorComponent = () => (
+    <div style={{ padding: '20px', height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ marginBottom: '10px', display: 'flex', gap: '10px' }}>
+            <button style={{ padding: '5px 10px', fontSize: '12px' }}>New</button>
+            <button style={{ padding: '5px 10px', fontSize: '12px' }}>Open</button>
+            <button style={{ padding: '5px 10px', fontSize: '12px' }}>Save</button>
+        </div>
+        <textarea 
+            style={{ 
+                flex: 1, 
+                border: '1px solid #ccc', 
+                padding: '10px',
+                fontFamily: 'monospace',
+                fontSize: '14px',
+                resize: 'none'
+            }}
+            placeholder="Start typing your text here..."
+            defaultValue="Welcome to the Text Editor!\n\nThis is a simple text editor application launched from the Application Menu."
+        />
+    </div>
+)
+
+const CalculatorComponent = () => {
+    const [display, setDisplay] = React.useState('0')
+    const [previousValue, setPreviousValue] = React.useState(null)
+    const [operation, setOperation] = React.useState(null)
+    const [waitingForOperand, setWaitingForOperand] = React.useState(false)
+
+    const inputNumber = (num) => {
+        if (waitingForOperand) {
+            setDisplay(String(num))
+            setWaitingForOperand(false)
+        } else {
+            setDisplay(display === '0' ? String(num) : display + num)
+        }
+    }
+
+    const inputOperation = (nextOperation) => {
+        const inputValue = parseFloat(display)
+
+        if (previousValue === null) {
+            setPreviousValue(inputValue)
+        } else if (operation) {
+            const currentValue = previousValue || 0
+            const newValue = calculate(currentValue, inputValue, operation)
+
+            setDisplay(String(newValue))
+            setPreviousValue(newValue)
+        }
+
+        setWaitingForOperand(true)
+        setOperation(nextOperation)
+    }
+
+    const calculate = (firstValue, secondValue, operation) => {
+        switch (operation) {
+            case '+': return firstValue + secondValue
+            case '-': return firstValue - secondValue
+            case '×': return firstValue * secondValue
+            case '÷': return firstValue / secondValue
+            case '=': return secondValue
+            default: return secondValue
+        }
+    }
+
+    const performCalculation = () => {
+        const inputValue = parseFloat(display)
+
+        if (previousValue !== null && operation) {
+            const newValue = calculate(previousValue, inputValue, operation)
+            setDisplay(String(newValue))
+            setPreviousValue(null)
+            setOperation(null)
+            setWaitingForOperand(true)
+        }
+    }
+
+    const clear = () => {
+        setDisplay('0')
+        setPreviousValue(null)
+        setOperation(null)
+        setWaitingForOperand(false)
+    }
+
+    const buttonStyle = {
+        padding: '15px',
+        margin: '2px',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '16px',
+        fontWeight: 'bold'
+    }
+
+    return (
+        <div style={{ padding: '20px', maxWidth: '250px' }}>
+            <div style={{ 
+                background: '#000', 
+                color: '#fff', 
+                padding: '15px', 
+                textAlign: 'right', 
+                fontSize: '24px',
+                marginBottom: '10px',
+                borderRadius: '4px',
+                minHeight: '40px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end'
+            }}>
+                {display}
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2px' }}>
+                <button style={{...buttonStyle, background: '#f0f0f0'}} onClick={clear}>C</button>
+                <button style={{...buttonStyle, background: '#f0f0f0'}} onClick={() => {}}>±</button>
+                <button style={{...buttonStyle, background: '#f0f0f0'}} onClick={() => {}}>%</button>
+                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('÷')}>÷</button>
+                
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(7)}>7</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(8)}>8</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(9)}>9</button>
+                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('×')}>×</button>
+                
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(4)}>4</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(5)}>5</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(6)}>6</button>
+                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('-')}>-</button>
+                
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(1)}>1</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(2)}>2</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(3)}>3</button>
+                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('+')}>+</button>
+                
+                <button style={{...buttonStyle, background: '#333', color: 'white', gridColumn: 'span 2'}} onClick={() => inputNumber(0)}>0</button>
+                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => {}}>.</button>
+                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={performCalculation}>=</button>
+            </div>
+        </div>
+    )
+}
+
+// Register custom applications with components
+const setupCustomApps = () => {
+    // Register Text Editor with actual component
+    defaultAppManager.registerApp({
+        id: 'text-editor-custom',
+        name: 'Advanced Text Editor',
+        description: 'Full-featured text editor with toolbar',
+        icon: '📝',
+        category: 'Productivity',
+        component: <TextEditorComponent />,
+        size: { width: 600, height: 400 }
+    })
+
+    // Register Calculator with actual component
+    defaultAppManager.registerApp({
+        id: 'calculator-custom',
+        name: 'Calculator Pro',
+        description: 'Advanced calculator with full functionality',
+        icon: '🧮',
+        category: 'Utilities',
+        component: <CalculatorComponent />,
+        size: { width: 300, height: 450 }
+    })
+
+    // Register a custom dashboard app
+    defaultAppManager.registerApp({
+        id: 'dashboard',
+        name: 'Dashboard',
+        description: 'System monitoring dashboard',
+        icon: '📊',
+        category: 'System',
+        component: (
+            <div style={{ padding: '20px' }}>
+                <h2>System Dashboard</h2>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginTop: '20px' }}>
+                    <div style={{ padding: '15px', background: '#e3f2fd', borderRadius: '8px' }}>
+                        <h4>CPU Usage</h4>
+                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1976d2' }}>45%</div>
+                    </div>
+                    <div style={{ padding: '15px', background: '#e8f5e8', borderRadius: '8px' }}>
+                        <h4>Memory</h4>
+                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#388e3c' }}>2.1GB</div>
+                    </div>
+                    <div style={{ padding: '15px', background: '#fff3e0', borderRadius: '8px' }}>
+                        <h4>Disk Space</h4>
+                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f57c00' }}>78%</div>
+                    </div>
+                    <div style={{ padding: '15px', background: '#fce4ec', borderRadius: '8px' }}>
+                        <h4>Network</h4>
+                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#c2185b' }}>125 MB/s</div>
+                    </div>
+                </div>
+            </div>
+        ),
+        size: { width: 500, height: 400 }
+    })
+}
+
+// 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: (
+                <div style={{ padding: '20px', textAlign: 'center' }}>
+                    <h2>Dynamic App</h2>
+                    <p>This app was added dynamically using AppManager!</p>
+                    <p>ID: {randomId}</p>
+                </div>
+            ),
+            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>
+    )
+}
+
+/**
+ * Example component demonstrating the ApplicationMenu system
+ */
+export const ApplicationMenuExample = () => {
+    React.useEffect(() => {
+        setupCustomApps()
+    }, [])
+
+    return (
+        <div style={{ height: '100vh', position: 'relative', backgroundColor: '#f0f0f0' }}>
+            <Desktop desktopSize={{ width: 1200, height: 800 }}>
+                {/* Desktop background content */}
+                <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 Demo</h3>
+                    <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
+                        AppProvider and AppManager now collaborate seamlessly. The ApplicationMenu gets apps
+                        from AppManager through the context. Try adding custom apps dynamically!
+                    </p>
+                    <div style={{ fontSize: '14px', color: '#666' }}>
+                        <p><strong>Collaboration Features:</strong></p>
+                        <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
+                            <li>AppProvider provides AppManager via context</li>
+                            <li>ApplicationMenu uses useAppManager() hook</li>
+                            <li>Dynamic app registration and updates</li>
+                            <li>Real-time app count updates</li>
+                            <li>Clean separation of concerns</li>
+                        </ul>
+                    </div>
+                </div>
+
+                {/* Demo controls using the hook */}
+                <DemoControls />
+            </Desktop>
+        </div>
+    )
+}
+
+export default ApplicationMenuExample