ywana-core8 0.1.103 → 0.2.2

package/src/desktop/window.js

@@ -1,27 +1,262 @@
-import React from 'react'
-import { Button, Icon } from '../html'
+import React, { useState, useRef, useEffect } from 'react'
+import { useWindows } from './WindowContext'
 import './window.css'
 
-export const Window = (props) => {
+/**
+ * Window component - renders a draggable, resizable window
+ */
+export const Window = ({
+    id,
+    title = 'Window',
+    icon,
+    children,
+    content,
+    toolbar,
+    statusBar,
+    showMinimize = true,
+    showMaximize = true,
+    showClose = true,
+    resizable = true,
+    draggable = true,
+    className = '',
+    ...props
+}) => {
+    const windowRef = useRef(null)
+    const headerRef = useRef(null)
+    
+    // Get window data from WindowManager
+    const { getWindow, updateWindowPosition, closeWindow, minimizeWindow, maximizeWindow, focusWindow } = useWindows()
+    const windowData = getWindow(id)
+    
+    // Local state for dragging
+    const [isDragging, setIsDragging] = useState(false)
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
+    const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 })
 
-    const { id, icon, title, children } = props
+    // If window doesn't exist in WindowManager, don't render
+    if (!windowData) {
+        return null
+    }
+
+    const { position, size, minimized, maximized, zIndex } = windowData
+
+    // Handle drag start
+    const handleMouseDown = (e) => {
+        if (!draggable || maximized) return
+
+        e.preventDefault()
+
+        // Get desktop container bounds
+        const desktopContainer = windowRef.current?.parentElement
+        if (!desktopContainer) return
+
+        const windowRect = windowRef.current.getBoundingClientRect()
+
+        // Calculate offset from mouse to window top-left
+        const offset = {
+            x: e.clientX - windowRect.left,
+            y: e.clientY - windowRect.top
+        }
+
+        setDragOffset(offset)
+        setDragStartPosition(position)
+        setIsDragging(true)
+
+        // Focus window
+        focusWindow(id)
+    }
+
+    // Handle drag move
+    const handleMouseMove = (e) => {
+        if (!isDragging) return
+
+        e.preventDefault()
+
+        // Get desktop container bounds
+        const desktopContainer = windowRef.current?.parentElement
+        if (!desktopContainer) return
+
+        const desktopRect = desktopContainer.getBoundingClientRect()
+
+        // Calculate new position relative to desktop container
+        const newPosition = {
+            x: e.clientX - desktopRect.left - dragOffset.x,
+            y: e.clientY - desktopRect.top - dragOffset.y
+        }
+
+        // Constrain to desktop bounds
+        const windowRect = windowRef.current.getBoundingClientRect()
+        const maxX = desktopRect.width - windowRect.width
+        const maxY = desktopRect.height - windowRect.height
+
+        const constrainedPosition = {
+            x: Math.max(0, Math.min(newPosition.x, maxX)),
+            y: Math.max(0, Math.min(newPosition.y, maxY))
+        }
+
+        // Update visual position immediately (local state)
+        if (windowRef.current) {
+            windowRef.current.style.left = `${constrainedPosition.x}px`
+            windowRef.current.style.top = `${constrainedPosition.y}px`
+        }
+    }
+
+    // Handle drag end
+    const handleMouseUp = () => {
+        if (!isDragging) return
+
+        setIsDragging(false)
+
+        // Get final position relative to desktop container
+        const desktopContainer = windowRef.current?.parentElement
+        if (!desktopContainer) return
+
+        const windowRect = windowRef.current.getBoundingClientRect()
+        const desktopRect = desktopContainer.getBoundingClientRect()
+
+        const finalPosition = {
+            x: windowRect.left - desktopRect.left,
+            y: windowRect.top - desktopRect.top
+        }
+
+        // Update WindowManager only once at the end
+        updateWindowPosition(id, finalPosition)
+    }
+
+    // Setup drag event listeners
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove)
+            document.addEventListener('mouseup', handleMouseUp)
+            document.body.style.userSelect = 'none'
+            document.body.style.cursor = 'move'
+            
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove)
+                document.removeEventListener('mouseup', handleMouseUp)
+                document.body.style.userSelect = ''
+                document.body.style.cursor = ''
+            }
+        }
+    }, [isDragging])
+
+    // Window control handlers
+    const handleMinimize = (e) => {
+        e.stopPropagation()
+        minimizeWindow(id, !minimized)
+    }
+
+    const handleMaximize = (e) => {
+        e.stopPropagation()
+        maximizeWindow(id, !maximized)
+    }
+
+    const handleClose = (e) => {
+        e.stopPropagation()
+        closeWindow(id)
+    }
+
+    // Double-click header to maximize/restore
+    const handleHeaderDoubleClick = (e) => {
+        if (!showMaximize) return
+        e.preventDefault()
+        maximizeWindow(id, !maximized)
+    }
+
+    const handleFocus = () => {
+        focusWindow(id)
+    }
+
+    // Window styles
+    const windowStyle = {
+        position: 'absolute',
+        left: maximized ? 0 : position.x,
+        top: maximized ? 0 : position.y,
+        width: maximized ? 'calc(100% - 0px)' : size.width,
+        height: maximized ? 'calc(100% - 50px)' : size.height, // Leave space for taskbar
+        zIndex: zIndex,
+        display: minimized ? 'none' : 'block'
+    }
+
+    const windowClasses = [
+        'window',
+        maximized && 'window--maximized',
+        isDragging && 'window--dragging',
+        className
+    ].filter(Boolean).join(' ')
 
     return (
-        <div className="window normal" draggable>
-            <header>
-                <Icon icon={icon} size="small" />
-                <label>{title}</label>
-                <Icon icon="close" clickable size="small" />
-            </header>
-            <nav>
-
-            </nav>
-            <menu></menu>
-            <main>
-                {children}x
-            </main>
-            <aside></aside>
-            <footer>x</footer>
+        <div
+            ref={windowRef}
+            className={windowClasses}
+            style={windowStyle}
+            onClick={handleFocus}
+            {...props}
+        >
+            {/* Window Header */}
+            <div
+                ref={headerRef}
+                className="window__header"
+                onMouseDown={handleMouseDown}
+                onDoubleClick={handleHeaderDoubleClick}
+                style={{ cursor: draggable && !maximized ? 'move' : 'default' }}
+            >
+                {/* Icon and Title */}
+                <div className="window__title-bar">
+                    {icon && <div className="window__icon">{icon}</div>}
+                    <div className="window__title">{title}</div>
+                </div>
+                
+                {/* Window Controls */}
+                <div className="window__controls">
+                    {showMinimize && (
+                        <button 
+                            className="window__control window__control--minimize"
+                            onClick={handleMinimize}
+                            title="Minimize"
+                        >
+                            −
+                        </button>
+                    )}
+                    {showMaximize && (
+                        <button 
+                            className="window__control window__control--maximize"
+                            onClick={handleMaximize}
+                            title={maximized ? "Restore" : "Maximize"}
+                        >
+                            {maximized ? '⧉' : '□'}
+                        </button>
+                    )}
+                    {showClose && (
+                        <button 
+                            className="window__control window__control--close"
+                            onClick={handleClose}
+                            title="Close"
+                        >
+                            ×
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* Toolbar */}
+            {toolbar && (
+                <div className="window__toolbar">
+                    {toolbar}
+                </div>
+            )}
+
+            {/* Window Content */}
+            <div className="window__content">
+                {content || children}
+            </div>
+
+            {/* Status Bar */}
+            {statusBar && (
+                <div className="window__status-bar">
+                    {statusBar}
+                </div>
+            )}
         </div>
     )
-} 
+}

