ywana-core8 0.1.103 → 0.2.1

package/src/html/header2.test.js

@@ -1,377 +0,0 @@
-import React from 'react'
-import { Header2 } from './header2'
-
-// Pruebas unitarias para el componente Header2
-describe('Header2 Component', () => {
-    // Mock de los componentes dependientes
-    const mockText = jest.fn()
-    const mockIcon = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Text
-        jest.doMock('./text', () => ({
-            Text: mockText
-        }))
-        
-        // Mock del componente Icon
-        jest.doMock('./icon', () => ({
-            Icon: mockIcon
-        }))
-        
-        // Mock de console.warn para las pruebas
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    test('component exports correctly', () => {
-        expect(Header2).toBeDefined()
-        expect(typeof Header2).toBe('function')
-    })
-
-    test('component has correct PropTypes', () => {
-        expect(Header2.propTypes).toBeDefined()
-        expect(Header2.propTypes.title).toBeDefined()
-        expect(Header2.propTypes.icon).toBeDefined()
-        expect(Header2.propTypes.iconSrc).toBeDefined()
-        expect(Header2.propTypes.img).toBeDefined()
-        expect(Header2.propTypes.caption).toBeDefined()
-        expect(Header2.propTypes.prominent).toBeDefined()
-        expect(Header2.propTypes.dense).toBeDefined()
-        expect(Header2.propTypes.primary).toBeDefined()
-        expect(Header2.propTypes.secondary).toBeDefined()
-        expect(Header2.propTypes.clickable).toBeDefined()
-        expect(Header2.propTypes.disabled).toBeDefined()
-        expect(Header2.propTypes.loading).toBeDefined()
-        expect(Header2.propTypes.className).toBeDefined()
-        expect(Header2.propTypes.children).toBeDefined()
-        expect(Header2.propTypes.action).toBeDefined()
-        expect(Header2.propTypes.ariaLabel).toBeDefined()
-        expect(Header2.propTypes.role).toBeDefined()
-        expect(Header2.propTypes.onClick).toBeDefined()
-        expect(Header2.propTypes.onIconClick).toBeDefined()
-    })
-
-    test('component has correct defaultProps', () => {
-        expect(Header2.defaultProps).toBeDefined()
-        expect(Header2.defaultProps.caption).toBe(false)
-        expect(Header2.defaultProps.prominent).toBe(false)
-        expect(Header2.defaultProps.dense).toBe(false)
-        expect(Header2.defaultProps.primary).toBe(false)
-        expect(Header2.defaultProps.secondary).toBe(false)
-        expect(Header2.defaultProps.clickable).toBe(false)
-        expect(Header2.defaultProps.disabled).toBe(false)
-        expect(Header2.defaultProps.loading).toBe(false)
-        expect(Header2.defaultProps.role).toBe('banner')
-        expect(Header2.defaultProps.className).toBe('')
-    })
-
-    test('warns when no accessibility props are provided', () => {
-        const validateAccessibility = (title, icon, iconSrc, ariaLabel) => {
-            if (!title && !icon && !iconSrc && !ariaLabel) {
-                console.warn('Header2 component: title, icon, iconSrc, or ariaLabel should be provided for accessibility')
-            }
-        }
-        
-        validateAccessibility(null, null, null, null)
-        expect(console.warn).toHaveBeenCalledWith('Header2 component: title, icon, iconSrc, or ariaLabel should be provided for accessibility')
-
-        console.warn.mockClear()
-        validateAccessibility('Test Title', null, null, null)
-        expect(console.warn).not.toHaveBeenCalled()
-    })
-
-    test('CSS classes generation maintains original logic', () => {
-        const generateClasses = (caption, prominent, dense, primary, secondary, disabled, loading, className) => {
-            const captionClass = caption ? 'caption' : ''
-            const prominentClass = prominent ? 'prominent' : ''
-            const denseClass = dense ? 'dense' : ''
-            let themeClass = primary ? 'primary' : ''
-            themeClass = secondary ? 'secondary' : themeClass
-            
-            return [
-                'header2',
-                captionClass,
-                prominentClass,
-                denseClass,
-                themeClass,
-                disabled && 'disabled',
-                loading && 'loading',
-                className || ''
-            ].filter(Boolean).join(' ')
-        }
-
-        // Test basic header
-        expect(generateClasses(false, false, false, false, false, false, false, ''))
-            .toBe('header2')
-
-        // Test caption variant
-        expect(generateClasses(true, false, false, false, false, false, false, ''))
-            .toBe('header2 caption')
-
-        // Test prominent variant
-        expect(generateClasses(false, true, false, false, false, false, false, ''))
-            .toBe('header2 prominent')
-
-        // Test dense variant
-        expect(generateClasses(false, false, true, false, false, false, false, ''))
-            .toBe('header2 dense')
-
-        // Test primary theme
-        expect(generateClasses(false, false, false, true, false, false, false, ''))
-            .toBe('header2 primary')
-
-        // Test secondary theme (overrides primary)
-        expect(generateClasses(false, false, false, true, true, false, false, ''))
-            .toBe('header2 secondary')
-
-        // Test disabled state
-        expect(generateClasses(false, false, false, false, false, true, false, ''))
-            .toBe('header2 disabled')
-
-        // Test loading state
-        expect(generateClasses(false, false, false, false, false, false, true, ''))
-            .toBe('header2 loading')
-
-        // Test custom className
-        expect(generateClasses(false, false, false, false, false, false, false, 'custom-class'))
-            .toBe('header2 custom-class')
-
-        // Test combination
-        expect(generateClasses(true, false, false, true, false, false, false, 'custom'))
-            .toBe('header2 caption primary custom')
-    })
-
-    test('icon element generation maintains original logic', () => {
-        const generateIconElement = (icon, iconSrc, clickable, disabled, loading, handleIconClick, ariaLabel, title) => {
-            if (icon) {
-                return {
-                    type: 'Icon',
-                    props: {
-                        icon: icon,
-                        clickable: clickable && !disabled && !loading,
-                        action: handleIconClick,
-                        disabled: disabled,
-                        ariaLabel: `${icon} icon`
-                    }
-                }
-            } else if (iconSrc) {
-                return {
-                    type: 'img',
-                    props: {
-                        className: 'header2-icon',
-                        src: iconSrc,
-                        alt: ariaLabel || title || 'Header icon',
-                        onClick: clickable && !disabled && !loading ? handleIconClick : undefined,
-                        style: {
-                            cursor: clickable && !disabled && !loading ? 'pointer' : 'default',
-                            opacity: disabled ? 0.6 : 1
-                        }
-                    }
-                }
-            }
-            return null
-        }
-
-        const mockHandler = jest.fn()
-
-        // Test with icon
-        const iconResult = generateIconElement('home', null, true, false, false, mockHandler, null, null)
-        expect(iconResult.type).toBe('Icon')
-        expect(iconResult.props.icon).toBe('home')
-        expect(iconResult.props.clickable).toBe(true)
-        expect(iconResult.props.ariaLabel).toBe('home icon')
-
-        // Test with iconSrc
-        const imgResult = generateIconElement(null, '/icon.png', true, false, false, mockHandler, 'Custom label', 'Title')
-        expect(imgResult.type).toBe('img')
-        expect(imgResult.props.src).toBe('/icon.png')
-        expect(imgResult.props.alt).toBe('Custom label')
-        expect(imgResult.props.style.cursor).toBe('pointer')
-
-        // Test disabled state
-        const disabledResult = generateIconElement('home', null, true, true, false, mockHandler, null, null)
-        expect(disabledResult.props.clickable).toBe(false)
-
-        // Test loading state
-        const loadingResult = generateIconElement('home', null, true, false, true, mockHandler, null, null)
-        expect(loadingResult.props.clickable).toBe(false)
-
-        // Test no icon
-        const noIconResult = generateIconElement(null, null, true, false, false, mockHandler, null, null)
-        expect(noIconResult).toBeNull()
-    })
-
-    test('background style generation maintains original logic', () => {
-        const generateBackgroundStyle = (img) => {
-            return img ? { backgroundImage: `url(${img})` } : {}
-        }
-
-        expect(generateBackgroundStyle(null)).toEqual({})
-        expect(generateBackgroundStyle('')).toEqual({})
-        expect(generateBackgroundStyle('/bg.jpg')).toEqual({ backgroundImage: 'url(/bg.jpg)' })
-        expect(generateBackgroundStyle('https://example.com/bg.png')).toEqual({ backgroundImage: 'url(https://example.com/bg.png)' })
-    })
-
-    test('accessibility attributes generation works correctly', () => {
-        const generateAriaAttributes = (ariaLabel, title, disabled, loading, role) => {
-            return {
-                'aria-label': ariaLabel || (typeof title === 'string' ? title : 'Header'),
-                'aria-disabled': disabled,
-                'aria-busy': loading,
-                role: role
-            }
-        }
-
-        // Test with string title
-        const result1 = generateAriaAttributes(null, 'Test Title', false, false, 'banner')
-        expect(result1['aria-label']).toBe('Test Title')
-        expect(result1['aria-disabled']).toBe(false)
-        expect(result1['aria-busy']).toBe(false)
-        expect(result1.role).toBe('banner')
-
-        // Test with custom aria-label
-        const result2 = generateAriaAttributes('Custom Label', 'Test Title', false, false, 'banner')
-        expect(result2['aria-label']).toBe('Custom Label')
-
-        // Test with non-string title
-        const result3 = generateAriaAttributes(null, { type: 'span', children: 'Complex Title' }, false, false, 'banner')
-        expect(result3['aria-label']).toBe('Header')
-
-        // Test disabled state
-        const result4 = generateAriaAttributes(null, 'Test Title', true, false, 'banner')
-        expect(result4['aria-disabled']).toBe(true)
-
-        // Test loading state
-        const result5 = generateAriaAttributes(null, 'Test Title', false, true, 'banner')
-        expect(result5['aria-busy']).toBe(true)
-
-        // Test custom role
-        const result6 = generateAriaAttributes(null, 'Test Title', false, false, 'heading')
-        expect(result6.role).toBe('heading')
-    })
-
-    test('icon click handling works correctly', () => {
-        const mockOnIconClick = jest.fn()
-        const mockAction = jest.fn()
-
-        const simulateIconClick = (disabled, loading, onIconClick, action) => {
-            if (disabled || loading) return false
-            
-            if (onIconClick) {
-                onIconClick({})
-                return true
-            } else if (action) {
-                action({})
-                return true
-            }
-            return false
-        }
-
-        // Normal click with onIconClick
-        expect(simulateIconClick(false, false, mockOnIconClick, null)).toBe(true)
-        expect(mockOnIconClick).toHaveBeenCalled()
-
-        mockOnIconClick.mockClear()
-
-        // Normal click with action (fallback)
-        expect(simulateIconClick(false, false, null, mockAction)).toBe(true)
-        expect(mockAction).toHaveBeenCalled()
-
-        mockAction.mockClear()
-
-        // Disabled click
-        expect(simulateIconClick(true, false, mockOnIconClick, null)).toBe(false)
-        expect(mockOnIconClick).not.toHaveBeenCalled()
-
-        // Loading click
-        expect(simulateIconClick(false, true, mockOnIconClick, null)).toBe(false)
-        expect(mockOnIconClick).not.toHaveBeenCalled()
-
-        // No handlers
-        expect(simulateIconClick(false, false, null, null)).toBe(false)
-    })
-
-    test('header click handling works correctly', () => {
-        const mockOnClick = jest.fn()
-
-        const simulateHeaderClick = (disabled, loading, onClick) => {
-            if (disabled || loading) return false
-            
-            if (onClick) {
-                onClick({})
-                return true
-            }
-            return false
-        }
-
-        // Normal click
-        expect(simulateHeaderClick(false, false, mockOnClick)).toBe(true)
-        expect(mockOnClick).toHaveBeenCalled()
-
-        mockOnClick.mockClear()
-
-        // Disabled click
-        expect(simulateHeaderClick(true, false, mockOnClick)).toBe(false)
-        expect(mockOnClick).not.toHaveBeenCalled()
-
-        // Loading click
-        expect(simulateHeaderClick(false, true, mockOnClick)).toBe(false)
-        expect(mockOnClick).not.toHaveBeenCalled()
-
-        // No handler
-        expect(simulateHeaderClick(false, false, null)).toBe(false)
-    })
-
-    test('title element generation maintains original logic', () => {
-        const generateTitleElement = (title) => {
-            return title ? {
-                type: 'label',
-                className: 'header2-title',
-                children: { type: 'Text', children: title }
-            } : null
-        }
-
-        expect(generateTitleElement(null)).toBeNull()
-        expect(generateTitleElement('')).toBeNull()
-        
-        const result = generateTitleElement('Test Title')
-        expect(result.type).toBe('label')
-        expect(result.className).toBe('header2-title')
-        expect(result.children.children).toBe('Test Title')
-    })
-
-    test('theme class logic maintains original behavior', () => {
-        const generateThemeClass = (primary, secondary) => {
-            let themeClass = primary ? 'primary' : ''
-            themeClass = secondary ? 'secondary' : themeClass
-            return themeClass
-        }
-
-        expect(generateThemeClass(false, false)).toBe('')
-        expect(generateThemeClass(true, false)).toBe('primary')
-        expect(generateThemeClass(false, true)).toBe('secondary')
-        expect(generateThemeClass(true, true)).toBe('secondary') // secondary overrides primary
-    })
-
-    test('maintains exact same height calculations as original', () => {
-        const getHeaderHeight = (caption, prominent, dense) => {
-            if (prominent) return '12.8rem'
-            if (caption) return '4rem'
-            if (dense) return '2.4rem'
-            return '3rem' // min-height for normal
-        }
-
-        expect(getHeaderHeight(false, false, false)).toBe('3rem')
-        expect(getHeaderHeight(true, false, false)).toBe('4rem')
-        expect(getHeaderHeight(false, true, false)).toBe('12.8rem')
-        expect(getHeaderHeight(false, false, true)).toBe('2.4rem')
-        
-        // Prominent takes precedence
-        expect(getHeaderHeight(true, true, true)).toBe('12.8rem')
-    })
-})

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

