ywana-core8 0.1.75 → 0.1.77

package/src/html/switch.js

@@ -1,46 +1,306 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import RSwitch from 'react-switch'
 import { Icon } from './icon'
+import { Text } from './text'
+import './switch.css'
 
+/**
+ * Switch component using react-switch library with enhanced features
+ */
 export const Switch = (props) => {
+    const {
+        id,
+        label,
+        checked = false,
+        disabled = false,
+        readOnly = false,
+        error = false,
+        required = false,
+        size = 'normal',
+        className,
+        ariaLabel,
+        onChange,
+        onColor,
+        offColor,
+        ...restProps
+    } = props
 
-    return (
-        <RSwitch 
-            onColor="#86d3ff"
-            onHandleColor="#2693e6"
-            handleDiameter={30}
+    // Validate required props
+    if (onChange && typeof onChange !== 'function') {
+        console.warn('Switch component: onChange prop should be a function')
+    }
+
+    // Size configurations
+    const sizeConfig = {
+        small: { height: 16, width: 32, handleDiameter: 14 },
+        normal: { height: 20, width: 48, handleDiameter: 18 },
+        large: { height: 24, width: 56, handleDiameter: 22 }
+    }
+
+    const currentSize = sizeConfig[size] || sizeConfig.normal
+    const safeClassName = className || ''
+
+    // Theme-aware colors with proper fallbacks
+    const defaultOnColor = onColor || '#007bff'  // Bootstrap primary blue
+    const defaultOffColor = offColor || '#6c757d' // Bootstrap secondary gray
+
+    // Handle change with validation
+    const handleChange = (nextChecked, event, id) => {
+        if (!disabled && !readOnly && onChange) {
+            onChange(id || 'switch', nextChecked, event)
+        }
+    }
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || label || 'Toggle switch',
+        'aria-required': required,
+        'aria-invalid': error,
+        'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined
+    }
+
+    const switchElement = (
+        <RSwitch
+            id={id}
+            checked={checked}
+            onChange={handleChange}
+            disabled={disabled || readOnly}
+            onColor={defaultOnColor}
+            offColor={defaultOffColor}
+            onHandleColor="#ffffff"
+            offHandleColor="#f8f9fa"
+            handleDiameter={currentSize.handleDiameter}
             uncheckedIcon={false}
             checkedIcon={false}
-            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
-            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
-            height={20}
-            width={48}
-
-            {...props}
-            
-            className="react-switch"
+            boxShadow="0px 1px 3px rgba(0, 0, 0, 0.3)"
+            activeBoxShadow="0px 0px 0px 2px rgba(0, 123, 255, 0.25)"
+            height={currentSize.height}
+            width={currentSize.width}
+            className={`react-switch ${safeClassName} ${error ? 'error' : ''}`}
+            {...ariaAttributes}
+            {...restProps}
         />
     )
+
+    // If no label, return just the switch
+    if (!label) {
+        return (
+            <div className={`switch-wrapper ${disabled ? 'disabled' : ''} ${error ? 'error' : ''}`}>
+                {switchElement}
+                {error && typeof error === 'string' && error.length > 0 && (
+                    <span id={`${id}-error`} className="error-message" role="alert">
+                        {error}
+                    </span>
+                )}
+            </div>
+        )
+    }
+
+    // Return switch with label
+    return (
+        <div className={`switch-container ${disabled ? 'disabled' : ''} ${error ? 'error' : ''}`}>
+            <label htmlFor={id} className="switch-label">
+                <Text>{label}</Text>
+                {switchElement}
+            </label>
+            {error && typeof error === 'string' && error.length > 0 && (
+                <span id={`${id}-error`} className="error-message" role="alert">
+                    {error}
+                </span>
+            )}
+        </div>
+    )
 }
 
