ywana-core8 0.2.16 → 0.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/desktop/Desktop.stories.jsx

@@ -1,5 +1,505 @@
 import React, { useState } from 'react'
 import { Desktop } from './desktop.js'
+import {
+  useWindowDialogs,
+  useWindowNotifications,
+  useWindowTooltips,
+  useWindowContextMenus,
+  useWindowOverlays
+} from './window.js'
+
+// Demo components for showcasing WindowInstanceContext features
+
+/**
+ * Settings App - Demonstrates dialogs and notifications
+ */
+const SettingsApp = () => {
+  const { showDialog } = useWindowDialogs()
+  const { showNotification } = useWindowNotifications()
+
+  const handleSaveSettings = () => {
+    showDialog({
+      title: 'Confirm Settings',
+      content: (
+        <div style={{ padding: '20px' }}>
+          <p>Are you sure you want to save these settings?</p>
+          <p>This will apply changes to your system configuration.</p>
+        </div>
+      ),
+      actions: (
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button
+            style={{
+              padding: '8px 16px',
+              background: '#007bff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+            onClick={() => {
+              showNotification({
+                type: 'success',
+                title: 'Settings Saved!',
+                message: 'Your configuration has been updated successfully.',
+                icon: '✅',
+                duration: 3000
+              })
+            }}
+          >
+            Save
+          </button>
+          <button
+            style={{
+              padding: '8px 16px',
+              background: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      )
+    })
+  }
+
+  const handleResetSettings = () => {
+    showNotification({
+      type: 'warning',
+      title: 'Reset Warning',
+      message: 'This will restore all settings to default values.',
+      icon: '⚠️',
+      duration: 4000
+    })
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>⚙️ System Settings</h2>
+      <p>Configure your system preferences</p>
+
+      <div style={{
+        background: '#f8f9fa',
+        padding: '16px',
+        borderRadius: '8px',
+        margin: '20px 0',
+        border: '1px solid #dee2e6'
+      }}>
+        <h3>Display Settings</h3>
+        <label style={{ display: 'block', margin: '8px 0' }}>
+          <input type="checkbox" defaultChecked /> Enable dark mode
+        </label>
+        <label style={{ display: 'block', margin: '8px 0' }}>
+          <input type="checkbox" /> Show desktop icons
+        </label>
+        <label style={{ display: 'block', margin: '8px 0' }}>
+          Resolution:
+          <select style={{ marginLeft: '8px', padding: '4px' }}>
+            <option>1920x1080</option>
+            <option>1366x768</option>
+            <option>1280x720</option>
+          </select>
+        </label>
+      </div>
+
+      <div style={{ display: 'flex', gap: '12px', marginTop: '20px' }}>
+        <button
+          onClick={handleSaveSettings}
+          style={{
+            padding: '10px 20px',
+            background: '#28a745',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer'
+          }}
+        >
+          Save Settings
+        </button>
+        <button
+          onClick={handleResetSettings}
+          style={{
+            padding: '10px 20px',
+            background: '#dc3545',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer'
+          }}
+        >
+          Reset to Default
+        </button>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Text Editor App - Demonstrates context menus and tooltips
+ */
+const TextEditorApp = () => {
+  const { showContextMenu } = useWindowContextMenus()
+  const { showTooltip, hideTooltip } = useWindowTooltips()
+  const { showNotification } = useWindowNotifications()
+  const [content, setContent] = useState('Welcome to the Text Editor!\n\nRight-click for context menu.\nHover buttons for tooltips.')
+
+  const handleContextMenu = (e) => {
+    e.preventDefault()
+    const rect = e.target.getBoundingClientRect()
+    const windowBounds = e.target.closest('.window').getBoundingClientRect()
+
+    showContextMenu({
+      x: e.clientX - windowBounds.left,
+      y: e.clientY - windowBounds.top,
+      items: [
+        {
+          label: 'Cut',
+          icon: '✂️',
+          shortcut: 'Ctrl+X',
+          onClick: () => showNotification({ type: 'info', message: 'Cut selected text', duration: 2000 })
+        },
+        {
+          label: 'Copy',
+          icon: '📋',
+          shortcut: 'Ctrl+C',
+          onClick: () => showNotification({ type: 'info', message: 'Copied to clipboard', duration: 2000 })
+        },
+        {
+          label: 'Paste',
+          icon: '📄',
+          shortcut: 'Ctrl+V',
+          onClick: () => showNotification({ type: 'info', message: 'Pasted from clipboard', duration: 2000 })
+        },
+        {
+          label: 'Select All',
+          icon: '🔘',
+          shortcut: 'Ctrl+A',
+          onClick: () => showNotification({ type: 'info', message: 'Selected all text', duration: 2000 })
+        }
+      ]
+    })
+  }
+
+  const handleTooltip = (e, text) => {
+    const rect = e.target.getBoundingClientRect()
+    const windowBounds = e.target.closest('.window').getBoundingClientRect()
+
+    const tooltipId = showTooltip({
+      text,
+      x: rect.left - windowBounds.left + rect.width / 2,
+      y: rect.top - windowBounds.top - 10,
+      position: 'top'
+    })
+
+    setTimeout(() => hideTooltip(tooltipId), 2000)
+  }
+
+  return (
+    <div style={{ padding: '16px', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', padding: '8px', background: '#f8f9fa', borderRadius: '4px' }}>
+        <button
+          onMouseEnter={(e) => handleTooltip(e, 'Create a new document')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          📄 New
+        </button>
+        <button
+          onMouseEnter={(e) => handleTooltip(e, 'Open an existing document')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          📁 Open
+        </button>
+        <button
+          onMouseEnter={(e) => handleTooltip(e, 'Save current document')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          💾 Save
+        </button>
+        <button
+          onMouseEnter={(e) => handleTooltip(e, 'Undo last action')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          ↶ Undo
+        </button>
+        <button
+          onMouseEnter={(e) => handleTooltip(e, 'Redo last undone action')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          ↷ Redo
+        </button>
+      </div>
+
+      <textarea
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        onContextMenu={handleContextMenu}
+        style={{
+          flex: 1,
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          padding: '12px',
+          fontFamily: 'monospace',
+          fontSize: '14px',
+          resize: 'none',
+          outline: 'none'
+        }}
+        placeholder="Start typing your document..."
+      />
+
+      <div style={{
+        marginTop: '8px',
+        padding: '8px',
+        background: '#f8f9fa',
+        borderRadius: '4px',
+        fontSize: '12px',
+        color: '#666',
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+        <span>Lines: {content.split('\n').length}</span>
+        <span>Characters: {content.length}</span>
+        <span>Words: {content.split(/\s+/).filter(w => w.length > 0).length}</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * File Explorer App - Demonstrates overlays and all features combined
+ */
+const FileExplorerApp = () => {
+  const { showOverlay, hideOverlay } = useWindowOverlays()
+  const { showDialog } = useWindowDialogs()
+  const { showNotification } = useWindowNotifications()
+  const { showContextMenu } = useWindowContextMenus()
+
+  const handleFileOperation = (operation) => {
+    const overlayId = showOverlay({
+      content: (
+        <div style={{ padding: '40px', textAlign: 'center', minWidth: '300px' }}>
+          <h3>Processing...</h3>
+          <div style={{
+            width: '40px',
+            height: '40px',
+            border: '4px solid #f3f3f3',
+            borderTop: '4px solid #007bff',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+            margin: '20px auto'
+          }}></div>
+          <p>{operation} files...</p>
+          <style jsx>{`
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          `}</style>
+        </div>
+      ),
+      closeOnBackdrop: false,
+      showCloseButton: false
+    })
+
+    // Simulate file operation
+    setTimeout(() => {
+      hideOverlay(overlayId)
+      showNotification({
+        type: 'success',
+        title: 'Operation Complete',
+        message: `${operation} completed successfully!`,
+        icon: '✅',
+        duration: 3000
+      })
+    }, 2000)
+  }
+
+  const handleDeleteFile = (fileName) => {
+    showDialog({
+      title: 'Delete File',
+      content: (
+        <div style={{ padding: '20px' }}>
+          <p>Are you sure you want to delete <strong>{fileName}</strong>?</p>
+          <p style={{ color: '#dc3545', fontSize: '14px' }}>This action cannot be undone.</p>
+        </div>
+      ),
+      actions: (
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button
+            style={{
+              padding: '8px 16px',
+              background: '#dc3545',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+            onClick={() => handleFileOperation('Deleting')}
+          >
+            Delete
+          </button>
+          <button
+            style={{
+              padding: '8px 16px',
+              background: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      )
+    })
+  }
+
+  const handleFileContextMenu = (e, fileName) => {
+    e.preventDefault()
+    const windowBounds = e.target.closest('.window').getBoundingClientRect()
+
+    showContextMenu({
+      x: e.clientX - windowBounds.left,
+      y: e.clientY - windowBounds.top,
+      items: [
+        {
+          label: 'Open',
+          icon: '📂',
+          onClick: () => showNotification({ type: 'info', message: `Opening ${fileName}`, duration: 2000 })
+        },
+        {
+          label: 'Copy',
+          icon: '📋',
+          shortcut: 'Ctrl+C',
+          onClick: () => handleFileOperation('Copying')
+        },
+        {
+          label: 'Cut',
+          icon: '✂️',
+          shortcut: 'Ctrl+X',
+          onClick: () => handleFileOperation('Moving')
+        },
+        {
+          label: 'Delete',
+          icon: '🗑️',
+          shortcut: 'Del',
+          onClick: () => handleDeleteFile(fileName)
+        },
+        {
+          label: 'Properties',
+          icon: '📋',
+          onClick: () => showDialog({
+            title: `Properties - ${fileName}`,
+            content: (
+              <div style={{ padding: '20px' }}>
+                <h4>{fileName}</h4>
+                <p><strong>Type:</strong> Document</p>
+                <p><strong>Size:</strong> 1.2 MB</p>
+                <p><strong>Created:</strong> Today, 10:30 AM</p>
+                <p><strong>Modified:</strong> Today, 2:15 PM</p>
+              </div>
+            )
+          })
+        }
+      ]
+    })
+  }
+
+  const files = [
+    { name: 'Document.txt', icon: '📄', type: 'Text Document' },
+    { name: 'Image.jpg', icon: '🖼️', type: 'JPEG Image' },
+    { name: 'Presentation.pptx', icon: '📊', type: 'PowerPoint' },
+    { name: 'Spreadsheet.xlsx', icon: '📈', type: 'Excel File' },
+    { name: 'Video.mp4', icon: '🎬', type: 'Video File' },
+    { name: 'Archive.zip', icon: '📦', type: 'Compressed File' }
+  ]
+
+  return (
+    <div style={{ padding: '16px', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', padding: '8px', background: '#f8f9fa', borderRadius: '4px' }}>
+        <button
+          onClick={() => handleFileOperation('Creating new folder')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          📁 New Folder
+        </button>
+        <button
+          onClick={() => handleFileOperation('Uploading')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          📤 Upload
+        </button>
+        <button
+          onClick={() => handleFileOperation('Refreshing')}
+          style={{ padding: '6px 12px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+        >
+          🔄 Refresh
+        </button>
+      </div>
+
+      <div style={{
+        flex: 1,
+        border: '1px solid #dee2e6',
+        borderRadius: '4px',
+        background: 'white',
+        overflow: 'auto'
+      }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+          gap: '16px',
+          padding: '16px'
+        }}>
+          {files.map((file, index) => (
+            <div
+              key={index}
+              onContextMenu={(e) => handleFileContextMenu(e, file.name)}
+              onDoubleClick={() => showNotification({
+                type: 'info',
+                message: `Opening ${file.name}`,
+                duration: 2000
+              })}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: '12px',
+                borderRadius: '8px',
+                cursor: 'pointer',
+                transition: 'background-color 0.2s',
+                ':hover': { background: '#f8f9fa' }
+              }}
+              onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
+              onMouseLeave={(e) => e.target.style.background = 'transparent'}
+            >
+              <div style={{ fontSize: '32px', marginBottom: '8px' }}>{file.icon}</div>
+              <div style={{ fontSize: '12px', textAlign: 'center', wordBreak: 'break-word' }}>
+                {file.name}
+              </div>
+              <div style={{ fontSize: '10px', color: '#666', textAlign: 'center' }}>
+                {file.type}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div style={{
+        marginTop: '8px',
+        padding: '8px',
+        background: '#f8f9fa',
+        borderRadius: '4px',
+        fontSize: '12px',
+        color: '#666'
+      }}>
+        {files.length} items • Right-click for context menu • Double-click to open
+      </div>
+    </div>
+  )
+}
 
 // Complete desktop configuration
 const desktopConfig = {
@@ -16,20 +516,20 @@ const desktopConfig = {
     {
       id: 'file-explorer',
       name: 'File Explorer',
-      description: 'Browse and manage files',
+      description: 'Browse and manage files - Showcases overlays, dialogs, context menus',
       icon: '📁',
       category: 'System',
-      component: null,
-      size: { width: 600, height: 400 }
+      component: <FileExplorerApp />,
+      size: { width: 600, height: 450 }
     },
     {
       id: 'text-editor',
       name: 'Text Editor',
-      description: 'Edit text files',
+      description: 'Edit text files - Showcases context menus and tooltips',
       icon: '📝',
       category: 'Productivity',
-      component: null,
-      size: { width: 500, height: 350 }
+      component: <TextEditorApp />,
+      size: { width: 550, height: 400 }
     },
     {
       id: 'calculator',
@@ -43,11 +543,11 @@ const desktopConfig = {
     {
       id: 'settings',
       name: 'Settings',
-      description: 'System configuration',
+      description: 'System configuration - Showcases dialogs and notifications',
       icon: '⚙️',
       category: 'System',
-      component: null,
-      size: { width: 450, height: 300 }
+      component: <SettingsApp />,
+      size: { width: 480, height: 350 }
     },
     {
       id: 'browser',
@@ -55,7 +555,7 @@ const desktopConfig = {
       description: 'Browse the internet',
       icon: '🌐',
       category: 'Internet',
-      component: null,
+      content: null,
       size: { width: 800, height: 500 }
     },
     {
@@ -64,7 +564,7 @@ const desktopConfig = {
       description: 'Command line interface',
       icon: '💻',
       category: 'Development',
-      component: null,
+      content: null,
       size: { width: 700, height: 400 }
     },
     {
@@ -73,7 +573,7 @@ const desktopConfig = {
       description: 'View and edit images',
       icon: '🖼️',
       category: 'Media',
-      component: null,
+      content: null,
       size: { width: 600, height: 500 }
     },
     {
@@ -82,7 +582,7 @@ const desktopConfig = {
       description: 'Play audio files',
       icon: '🎵',
       category: 'Media',
-      component: null,
+      content: null,
       size: { width: 400, height: 300 }
     }
   ]
@@ -166,7 +666,15 @@ export const CompleteDesktop = () => {
               <li><strong>Responsive:</strong> Windows stay within workspace bounds</li>
             </ul>
 
-            <h4>🎨 Current Theme: <span style={{color: '#2196f3'}}>{theme}</span></h4>
+            <h4>� New WindowInstanceContext Features:</h4>
+            <ul>
+              <li><strong>Settings App:</strong> Dialogs and notifications</li>
+              <li><strong>Text Editor:</strong> Context menus (right-click) and tooltips (hover buttons)</li>
+              <li><strong>File Explorer:</strong> All features combined - overlays, dialogs, context menus</li>
+              <li><strong>Contained Elements:</strong> All floating elements stay within window boundaries</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>