ywana-core8 0.2.19 → 0.2.21

package/package.json

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

package/src/desktop/Desktop.stories.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Desktop } from './desktop.js'
+import { Desktop, useDesktopOverlays } from './desktop.js'
 import {
   useWindowDialogs,
   useWindowNotifications,
@@ -501,6 +501,386 @@ const FileExplorerApp = () => {
   )
 }
 
+/**
+ * Desktop Overlays Demo App - Demonstrates the new Desktop Overlay System
+ */
+const DesktopOverlaysApp = () => {
+  const { show, hide } = useDesktopOverlays()
+
+  const showCenteredModal = () => {
+    const id = show({
+      content: (
+        <div style={{
+          background: 'white',
+          borderRadius: '12px',
+          padding: '32px',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+          maxWidth: '500px'
+        }}>
+          <h2 style={{ margin: '0 0 16px 0', color: '#333' }}>🎯 Centered Modal</h2>
+          <p style={{ color: '#666', marginBottom: '24px' }}>
+            This is a centered modal using the Desktop Overlay System.
+            It has a backdrop and blur effect.
+          </p>
+          <button
+            onClick={() => hide(id)}
+            style={{
+              padding: '10px 20px',
+              background: '#1976d2',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              fontSize: '14px'
+            }}
+          >
+            Close
+          </button>
+        </div>
+      ),
+      position: 'center',
+      size: 'auto',
+      animation: 'scale',
+      backdrop: true,
+      backdropBlur: true,
+      zIndex: 9500
+    })
+  }
+
+  const showSlideUpNotification = () => {
+    const id = show({
+      content: (
+        <div style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          borderRadius: '12px',
+          padding: '20px 32px',
+          boxShadow: '0 10px 40px rgba(0,0,0,0.3)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px'
+        }}>
+          <span style={{ fontSize: '32px' }}>🎉</span>
+          <div>
+            <h3 style={{ margin: '0 0 4px 0' }}>Success!</h3>
+            <p style={{ margin: 0, opacity: 0.9 }}>This notification slides up from the bottom</p>
+          </div>
+        </div>
+      ),
+      position: 'bottom',
+      size: 'auto',
+      animation: 'slide-up',
+      backdrop: false,
+      margin: '0 0 40px 0',
+      zIndex: 9600
+    })
+
+    setTimeout(() => hide(id, 'slide-down'), 3000)
+  }
+
+  const showSidePanel = () => {
+    const id = show({
+      content: (
+        <div style={{
+          background: 'white',
+          height: '100%',
+          width: '400px',
+          boxShadow: '-4px 0 20px rgba(0,0,0,0.2)',
+          padding: '24px',
+          overflowY: 'auto'
+        }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+            <h2 style={{ margin: 0, color: '#333' }}>📋 Side Panel</h2>
+            <button
+              onClick={() => hide(id, 'slide-right')}
+              style={{
+                background: 'none',
+                border: 'none',
+                fontSize: '24px',
+                cursor: 'pointer',
+                padding: '4px'
+              }}
+            >
+              ×
+            </button>
+          </div>
+          <p style={{ color: '#666', lineHeight: 1.6 }}>
+            This is a side panel that slides in from the right.
+            Perfect for settings, filters, or additional information.
+          </p>
+          <div style={{ marginTop: '24px' }}>
+            <h3 style={{ color: '#333', fontSize: '16px' }}>Features:</h3>
+            <ul style={{ color: '#666', lineHeight: 1.8 }}>
+              <li>Slides in from right</li>
+              <li>Full height</li>
+              <li>Scrollable content</li>
+              <li>Custom exit animation</li>
+            </ul>
+          </div>
+        </div>
+      ),
+      position: 'right',
+      size: 'custom',
+      customSize: { width: '400px', height: '100%' },
+      animation: 'slide-left',
+      backdrop: true,
+      backdropBlur: true,
+      closeOnBackdrop: true,
+      zIndex: 9500
+    })
+  }
+
+  const showCustomPositioned = () => {
+    const id = show({
+      content: (
+        <div style={{
+          background: '#fff3cd',
+          border: '2px solid #ffc107',
+          borderRadius: '8px',
+          padding: '16px 20px',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+          maxWidth: '300px'
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <span style={{ fontSize: '24px' }}>⚠️</span>
+            <div>
+              <h4 style={{ margin: '0 0 4px 0', color: '#856404' }}>Custom Position</h4>
+              <p style={{ margin: 0, color: '#856404', fontSize: '14px' }}>
+                This overlay is positioned at custom coordinates
+              </p>
+            </div>
+          </div>
+        </div>
+      ),
+      position: 'custom',
+      customPosition: { top: '100px', right: '100px' },
+      size: 'auto',
+      animation: 'fade',
+      backdrop: false,
+      zIndex: 9700
+    })
+
+    setTimeout(() => hide(id), 4000)
+  }
+
+  const showLargeContent = () => {
+    const id = show({
+      content: (
+        <div style={{
+          background: 'white',
+          borderRadius: '16px',
+          padding: '32px',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+          width: '100%',
+          height: '100%',
+          overflowY: 'auto'
+        }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+            <h2 style={{ margin: 0, color: '#333' }}>📄 Large Content Modal</h2>
+            <button
+              onClick={() => hide(id)}
+              style={{
+                background: 'none',
+                border: 'none',
+                fontSize: '32px',
+                cursor: 'pointer',
+                padding: '4px',
+                color: '#666'
+              }}
+            >
+              ×
+            </button>
+          </div>
+          <div style={{ color: '#666', lineHeight: 1.8 }}>
+            <p>This is a large modal that takes up 80% of the screen.</p>
+            <h3>All Available Animations:</h3>
+            <ul>
+              <li><strong>fade</strong> - Simple fade in/out</li>
+              <li><strong>slide-up</strong> - Slides from bottom</li>
+              <li><strong>slide-down</strong> - Slides from top</li>
+              <li><strong>slide-left</strong> - Slides from right</li>
+              <li><strong>slide-right</strong> - Slides from left</li>
+              <li><strong>scale</strong> - Scales from center</li>
+              <li><strong>none</strong> - No animation</li>
+            </ul>
+            <h3>All Available Positions:</h3>
+            <ul>
+              <li><strong>center</strong> - Centered (default)</li>
+              <li><strong>top</strong> - Top center</li>
+              <li><strong>bottom</strong> - Bottom center</li>
+              <li><strong>left</strong> - Left center</li>
+              <li><strong>right</strong> - Right center</li>
+              <li><strong>top-left</strong> - Top left corner</li>
+              <li><strong>top-right</strong> - Top right corner</li>
+              <li><strong>bottom-left</strong> - Bottom left corner</li>
+              <li><strong>bottom-right</strong> - Bottom right corner</li>
+              <li><strong>custom</strong> - Custom coordinates</li>
+            </ul>
+            <h3>All Available Sizes:</h3>
+            <ul>
+              <li><strong>auto</strong> - Content size (default)</li>
+              <li><strong>small</strong> - 40% of screen</li>
+              <li><strong>medium</strong> - 60% of screen</li>
+              <li><strong>large</strong> - 80% of screen</li>
+              <li><strong>full</strong> - 100% of screen</li>
+              <li><strong>custom</strong> - Custom dimensions</li>
+            </ul>
+          </div>
+        </div>
+      ),
+      position: 'center',
+      size: 'large',
+      animation: 'scale',
+      backdrop: true,
+      backdropBlur: true,
+      zIndex: 9500
+    })
+  }
+
+  return (
+    <div style={{ padding: '20px', height: '100%', overflowY: 'auto' }}>
+      <h2 style={{ marginTop: 0 }}>🎭 Desktop Overlay System Demo</h2>
+      <p style={{ color: '#666', marginBottom: '24px' }}>
+        Test the new Desktop Overlay System with different animations, positions, and sizes.
+      </p>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+        <button
+          onClick={showCenteredModal}
+          style={{
+            padding: '16px',
+            background: '#1976d2',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500'
+          }}
+        >
+          🎯 Centered Modal<br/>
+          <small style={{ opacity: 0.8 }}>scale animation</small>
+        </button>
+
+        <button
+          onClick={showSlideUpNotification}
+          style={{
+            padding: '16px',
+            background: '#4caf50',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500'
+          }}
+        >
+          🎉 Notification<br/>
+          <small style={{ opacity: 0.8 }}>slide-up animation</small>
+        </button>
+
+        <button
+          onClick={showSidePanel}
+          style={{
+            padding: '16px',
+            background: '#ff9800',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500'
+          }}
+        >
+          📋 Side Panel<br/>
+          <small style={{ opacity: 0.8 }}>slide-left animation</small>
+        </button>
+
+        <button
+          onClick={showCustomPositioned}
+          style={{
+            padding: '16px',
+            background: '#9c27b0',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500'
+          }}
+        >
+          ⚠️ Custom Position<br/>
+          <small style={{ opacity: 0.8 }}>fade animation</small>
+        </button>
+
+        <button
+          onClick={showLargeContent}
+          style={{
+            padding: '16px',
+            background: '#f44336',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500'
+          }}
+        >
+          📄 Large Modal<br/>
+          <small style={{ opacity: 0.8 }}>80% screen size</small>
+        </button>
+      </div>
+
+      <div style={{
+        marginTop: '32px',
+        padding: '20px',
+        background: '#f5f5f5',
+        borderRadius: '8px',
+        border: '1px solid #e0e0e0'
+      }}>
+        <h3 style={{ marginTop: 0 }}>📚 API Reference</h3>
+        <pre style={{
+          background: '#fff',
+          padding: '16px',
+          borderRadius: '6px',
+          overflow: 'auto',
+          fontSize: '12px',
+          lineHeight: 1.6
+        }}>
+{`const { show, hide, hideAll, update } = useDesktopOverlays()
+
+// Show overlay
+const id = show({
+  content: <YourComponent />,
+  position: 'center',  // or top, bottom, left, right, etc.
+  size: 'medium',      // or auto, small, large, full, custom
+  animation: 'scale',  // or fade, slide-up, slide-down, etc.
+  backdrop: true,
+  backdropBlur: true,
+  closeOnBackdrop: true,
+  closeOnEscape: true,
+  zIndex: 9500,
+  animationDuration: 300,
+  customPosition: { top: '100px', left: '50px' },
+  customSize: { width: '400px', height: '300px' },
+  padding: '20px',
+  margin: '10px'
+})
+
+// Hide overlay
+hide(id, 'slide-down')  // optional exit animation
+
+// Hide all overlays
+hideAll()
+
+// Update overlay
+update(id, { zIndex: 9600 })`}
+        </pre>
+      </div>
+    </div>
+  )
+}
+
 // Complete desktop configuration
 const desktopConfig = {
   categories: [
@@ -584,6 +964,15 @@ const desktopConfig = {
       category: 'Media',
       content: null,
       size: { width: 400, height: 300 }
+    },
+    {
+      id: 'desktop-overlays-demo',
+      name: 'Desktop Overlays',
+      description: 'Demo of Desktop Overlay System - NEW FEATURE!',
+      icon: '🎭',
+      category: 'Development',
+      component: <DesktopOverlaysApp />,
+      size: { width: 700, height: 600 }
     }
   ]
 }
@@ -628,15 +1017,36 @@ const ThemeSelector = ({ currentTheme, onThemeChange }) => (
  * Complete Desktop Demo - All Features
  */
 export const CompleteDesktop = () => {
-  const [theme, setTheme] = useState('default')
+  const [desktopSize, setDesktopSize] = useState({ width: 1200, height: 600 })
 
-  return (
-    <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-      <ThemeSelector currentTheme={theme} onThemeChange={setTheme} />
+  // Update desktop size when window resizes
+  React.useEffect(() => {
+    const updateSize = () => {
+      setDesktopSize({
+        width: window.innerWidth,
+        height: window.innerHeight - 60 // Leave space for Ladle controls
+      })
+    }
+
+    // Set initial size
+    updateSize()
 
+    // Listen for resize events
+    window.addEventListener('resize', updateSize)
+    return () => window.removeEventListener('resize', updateSize)
+  }, [])
+
+  return (
+    <div style={{
+      height: 'calc(100vh - 60px)',
+      width: '100vw',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      overflow: 'hidden'
+    }}>
       <Desktop
-        theme={theme === 'default' ? undefined : theme}
-        desktopSize={{ width: 1200, height: 600 }}
+        desktopSize={desktopSize}
         desktopConfig={desktopConfig}
       >
         <div style={{
@@ -661,8 +1071,8 @@ export const CompleteDesktop = () => {
               <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>Window Layouts:</strong> Click window icon in taskbar for layout options</li>
+              <li><strong>Theme Selector:</strong> Click palette icon in taskbar to switch themes</li>
               <li><strong>Responsive:</strong> Windows stay within workspace bounds</li>
             </ul>
 
@@ -674,8 +1084,11 @@ export const CompleteDesktop = () => {
               <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>
+            <h4>Taskbar Controls:</h4>
+            <ul>
+              <li><strong>Window icon:</strong> Arrange windows (Cascade, Tile, Columns, Rows, etc.)</li>
+              <li><strong>Palette icon:</strong> Switch desktop themes (Windows, macOS, Linux)</li>
+            </ul>
           </div>
         </div>
       </Desktop>