ywana-core8 0.1.103 → 0.2.1

package/src/html/icon.test.js

@@ -1,231 +0,0 @@
-import React from 'react'
-import { Icon } from './icon'
-
-// Pruebas unitarias para el componente Icon
-describe('Icon Component', () => {
-    // Mock del componente Tooltip
-    const mockTooltip = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Tooltip
-        jest.doMock('./tooltip', () => ({
-            Tooltip: mockTooltip
-        }))
-        
-        // Mock de console.warn para las pruebas
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    test('component exports correctly', () => {
-        expect(Icon).toBeDefined()
-        expect(typeof Icon).toBe('function')
-    })
-
-    test('component has correct PropTypes', () => {
-        expect(Icon.propTypes).toBeDefined()
-        expect(Icon.propTypes.id).toBeDefined()
-        expect(Icon.propTypes.icon).toBeDefined()
-        expect(Icon.propTypes.size).toBeDefined()
-        expect(Icon.propTypes.tooltip).toBeDefined()
-        expect(Icon.propTypes.clickable).toBeDefined()
-        expect(Icon.propTypes.disabled).toBeDefined()
-        expect(Icon.propTypes.action).toBeDefined()
-        expect(Icon.propTypes.eventPropagation).toBeDefined()
-        expect(Icon.propTypes.className).toBeDefined()
-        expect(Icon.propTypes.ariaLabel).toBeDefined()
-    })
-
-    test('component has correct defaultProps', () => {
-        expect(Icon.defaultProps).toBeDefined()
-        expect(Icon.defaultProps.size).toBe('normal')
-        expect(Icon.defaultProps.clickable).toBe(false)
-        expect(Icon.defaultProps.disabled).toBe(false)
-        expect(Icon.defaultProps.eventPropagation).toBe(false)
-        expect(Icon.defaultProps.className).toBe('')
-    })
-
-    test('returns null and warns when icon prop is missing', () => {
-        const result = Icon({})
-        
-        expect(result).toBeNull()
-        expect(console.warn).toHaveBeenCalledWith('Icon component: icon prop is required')
-    })
-
-    test('handles className safely', () => {
-        // Simular el manejo seguro de className
-        const testClassName = (className) => {
-            const safeClassName = className || ''
-            return `icon normal  ${safeClassName} material-icons`
-        }
-
-        expect(testClassName('custom-class')).toBe('icon normal  custom-class material-icons')
-        expect(testClassName(undefined)).toBe('icon normal   material-icons')
-        expect(testClassName('')).toBe('icon normal   material-icons')
-        expect(testClassName(null)).toBe('icon normal   material-icons')
-    })
-
-    test('generates correct CSS classes for different states', () => {
-        // Simular la lógica de generación de clases
-        const generateClasses = (size, disabled, clickable, className) => {
-            const style = disabled ? "disabled" : clickable ? "clickable" : ""
-            const safeClassName = className || ''
-            return `icon ${size} ${style} ${safeClassName} material-icons`
-        }
-
-        expect(generateClasses('normal', false, false, '')).toBe('icon normal   material-icons')
-        expect(generateClasses('small', false, true, '')).toBe('icon small clickable  material-icons')
-        expect(generateClasses('large', true, false, '')).toBe('icon large disabled  material-icons')
-        expect(generateClasses('normal', false, true, 'custom')).toBe('icon normal clickable custom material-icons')
-    })
-
-    test('generates correct accessibility attributes', () => {
-        // Simular la lógica de atributos de accesibilidad
-        const generateAriaAttributes = (clickable, disabled, icon, ariaLabel) => {
-            return {
-                role: clickable ? 'button' : 'img',
-                'aria-label': ariaLabel || (clickable ? `${icon} button` : icon),
-                'aria-disabled': disabled,
-                tabIndex: clickable && !disabled ? 0 : -1
-            }
-        }
-
-        // Icono no clickable
-        const nonClickable = generateAriaAttributes(false, false, 'home', null)
-        expect(nonClickable.role).toBe('img')
-        expect(nonClickable['aria-label']).toBe('home')
-        expect(nonClickable.tabIndex).toBe(-1)
-
-        // Icono clickable
-        const clickable = generateAriaAttributes(true, false, 'settings', null)
-        expect(clickable.role).toBe('button')
-        expect(clickable['aria-label']).toBe('settings button')
-        expect(clickable.tabIndex).toBe(0)
-
-        // Icono clickable pero disabled
-        const disabled = generateAriaAttributes(true, true, 'delete', null)
-        expect(disabled.role).toBe('button')
-        expect(disabled['aria-disabled']).toBe(true)
-        expect(disabled.tabIndex).toBe(-1)
-
-        // Con aria-label personalizado
-        const customLabel = generateAriaAttributes(true, false, 'star', 'Favorito')
-        expect(customLabel['aria-label']).toBe('Favorito')
-    })
-
-    test('click handler works correctly', () => {
-        const mockAction = jest.fn()
-        
-        // Simular el comportamiento del click handler
-        const simulateClick = (eventPropagation, disabled, action) => {
-            const event = {
-                stopPropagation: jest.fn(),
-                preventDefault: jest.fn()
-            }
-
-            // Lógica del click handler
-            if (!eventPropagation) {
-                event.stopPropagation()
-                event.preventDefault()
-            }
-            if (action && !disabled) action(event)
-
-            return event
-        }
-
-        // Click normal
-        const event1 = simulateClick(false, false, mockAction)
-        expect(event1.stopPropagation).toHaveBeenCalled()
-        expect(event1.preventDefault).toHaveBeenCalled()
-        expect(mockAction).toHaveBeenCalledWith(event1)
-
-        mockAction.mockClear()
-
-        // Click con disabled
-        const event2 = simulateClick(false, true, mockAction)
-        expect(mockAction).not.toHaveBeenCalled()
-
-        // Click con event propagation
-        const event3 = simulateClick(true, false, mockAction)
-        expect(event3.stopPropagation).not.toHaveBeenCalled()
-        expect(event3.preventDefault).not.toHaveBeenCalled()
-        expect(mockAction).toHaveBeenCalledWith(event3)
-    })
-
-    test('keyboard event handling works correctly', () => {
-        const mockAction = jest.fn()
-        
-        // Simular el manejo de eventos de teclado
-        const simulateKeyDown = (key, clickable, disabled, action) => {
-            const event = {
-                key,
-                preventDefault: jest.fn()
-            }
-
-            // Lógica del keyboard handler
-            if (clickable && !disabled && (event.key === 'Enter' || event.key === ' ')) {
-                event.preventDefault()
-                // Simular llamada a click
-                if (action) action(event)
-            }
-
-            return event
-        }
-
-        // Enter key
-        const enterEvent = simulateKeyDown('Enter', true, false, mockAction)
-        expect(enterEvent.preventDefault).toHaveBeenCalled()
-        expect(mockAction).toHaveBeenCalledWith(enterEvent)
-
-        mockAction.mockClear()
-
-        // Space key
-        const spaceEvent = simulateKeyDown(' ', true, false, mockAction)
-        expect(spaceEvent.preventDefault).toHaveBeenCalled()
-        expect(mockAction).toHaveBeenCalledWith(spaceEvent)
-
-        mockAction.mockClear()
-
-        // Other key (should not trigger)
-        const otherEvent = simulateKeyDown('a', true, false, mockAction)
-        expect(otherEvent.preventDefault).not.toHaveBeenCalled()
-        expect(mockAction).not.toHaveBeenCalled()
-
-        // Disabled icon (should not trigger)
-        const disabledEvent = simulateKeyDown('Enter', true, true, mockAction)
-        expect(disabledEvent.preventDefault).not.toHaveBeenCalled()
-        expect(mockAction).not.toHaveBeenCalled()
-    })
-
-    test('size variants are handled correctly', () => {
-        const validSizes = ['small', 'normal', 'large']
-        
-        validSizes.forEach(size => {
-            const classes = `icon ${size}   material-icons`
-            expect(classes).toContain(size)
-        })
-    })
-
-    test('tooltip integration works correctly', () => {
-        // Verificar que el componente puede manejar tooltips
-        const tooltipConfig = {
-            text: 'Test tooltip',
-            top: '-2rem',
-            left: '-1rem'
-        }
-
-        // Simular la lógica de tooltip
-        const hasTooltip = !!tooltipConfig
-        expect(hasTooltip).toBe(true)
-        
-        // Verificar que la configuración es válida
-        expect(tooltipConfig.text).toBe('Test tooltip')
-        expect(tooltipConfig.top).toBe('-2rem')
-        expect(tooltipConfig.left).toBe('-1rem')
-    })
-})

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