package/src/desktop.backup/desktop.css

@@ -0,0 +1,6 @@
+.desktop {
+     height: 100vh;
+     width: 100vw;
+     background-color: rgb(113, 102, 226);
+     position: relative;
+}

package/src/desktop.backup/desktop.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import './desktop.css'
+
+export const Desktop = (props) => {
+
+    const { children } = props
+
+    return (
+        <div className='desktop'>
+            { children }
+        </div>
+    )
+}

package/src/desktop.backup/window.css

@@ -0,0 +1,58 @@
+.window {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    min-width: 20rem;
+    min-height: 15rem;
+    resize: both;
+    background-color: rgb(227, 227, 227);
+    display: grid;
+    overflow: hidden;
+    resize: both;
+}
+
+.window.normal {
+    grid-template-areas: 
+        "header header header"
+        "nav nav nav"
+        "menu main aside"
+        "footer footer footer";
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: 2rem auto 1fr auto;
+}
+
+.window>header {
+    grid-area: header;
+    padding: .3rem .3rem 0 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.window>header>label {
+    flex: 1;
+}
+
+.window>nav {
+    grid-area: nav;
+}
+
+.window>menu {
+    grid-area: menu;
+    padding: 0;
+}
+
+.window>main {
+    grid-area: main;
+    padding: .5rem;
+    overflow: hidden;
+    border: solid 1px var(--divider-color);
+}
+
+.window>aside {
+    grid-area: aside;
+}
+
+.window>footer {
+    grid-area: footer;
+}

package/src/desktop.backup/window.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Button, Icon } from '../html'
+import './window.css'
+
+export const Window = (props) => {
+
+    const { id, icon, title, children } = props
+
+    return (
+        <div className="window normal" draggable>
+            <header>
+                <Icon icon={icon} size="small" />
+                <label>{title}</label>
+                <Icon icon="close" clickable size="small" />
+            </header>
+            <nav>
+
+            </nav>
+            <menu></menu>
+            <main>
+                {children}x
+            </main>
+            <aside></aside>
+            <footer>x</footer>
+        </div>
+    )
+} 