+/**
+ * Switch2 component using Material Icons for a lightweight alternative
+ */
 export const Switch2 = (props) => {
+    const {
+        id,
+        label,
+        checked = false,
+        disabled = false,
+        readOnly = false,
+        error = false,
+        required = false,
+        size = 'normal',
+        className,
+        ariaLabel,
+        onChange
+    } = props
+
+    const [internalChecked, setInternalChecked] = useState(checked)
+
+    // Validate required props
+    if (onChange && typeof onChange !== 'function') {
+        console.warn('Switch2 component: onChange prop should be a function')
+    }
 
-    const { checked, onChange } = props
+    // Sync with external value
+    useEffect(() => {
+        setInternalChecked(checked)
+    }, [checked])
 
+    // Handle toggle
     function toggle() {
-        onChange(!checked)
+        if (!disabled && !readOnly) {
+            const nextValue = !internalChecked
+            setInternalChecked(nextValue)
+            if (onChange) {
+                onChange(id || 'switch2', nextValue)
+            }
+        }
     }
 
-    const icon = checked ? "toggle_on" : "toggle_off"
-    return (
-        <div className="switch">
-            <Icon icon={icon} clickable action={toggle} />
+    // Handle keyboard events
+    const handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault()
+            toggle()
+        }
+    }
+
+    const icon = internalChecked ? "toggle_on" : "toggle_off"
+    const safeClassName = className || ''
+
+    // Generate CSS classes
+    const cssClasses = [
+        'switch2',
+        disabled && 'disabled',
+        readOnly && 'readonly',
+        error && 'error',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes for the container
+    const containerAttributes = {
+        role: 'switch',
+        'aria-checked': internalChecked,
+        'aria-label': ariaLabel || label || 'Toggle switch',
+        'aria-required': required,
+        'aria-invalid': error,
+        'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: handleKeyDown
+    }
+
+    const switchElement = (
+        <div className={cssClasses} {...containerAttributes}>
+            <Icon
+                icon={icon}
+                size={size}
+                clickable={!disabled && !readOnly}
+                disabled={disabled}
+                action={toggle}
+                ariaLabel={`${internalChecked ? 'Enabled' : 'Disabled'} toggle switch`}
+            />
         </div>
     )
-}
 
-const Switch2Test = () => {
+    // If no label, return just the switch
+    if (!label) {
+        return (
+            <div className="switch2-wrapper">
+                {switchElement}
+                {error && typeof error === 'string' && error.length > 0 && (
+                    <span id={`${id}-error`} className="error-message" role="alert">
+                        {error}
+                    </span>
+                )}
+            </div>
+        )
+    }
+
+    // Return switch with label
     return (
-        <Switch2 checked={true} onChange={console.log} />
+        <div className="switch2-container">
+            <label className="switch2-label">
+                <Text>{label}</Text>
+                {switchElement}
+            </label>
+            {error && typeof error === 'string' && error.length > 0 && (
+                <span id={`${id}-error`} className="error-message" role="alert">
+                    {error}
+                </span>
+            )}
+        </div>
     )
 }
+
+// PropTypes para Switch
+Switch.propTypes = {
+    /** Unique identifier for the switch */
+    id: PropTypes.string,
+    /** Label text for the switch */
+    label: PropTypes.string,
+    /** Current checked state */
+    checked: PropTypes.bool,
+    /** Whether the switch is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the switch is read-only */
+    readOnly: PropTypes.bool,
+    /** Error state - boolean or error message string */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** Whether the switch is required */
+    required: PropTypes.bool,
+    /** Size variant of the switch */
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Accessibility label for screen readers */
+    ariaLabel: PropTypes.string,
+    /** Change handler function */
+    onChange: PropTypes.func,
+    /** Custom color when switch is on */
+    onColor: PropTypes.string,
+    /** Custom color when switch is off */
+    offColor: PropTypes.string
+}
+
+Switch.defaultProps = {
+    checked: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    required: false,
+    size: 'normal',
+    className: ''
+}
+
+// PropTypes para Switch2
+Switch2.propTypes = {
+    /** Unique identifier for the switch */
+    id: PropTypes.string,
+    /** Label text for the switch */
+    label: PropTypes.string,
+    /** Current checked state */
+    checked: PropTypes.bool,
+    /** Whether the switch is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the switch is read-only */
+    readOnly: PropTypes.bool,
+    /** Error state - boolean or error message string */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** Whether the switch is required */
+    required: PropTypes.bool,
+    /** Size variant of the switch */
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Accessibility label for screen readers */
+    ariaLabel: PropTypes.string,
+    /** Change handler function */
+    onChange: PropTypes.func
+}
+
+Switch2.defaultProps = {
+    checked: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    required: false,
+    size: 'normal',
+    className: ''
+}