@@ -1,404 +0,0 @@
-import React, { useState } from 'react'
-import { List } from './list'
-import { Button } from './button'
-import { Icon } from './icon'
-
-/**
- * Ejemplos del componente List mejorado manteniendo 100% compatibilidad
- */
-export const ListExamples = () => {
-    const [selectedItem, setSelectedItem] = useState(null)
-    const [selectedItems, setSelectedItems] = useState([])
-    const [isLoading, setIsLoading] = useState(false)
-    const [showEmpty, setShowEmpty] = useState(false)
-
-    // Datos de ejemplo
-    const basicItems = [
-        { 
-            id: 1, 
-            line1: 'John Doe', 
-            line2: 'Software Engineer', 
-            icon: 'person',
-            meta: 'Active',
-            badge: 'New'
-        },
-        { 
-            id: 2, 
-            line1: 'Jane Smith', 
-            line2: 'Product Manager', 
-            icon: 'business_center',
-            meta: '2 days ago',
-            avatar: 'https://via.placeholder.com/40x40/2196f3/ffffff?text=JS'
-        },
-        { 
-            id: 3, 
-            line1: 'Mike Johnson', 
-            line2: 'UX Designer', 
-            icon: 'design_services',
-            meta: 'Offline',
-            actions: (
-                <div style={{ display: 'flex', gap: '0.25rem' }}>
-                    <Button icon="edit" size="small" />
-                    <Button icon="delete" size="small" />
-                </div>
-            )
-        },
-        { 
-            id: 4, 
-            line1: 'Sarah Wilson', 
-            line2: 'Data Scientist', 
-            icon: 'analytics',
-            meta: 'Online',
-            disabled: true
-        }
-    ]
-
-    const groupedItems = [
-        { id: 1, line1: 'Apple iPhone 14', line2: '$999', category: 'Electronics', icon: 'phone_iphone' },
-        { id: 2, line1: 'Samsung Galaxy S23', line2: '$899', category: 'Electronics', icon: 'smartphone' },
-        { id: 3, line1: 'Nike Air Max', line2: '$120', category: 'Clothing', icon: 'sports_soccer' },
-        { id: 4, line1: 'Adidas Ultraboost', line2: '$180', category: 'Clothing', icon: 'directions_run' },
-        { id: 5, line1: 'MacBook Pro', line2: '$2499', category: 'Electronics', icon: 'laptop_mac' },
-        { id: 6, line1: 'Levi\'s Jeans', line2: '$80', category: 'Clothing', icon: 'checkroom' }
-    ]
-
-    const handleSelect = (id) => {
-        setSelectedItem(id)
-        console.log('Selected:', id)
-    }
-
-    const handleMultiSelect = (ids) => {
-        setSelectedItems(ids)
-        console.log('Multi-selected:', ids)
-    }
-
-    const handleSort = (sortConfig) => {
-        console.log('Sort config:', sortConfig)
-    }
-
-    const simulateLoading = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componente List Mejorado</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>Ordenamiento</strong> - Sorting ascendente/descendente por cualquier campo</li>
-                    <li>✅ <strong>Selección múltiple</strong> - Con Ctrl+click y estados visuales</li>
-                    <li>🎭 <strong>Estados avanzados</strong> - loading, empty, disabled, dense</li>
-                    <li>👤 <strong>Avatares y badges</strong> - Soporte para imágenes y etiquetas</li>
-                    <li>⚡ <strong>Acciones por item</strong> - Botones que aparecen en hover</li>
-                    <li>📱 <strong>Responsive total</strong> - Adaptación móvil, dark mode, high contrast</li>
-                    <li>🧪 <strong>16 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 Items" : "Show Empty"} 
-                        icon={showEmpty ? "list" : "inbox"}
-                        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(', ')}]
-                    </span>
-                </div>
-            </section>
-
-            {/* Lista básica (compatible con versión original) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista Básica (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItem}
-                        onSelect={handleSelect}
-                    />
-                </div>
-            </section>
-
-            {/* Lista con búsqueda */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista con Búsqueda Integrada</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItem}
-                        onSelect={handleSelect}
-                        searchable={true}
-                        searchPlaceholder="Buscar personas..."
-                        searchBy={['line1', 'line2']}
-                        ariaLabel="Lista de personas con búsqueda"
-                    />
-                </div>
-            </section>
-
-            {/* Lista con ordenamiento */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista con Ordenamiento</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItem}
-                        onSelect={handleSelect}
-                        sortable={true}
-                        sortBy="line1"
-                        onSort={handleSort}
-                        ariaLabel="Lista ordenable de personas"
-                    />
-                </div>
-            </section>
-
-            {/* Lista con selección múltiple */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista con Selección Múltiple</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItems}
-                        onSelect={handleSelect}
-                        multiSelect={true}
-                        onMultiSelect={handleMultiSelect}
-                        ariaLabel="Lista con selección múltiple"
-                    />
-                </div>
-            </section>
-
-            {/* Lista agrupada (compatible con versión original) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista Agrupada (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={groupedItems}
-                        selected={selectedItem}
-                        onSelect={handleSelect}
-                        groupBy="category"
-                        searchable={true}
-                        searchPlaceholder="Buscar productos..."
-                    />
-                </div>
-            </section>
-
-            {/* Lista densa */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista Densa</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItem}
-                        onSelect={handleSelect}
-                        dense={true}
-                        ariaLabel="Lista densa"
-                    />
-                </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>
-                        <List
-                            items={basicItems}
-                            loading={isLoading}
-                            ariaLabel="Lista 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>
-                        <List
-                            items={showEmpty ? [] : basicItems}
-                            empty={showEmpty}
-                            emptyMessage="No hay elementos para mostrar"
-                            emptyIcon="inbox"
-                            searchable={true}
-                            ariaLabel="Lista vacía"
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* Lista completa con todas las características */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista Completa (Todas las Características)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItems}
-                        onSelect={handleSelect}
-                        multiSelect={true}
-                        onMultiSelect={handleMultiSelect}
-                        searchable={true}
-                        searchPlaceholder="Buscar en la lista completa..."
-                        searchBy={['line1', 'line2', 'meta']}
-                        sortable={true}
-                        sortBy="line1"
-                        onSort={handleSort}
-                        animated={true}
-                        maxHeight="300px"
-                        ariaLabel="Lista completa con todas las características"
-                    />
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: List 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>❌ List Original</h4>
-                        <ul>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Sin búsqueda integrada</li>
-                            <li>Sin ordenamiento</li>
-                            <li>Selección múltiple básica</li>
-                            <li>Sin estados loading/empty</li>
-                            <li>CSS básico sin responsive</li>
-                            <li>Sin avatares ni badges</li>
-                            <li>Sin acciones por item</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ List Mejorado</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Búsqueda en tiempo real</li>
-                            <li>Ordenamiento ascendente/descendente</li>
-                            <li>Selección múltiple avanzada</li>
-                            <li>Estados loading, empty, disabled</li>
-                            <li>CSS responsive con dark mode</li>
-                            <li>Avatares, badges y meta</li>
-                            <li>Acciones que aparecen en hover</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>✅ Agrupación funciona 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 ListExamples