ywana-core8 0.1.103 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.103",
+  "version": "0.2.1",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -9,60 +9,57 @@
   "source": "src/index.js",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
-  "previewjs": {
-    "framework": "react",
-    "react": {
-      "version": 17
-    }
-  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
   "scripts": {
-    "build": "microbundle --no-compress --jsx React.createElement",
-    "dev": "microbundle watch --no-compress --jsx React.createElement",
-    "test": "jest",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "prepublishOnly": "npm run build",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build",
     "deploy-docs": "gh-pages -d doc/build"
   },
   "bugs": {
     "url": "https://github.com/ywana/ywana-core8/issues"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "nth-check": "^2.1.1",
+    "postcss": "^8.4.31",
+    "svgo": "^3.0.0",
+    "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
-    "react": "17.x",
-    "react-dom": "17.x"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^14.6.1",
-    "babel-jest": "^30.0.5",
-    "gh-pages": "^3.2.3",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
+    "@ladle/react": "^5.0.3",
+    "@vitejs/plugin-react": "^5.0.2",
+    "gh-pages": "^6.3.0",
     "jsdom": "^26.1.0",
-    "microbundle": "^0.14.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.1"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "vite": "^7.1.4"
   },
   "dependencies": {
     "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
-    "framer-motion": "^5.3.1",
     "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
     "react-image-pan-zoom-rotate": "^1.6.0",
-    "react-notifications-component": "^3.4.1",
-    "react-pdf": "^7.0.3",
+    "react-notifications-component": "^4.0.1",
     "react-switch": "^6.0.0",
-    "react-syntax-highlighter": "^15.6.1",
-    "react-tooltip": "^4.2.21",
+    "react-syntax-highlighter": "^15.6.6",
     "resumablejs": "^1.1.0"
   }
 }

package/src/Test.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+/**
+ * Test básico
+ */
+export const BasicTest = () => (
+  <div style={{ padding: '20px', background: '#f0f8ff', borderRadius: '8px' }}>
+    <h2>🧪 Test Básico</h2>
+    <p>Si ves esto, Ladle está funcionando.</p>
+  </div>
+)
+
+/**
+ * Test con botón
+ */
+export const TestWithButton = () => {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <div style={{ padding: '20px', background: '#f0fff0', borderRadius: '8px' }}>
+      <h2>🔢 Test con Botón</h2>
+      <p>Contador: {count}</p>
+      <button onClick={() => setCount(count + 1)}>
+        Incrementar
+      </button>
+    </div>
+  )
+}

package/src/desktop/Desktop.stories.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { Desktop } from './desktop.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>
+)

package/src/desktop/WindowContext.js

@@ -0,0 +1,135 @@
+import React, { createContext, useContext, useState, useEffect, useRef } from 'react'
+import { WindowManager } from './WindowManager'
+
+/**
+ * Context for WindowManager
+ */
+const WindowContext = createContext(null)
+
+/**
+ * WindowProvider - Provides WindowManager to React components
+ */
+export const WindowProvider = ({ children, desktopSize }) => {
+    const windowManagerRef = useRef(null)
+    const [state, setState] = useState(null)
+
+    // Initialize WindowManager
+    useEffect(() => {
+        windowManagerRef.current = new WindowManager(desktopSize)
+        
+        // Set initial state
+        setState(windowManagerRef.current.getState())
+        
+        // Listen for changes
+        const handleStateChange = (newState) => {
+            setState(newState)
+        }
+        
+        windowManagerRef.current.addListener(handleStateChange)
+        
+        // Cleanup
+        return () => {
+            if (windowManagerRef.current) {
+                windowManagerRef.current.removeListener(handleStateChange)
+            }
+        }
+    }, [])
+
+    // Update desktop size when prop changes
+    useEffect(() => {
+        if (windowManagerRef.current && desktopSize) {
+            windowManagerRef.current.setDesktopSize(desktopSize)
+        }
+    }, [desktopSize])
+
+    // Don't render until WindowManager is initialized
+    if (!state || !windowManagerRef.current) {
+        return null
+    }
+
+    const value = {
+        // Current state
+        windows: state.windows,
+        activeWindowId: state.activeWindowId,
+        desktopSize: state.desktopSize,
+        
+        // WindowManager instance (for advanced usage)
+        windowManager: windowManagerRef.current,
+        
+        // Convenience methods
+        createWindow: (config) => windowManagerRef.current.createWindow(config),
+        closeWindow: (id) => windowManagerRef.current.closeWindow(id),
+        focusWindow: (id) => windowManagerRef.current.focusWindow(id),
+        minimizeWindow: (id, minimize) => windowManagerRef.current.minimizeWindow(id, minimize),
+        maximizeWindow: (id, maximize) => windowManagerRef.current.maximizeWindow(id, maximize),
+        updateWindowPosition: (id, position) => windowManagerRef.current.updateWindowPosition(id, position),
+        
+        // Window queries
+        getWindow: (id) => windowManagerRef.current.getWindow(id),
+        getAllWindows: () => windowManagerRef.current.getAllWindows(),
+        getVisibleWindows: () => windowManagerRef.current.getVisibleWindows(),
+        
+        // Layout functions
+        cascadeWindows: () => windowManagerRef.current.cascadeWindows(),
+        tileWindows: () => windowManagerRef.current.tileWindows(),
+        centerWindow: (id) => windowManagerRef.current.centerWindow(id),
+        centerAllWindows: () => windowManagerRef.current.centerAllWindows(),
+        
+        // Utility functions
+        clearAllWindows: () => windowManagerRef.current.clearAllWindows(),
+        getStats: () => windowManagerRef.current.getStats(),
+        setDesktopSize: (size) => windowManagerRef.current.setDesktopSize(size)
+    }
+
+    return (
+        <WindowContext.Provider value={value}>
+            {children}
+        </WindowContext.Provider>
+    )
+}
+
+/**
+ * Hook to use WindowContext
+ */
+export const useWindows = () => {
+    const context = useContext(WindowContext)
+    if (!context) {
+        throw new Error('useWindows must be used within a WindowProvider')
+    }
+    return context
+}
+
+/**
+ * Hook to use a specific window
+ */
+export const useWindow = (windowId) => {
+    const { getWindow, updateWindowPosition, closeWindow, focusWindow, minimizeWindow, maximizeWindow } = useWindows()
+    
+    const window = getWindow(windowId)
+    
+    return {
+        window,
+        exists: !!window,
+        updatePosition: (position) => updateWindowPosition(windowId, position),
+        close: () => closeWindow(windowId),
+        focus: () => focusWindow(windowId),
+        minimize: (minimize) => minimizeWindow(windowId, minimize),
+        maximize: (maximize) => maximizeWindow(windowId, maximize)
+    }
+}
+
+/**
+ * Hook to create windows easily
+ */
+export const useCreateWindow = () => {
+    const { createWindow } = useWindows()
+    return createWindow
+}
+
+/**
+ * Hook for window statistics
+ */
+export const useWindowStats = () => {
+    const { getStats } = useWindows()
+    return getStats()
+}