package/src/html/switch.test.js

@@ -0,0 +1,355 @@
+import React from 'react'
+import { Switch, Switch2 } from './switch'
+
+// Mock react-switch
+jest.mock('react-switch', () => {
+    return function MockRSwitch(props) {
+        const mockReact = require('react')
+        return mockReact.createElement('div', {
+            'data-testid': 'react-switch',
+            'data-checked': props.checked,
+            'data-disabled': props.disabled,
+            onClick: () => props.onChange && props.onChange(!props.checked)
+        }, 'MockSwitch')
+    }
+})
+
+// Pruebas unitarias para los componentes Switch
+describe('Switch Components', () => {
+    // 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()
+    })
+
+    describe('Switch Component', () => {
+        test('component exports correctly', () => {
+            expect(Switch).toBeDefined()
+            expect(typeof Switch).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Switch.propTypes).toBeDefined()
+            expect(Switch.propTypes.id).toBeDefined()
+            expect(Switch.propTypes.label).toBeDefined()
+            expect(Switch.propTypes.checked).toBeDefined()
+            expect(Switch.propTypes.disabled).toBeDefined()
+            expect(Switch.propTypes.readOnly).toBeDefined()
+            expect(Switch.propTypes.error).toBeDefined()
+            expect(Switch.propTypes.required).toBeDefined()
+            expect(Switch.propTypes.size).toBeDefined()
+            expect(Switch.propTypes.className).toBeDefined()
+            expect(Switch.propTypes.ariaLabel).toBeDefined()
+            expect(Switch.propTypes.onChange).toBeDefined()
+            expect(Switch.propTypes.onColor).toBeDefined()
+            expect(Switch.propTypes.offColor).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Switch.defaultProps).toBeDefined()
+            expect(Switch.defaultProps.checked).toBe(false)
+            expect(Switch.defaultProps.disabled).toBe(false)
+            expect(Switch.defaultProps.readOnly).toBe(false)
+            expect(Switch.defaultProps.error).toBe(false)
+            expect(Switch.defaultProps.required).toBe(false)
+            expect(Switch.defaultProps.size).toBe('normal')
+            expect(Switch.defaultProps.className).toBe('')
+        })
+
+        test('warns when onChange is not a function', () => {
+            const validateOnChange = (onChange) => {
+                if (onChange && typeof onChange !== 'function') {
+                    console.warn('Switch component: onChange prop should be a function')
+                }
+            }
+
+            validateOnChange('not a function')
+            expect(console.warn).toHaveBeenCalledWith('Switch component: onChange prop should be a function')
+
+            console.warn.mockClear()
+            validateOnChange(() => {})
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('size configuration works correctly', () => {
+            const sizeConfig = {
+                small: { height: 16, width: 32, handleDiameter: 14 },
+                normal: { height: 20, width: 48, handleDiameter: 18 },
+                large: { height: 24, width: 56, handleDiameter: 22 }
+            }
+
+            expect(sizeConfig.small.height).toBe(16)
+            expect(sizeConfig.normal.width).toBe(48)
+            expect(sizeConfig.large.handleDiameter).toBe(22)
+        })
+
+        test('change handler works correctly', () => {
+            const mockOnChange = jest.fn()
+            
+            // Simular el comportamiento del change handler
+            const simulateChange = (disabled, readOnly, onChange, id) => {
+                const nextChecked = true
+                const event = {}
+                
+                if (!disabled && !readOnly && onChange) {
+                    onChange(id || 'switch', nextChecked, event)
+                }
+            }
+
+            // Change normal
+            simulateChange(false, false, mockOnChange, 'test')
+            expect(mockOnChange).toHaveBeenCalledWith('test', true, {})
+
+            mockOnChange.mockClear()
+
+            // Change con disabled
+            simulateChange(true, false, mockOnChange, 'test')
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // Change con readOnly
+            simulateChange(false, true, mockOnChange, 'test')
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('accessibility attributes generation works correctly', () => {
+            const generateAriaAttributes = (ariaLabel, label, required, error, id) => {
+                return {
+                    'aria-label': ariaLabel || label || 'Toggle switch',
+                    'aria-required': required,
+                    'aria-invalid': error,
+                    'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined
+                }
+            }
+
+            // Atributos básicos
+            const basic = generateAriaAttributes(null, null, false, false, 'test')
+            expect(basic['aria-label']).toBe('Toggle switch')
+            expect(basic['aria-required']).toBe(false)
+            expect(basic['aria-invalid']).toBe(false)
+            expect(basic['aria-describedby']).toBeUndefined()
+
+            // Con label personalizado
+            const withLabel = generateAriaAttributes(null, 'Custom Label', false, false, 'test')
+            expect(withLabel['aria-label']).toBe('Custom Label')
+
+            // Con aria-label personalizado
+            const withAriaLabel = generateAriaAttributes('Custom ARIA', 'Label', false, false, 'test')
+            expect(withAriaLabel['aria-label']).toBe('Custom ARIA')
+
+            // Con error
+            const withError = generateAriaAttributes(null, null, false, 'Error message', 'test')
+            expect(withError['aria-invalid']).toBe('Error message')
+            expect(withError['aria-describedby']).toBe('test-error')
+        })
+    })
+
+    describe('Switch2 Component', () => {
+        test('component exports correctly', () => {
+            expect(Switch2).toBeDefined()
+            expect(typeof Switch2).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Switch2.propTypes).toBeDefined()
+            expect(Switch2.propTypes.id).toBeDefined()
+            expect(Switch2.propTypes.label).toBeDefined()
+            expect(Switch2.propTypes.checked).toBeDefined()
+            expect(Switch2.propTypes.disabled).toBeDefined()
+            expect(Switch2.propTypes.readOnly).toBeDefined()
+            expect(Switch2.propTypes.error).toBeDefined()
+            expect(Switch2.propTypes.required).toBeDefined()
+            expect(Switch2.propTypes.size).toBeDefined()
+            expect(Switch2.propTypes.className).toBeDefined()
+            expect(Switch2.propTypes.ariaLabel).toBeDefined()
+            expect(Switch2.propTypes.onChange).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Switch2.defaultProps).toBeDefined()
+            expect(Switch2.defaultProps.checked).toBe(false)
+            expect(Switch2.defaultProps.disabled).toBe(false)
+            expect(Switch2.defaultProps.readOnly).toBe(false)
+            expect(Switch2.defaultProps.error).toBe(false)
+            expect(Switch2.defaultProps.required).toBe(false)
+            expect(Switch2.defaultProps.size).toBe('normal')
+            expect(Switch2.defaultProps.className).toBe('')
+        })
+
+        test('warns when onChange is not a function', () => {
+            const validateOnChange = (onChange) => {
+                if (onChange && typeof onChange !== 'function') {
+                    console.warn('Switch2 component: onChange prop should be a function')
+                }
+            }
+
+            validateOnChange('not a function')
+            expect(console.warn).toHaveBeenCalledWith('Switch2 component: onChange prop should be a function')
+
+            console.warn.mockClear()
+            validateOnChange(() => {})
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('icon selection logic works correctly', () => {
+            const getIcon = (checked) => {
+                return checked ? "toggle_on" : "toggle_off"
+            }
+
+            expect(getIcon(true)).toBe('toggle_on')
+            expect(getIcon(false)).toBe('toggle_off')
+        })
+
+        test('CSS classes generation works correctly', () => {
+            const generateClasses = (disabled, readOnly, error, className) => {
+                return [
+                    'switch2',
+                    disabled && 'disabled',
+                    readOnly && 'readonly',
+                    error && 'error',
+                    className || ''
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, false, '')).toBe('switch2')
+            expect(generateClasses(true, false, false, '')).toBe('switch2 disabled')
+            expect(generateClasses(false, true, false, '')).toBe('switch2 readonly')
+            expect(generateClasses(false, false, true, '')).toBe('switch2 error')
+            expect(generateClasses(false, false, false, 'custom')).toBe('switch2 custom')
+            expect(generateClasses(true, true, true, 'custom')).toBe('switch2 disabled readonly error custom')
+        })
+
+        test('toggle function works correctly', () => {
+            const mockOnChange = jest.fn()
+            
+            // Simular el comportamiento del toggle
+            const simulateToggle = (disabled, readOnly, checked, onChange, id) => {
+                if (!disabled && !readOnly) {
+                    const nextValue = !checked
+                    if (onChange) {
+                        onChange(id || 'switch2', nextValue)
+                    }
+                    return nextValue
+                }
+                return checked
+            }
+
+            // Toggle normal
+            const result1 = simulateToggle(false, false, false, mockOnChange, 'test')
+            expect(result1).toBe(true)
+            expect(mockOnChange).toHaveBeenCalledWith('test', true)
+
+            mockOnChange.mockClear()
+
+            // Toggle con disabled
+            const result2 = simulateToggle(true, false, false, mockOnChange, 'test')
+            expect(result2).toBe(false)
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // Toggle con readOnly
+            const result3 = simulateToggle(false, true, false, mockOnChange, 'test')
+            expect(result3).toBe(false)
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('keyboard event handling works correctly', () => {
+            const mockToggle = jest.fn()
+            
+            // Simular el manejo de eventos de teclado
+            const simulateKeyDown = (key, toggle) => {
+                const event = {
+                    key,
+                    preventDefault: jest.fn()
+                }
+
+                if (event.key === ' ' || event.key === 'Enter') {
+                    event.preventDefault()
+                    toggle()
+                }
+
+                return event
+            }
+
+            // Space key
+            const spaceEvent = simulateKeyDown(' ', mockToggle)
+            expect(spaceEvent.preventDefault).toHaveBeenCalled()
+            expect(mockToggle).toHaveBeenCalled()
+
+            mockToggle.mockClear()
+
+            // Enter key
+            const enterEvent = simulateKeyDown('Enter', mockToggle)
+            expect(enterEvent.preventDefault).toHaveBeenCalled()
+            expect(mockToggle).toHaveBeenCalled()
+
+            mockToggle.mockClear()
+
+            // Other key (should not trigger)
+            const otherEvent = simulateKeyDown('a', mockToggle)
+            expect(otherEvent.preventDefault).not.toHaveBeenCalled()
+            expect(mockToggle).not.toHaveBeenCalled()
+        })
+
+        test('container attributes generation works correctly', () => {
+            const generateContainerAttributes = (checked, ariaLabel, label, required, error, id, disabled) => {
+                return {
+                    role: 'switch',
+                    'aria-checked': checked,
+                    'aria-label': ariaLabel || label || 'Toggle switch',
+                    'aria-required': required,
+                    'aria-invalid': error,
+                    'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined,
+                    tabIndex: disabled ? -1 : 0
+                }
+            }
+
+            const attrs = generateContainerAttributes(true, null, 'Test Label', false, false, 'test', false)
+            expect(attrs.role).toBe('switch')
+            expect(attrs['aria-checked']).toBe(true)
+            expect(attrs['aria-label']).toBe('Test Label')
+            expect(attrs.tabIndex).toBe(0)
+
+            const disabledAttrs = generateContainerAttributes(false, null, null, false, false, 'test', true)
+            expect(disabledAttrs.tabIndex).toBe(-1)
+        })
+
+        test('state synchronization works correctly', () => {
+            // Simular la sincronización de estado con useEffect
+            let internalState = false
+            
+            const syncState = (externalValue) => {
+                internalState = externalValue
+            }
+
+            // Estado inicial
+            syncState(false)
+            expect(internalState).toBe(false)
+
+            // Cambio externo
+            syncState(true)
+            expect(internalState).toBe(true)
+
+            // Otro cambio
+            syncState(false)
+            expect(internalState).toBe(false)
+        })
+    })
+})