ywana-core8 0.1.74 → 0.1.76

package/src/html/button.test.js

@@ -0,0 +1,422 @@
+import React from 'react'
+import { Button, ActionButton } from './button'
+
+// Pruebas unitarias para los componentes Button
+describe('Button 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('Button Component', () => {
+        test('component exports correctly', () => {
+            expect(Button).toBeDefined()
+            expect(typeof Button).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Button.propTypes).toBeDefined()
+            expect(Button.propTypes.id).toBeDefined()
+            expect(Button.propTypes.label).toBeDefined()
+            expect(Button.propTypes.icon).toBeDefined()
+            expect(Button.propTypes.action).toBeDefined()
+            expect(Button.propTypes.disabled).toBeDefined()
+            expect(Button.propTypes.loading).toBeDefined()
+            expect(Button.propTypes.outlined).toBeDefined()
+            expect(Button.propTypes.raised).toBeDefined()
+            expect(Button.propTypes.size).toBeDefined()
+            expect(Button.propTypes.type).toBeDefined()
+            expect(Button.propTypes.className).toBeDefined()
+            expect(Button.propTypes.ariaLabel).toBeDefined()
+            expect(Button.propTypes.onClick).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Button.defaultProps).toBeDefined()
+            expect(Button.defaultProps.disabled).toBe(false)
+            expect(Button.defaultProps.loading).toBe(false)
+            expect(Button.defaultProps.outlined).toBe(false)
+            expect(Button.defaultProps.raised).toBe(false)
+            expect(Button.defaultProps.size).toBe('normal')
+            expect(Button.defaultProps.type).toBe('button')
+            expect(Button.defaultProps.className).toBe('')
+        })
+
+        test('warns when accessibility props are missing', () => {
+            const validateAccessibility = (label, icon, ariaLabel) => {
+                if (!label && !icon && !ariaLabel) {
+                    console.warn('Button component: label, icon, or ariaLabel prop is required for accessibility')
+                }
+            }
+            
+            validateAccessibility(null, null, null)
+            expect(console.warn).toHaveBeenCalledWith('Button component: label, icon, or ariaLabel prop is required for accessibility')
+
+            console.warn.mockClear()
+            validateAccessibility('Test Label', null, null)
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('generates correct CSS classes for different variants', () => {
+            const generateClasses = (raised, outlined, size, disabled, loading, className) => {
+                const variant = raised ? 'raised' : outlined ? 'outlined' : 'normal'
+                const state = disabled ? 'disabled' : loading ? 'loading' : ''
+                
+                return [
+                    'btn',
+                    variant,
+                    size,
+                    state,
+                    className || ''
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, 'normal', false, false, '')).toBe('btn normal normal')
+            expect(generateClasses(true, false, 'normal', false, false, '')).toBe('btn raised normal')
+            expect(generateClasses(false, true, 'normal', false, false, '')).toBe('btn outlined normal')
+            expect(generateClasses(false, false, 'small', false, false, '')).toBe('btn normal small')
+            expect(generateClasses(false, false, 'normal', true, false, '')).toBe('btn normal normal disabled')
+            expect(generateClasses(false, false, 'normal', false, true, '')).toBe('btn normal normal loading')
+            expect(generateClasses(false, false, 'normal', false, false, 'custom')).toBe('btn normal normal custom')
+        })
+
+        test('click handler works correctly', () => {
+            const mockAction = jest.fn()
+            const mockOnClick = jest.fn()
+            
+            const simulateClick = (disabled, loading, action, onClick, type) => {
+                const event = {
+                    stopPropagation: jest.fn(),
+                    preventDefault: jest.fn()
+                }
+                
+                if (!disabled && !loading) {
+                    if (type !== 'submit') {
+                        event.stopPropagation()
+                        event.preventDefault()
+                    }
+                    
+                    if (action) action(event)
+                    if (onClick) onClick(event)
+                }
+                
+                return event
+            }
+
+            // Click normal
+            const event1 = simulateClick(false, false, mockAction, mockOnClick, 'button')
+            expect(event1.stopPropagation).toHaveBeenCalled()
+            expect(event1.preventDefault).toHaveBeenCalled()
+            expect(mockAction).toHaveBeenCalledWith(event1)
+            expect(mockOnClick).toHaveBeenCalledWith(event1)
+
+            mockAction.mockClear()
+            mockOnClick.mockClear()
+
+            // Click con disabled
+            simulateClick(true, false, mockAction, mockOnClick, 'button')
+            expect(mockAction).not.toHaveBeenCalled()
+            expect(mockOnClick).not.toHaveBeenCalled()
+
+            // Click con loading
+            simulateClick(false, true, mockAction, mockOnClick, 'button')
+            expect(mockAction).not.toHaveBeenCalled()
+            expect(mockOnClick).not.toHaveBeenCalled()
+
+            // Submit button (no preventDefault)
+            const event2 = simulateClick(false, false, mockAction, mockOnClick, 'submit')
+            expect(event2.preventDefault).not.toHaveBeenCalled()
+            expect(mockAction).toHaveBeenCalledWith(event2)
+        })
+
+        test('keyboard event handling works correctly', () => {
+            const mockClick = jest.fn()
+            const mockOnKeyDown = jest.fn()
+            
+            const simulateKeyDown = (key, type, click, onKeyDown) => {
+                const event = {
+                    key,
+                    preventDefault: jest.fn()
+                }
+
+                if (event.key === 'Enter' || event.key === ' ') {
+                    if (type === 'button') {
+                        event.preventDefault()
+                        click(event)
+                    }
+                }
+                if (onKeyDown) onKeyDown(event)
+
+                return event
+            }
+
+            // Enter key on button
+            const enterEvent = simulateKeyDown('Enter', 'button', mockClick, mockOnKeyDown)
+            expect(enterEvent.preventDefault).toHaveBeenCalled()
+            expect(mockClick).toHaveBeenCalledWith(enterEvent)
+            expect(mockOnKeyDown).toHaveBeenCalledWith(enterEvent)
+
+            mockClick.mockClear()
+            mockOnKeyDown.mockClear()
+
+            // Space key on button
+            const spaceEvent = simulateKeyDown(' ', 'button', mockClick, mockOnKeyDown)
+            expect(spaceEvent.preventDefault).toHaveBeenCalled()
+            expect(mockClick).toHaveBeenCalledWith(spaceEvent)
+
+            mockClick.mockClear()
+
+            // Enter key on submit (should not prevent default)
+            const submitEvent = simulateKeyDown('Enter', 'submit', mockClick, mockOnKeyDown)
+            expect(submitEvent.preventDefault).not.toHaveBeenCalled()
+            expect(mockClick).not.toHaveBeenCalled()
+        })
+
+        test('accessibility attributes generation works correctly', () => {
+            const generateAriaAttributes = (ariaLabel, icon, label, disabled, loading, tooltip, id) => {
+                return {
+                    'aria-label': ariaLabel || (icon && !label ? `${icon} button` : undefined),
+                    'aria-disabled': disabled || loading,
+                    'aria-busy': loading,
+                    'aria-describedby': tooltip ? `${id}-tooltip` : undefined
+                }
+            }
+
+            const basic = generateAriaAttributes(null, null, 'Test Label', false, false, null, 'test')
+            expect(basic['aria-label']).toBeUndefined()
+            expect(basic['aria-disabled']).toBe(false)
+            expect(basic['aria-busy']).toBe(false)
+
+            const withIcon = generateAriaAttributes(null, 'add', null, false, false, null, 'test')
+            expect(basic['aria-label']).toBeUndefined()
+
+            const withAriaLabel = generateAriaAttributes('Custom ARIA', null, null, false, false, null, 'test')
+            expect(withAriaLabel['aria-label']).toBe('Custom ARIA')
+
+            const disabled = generateAriaAttributes(null, null, 'Test', true, false, null, 'test')
+            expect(disabled['aria-disabled']).toBe(true)
+
+            const loading = generateAriaAttributes(null, null, 'Test', false, true, null, 'test')
+            expect(loading['aria-busy']).toBe(true)
+            expect(loading['aria-disabled']).toBe(true)
+        })
+
+        test('icon configuration works correctly', () => {
+            const getIconProps = (loading, icon, size, disabled) => {
+                return {
+                    icon: loading ? 'hourglass_empty' : icon,
+                    size: size === 'small' ? 'small' : size === 'large' ? 'normal' : 'small',
+                    disabled: disabled || loading,
+                    className: loading ? 'loading-icon' : ''
+                }
+            }
+
+            const normal = getIconProps(false, 'add', 'normal', false)
+            expect(normal.icon).toBe('add')
+            expect(normal.size).toBe('small')
+            expect(normal.disabled).toBe(false)
+            expect(normal.className).toBe('')
+
+            const loadingIcon = getIconProps(true, 'add', 'normal', false)
+            expect(loadingIcon.icon).toBe('hourglass_empty')
+            expect(loadingIcon.disabled).toBe(true)
+            expect(loadingIcon.className).toBe('loading-icon')
+
+            const smallSize = getIconProps(false, 'add', 'small', false)
+            expect(smallSize.size).toBe('small')
+
+            const largeSize = getIconProps(false, 'add', 'large', false)
+            expect(largeSize.size).toBe('normal')
+        })
+    })
+
+    describe('ActionButton Component', () => {
+        test('component exports correctly', () => {
+            expect(ActionButton).toBeDefined()
+            expect(typeof ActionButton).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(ActionButton.propTypes).toBeDefined()
+            expect(ActionButton.propTypes.states).toBeDefined()
+            expect(ActionButton.propTypes.state).toBeDefined()
+            expect(ActionButton.propTypes.disabled).toBeDefined()
+            expect(ActionButton.propTypes.className).toBeDefined()
+            expect(ActionButton.propTypes.onStateChange).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(ActionButton.defaultProps).toBeDefined()
+            expect(ActionButton.defaultProps.disabled).toBe(false)
+            expect(ActionButton.defaultProps.className).toBe('')
+        })
+
+        test('warns when required props are missing', () => {
+            const validateStates = (states) => {
+                if (!states || typeof states !== 'object') {
+                    console.warn('ActionButton component: states prop is required and must be an object')
+                    return null
+                }
+                return true
+            }
+
+            const validateState = (state) => {
+                if (!state) {
+                    console.warn('ActionButton component: state prop is required')
+                    return null
+                }
+                return true
+            }
+
+            expect(validateStates(null)).toBeNull()
+            expect(console.warn).toHaveBeenCalledWith('ActionButton component: states prop is required and must be an object')
+
+            console.warn.mockClear()
+            expect(validateState(null)).toBeNull()
+            expect(console.warn).toHaveBeenCalledWith('ActionButton component: state prop is required')
+        })
+
+        test('state synchronization works correctly', () => {
+            let currentState = null
+            
+            const syncState = (externalState) => {
+                currentState = externalState
+            }
+
+            syncState('normal')
+            expect(currentState).toBe('normal')
+
+            syncState('running')
+            expect(currentState).toBe('running')
+        })
+
+        test('execution logic works correctly', async () => {
+            const mockAction = jest.fn().mockResolvedValue('success')
+            const mockOnStateChange = jest.fn()
+            
+            const states = {
+                normal: { icon: 'add', label: 'Start', action: mockAction },
+                success: { icon: 'check', label: 'Done' }
+            }
+
+            const simulateExecution = async (disabled, isExecuting, currentState, states, onStateChange) => {
+                if (disabled || isExecuting) return
+                
+                const stateConfig = states[currentState]
+                if (!stateConfig) return
+
+                let newState = null
+                if (stateConfig.action) {
+                    newState = await stateConfig.action()
+                    if (newState && states[newState]) {
+                        if (onStateChange) onStateChange(newState)
+                    }
+                }
+                return newState
+            }
+
+            // Normal execution
+            const result = await simulateExecution(false, false, 'normal', states, mockOnStateChange)
+            expect(mockAction).toHaveBeenCalled()
+            expect(mockOnStateChange).toHaveBeenCalledWith('success')
+            expect(result).toBe('success')
+
+            mockAction.mockClear()
+            mockOnStateChange.mockClear()
+
+            // Disabled execution
+            await simulateExecution(true, false, 'normal', states, mockOnStateChange)
+            expect(mockAction).not.toHaveBeenCalled()
+            expect(mockOnStateChange).not.toHaveBeenCalled()
+
+            // Already executing
+            await simulateExecution(false, true, 'normal', states, mockOnStateChange)
+            expect(mockAction).not.toHaveBeenCalled()
+        })
+
+        test('error handling works correctly', async () => {
+            const mockAction = jest.fn().mockRejectedValue(new Error('Test error'))
+            const mockOnStateChange = jest.fn()
+            
+            const states = {
+                normal: { icon: 'add', label: 'Start', action: mockAction },
+                error: { icon: 'error', label: 'Error' }
+            }
+
+            const simulateExecutionWithError = async (currentState, states, onStateChange) => {
+                const stateConfig = states[currentState]
+                if (!stateConfig) return
+
+                try {
+                    if (stateConfig.action) {
+                        await stateConfig.action()
+                    }
+                } catch (error) {
+                    console.error('ActionButton execution error:', error)
+                    if (states.error) {
+                        if (onStateChange) onStateChange('error')
+                    }
+                }
+            }
+
+            // Mock console.error
+            jest.spyOn(console, 'error').mockImplementation(() => {})
+
+            await simulateExecutionWithError('normal', states, mockOnStateChange)
+            expect(mockAction).toHaveBeenCalled()
+            expect(console.error).toHaveBeenCalledWith('ActionButton execution error:', expect.any(Error))
+            expect(mockOnStateChange).toHaveBeenCalledWith('error')
+
+            console.error.mockRestore()
+        })
+
+        test('autoexec functionality works correctly', () => {
+            const mockExecute = jest.fn()
+            
+            const simulateAutoexec = (currentState, states, isExecuting, execute) => {
+                if (states[currentState] && states[currentState].autoexec && !isExecuting) {
+                    execute()
+                }
+            }
+
+            const states = {
+                normal: { icon: 'add', label: 'Start' },
+                running: { icon: 'rotate', label: 'Running', autoexec: true }
+            }
+
+            // Normal state (no autoexec)
+            simulateAutoexec('normal', states, false, mockExecute)
+            expect(mockExecute).not.toHaveBeenCalled()
+
+            // Running state (with autoexec)
+            simulateAutoexec('running', states, false, mockExecute)
+            expect(mockExecute).toHaveBeenCalled()
+
+            mockExecute.mockClear()
+
+            // Running state but already executing
+            simulateAutoexec('running', states, true, mockExecute)
+            expect(mockExecute).not.toHaveBeenCalled()
+        })
+    })
+})