package/src/html/Accordion.stories.jsx

@@ -0,0 +1,178 @@
+import React, { useState } from 'react'
+import { Accordion } from './accordion.js'
+
+/**
+ * Accordion básico
+ */
+export const BasicAccordion = () => {
+  const basicSections = [
+    {
+      id: 'section-1',
+      title: 'Información Personal',
+      subtitle: 'Datos básicos del usuario',
+      icon: 'person',
+      checked: false,
+      open: true,
+      info: '3 campos',
+      children: (
+        <div style={{ padding: '1rem' }}>
+          <p>Contenido de información personal:</p>
+          <ul>
+            <li>Nombre completo</li>
+            <li>Email</li>
+            <li>Teléfono</li>
+          </ul>
+        </div>
+      )
+    },
+    {
+      id: 'section-2',
+      title: 'Configuración',
+      subtitle: 'Preferencias del sistema',
+      icon: 'settings',
+      checked: true,
+      open: false,
+      info: '5 opciones',
+      children: (
+        <div style={{ padding: '1rem' }}>
+          <p>Opciones de configuración:</p>
+          <ul>
+            <li>Tema oscuro/claro</li>
+            <li>Notificaciones</li>
+            <li>Idioma</li>
+            <li>Zona horaria</li>
+            <li>Privacidad</li>
+          </ul>
+        </div>
+      )
+    },
+    {
+      id: 'section-3',
+      title: 'Seguridad',
+      subtitle: 'Configuración de seguridad',
+      icon: 'security',
+      checked: false,
+      open: false,
+      info: '2 elementos',
+      children: (
+        <div style={{ padding: '1rem' }}>
+          <p>Configuración de seguridad:</p>
+          <ul>
+            <li>Cambiar contraseña</li>
+            <li>Autenticación de dos factores</li>
+          </ul>
+        </div>
+      )
+    }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Accordion Básico</h3>
+      <div style={{
+        background: '#fff', 
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        overflow: 'hidden'
+      }}>
+        <Accordion
+          sections={basicSections}
+          ariaLabel="Accordion de configuración básica"
+          onSectionCheck={(index, checked, sectionId, section) => {
+            console.log('Section checked:', { index, checked, sectionId, section })
+          }}
+          onSectionToggle={(index, open, section) => {
+            console.log('Section toggled:', { index, open, section })
+          }}
+          onSectionChange={(action, index, value, section) => {
+            console.log('Section changed:', { action, index, value, section })
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Accordion con controles
+ */
+export const AccordionWithControls = () => {
+  const [isDisabled, setIsDisabled] = useState(false)
+  const [allowMultiple, setAllowMultiple] = useState(true)
+  const [animated, setAnimated] = useState(true)
+
+  const sections = [
+    {
+      id: 'control-1',
+      title: 'Primera Sección',
+      icon: 'folder',
+      open: true,
+      children: <div style={{ padding: '1rem' }}>Contenido de la primera sección</div>
+    },
+    {
+      id: 'control-2',
+      title: 'Segunda Sección',
+      icon: 'description',
+      open: false,
+      children: <div style={{ padding: '1rem' }}>Contenido de la segunda sección</div>
+    }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Accordion con Controles</h3>
+      
+      <div style={{ marginBottom: '1rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+        <label>
+          <input 
+            type="checkbox" 
+            checked={isDisabled} 
+            onChange={(e) => setIsDisabled(e.target.checked)} 
+          />
+          Deshabilitado
+        </label>
+        <label>
+          <input 
+            type="checkbox" 
+            checked={allowMultiple} 
+            onChange={(e) => setAllowMultiple(e.target.checked)} 
+          />
+          Permitir múltiples abiertos
+        </label>
+        <label>
+          <input 
+            type="checkbox" 
+            checked={animated} 
+            onChange={(e) => setAnimated(e.target.checked)} 
+          />
+          Animado
+        </label>
+      </div>
+
+      <div style={{
+        background: '#fff', 
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        overflow: 'hidden'
+      }}>
+        <Accordion
+          sections={sections}
+          disabled={isDisabled}
+          allowMultiple={allowMultiple}
+          animated={animated}
+          ariaLabel="Accordion con controles"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicAccordion />
+    <AccordionWithControls />
+  </div>
+)