@@ -1,268 +0,0 @@
-import React, { useState } from 'react'
-import { Icon } from './icon'
-
-/**
- * Ejemplos de uso del componente Icon mejorado
- */
-export const IconExamples = () => {
-    const [clickCount, setClickCount] = useState(0)
-    const [isDisabled, setIsDisabled] = useState(false)
-
-    const handleClick = () => {
-        setClickCount(prev => prev + 1)
-    }
-
-    const toggleDisabled = () => {
-        setIsDisabled(prev => !prev)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '800px' }}>
-            <h1>Ejemplos del Componente Icon Mejorado</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>✅ Mejoras Implementadas:</h3>
-                <ul>
-                    <li>🛡️ <strong>Manejo seguro de className</strong> - No falla con valores undefined</li>
-                    <li>♿ <strong>Accesibilidad mejorada</strong> - Atributos ARIA y soporte de teclado</li>
-                    <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
-                    <li>🎯 <strong>Validación de props</strong> - Advertencias para props requeridos</li>
-                    <li>🎨 <strong>CSS mejorado</strong> - Cursor consistente y estados de focus</li>
-                    <li>⌨️ <strong>Soporte de teclado</strong> - Enter y Espacio para activar</li>
-                    <li>🧪 <strong>Pruebas unitarias</strong> - 11 pruebas que cubren toda la funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* Iconos básicos */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Iconos Básicos</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon icon="home" />
-                    <Icon icon="settings" />
-                    <Icon icon="favorite" />
-                    <Icon icon="info" />
-                </div>
-                <p><em>Iconos simples sin interacción</em></p>
-            </section>
-
-            {/* Diferentes tamaños */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Diferentes Tamaños</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon icon="star" size="small" />
-                    <Icon icon="star" size="normal" />
-                    <Icon icon="star" size="large" />
-                </div>
-                <p><em>Tamaños: small, normal, large</em></p>
-            </section>
-
-            {/* Iconos clickables */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Iconos Clickables</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon 
-                        icon="thumb_up" 
-                        clickable 
-                        action={handleClick}
-                        tooltip={{
-                            text: 'Hacer clic para incrementar',
-                            top: '-3rem',
-                            left: '-2rem'
-                        }}
-                    />
-                    <Icon 
-                        icon="refresh" 
-                        clickable 
-                        action={() => setClickCount(0)}
-                        tooltip={{
-                            text: 'Resetear contador',
-                            top: '-3rem',
-                            left: '-2rem'
-                        }}
-                    />
-                    <span>Clics: {clickCount}</span>
-                </div>
-                <p><em>Prueba hacer clic en los iconos o usar Enter/Espacio cuando tengan focus</em></p>
-            </section>
-
-            {/* Estados disabled */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estados Disabled</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon 
-                        icon="toggle_on" 
-                        clickable 
-                        action={toggleDisabled}
-                        tooltip={{
-                            text: 'Alternar estado disabled',
-                            top: '-3rem',
-                            left: '-3rem'
-                        }}
-                    />
-                    <Icon 
-                        icon="delete" 
-                        clickable 
-                        disabled={isDisabled}
-                        action={() => alert('¡Eliminado!')}
-                        tooltip={{
-                            text: isDisabled ? 'Icono deshabilitado' : 'Eliminar elemento',
-                            top: '-3rem',
-                            left: '-2rem'
-                        }}
-                    />
-                    <span>Estado: {isDisabled ? 'Disabled' : 'Enabled'}</span>
-                </div>
-                <p><em>El primer icono alterna el estado del segundo</em></p>
-            </section>
-
-            {/* Iconos con tooltips */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Iconos con Tooltips</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon 
-                        icon="help" 
-                        clickable
-                        tooltip={{
-                            text: 'Ayuda y soporte',
-                            top: '-3rem',
-                            left: '-2rem'
-                        }}
-                        action={() => alert('¡Ayuda!')}
-                    />
-                    <Icon 
-                        icon="download" 
-                        clickable
-                        tooltip={{
-                            text: 'Descargar archivo',
-                            top: '-3rem',
-                            left: '-2rem'
-                        }}
-                        action={() => alert('¡Descargando!')}
-                    />
-                    <Icon 
-                        icon="share" 
-                        clickable
-                        tooltip={{
-                            text: 'Compartir contenido',
-                            top: '-3rem',
-                            left: '-2rem'
-                        }}
-                        action={() => alert('¡Compartiendo!')}
-                    />
-                </div>
-                <p><em>Tooltips posicionados para no interferir con los clics</em></p>
-            </section>
-
-            {/* Accesibilidad */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Accesibilidad Mejorada</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon 
-                        icon="accessibility" 
-                        clickable
-                        ariaLabel="Configuración de accesibilidad"
-                        action={() => alert('Configuración de accesibilidad')}
-                    />
-                    <Icon 
-                        icon="visibility" 
-                        clickable
-                        ariaLabel="Alternar visibilidad"
-                        action={() => alert('Visibilidad alternada')}
-                    />
-                    <Icon 
-                        icon="hearing" 
-                        clickable
-                        ariaLabel="Configuración de audio"
-                        action={() => alert('Configuración de audio')}
-                    />
-                </div>
-                <p><em>Iconos con etiquetas ARIA personalizadas y soporte completo de teclado</em></p>
-            </section>
-
-            {/* Clases personalizadas */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Clases CSS Personalizadas</h3>
-                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                    <Icon 
-                        icon="palette" 
-                        className="custom-icon-style"
-                        style={{ color: '#e91e63' }}
-                    />
-                    <Icon 
-                        icon="brush" 
-                        className="another-custom-class"
-                        style={{ color: '#2196f3' }}
-                    />
-                    <Icon 
-                        icon="color_lens" 
-                        className={undefined} // Manejo seguro de undefined
-                        style={{ color: '#4caf50' }}
-                    />
-                </div>
-                <p><em>Manejo seguro de className, incluso con valores undefined</em></p>
-            </section>
-
-            {/* Demostración de validación */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Validación de Props</h3>
-                <div style={{ 
-                    background: '#fff3cd', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #ffeaa7'
-                }}>
-                    <p><strong>Prueba en la consola del navegador:</strong></p>
-                    <p>El componente ahora valida que la prop <code>icon</code> sea requerida y muestra advertencias apropiadas.</p>
-                    <p>También valida tipos de props en desarrollo para detectar errores temprano.</p>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section>
-                <h3>Comparación: Antes vs Después</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#ffebee', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
-                    }}>
-                        <h4>❌ Antes</h4>
-                        <ul>
-                            <li>className undefined causaba errores</li>
-                            <li>Sin validación de props</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Sin soporte de teclado</li>
-                            <li>Cursor inconsistente</li>
-                            <li>Sin documentación</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Después</h4>
-                        <ul>
-                            <li>Manejo seguro de todas las props</li>
-                            <li>PropTypes completos</li>
-                            <li>Atributos ARIA apropiados</li>
-                            <li>Soporte completo de teclado</li>
-                            <li>Estados visuales consistentes</li>
-                            <li>Documentación y ejemplos</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default IconExamples