ywana-core8 0.1.103 → 0.2.2

package/src/html/radio.test.js

@@ -1,318 +0,0 @@
-import React from 'react'
-import { RadioButton, RadioGroup } from './radio'
-
-// Pruebas unitarias para los componentes Radio
-describe('Radio Components', () => {
-    // Mock del componente Text
-    const mockText = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Text
-        jest.doMock('./text', () => ({
-            Text: mockText
-        }))
-        
-        // Mock de console.warn para las pruebas
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    describe('RadioButton Component', () => {
-        test('component exports correctly', () => {
-            expect(RadioButton).toBeDefined()
-            expect(typeof RadioButton).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(RadioButton.propTypes).toBeDefined()
-            expect(RadioButton.propTypes.id).toBeDefined()
-            expect(RadioButton.propTypes.name).toBeDefined()
-            expect(RadioButton.propTypes.label).toBeDefined()
-            expect(RadioButton.propTypes.value).toBeDefined()
-            expect(RadioButton.propTypes.checked).toBeDefined()
-            expect(RadioButton.propTypes.disabled).toBeDefined()
-            expect(RadioButton.propTypes.readOnly).toBeDefined()
-            expect(RadioButton.propTypes.error).toBeDefined()
-            expect(RadioButton.propTypes.required).toBeDefined()
-            expect(RadioButton.propTypes.className).toBeDefined()
-            expect(RadioButton.propTypes.ariaLabel).toBeDefined()
-            expect(RadioButton.propTypes.onChange).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(RadioButton.defaultProps).toBeDefined()
-            expect(RadioButton.defaultProps.checked).toBe(false)
-            expect(RadioButton.defaultProps.disabled).toBe(false)
-            expect(RadioButton.defaultProps.readOnly).toBe(false)
-            expect(RadioButton.defaultProps.error).toBe(false)
-            expect(RadioButton.defaultProps.required).toBe(false)
-            expect(RadioButton.defaultProps.className).toBe('')
-        })
-
-        test('warns when id prop is missing', () => {
-            const validateId = (id) => {
-                if (!id) {
-                    console.warn('RadioButton component: id prop is required')
-                    return null
-                }
-                return true
-            }
-            
-            const result = validateId(undefined)
-            expect(result).toBeNull()
-            expect(console.warn).toHaveBeenCalledWith('RadioButton component: id prop is required')
-        })
-
-        test('warns when name prop is missing', () => {
-            const validateName = (name) => {
-                if (!name) {
-                    console.warn('RadioButton component: name prop is required for radio button groups')
-                }
-            }
-            
-            validateName(undefined)
-            expect(console.warn).toHaveBeenCalledWith('RadioButton component: name prop is required for radio button groups')
-        })
-
-        test('generates correct CSS classes for different states', () => {
-            const generateClasses = (disabled, readOnly, error, className) => {
-                return [
-                    'radio',
-                    disabled && 'disabled',
-                    readOnly && 'readonly',
-                    error && 'error',
-                    className || ''
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, false, false, '')).toBe('radio')
-            expect(generateClasses(true, false, false, '')).toBe('radio disabled')
-            expect(generateClasses(false, true, false, '')).toBe('radio readonly')
-            expect(generateClasses(false, false, true, '')).toBe('radio error')
-            expect(generateClasses(false, false, false, 'custom')).toBe('radio custom')
-            expect(generateClasses(true, true, true, 'custom')).toBe('radio disabled readonly error custom')
-        })
-
-        test('change handler works correctly', () => {
-            const mockOnChange = jest.fn()
-            
-            const simulateChange = (disabled, readOnly, onChange, id, value) => {
-                const event = { target: { value } }
-                
-                if (!disabled && !readOnly && onChange) {
-                    onChange(id, value || id, event)
-                }
-            }
-
-            // Change normal
-            simulateChange(false, false, mockOnChange, 'test', 'value1')
-            expect(mockOnChange).toHaveBeenCalledWith('test', 'value1', { target: { value: 'value1' } })
-
-            mockOnChange.mockClear()
-
-            // Change con disabled
-            simulateChange(true, false, mockOnChange, 'test', 'value1')
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // Change con readOnly
-            simulateChange(false, true, mockOnChange, 'test', 'value1')
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('keyboard event handling works correctly', () => {
-            const mockChange = jest.fn()
-            
-            const simulateKeyDown = (key, change) => {
-                const event = {
-                    key,
-                    preventDefault: jest.fn()
-                }
-
-                if (event.key === ' ') {
-                    event.preventDefault()
-                    change(event)
-                }
-
-                return event
-            }
-
-            // Space key
-            const spaceEvent = simulateKeyDown(' ', mockChange)
-            expect(spaceEvent.preventDefault).toHaveBeenCalled()
-            expect(mockChange).toHaveBeenCalledWith(spaceEvent)
-
-            mockChange.mockClear()
-
-            // Other key (should not trigger)
-            const otherEvent = simulateKeyDown('Enter', mockChange)
-            expect(otherEvent.preventDefault).not.toHaveBeenCalled()
-            expect(mockChange).not.toHaveBeenCalled()
-        })
-
-        test('accessibility attributes generation works correctly', () => {
-            const generateAriaAttributes = (ariaLabel, label, required, error, id) => {
-                return {
-                    'aria-label': ariaLabel || label,
-                    'aria-required': required,
-                    'aria-invalid': error,
-                    'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined
-                }
-            }
-
-            const basic = generateAriaAttributes(null, 'Test Label', false, false, 'test')
-            expect(basic['aria-label']).toBe('Test Label')
-            expect(basic['aria-required']).toBe(false)
-            expect(basic['aria-invalid']).toBe(false)
-            expect(basic['aria-describedby']).toBeUndefined()
-
-            const withError = generateAriaAttributes(null, 'Test Label', false, 'Error message', 'test')
-            expect(withError['aria-invalid']).toBe('Error message')
-            expect(withError['aria-describedby']).toBe('test-error')
-        })
-    })
-
-    describe('RadioGroup Component', () => {
-        test('component exports correctly', () => {
-            expect(RadioGroup).toBeDefined()
-            expect(typeof RadioGroup).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(RadioGroup.propTypes).toBeDefined()
-            expect(RadioGroup.propTypes.id).toBeDefined()
-            expect(RadioGroup.propTypes.label).toBeDefined()
-            expect(RadioGroup.propTypes.value).toBeDefined()
-            expect(RadioGroup.propTypes.options).toBeDefined()
-            expect(RadioGroup.propTypes.disabled).toBeDefined()
-            expect(RadioGroup.propTypes.readOnly).toBeDefined()
-            expect(RadioGroup.propTypes.error).toBeDefined()
-            expect(RadioGroup.propTypes.required).toBeDefined()
-            expect(RadioGroup.propTypes.className).toBeDefined()
-            expect(RadioGroup.propTypes.ariaLabel).toBeDefined()
-            expect(RadioGroup.propTypes.onChange).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(RadioGroup.defaultProps).toBeDefined()
-            expect(RadioGroup.defaultProps.options).toEqual([])
-            expect(RadioGroup.defaultProps.disabled).toBe(false)
-            expect(RadioGroup.defaultProps.readOnly).toBe(false)
-            expect(RadioGroup.defaultProps.error).toBe(false)
-            expect(RadioGroup.defaultProps.required).toBe(false)
-            expect(RadioGroup.defaultProps.className).toBe('')
-        })
-
-        test('generates unique group name when id is not provided', () => {
-            const generateGroupName = (id) => {
-                return id || `radiogroup-${Math.random().toString(36).substring(2, 11)}`
-            }
-
-            const name1 = generateGroupName(undefined)
-            const name2 = generateGroupName(undefined)
-            
-            expect(name1).toMatch(/^radiogroup-/)
-            expect(name2).toMatch(/^radiogroup-/)
-            expect(name1).not.toBe(name2) // Should be different
-        })
-
-        test('state synchronization works correctly', () => {
-            let internalState = null
-            
-            const syncState = (externalValue) => {
-                internalState = externalValue
-            }
-
-            syncState('option1')
-            expect(internalState).toBe('option1')
-
-            syncState('option2')
-            expect(internalState).toBe('option2')
-        })
-
-        test('change handler works correctly', () => {
-            const mockOnChange = jest.fn()
-            let selectedValue = null
-            
-            const simulateChange = (disabled, readOnly, onChange, id, optionValue) => {
-                if (!disabled && !readOnly) {
-                    selectedValue = optionValue
-                    if (onChange) {
-                        onChange(id || 'radiogroup', optionValue, {})
-                    }
-                }
-            }
-
-            // Normal change
-            simulateChange(false, false, mockOnChange, 'test-group', 'option1')
-            expect(selectedValue).toBe('option1')
-            expect(mockOnChange).toHaveBeenCalledWith('test-group', 'option1', {})
-
-            mockOnChange.mockClear()
-
-            // Disabled group
-            simulateChange(true, false, mockOnChange, 'test-group', 'option2')
-            expect(selectedValue).toBe('option1') // Should not change
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // ReadOnly group
-            simulateChange(false, true, mockOnChange, 'test-group', 'option2')
-            expect(selectedValue).toBe('option1') // Should not change
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('CSS classes generation works correctly', () => {
-            const generateClasses = (disabled, readOnly, error, className) => {
-                return [
-                    'radio-group',
-                    disabled && 'disabled',
-                    readOnly && 'readonly',
-                    error && 'error',
-                    className || ''
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, false, false, '')).toBe('radio-group')
-            expect(generateClasses(true, false, false, '')).toBe('radio-group disabled')
-            expect(generateClasses(false, true, false, '')).toBe('radio-group readonly')
-            expect(generateClasses(false, false, true, '')).toBe('radio-group error')
-            expect(generateClasses(false, false, false, 'custom')).toBe('radio-group custom')
-        })
-
-        test('options mapping works correctly', () => {
-            const options = [
-                { id: 'opt1', label: 'Option 1', value: 'value1' },
-                { id: 'opt2', label: 'Option 2', value: 'value2' },
-                { label: 'Option 3' } // Without id or value
-            ]
-
-            const mapOptions = (options, groupName) => {
-                return options.map((option, index) => ({
-                    key: option.value || option.id || index,
-                    id: option.id || `${groupName}-${index}`,
-                    name: groupName,
-                    label: option.label,
-                    value: option.value || option.id
-                }))
-            }
-
-            const mapped = mapOptions(options, 'test-group')
-            
-            expect(mapped[0].key).toBe('value1')
-            expect(mapped[0].id).toBe('opt1')
-            expect(mapped[0].value).toBe('value1')
-            
-            expect(mapped[1].key).toBe('value2')
-            expect(mapped[1].id).toBe('opt2')
-            expect(mapped[1].value).toBe('value2')
-            
-            expect(mapped[2].key).toBe(2)
-            expect(mapped[2].id).toBe('test-group-2')
-            expect(mapped[2].value).toBeUndefined()
-        })
-    })
-})

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

@@ -1,99 +0,0 @@
-import React from 'react'
-import { Section } from './section'
-import { Button } from './button'
-
-/**
- * Ejemplos de uso del componente Section mejorado
- */
-export const SectionExamples = () => {
-    return (
-        <div style={{ padding: '2rem', maxWidth: '800px' }}>
-            <h1>Ejemplos del Componente Section Mejorado</h1>
-            
-            {/* Ejemplo básico */}
-            <Section title="Sección Básica" icon="info">
-                <p>Esta es una sección básica que está cerrada por defecto.</p>
-                <p>Haz clic en el icono de expansión para abrirla.</p>
-            </Section>
-
-            {/* Sección abierta por defecto */}
-            <Section title="Sección Abierta" icon="folder_open" open={true}>
-                <p>Esta sección está abierta por defecto.</p>
-                <p>El icono cambia dinámicamente según el estado.</p>
-                <ul>
-                    <li>✅ Icono dinámico (expand_more/expand_less)</li>
-                    <li>✅ Tooltip informativo</li>
-                    <li>✅ Atributos de accesibilidad</li>
-                </ul>
-            </Section>
-
-            {/* Sección con acciones */}
-            <Section 
-                title="Sección con Acciones" 
-                icon="settings"
-                actions={
-                    <div style={{ display: 'flex', gap: '0.5rem' }}>
-                        <Button label="Editar" icon="edit" outlined />
-                        <Button label="Eliminar" icon="delete" outlined />
-                    </div>
-                }
-            >
-                <p>Esta sección incluye botones de acción en el header.</p>
-                <p>Las acciones se muestran junto al botón de colapsar.</p>
-            </Section>
-
-            {/* Sección no colapsable */}
-            <Section 
-                title="Sección No Colapsable" 
-                icon="lock"
-                canCollapse={false}
-                className="always-open"
-            >
-                <p>Esta sección no puede colapsarse.</p>
-                <p>No muestra el icono de expansión/contracción.</p>
-                <p>Útil para contenido que siempre debe estar visible.</p>
-            </Section>
-
-            {/* Sección con clase personalizada */}
-            <Section 
-                title="Sección Personalizada" 
-                icon="palette"
-                className="custom-section"
-                open={true}
-            >
-                <p>Esta sección tiene una clase CSS personalizada.</p>
-                <p>El manejo de className es seguro y no causa errores.</p>
-                <div style={{ 
-                    background: '#f0f8ff', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #e0e0e0'
-                }}>
-                    <strong>Mejoras implementadas:</strong>
-                    <ul>
-                        <li>🔧 Icono dinámico corregido</li>
-                        <li>🛡️ Manejo seguro de className</li>
-                        <li>📝 PropTypes y documentación</li>
-                        <li>♿ Atributos de accesibilidad</li>
-                        <li>💬 Tooltips informativos</li>
-                        <li>✅ Pruebas unitarias</li>
-                    </ul>
-                </div>
-            </Section>
-
-            {/* Sección sin título */}
-            <Section icon="description">
-                <p>Esta sección no tiene título, solo icono.</p>
-                <p>Demuestra la flexibilidad del componente.</p>
-            </Section>
-
-            {/* Sección mínima */}
-            <Section>
-                <p>Sección mínima sin título ni icono.</p>
-                <p>Solo con el contenido y funcionalidad de colapsar.</p>
-            </Section>
-        </div>
-    )
-}
-
-export default SectionExamples

package/src/html/section.test.js

@@ -1,131 +0,0 @@
-import React from 'react'
-import { Section } from './section'
-
-// Pruebas unitarias simples para el componente Section
-describe('Section Component', () => {
-    // Mock de los componentes dependientes
-    const mockIcon = jest.fn()
-    const mockHeader = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-
-        // Mock del componente Icon
-        jest.doMock('./icon', () => ({
-            Icon: mockIcon
-        }))
-
-        // Mock del componente Header
-        jest.doMock('./header', () => ({
-            Header: mockHeader
-        }))
-    })
-
-    test('component exports correctly', () => {
-        expect(Section).toBeDefined()
-        expect(typeof Section).toBe('function')
-    })
-
-    test('component has correct PropTypes', () => {
-        expect(Section.propTypes).toBeDefined()
-        expect(Section.propTypes.title).toBeDefined()
-        expect(Section.propTypes.canCollapse).toBeDefined()
-        expect(Section.propTypes.open).toBeDefined()
-        expect(Section.propTypes.icon).toBeDefined()
-        expect(Section.propTypes.actions).toBeDefined()
-        expect(Section.propTypes.children).toBeDefined()
-        expect(Section.propTypes.className).toBeDefined()
-    })
-
-    test('component has correct defaultProps', () => {
-        expect(Section.defaultProps).toBeDefined()
-        expect(Section.defaultProps.title).toBe('')
-        expect(Section.defaultProps.canCollapse).toBe(true)
-        expect(Section.defaultProps.open).toBe(false)
-        expect(Section.defaultProps.className).toBe('')
-    })
-
-    test('component structure is correct', () => {
-        // Verificar que el componente es una función
-        expect(typeof Section).toBe('function')
-
-        // Verificar que el componente tiene las propiedades esperadas
-        expect(Section.propTypes).toBeDefined()
-        expect(Section.defaultProps).toBeDefined()
-
-        // Verificar que el componente puede ser instanciado como elemento React
-        const element = React.createElement(Section, {
-            title: 'Test Title',
-            icon: 'test-icon',
-            canCollapse: true,
-            open: false,
-            className: 'test-class'
-        })
-
-        expect(element).toBeDefined()
-        expect(element.type).toBe(Section)
-    })
-
-    test('toggle function works correctly', () => {
-        const props = {
-            title: 'Test Title',
-            open: false
-        }
-
-        // Simular el comportamiento del toggle
-        let isOpen = props.open
-        const toggle = () => {
-            isOpen = !isOpen
-        }
-
-        expect(isOpen).toBe(false)
-        toggle()
-        expect(isOpen).toBe(true)
-        toggle()
-        expect(isOpen).toBe(false)
-    })
-
-    test('className handling works correctly', () => {
-        // Simular el manejo de className
-        const testClassName = (className) => {
-            return `section ${className || ''}`
-        }
-
-        expect(testClassName('custom-class')).toBe('section custom-class')
-        expect(testClassName(undefined)).toBe('section ')
-        expect(testClassName('')).toBe('section ')
-    })
-
-    test('icon logic works correctly', () => {
-        // Simular la lógica del icono
-        const getIconName = (isOpen) => {
-            return isOpen ? "expand_less" : "expand_more"
-        }
-
-        expect(getIconName(false)).toBe('expand_more')
-        expect(getIconName(true)).toBe('expand_less')
-    })
-
-    test('tooltip text and positioning logic works correctly', () => {
-        // Simular la lógica del tooltip
-        const getTooltipConfig = (isOpen) => {
-            return {
-                text: isOpen ? 'Contraer sección' : 'Expandir sección',
-                top: '-3rem',
-                left: '-2rem'
-            }
-        }
-
-        const closedTooltip = getTooltipConfig(false)
-        const openTooltip = getTooltipConfig(true)
-
-        expect(closedTooltip.text).toBe('Expandir sección')
-        expect(openTooltip.text).toBe('Contraer sección')
-
-        // Verificar que el posicionamiento evita superposición
-        expect(closedTooltip.top).toBe('-3rem')
-        expect(closedTooltip.left).toBe('-2rem')
-        expect(openTooltip.top).toBe('-3rem')
-        expect(openTooltip.left).toBe('-2rem')
-    })
-})

package/src/html/selector.test.js

@@ -1,20 +0,0 @@
-import React from 'react'
-import { MultiSelector } from './selector'
-
-export const SelectorTest = (props) => {
-
-    return (
-     <div>
-        <MultiSelector options={[
-            {label: 'Red', value: 'red', selected: true},
-            {label: 'Green', value: 'green', selected: false},
-            {label: 'Blue', value: 'blue', selected: false},
-            {label: 'Yellow', value: 'yellow', selected: false},
-            {label: 'Black', value: 'black', selected: false},
-            {label: 'White', value: 'white', selected: false},
-            {label: 'Gray', value: 'gray', selected: false},
-
-        ]} />
-     </div>
-    )
-}