package/src/html/checkbox.css

@@ -4,6 +4,16 @@
   display: flex;
   align-items: center;
   position: relative;
+  cursor: pointer;
+}
+
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.checkbox.readonly {
+  cursor: default;
 }
 
 .checkbox .checkmark {
@@ -18,10 +28,24 @@
   padding-bottom: .1rem;
 }
 
-.checkbox.readonly>.checkmark {
+.checkbox.readonly > .checkmark {
   border: solid 1px var(--text-color-light);
 }
 
+.checkbox.disabled > .checkmark {
+  border: solid 1px var(--text-color-lighter);
+  background-color: var(--background-color);
+}
+
+.checkbox.error > .checkmark {
+  border: solid 2px var(--danger-color);
+}
+
+.checkbox:focus-within > .checkmark {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
 .checkbox .checkmark:after {
   content: "";
   width: 0.3rem;
@@ -39,6 +63,14 @@
   border-color: var(--text-color-lighter);
 }
 
+.checkbox.disabled .checkmark:after {
+  border-color: var(--text-color-lighter);
+}
+
+.checkbox.error .checkmark:after {
+  border-color: var(--danger-color);
+}
+
 
 .checkbox>input {
   position: absolute;
@@ -59,6 +91,46 @@ input:checked~.checkmark:after {
   font-weight: normal;
 }
 
-.checkbox.readonly>label {
+.checkbox.readonly > label {
   color: var(--text-color-light);
+}
+
+.checkbox.disabled > label {
+  color: var(--text-color-lighter);
+}
+
+.checkbox.error > label {
+  color: var(--danger-color);
+}
+
+/* Error message styling */
+.checkbox .error-message {
+  color: var(--danger-color);
+  font-size: 0.8rem;
+  margin-left: 2.1rem;
+  margin-top: 0.2rem;
+  display: block;
+}
+
+/* Indeterminate state styling */
+.checkbox input:indeterminate ~ .checkmark:after {
+  content: "";
+  width: 0.8rem;
+  height: 0.2rem;
+  border: none;
+  background-color: var(--primary-color);
+  transform: none;
+  display: block;
+}
+
+.checkbox.readonly input:indeterminate ~ .checkmark:after {
+  background-color: var(--text-color-lighter);
+}
+
+.checkbox.disabled input:indeterminate ~ .checkmark:after {
+  background-color: var(--text-color-lighter);
+}
+
+.checkbox.error input:indeterminate ~ .checkmark:after {
+  background-color: var(--danger-color);
 }