ywana-core8 0.1.103 → 0.2.1

package/src/html/tree.example.js.backup

@@ -1,475 +0,0 @@
-import React, { useState } from 'react'
-import { Tree, TreeNode, TreeItem } from './tree'
-import { Button } from './button'
-import { Icon } from './icon'
-
-/**
- * Ejemplos de los componentes Tree mejorados manteniendo 100% compatibilidad
- */
-export const TreeExamples = () => {
-    const [selectedItem, setSelectedItem] = useState(null)
-    const [selectedItems, setSelectedItems] = useState([])
-    const [checkedItems, setCheckedItems] = useState(['file1', 'file3'])
-    const [isLoading, setIsLoading] = useState(false)
-    const [showEmpty, setShowEmpty] = useState(false)
-
-    const handleSelect = (id) => {
-        setSelectedItem(id)
-        console.log('Selected:', id)
-    }
-
-    const handleMultiSelect = (ids) => {
-        setSelectedItems(ids)
-        console.log('Multi-selected:', ids)
-    }
-
-    const handleCheck = (id, checked) => {
-        setCheckedItems(prev => 
-            checked 
-                ? [...prev, id]
-                : prev.filter(item => item !== id)
-        )
-        console.log('Checked:', id, checked)
-    }
-
-    const handleDragStart = (id) => {
-        console.log('Drag start:', id)
-    }
-
-    const handleDrop = (draggedId, targetId) => {
-        console.log('Drop:', draggedId, 'onto', targetId)
-    }
-
-    const simulateLoading = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componentes Tree Mejorados</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>✅ Mejoras Implementadas (100% Compatibilidad):</h3>
-                <ul>
-                    <li>🛡️ <strong>PropTypes completos</strong> - Validación y documentación detallada</li>
-                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, navegación por teclado, focus management</li>
-                    <li>🔍 <strong>Búsqueda integrada</strong> - Filtrado en tiempo real por múltiples campos</li>
-                    <li>🎯 <strong>Drag & Drop</strong> - Arrastrar y soltar nodos y elementos</li>
-                    <li>🏷️ <strong>Badges y tooltips</strong> - Indicadores de contenido y ayuda</li>
-                    <li>🎭 <strong>Estados avanzados</strong> - loading, empty, disabled</li>
-                    <li>✅ <strong>Selección múltiple</strong> - Con callbacks y estados visuales</li>
-                    <li>🔄 <strong>Controles de expansión</strong> - Expandir/colapsar todo</li>
-                    <li>📱 <strong>Responsive total</strong> - Adaptación móvil, dark mode, high contrast</li>
-                    <li>🧪 <strong>22 Pruebas unitarias</strong> - Verifican compatibilidad y funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* Controles de demostración */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Controles de Demostración</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'flex',
-                    gap: '1rem',
-                    alignItems: 'center',
-                    flexWrap: 'wrap'
-                }}>
-                    <Button 
-                        label="Simulate Loading" 
-                        icon="refresh" 
-                        action={simulateLoading}
-                        disabled={isLoading}
-                    />
-                    <Button 
-                        label={showEmpty ? "Show Tree" : "Show Empty"} 
-                        icon={showEmpty ? "folder" : "folder_open"}
-                        action={() => setShowEmpty(!showEmpty)}
-                    />
-                    <Button 
-                        label="Clear Selection" 
-                        icon="clear" 
-                        action={() => {
-                            setSelectedItem(null)
-                            setSelectedItems([])
-                        }}
-                    />
-                    <span style={{ marginLeft: 'auto', color: '#666' }}>
-                        Selected: {selectedItem || 'None'} | Multi: [{selectedItems.join(', ')}] | Checked: [{checkedItems.join(', ')}]
-                    </span>
-                </div>
-            </section>
-
-            {/* Tree básico (compatible con versión original) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree Básico (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '400px'
-                }}>
-                    <Tree>
-                        <TreeNode id="root" label="Root Folder" icon="folder" open={true}>
-                            <TreeNode id="documents" label="Documents" icon="folder" open={false}>
-                                <TreeItem id="doc1" label="Document 1.pdf" icon="picture_as_pdf" onSelect={handleSelect} selected={selectedItem === 'doc1'} />
-                                <TreeItem id="doc2" label="Document 2.docx" icon="description" onSelect={handleSelect} selected={selectedItem === 'doc2'} />
-                            </TreeNode>
-                            <TreeNode id="images" label="Images" icon="folder" open={true}>
-                                <TreeItem id="img1" label="Photo 1.jpg" icon="image" onSelect={handleSelect} selected={selectedItem === 'img1'} />
-                                <TreeItem id="img2" label="Photo 2.png" icon="image" onSelect={handleSelect} selected={selectedItem === 'img2'} />
-                            </TreeNode>
-                            <TreeItem id="readme" label="README.md" icon="description" onSelect={handleSelect} selected={selectedItem === 'readme'} />
-                        </TreeNode>
-                    </Tree>
-                </div>
-            </section>
-
-            {/* Tree con búsqueda */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Búsqueda Integrada</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '400px'
-                }}>
-                    <Tree 
-                        searchable={true}
-                        searchPlaceholder="Buscar archivos y carpetas..."
-                        searchBy={['label']}
-                        ariaLabel="Árbol de archivos con búsqueda"
-                    >
-                        <TreeNode id="projects" label="Projects" icon="work" open={true}>
-                            <TreeNode id="project1" label="Website Project" icon="web" open={false}>
-                                <TreeItem id="index" label="index.html" icon="code" onSelect={handleSelect} selected={selectedItem === 'index'} />
-                                <TreeItem id="styles" label="styles.css" icon="palette" onSelect={handleSelect} selected={selectedItem === 'styles'} />
-                                <TreeItem id="script" label="script.js" icon="code" onSelect={handleSelect} selected={selectedItem === 'script'} />
-                            </TreeNode>
-                            <TreeNode id="project2" label="Mobile App" icon="phone_android" open={false}>
-                                <TreeItem id="main" label="MainActivity.java" icon="code" onSelect={handleSelect} selected={selectedItem === 'main'} />
-                                <TreeItem id="layout" label="activity_main.xml" icon="view_quilt" onSelect={handleSelect} selected={selectedItem === 'layout'} />
-                            </TreeNode>
-                        </TreeNode>
-                    </Tree>
-                </div>
-            </section>
-
-            {/* Tree con checkboxes y selección múltiple */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Checkboxes y Selección Múltiple</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '400px'
-                }}>
-                    <Tree 
-                        multiSelect={true}
-                        onMultiSelect={handleMultiSelect}
-                        ariaLabel="Árbol con selección múltiple"
-                    >
-                        <TreeNode id="backup" label="Backup Files" icon="backup" open={true}>
-                            <TreeItem 
-                                id="file1" 
-                                label="Config Backup" 
-                                icon="settings_backup_restore" 
-                                onSelect={handleSelect} 
-                                selected={selectedItems.includes('file1')}
-                                onCheck={handleCheck}
-                                checked={checkedItems.includes('file1')}
-                            />
-                            <TreeItem 
-                                id="file2" 
-                                label="Database Backup" 
-                                icon="storage" 
-                                onSelect={handleSelect} 
-                                selected={selectedItems.includes('file2')}
-                                onCheck={handleCheck}
-                                checked={checkedItems.includes('file2')}
-                            />
-                            <TreeItem 
-                                id="file3" 
-                                label="Media Backup" 
-                                icon="perm_media" 
-                                onSelect={handleSelect} 
-                                selected={selectedItems.includes('file3')}
-                                onCheck={handleCheck}
-                                checked={checkedItems.includes('file3')}
-                            />
-                        </TreeNode>
-                    </Tree>
-                </div>
-            </section>
-
-            {/* Tree con badges y drag & drop */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Badges y Drag & Drop</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '400px'
-                }}>
-                    <Tree ariaLabel="Árbol con drag and drop">
-                        <TreeNode 
-                            id="inbox" 
-                            label="Inbox" 
-                            icon="inbox" 
-                            open={true}
-                            badge={5}
-                            tooltip="5 unread messages"
-                            draggable={true}
-                            onDragStart={handleDragStart}
-                            onDrop={handleDrop}
-                        >
-                            <TreeItem 
-                                id="msg1" 
-                                label="Important Message" 
-                                icon="priority_high" 
-                                onSelect={handleSelect} 
-                                selected={selectedItem === 'msg1'}
-                                badge="!"
-                                tooltip="High priority message"
-                                draggable={true}
-                                onDragStart={handleDragStart}
-                                onDrop={handleDrop}
-                            />
-                            <TreeItem 
-                                id="msg2" 
-                                label="Team Update" 
-                                icon="group" 
-                                onSelect={handleSelect} 
-                                selected={selectedItem === 'msg2'}
-                                draggable={true}
-                                onDragStart={handleDragStart}
-                                onDrop={handleDrop}
-                            />
-                        </TreeNode>
-                        <TreeNode 
-                            id="sent" 
-                            label="Sent" 
-                            icon="send" 
-                            open={false}
-                            badge={12}
-                            tooltip="12 sent messages"
-                            draggable={true}
-                            onDragStart={handleDragStart}
-                            onDrop={handleDrop}
-                        >
-                            <TreeItem 
-                                id="sent1" 
-                                label="Project Proposal" 
-                                icon="assignment" 
-                                onSelect={handleSelect} 
-                                selected={selectedItem === 'sent1'}
-                                draggable={true}
-                                onDragStart={handleDragStart}
-                                onDrop={handleDrop}
-                            />
-                        </TreeNode>
-                    </Tree>
-                </div>
-            </section>
-
-            {/* Tree con controles de expansión */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Controles de Expansión</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '400px'
-                }}>
-                    <Tree 
-                        expandAll={true}
-                        collapseAll={true}
-                        onExpandAll={() => console.log('Expand all')}
-                        onCollapseAll={() => console.log('Collapse all')}
-                        ariaLabel="Árbol con controles de expansión"
-                    >
-                        <TreeNode id="company" label="Company Structure" icon="business" open={false}>
-                            <TreeNode id="engineering" label="Engineering" icon="engineering" open={false}>
-                                <TreeNode id="frontend" label="Frontend Team" icon="web" open={false}>
-                                    <TreeItem id="dev1" label="John Doe - Senior Developer" icon="person" onSelect={handleSelect} selected={selectedItem === 'dev1'} />
-                                    <TreeItem id="dev2" label="Jane Smith - UI Designer" icon="design_services" onSelect={handleSelect} selected={selectedItem === 'dev2'} />
-                                </TreeNode>
-                                <TreeNode id="backend" label="Backend Team" icon="dns" open={false}>
-                                    <TreeItem id="dev3" label="Mike Johnson - Lead Developer" icon="person" onSelect={handleSelect} selected={selectedItem === 'dev3'} />
-                                    <TreeItem id="dev4" label="Sarah Wilson - DevOps" icon="cloud" onSelect={handleSelect} selected={selectedItem === 'dev4'} />
-                                </TreeNode>
-                            </TreeNode>
-                            <TreeNode id="marketing" label="Marketing" icon="campaign" open={false}>
-                                <TreeItem id="mark1" label="Alex Brown - Marketing Manager" icon="person" onSelect={handleSelect} selected={selectedItem === 'mark1'} />
-                                <TreeItem id="mark2" label="Lisa Davis - Content Creator" icon="edit" onSelect={handleSelect} selected={selectedItem === 'mark2'} />
-                            </TreeNode>
-                        </TreeNode>
-                    </Tree>
-                </div>
-            </section>
-
-            {/* Estados especiales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estados Especiales</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#fff', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        overflow: 'hidden'
-                    }}>
-                        <h4 style={{ margin: '1rem', marginBottom: '0' }}>Loading State</h4>
-                        <Tree
-                            loading={isLoading}
-                            ariaLabel="Árbol en estado de carga"
-                        />
-                    </div>
-                    
-                    <div style={{ 
-                        background: '#fff', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        overflow: 'hidden'
-                    }}>
-                        <h4 style={{ margin: '1rem', marginBottom: '0' }}>Empty State</h4>
-                        <Tree
-                            empty={showEmpty}
-                            emptyMessage="No hay elementos en el árbol"
-                            emptyIcon="folder_open"
-                            searchable={true}
-                            ariaLabel="Árbol vacío"
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* Tree con nodos deshabilitados */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Nodos Deshabilitados</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '400px'
-                }}>
-                    <Tree ariaLabel="Árbol con elementos deshabilitados">
-                        <TreeNode id="permissions" label="File Permissions" icon="security" open={true}>
-                            <TreeItem 
-                                id="read" 
-                                label="Read Access" 
-                                icon="visibility" 
-                                onSelect={handleSelect} 
-                                selected={selectedItem === 'read'}
-                            />
-                            <TreeItem 
-                                id="write" 
-                                label="Write Access" 
-                                icon="edit" 
-                                onSelect={handleSelect} 
-                                selected={selectedItem === 'write'}
-                                disabled={true}
-                                tooltip="Write access is disabled"
-                            />
-                            <TreeItem 
-                                id="execute" 
-                                label="Execute Access" 
-                                icon="play_arrow" 
-                                onSelect={handleSelect} 
-                                selected={selectedItem === 'execute'}
-                                disabled={true}
-                                tooltip="Execute access is disabled"
-                            />
-                        </TreeNode>
-                    </Tree>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Tree Original vs Mejorado</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#ffebee', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
-                    }}>
-                        <h4>❌ Tree Original</h4>
-                        <ul>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Sin búsqueda integrada</li>
-                            <li>Sin drag & drop</li>
-                            <li>Sin badges ni tooltips</li>
-                            <li>Sin estados loading/empty</li>
-                            <li>Sin selección múltiple avanzada</li>
-                            <li>Sin controles de expansión</li>
-                            <li>CSS básico sin responsive</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Tree Mejorado</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Búsqueda en tiempo real</li>
-                            <li>Drag & drop completo</li>
-                            <li>Badges, tooltips y meta información</li>
-                            <li>Estados loading, empty, disabled</li>
-                            <li>Selección múltiple avanzada</li>
-                            <li>Controles expandir/colapsar todo</li>
-                            <li>CSS responsive con dark mode</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-
-            {/* Garantía de compatibilidad */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔒 Garantía de Compatibilidad</h3>
-                <div style={{ 
-                    background: '#fff3cd', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #ffeaa7'
-                }}>
-                    <p><strong>100% Compatible con Código Existente:</strong></p>
-                    <ul>
-                        <li>✅ Todas las props originales funcionan exactamente igual</li>
-                        <li>✅ Comportamiento de selección idéntico</li>
-                        <li>✅ Estructura TreeNode/TreeItem sin cambios</li>
-                        <li>✅ CSS original preservado</li>
-                        <li>✅ Nuevas características son opcionales</li>
-                        <li>✅ No se rompe ningún código existente</li>
-                    </ul>
-                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#856404' }}>
-                        <strong>Migración:</strong> Simplemente reemplaza el import y todas las 
-                        mejoras se aplican automáticamente sin cambiar una línea de código existente.
-                    </p>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default TreeExamples

package/src/html/tree.test.js

@@ -1,43 +0,0 @@
-import React, { useState } from 'react'
-import { Tree, TreeNode, TreeItem } from './tree';
-
-export const TreeTest = (prop) => {
-
-    const papers = []
-
-    function groupBy(items, by) {
-        const itemsMap = items.reduce(
-            (entryMap, e) => entryMap.set(e[by], [...entryMap.get(e[by]) || [], e]),
-            new Map()
-        );
-        const groups = (Array.from(itemsMap).map(([name, items]) => ({ name, items })))
-        return groups
-    }
-
-    const items = papers.filter(paper => {
-        return !search || search === '' ? true :
-            paper.paper.toUpperCase().indexOf(search.toUpperCase()) >= 0
-            || `${paper.width}x${paper.height}`.toUpperCase().indexOf(search.toUpperCase()) >= 0
-            || `${paper.grammage}`.toUpperCase().indexOf(search.toUpperCase()) >= 0
-    })
-
-
-    return (
-        <>
-            <Tree key={`tree`}>
-                {groupBy(items, 'type').map(types => (
-                    <TreeNode open={expanded} icon="print" label={types.name}>
-                        {groupBy(types.items, 'family').map(family => (
-                            <TreeNode open={true} icon="network_check" label={`${group.name} grs.`}>
-                                {group.items.map(paper => (
-                                    <TreeItem icon="aspect_ratio" label={`${paper.width}x${paper.height}`} onSelect={() => select(paper)} />
-                                ))}
-                            </TreeNode>
-                        ))}
-                    </TreeNode>
-
-                ))}
-            </Tree>
-        </>
-    )
-}