ywana-core8 0.1.75 → 0.1.76

package/src/html/accordion.js

@@ -1,41 +1,116 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
+import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import './accordion.css'
 
 /**
- * Accordion
+ * Enhanced Accordion component with improved accessibility and robustness
  */
 export const Accordion = (props) => {
+    const {
+        className,
+        sections = [],
+        disabled = false,
+        allowMultiple = true,
+        animated = true,
+        onCheck,
+        onToggle,
+        onSectionChange,
+        ariaLabel,
+        ...restProps
+    } = props
 
-    const { className, sections = [], onCheck } = props
     const [openSections, setOpenSections] = useState([])
     const [checkedSections, setCheckedSections] = useState([])
 
+    // Validate props
+    if (!Array.isArray(sections)) {
+        console.warn('Accordion component: sections prop must be an array')
+    }
+
+    // Initialize sections state
     useEffect(() => {
-        const openSections = sections.map(section => section.open)
-        const checkedSections = sections.map(section => section.checked)
+        const openSections = sections.map(section => section.open || false)
+        const checkedSections = sections.map(section => section.checked || false)
         setOpenSections(openSections)
         setCheckedSections(checkedSections)
     }, [sections])
 
-    function toggle(index) {
-        const next = openSections.map((open, i) => i === index ? !open : open)
-        setOpenSections(next)
-    }
+    // Toggle section open/closed
+    const toggle = useCallback((index) => {
+        if (disabled) return
+
+        setOpenSections(prevOpen => {
+            const next = allowMultiple
+                ? prevOpen.map((open, i) => i === index ? !open : open)
+                : prevOpen.map((open, i) => i === index ? !open : false)
+
+            if (onToggle) {
+                onToggle(index, next[index], sections[index])
+            }
+
+            if (onSectionChange) {
+                onSectionChange('toggle', index, next[index], sections[index])
+            }
+
+            return next
+        })
+    }, [disabled, allowMultiple, onToggle, onSectionChange, sections])
+
+    // Toggle section checked state
+    const check = useCallback((index) => {
+        if (disabled) return
+
+        setCheckedSections(prevChecked => {
+            const next = prevChecked.map((checked, i) => i === index ? !checked : checked)
+
+            if (onCheck) {
+                onCheck(index, next[index], sections[index]?.id, sections[index])
+            }
 
-    function check(index) { 
-        const next = checkedSections.map((checked, i) => i === index ? !checked : checked)
-        setCheckedSections(next)
-        if (onCheck) onCheck(index, next[index], sections[index].id)
+            if (onSectionChange) {
+                onSectionChange('check', index, next[index], sections[index])
+            }
+
+            return next
+        })
+    }, [disabled, onCheck, onSectionChange, sections])
+
+    // Generate CSS classes
+    const safeClassName = className || ''
+    const cssClasses = [
+        'accordion',
+        disabled && 'disabled',
+        animated && 'animated',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || 'Accordion',
+        'aria-disabled': disabled,
+        role: 'region'
     }
 
     return (
-        <div className={`accordion ${className}`}>
+        <div className={cssClasses} {...ariaAttributes} {...restProps}>
             {sections.map((section, index) => {
                 const isOpen = openSections[index]
                 const isChecked = checkedSections[index]
+                const sectionId = section.id || `accordion-section-${index}`
+
                 return (
-                    <AccordionSection key={index} {...section} open={isOpen} checked={isChecked} onToggle={() => toggle(index)} onCheck={() => check(index)}>
+                    <AccordionSection
+                        key={sectionId}
+                        {...section}
+                        open={isOpen}
+                        checked={isChecked}
+                        disabled={disabled || section.disabled}
+                        animated={animated}
+                        sectionIndex={index}
+                        onToggle={() => toggle(index)}
+                        onCheck={() => check(index)}
+                    >
                         {section.children}
                     </AccordionSection>
                 )
@@ -48,23 +123,204 @@ export const Accordion = (props) => {
  * AccordionSection
  */
 const AccordionSection = (props) => {
+    const {
+        checked,
+        icon,
+        title,
+        subtitle,
+        open = false,
+        disabled = false,
+        animated = true,
+        sectionIndex,
+        onToggle,
+        onCheck,
+        toolbar,
+        info,
+        children,
+        ariaLabel,
+        ...restProps
+    } = props
 
-    const { checked, icon, title, subtitle, open = false, onToggle, onCheck, toolbar, info, children } = props
     const togglerIcon = open ? "expand_less" : "expand_more"
-    const checkedIcon = checked === undefined || checked === null ?  null :  checked === false ? "check_box_outline_blank" : "check_box"
+    const checkedIcon = checked === undefined || checked === null ?
+        null :
+        checked === false ? "check_box_outline_blank" : "check_box"
+
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        if (disabled) return
+
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault()
+                if (onToggle) onToggle()
+                break
+            case 'ArrowDown':
+            case 'ArrowUp':
+                // Allow parent to handle navigation between sections
+                break
+            default:
+                break
+        }
+    }, [disabled, onToggle])
+
+    // Handle header click
+    const handleHeaderClick = useCallback((event) => {
+        if (disabled) return
+
+        // Don't toggle if clicking on interactive elements
+        if (event.target.closest('.accordion-section-checker') ||
+            event.target.closest('.accordion-section--toolbar')) {
+            return
+        }
+
+        if (onToggle) onToggle()
+    }, [disabled, onToggle])
+
+    // Generate CSS classes
+    const cssClasses = [
+        'accordion-section',
+        open && 'open',
+        disabled && 'disabled',
+        animated && 'animated',
+        checked && 'checked'
+    ].filter(Boolean).join(' ')
+
+    // Generate unique IDs for accessibility
+    const headerId = `accordion-header-${sectionIndex}`
+    const contentId = `accordion-content-${sectionIndex}`
+
+    // Accessibility attributes for header
+    const headerAriaAttributes = {
+        'aria-expanded': open,
+        'aria-controls': contentId,
+        'aria-disabled': disabled,
+        'aria-label': ariaLabel || (typeof title === 'string' ? title : 'Accordion section'),
+        role: 'button',
+        tabIndex: disabled ? -1 : 0,
+        id: headerId
+    }
+
+    // Accessibility attributes for content
+    const contentAriaAttributes = {
+        'aria-labelledby': headerId,
+        'aria-hidden': !open,
+        role: 'region',
+        id: contentId
+    }
 
     return (
-        <section key={title} className={`accordion-section`}>
-            <header>
-                { checkedIcon ? <Icon className="accordion-section-checker" icon={checkedIcon} clickable action={onCheck}/> : '' }
-                { icon ? <Icon className="accordion-section-icon" icon={icon} /> : '' }
-                { title ? <div className="accordion-section--title">{title}</div> : '' }
-                { subtitle ? <div className="accordion-section--subtitle">{subtitle}</div> : '' }
-                { info ? <div className="accordion-section--info">{info}</div> : '' }
-                { toolbar ? <div className="accordion-section--toolbar">{toolbar}</div> : '' } 
-                <Icon className="accordion-section-toggler" icon={togglerIcon} clickable action={onToggle} />
-            </header> 
-            {open ? <main>{children}</main> : ''}
+        <section className={cssClasses} {...restProps}>
+            <header
+                className="accordion-section-header"
+                onClick={handleHeaderClick}
+                onKeyDown={handleKeyDown}
+                {...headerAriaAttributes}
+            >
+                {checkedIcon && (
+                    <Icon
+                        className="accordion-section-checker"
+                        icon={checkedIcon}
+                        clickable={!disabled}
+                        action={disabled ? undefined : onCheck}
+                        disabled={disabled}
+                        ariaLabel={checked ? 'Uncheck section' : 'Check section'}
+                    />
+                )}
+
+                {icon && (
+                    <Icon
+                        className="accordion-section-icon"
+                        icon={icon}
+                        ariaLabel={`${icon} icon`}
+                    />
+                )}
+
+                {title && (
+                    <div className="accordion-section--title">
+                        {title}
+                    </div>
+                )}
+
+                {subtitle && (
+                    <div className="accordion-section--subtitle">
+                        {subtitle}
+                    </div>
+                )}
+
+                {info && (
+                    <div className="accordion-section--info">
+                        {info}
+                    </div>
+                )}
+
+                {toolbar && (
+                    <div className="accordion-section--toolbar" role="toolbar">
+                        {toolbar}
+                    </div>
+                )}
+
+                <Icon
+                    className="accordion-section-toggler"
+                    icon={togglerIcon}
+                    clickable={!disabled}
+                    action={disabled ? undefined : onToggle}
+                    disabled={disabled}
+                    ariaLabel={open ? 'Collapse section' : 'Expand section'}
+                />
+            </header>
+
+            {open && (
+                <main
+                    className="accordion-section-content"
+                    {...contentAriaAttributes}
+                >
+                    {children}
+                </main>
+            )}
         </section>
     )
 }
+
+// PropTypes for Accordion
+Accordion.propTypes = {
+    /** Array of section objects */
+    sections: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        icon: PropTypes.string,
+        info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        toolbar: PropTypes.node,
+        children: PropTypes.node,
+        open: PropTypes.bool,
+        checked: PropTypes.bool,
+        disabled: PropTypes.bool
+    })).isRequired,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Whether accordion is disabled */
+    disabled: PropTypes.bool,
+    /** Whether multiple sections can be open */
+    allowMultiple: PropTypes.bool,
+    /** Whether to animate transitions */
+    animated: PropTypes.bool,
+    /** ARIA label for the accordion */
+    ariaLabel: PropTypes.string,
+    /** Callback when section is checked/unchecked */
+    onCheck: PropTypes.func,
+    /** Callback when section is toggled */
+    onToggle: PropTypes.func,
+    /** Callback when any section changes */
+    onSectionChange: PropTypes.func
+}
+
+Accordion.defaultProps = {
+    className: '',
+    disabled: false,
+    allowMultiple: true,
+    animated: true
+}
+
+export default Accordion

package/src/html/accordion.unit.test.js

@@ -0,0 +1,334 @@
+import React from 'react'
+import { Accordion } from './accordion'
+
+// Pruebas unitarias para el componente Accordion mejorado
+describe('Accordion Component', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // 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(Accordion).toBeDefined()
+        expect(typeof Accordion).toBe('function')
+    })
+
+    test('component has correct PropTypes', () => {
+        expect(Accordion.propTypes).toBeDefined()
+        expect(Accordion.propTypes.sections).toBeDefined()
+        expect(Accordion.propTypes.className).toBeDefined()
+        expect(Accordion.propTypes.disabled).toBeDefined()
+        expect(Accordion.propTypes.allowMultiple).toBeDefined()
+        expect(Accordion.propTypes.animated).toBeDefined()
+        expect(Accordion.propTypes.ariaLabel).toBeDefined()
+        expect(Accordion.propTypes.onCheck).toBeDefined()
+        expect(Accordion.propTypes.onToggle).toBeDefined()
+        expect(Accordion.propTypes.onSectionChange).toBeDefined()
+    })
+
+    test('component has correct defaultProps', () => {
+        expect(Accordion.defaultProps).toBeDefined()
+        expect(Accordion.defaultProps.className).toBe('')
+        expect(Accordion.defaultProps.disabled).toBe(false)
+        expect(Accordion.defaultProps.allowMultiple).toBe(true)
+        expect(Accordion.defaultProps.animated).toBe(true)
+    })
+
+    test('warns when sections is not an array', () => {
+        const validateSections = (sections) => {
+            if (!Array.isArray(sections)) {
+                console.warn('Accordion component: sections prop must be an array')
+            }
+        }
+        
+        validateSections('not an array')
+        expect(console.warn).toHaveBeenCalledWith('Accordion component: sections prop must be an array')
+
+        console.warn.mockClear()
+        validateSections([])
+        expect(console.warn).not.toHaveBeenCalled()
+    })
+
+    test('sections state initialization works correctly', () => {
+        const sections = [
+            { id: 1, open: true, checked: false },
+            { id: 2, open: false, checked: true },
+            { id: 3, open: true, checked: true }
+        ]
+
+        const initializeState = (sections) => {
+            const openSections = sections.map(section => section.open || false)
+            const checkedSections = sections.map(section => section.checked || false)
+            return { openSections, checkedSections }
+        }
+
+        const result = initializeState(sections)
+        expect(result.openSections).toEqual([true, false, true])
+        expect(result.checkedSections).toEqual([false, true, true])
+    })
+
+    test('toggle logic works correctly with allowMultiple=true', () => {
+        const openSections = [true, false, true]
+        const allowMultiple = true
+        const index = 1
+
+        const toggle = (openSections, index, allowMultiple) => {
+            return allowMultiple 
+                ? openSections.map((open, i) => i === index ? !open : open)
+                : openSections.map((open, i) => i === index ? !open : false)
+        }
+
+        const result = toggle(openSections, index, allowMultiple)
+        expect(result).toEqual([true, true, true])
+    })
+
+    test('toggle logic works correctly with allowMultiple=false', () => {
+        const openSections = [true, false, true]
+        const allowMultiple = false
+        const index = 1
+
+        const toggle = (openSections, index, allowMultiple) => {
+            return allowMultiple 
+                ? openSections.map((open, i) => i === index ? !open : open)
+                : openSections.map((open, i) => i === index ? !open : false)
+        }
+
+        const result = toggle(openSections, index, allowMultiple)
+        expect(result).toEqual([false, true, false])
+    })
+
+    test('check logic works correctly', () => {
+        const checkedSections = [false, true, false]
+        const index = 0
+
+        const check = (checkedSections, index) => {
+            return checkedSections.map((checked, i) => i === index ? !checked : checked)
+        }
+
+        const result = check(checkedSections, index)
+        expect(result).toEqual([true, true, false])
+    })
+
+    test('CSS classes generation works correctly', () => {
+        const generateClasses = (disabled, animated, className) => {
+            return [
+                'accordion',
+                disabled && 'disabled',
+                animated && 'animated',
+                className || ''
+            ].filter(Boolean).join(' ')
+        }
+
+        expect(generateClasses(false, false, '')).toBe('accordion')
+        expect(generateClasses(true, false, '')).toBe('accordion disabled')
+        expect(generateClasses(false, true, '')).toBe('accordion animated')
+        expect(generateClasses(true, true, 'custom')).toBe('accordion disabled animated custom')
+    })
+
+    test('accessibility attributes generation works correctly', () => {
+        const generateAriaAttributes = (ariaLabel, disabled) => {
+            return {
+                'aria-label': ariaLabel || 'Accordion',
+                'aria-disabled': disabled,
+                role: 'region'
+            }
+        }
+
+        const result1 = generateAriaAttributes(null, false)
+        expect(result1['aria-label']).toBe('Accordion')
+        expect(result1['aria-disabled']).toBe(false)
+        expect(result1.role).toBe('region')
+
+        const result2 = generateAriaAttributes('Custom Accordion', true)
+        expect(result2['aria-label']).toBe('Custom Accordion')
+        expect(result2['aria-disabled']).toBe(true)
+    })
+
+    test('section ID generation works correctly', () => {
+        const generateSectionId = (section, index) => {
+            return section.id || `accordion-section-${index}`
+        }
+
+        expect(generateSectionId({ id: 'custom-id' }, 0)).toBe('custom-id')
+        expect(generateSectionId({}, 0)).toBe('accordion-section-0')
+        expect(generateSectionId({ id: null }, 1)).toBe('accordion-section-1')
+    })
+
+    test('callback handling works correctly', () => {
+        const mockOnCheck = jest.fn()
+        const mockOnToggle = jest.fn()
+        const mockOnSectionChange = jest.fn()
+
+        const simulateCheck = (index, newValue, section, onCheck, onSectionChange) => {
+            if (onCheck) {
+                onCheck(index, newValue, section?.id, section)
+            }
+            
+            if (onSectionChange) {
+                onSectionChange('check', index, newValue, section)
+            }
+        }
+
+        const simulateToggle = (index, newValue, section, onToggle, onSectionChange) => {
+            if (onToggle) {
+                onToggle(index, newValue, section)
+            }
+            
+            if (onSectionChange) {
+                onSectionChange('toggle', index, newValue, section)
+            }
+        }
+
+        const section = { id: 'test-section', title: 'Test' }
+
+        simulateCheck(0, true, section, mockOnCheck, mockOnSectionChange)
+        expect(mockOnCheck).toHaveBeenCalledWith(0, true, 'test-section', section)
+        expect(mockOnSectionChange).toHaveBeenCalledWith('check', 0, true, section)
+
+        simulateToggle(0, true, section, mockOnToggle, mockOnSectionChange)
+        expect(mockOnToggle).toHaveBeenCalledWith(0, true, section)
+        expect(mockOnSectionChange).toHaveBeenCalledWith('toggle', 0, true, section)
+    })
+
+    test('disabled state prevents interactions', () => {
+        const simulateInteraction = (disabled) => {
+            if (disabled) return false
+            return true
+        }
+
+        expect(simulateInteraction(true)).toBe(false)
+        expect(simulateInteraction(false)).toBe(true)
+    })
+})
+
+// AccordionSection tests
+describe('AccordionSection Component', () => {
+    test('keyboard navigation logic works correctly', () => {
+        const mockOnToggle = jest.fn()
+
+        const handleKeyDown = (event, disabled, onToggle) => {
+            if (disabled) return false
+            
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    if (onToggle) onToggle()
+                    return true
+                default:
+                    return false
+            }
+        }
+
+        // Test Enter key
+        expect(handleKeyDown({ key: 'Enter' }, false, mockOnToggle)).toBe(true)
+        expect(mockOnToggle).toHaveBeenCalled()
+
+        mockOnToggle.mockClear()
+
+        // Test Space key
+        expect(handleKeyDown({ key: ' ' }, false, mockOnToggle)).toBe(true)
+        expect(mockOnToggle).toHaveBeenCalled()
+
+        mockOnToggle.mockClear()
+
+        // Test disabled state
+        expect(handleKeyDown({ key: 'Enter' }, true, mockOnToggle)).toBe(false)
+        expect(mockOnToggle).not.toHaveBeenCalled()
+
+        // Test other keys
+        expect(handleKeyDown({ key: 'Tab' }, false, mockOnToggle)).toBe(false)
+    })
+
+    test('header click logic works correctly', () => {
+        const mockOnToggle = jest.fn()
+
+        const handleHeaderClick = (event, disabled, onToggle) => {
+            if (disabled) return false
+            
+            // Don't toggle if clicking on interactive elements
+            if (event.target.closest('.accordion-section-checker') || 
+                event.target.closest('.accordion-section--toolbar')) {
+                return false
+            }
+            
+            if (onToggle) onToggle()
+            return true
+        }
+
+        // Normal click
+        const normalEvent = { target: { closest: () => null } }
+        expect(handleHeaderClick(normalEvent, false, mockOnToggle)).toBe(true)
+        expect(mockOnToggle).toHaveBeenCalled()
+
+        mockOnToggle.mockClear()
+
+        // Click on checker
+        const checkerEvent = { target: { closest: (selector) => selector === '.accordion-section-checker' ? true : null } }
+        expect(handleHeaderClick(checkerEvent, false, mockOnToggle)).toBe(false)
+        expect(mockOnToggle).not.toHaveBeenCalled()
+
+        // Click on toolbar
+        const toolbarEvent = { target: { closest: (selector) => selector === '.accordion-section--toolbar' ? true : null } }
+        expect(handleHeaderClick(toolbarEvent, false, mockOnToggle)).toBe(false)
+        expect(mockOnToggle).not.toHaveBeenCalled()
+
+        // Disabled state
+        expect(handleHeaderClick(normalEvent, true, mockOnToggle)).toBe(false)
+        expect(mockOnToggle).not.toHaveBeenCalled()
+    })
+
+    test('section CSS classes generation works correctly', () => {
+        const generateSectionClasses = (open, disabled, animated, checked) => {
+            return [
+                'accordion-section',
+                open && 'open',
+                disabled && 'disabled',
+                animated && 'animated',
+                checked && 'checked'
+            ].filter(Boolean).join(' ')
+        }
+
+        expect(generateSectionClasses(false, false, false, false)).toBe('accordion-section')
+        expect(generateSectionClasses(true, false, false, false)).toBe('accordion-section open')
+        expect(generateSectionClasses(false, true, false, false)).toBe('accordion-section disabled')
+        expect(generateSectionClasses(false, false, true, false)).toBe('accordion-section animated')
+        expect(generateSectionClasses(false, false, false, true)).toBe('accordion-section checked')
+        expect(generateSectionClasses(true, true, true, true)).toBe('accordion-section open disabled animated checked')
+    })
+
+    test('checked icon logic works correctly', () => {
+        const getCheckedIcon = (checked) => {
+            return checked === undefined || checked === null ? 
+                null : 
+                checked === false ? "check_box_outline_blank" : "check_box"
+        }
+
+        expect(getCheckedIcon(undefined)).toBeNull()
+        expect(getCheckedIcon(null)).toBeNull()
+        expect(getCheckedIcon(false)).toBe("check_box_outline_blank")
+        expect(getCheckedIcon(true)).toBe("check_box")
+    })
+
+    test('toggler icon logic works correctly', () => {
+        const getTogglerIcon = (open) => {
+            return open ? "expand_less" : "expand_more"
+        }
+
+        expect(getTogglerIcon(true)).toBe("expand_less")
+        expect(getTogglerIcon(false)).toBe("expand_more")
+    })
+})