ywana-core8 0.1.75 → 0.1.76

package/src/html/radio.js

@@ -1,25 +1,249 @@
-import React from 'react'
-import { Text } from './text';
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Text } from './text'
 import './radio.css'
 
 /**
- * Radio Button
+ * RadioButton component for single selection within a group
  */
 export const RadioButton = (props) => {
+    const {
+        id,
+        name,
+        label,
+        value,
+        checked = false,
+        disabled = false,
+        readOnly = false,
+        error = false,
+        required = false,
+        className,
+        ariaLabel,
+        onChange
+    } = props
 
-    const { id, name, label, placeholder, value, onChange } = props
+    // Validate required props
+    if (!id) {
+        console.warn('RadioButton component: id prop is required')
+        return null
+    }
+
+    if (!name) {
+        console.warn('RadioButton component: name prop is required for radio button groups')
+    }
 
     function change(event) {
-        const value = event.target.value
-        if (onChange) onChange(id, value)
+        if (!disabled && !readOnly && onChange) {
+            onChange(id, value || id, event)
+        }
+    }
+
+    // Handle keyboard events for accessibility
+    const handleKeyDown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault()
+            change(event)
+        }
+    }
+
+    const safeClassName = className || ''
+    const labelTxt = label && <Text>{label}</Text>
+
+    // Generate CSS classes
+    const cssClasses = [
+        'radio',
+        disabled && 'disabled',
+        readOnly && 'readonly',
+        error && 'error',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-required': required,
+        'aria-invalid': error,
+        'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined
     }
 
-    const labelTxt = <Text>{label}</Text>
     return (
-        <div className="radio">
-            <input id={id} name={name} type="radio" placeholder={placeholder} checked={value} onClick={change} />
-            <span class="checkmark" />
+        <div className={cssClasses} onKeyDown={handleKeyDown} tabIndex={disabled ? -1 : 0}>
+            <input
+                id={id}
+                name={name}
+                type="radio"
+                value={value || id}
+                checked={checked}
+                onChange={change}
+                disabled={disabled || readOnly}
+                required={required}
+                {...ariaAttributes}
+            />
+            <span className="checkmark" />
             <label htmlFor={id}>{labelTxt}</label>
+            {error && typeof error === 'string' && error.length > 0 && (
+                <span id={`${id}-error`} className="error-message" role="alert">
+                    {error}
+                </span>
+            )}
         </div>
     )
 }
+
+/**
+ * RadioGroup component for managing a group of radio buttons
+ */
+export const RadioGroup = (props) => {
+    const {
+        id,
+        label,
+        value,
+        options = [],
+        disabled = false,
+        readOnly = false,
+        error = false,
+        required = false,
+        className,
+        ariaLabel,
+        onChange
+    } = props
+
+    const [selectedValue, setSelectedValue] = useState(value)
+
+    // Sync with external value
+    useEffect(() => {
+        setSelectedValue(value)
+    }, [value])
+
+    const handleChange = (_, optionValue, event) => {
+        if (!disabled && !readOnly) {
+            setSelectedValue(optionValue)
+            if (onChange) {
+                onChange(id || 'radiogroup', optionValue, event)
+            }
+        }
+    }
+
+    const safeClassName = className || ''
+    const groupName = id || `radiogroup-${Math.random().toString(36).substring(2, 11)}`
+
+    // Generate CSS classes
+    const cssClasses = [
+        'radio-group',
+        disabled && 'disabled',
+        readOnly && 'readonly',
+        error && 'error',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    return (
+        <div className={cssClasses} role="radiogroup" aria-label={ariaLabel || label}>
+            {label && (
+                <label className="radio-group-label">
+                    <Text>{label}</Text>
+                    {required && <span className="required-indicator" aria-label="required">*</span>}
+                </label>
+            )}
+            <div className="radio-group-options">
+                {options.map((option, index) => (
+                    <RadioButton
+                        key={option.value || option.id || index}
+                        id={option.id || `${groupName}-${index}`}
+                        name={groupName}
+                        label={option.label}
+                        value={option.value || option.id}
+                        checked={selectedValue === (option.value || option.id)}
+                        disabled={disabled || option.disabled}
+                        readOnly={readOnly}
+                        error={error}
+                        onChange={handleChange}
+                        ariaLabel={option.ariaLabel}
+                    />
+                ))}
+            </div>
+            {error && typeof error === 'string' && error.length > 0 && (
+                <span id={`${id}-error`} className="error-message" role="alert">
+                    {error}
+                </span>
+            )}
+        </div>
+    )
+}
+
+// PropTypes para RadioButton
+RadioButton.propTypes = {
+    /** Unique identifier for the radio button (required) */
+    id: PropTypes.string.isRequired,
+    /** Name attribute for grouping radio buttons (required) */
+    name: PropTypes.string.isRequired,
+    /** Label text for the radio button */
+    label: PropTypes.string,
+    /** Value of the radio button */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Whether the radio button is checked */
+    checked: PropTypes.bool,
+    /** Whether the radio button is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the radio button is read-only */
+    readOnly: PropTypes.bool,
+    /** Error state - boolean or error message string */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** Whether the radio button is required */
+    required: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Accessibility label for screen readers */
+    ariaLabel: PropTypes.string,
+    /** Change handler function */
+    onChange: PropTypes.func
+}
+
+RadioButton.defaultProps = {
+    checked: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    required: false,
+    className: ''
+}
+
+// PropTypes para RadioGroup
+RadioGroup.propTypes = {
+    /** Unique identifier for the radio group */
+    id: PropTypes.string,
+    /** Label text for the radio group */
+    label: PropTypes.string,
+    /** Currently selected value */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Array of radio button options */
+    options: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        disabled: PropTypes.bool,
+        ariaLabel: PropTypes.string
+    })),
+    /** Whether the entire group is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the entire group is read-only */
+    readOnly: PropTypes.bool,
+    /** Error state - boolean or error message string */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** Whether the group selection is required */
+    required: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Accessibility label for screen readers */
+    ariaLabel: PropTypes.string,
+    /** Change handler function */
+    onChange: PropTypes.func
+}
+
+RadioGroup.defaultProps = {
+    options: [],
+    disabled: false,
+    readOnly: false,
+    error: false,
+    required: false,
+    className: ''
+}

package/src/html/radio.test.js

@@ -0,0 +1,318 @@
+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

@@ -0,0 +1,99 @@
+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