ywana-core8 0.1.75 → 0.1.76

package/src/html/property.test.js

@@ -1,8 +1,355 @@
 import React, { useState } from 'react'
 import { Property } from './property'
 
-const PropertyTest = (prop) => {
+// Pruebas unitarias para el componente Property mejorado
+describe('Enhanced Property Component', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
 
+    beforeEach(() => {
+        jest.clearAllMocks()
+
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+        // Mock de navigator.clipboard
+        global.navigator = {
+            clipboard: {
+                writeText: jest.fn().mockResolvedValue(undefined)
+            }
+        }
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    // Property Component Tests
+    describe('Property Component', () => {
+        test('component exports correctly', () => {
+            expect(Property).toBeDefined()
+            expect(typeof Property).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Property.propTypes).toBeDefined()
+            expect(Property.propTypes.id).toBeDefined()
+            expect(Property.propTypes.className).toBeDefined()
+            expect(Property.propTypes.label).toBeDefined()
+            expect(Property.propTypes.name).toBeDefined()
+            expect(Property.propTypes.initial).toBeDefined()
+            expect(Property.propTypes.value).toBeDefined()
+            expect(Property.propTypes.editable).toBeDefined()
+            expect(Property.propTypes.onChange).toBeDefined()
+            expect(Property.propTypes.options).toBeDefined()
+            expect(Property.propTypes.type).toBeDefined()
+            expect(Property.propTypes.disabled).toBeDefined()
+            expect(Property.propTypes.required).toBeDefined()
+            expect(Property.propTypes.multiline).toBeDefined()
+            expect(Property.propTypes.validateValue).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Property.defaultProps).toBeDefined()
+            expect(Property.defaultProps.editable).toBe(false)
+            expect(Property.defaultProps.type).toBe('text')
+            expect(Property.defaultProps.disabled).toBe(false)
+            expect(Property.defaultProps.required).toBe(false)
+            expect(Property.defaultProps.multiline).toBe(false)
+            expect(Property.defaultProps.rows).toBe(3)
+            expect(Property.defaultProps.size).toBe('medium')
+            expect(Property.defaultProps.variant).toBe('default')
+            expect(Property.defaultProps.layout).toBe('horizontal')
+            expect(Property.defaultProps.nameWidth).toBe('50%')
+            expect(Property.defaultProps.copyable).toBe(false)
+            expect(Property.defaultProps.clearable).toBe(true)
+        })
+
+        test('validates props correctly', () => {
+            const validateProps = (options) => {
+                if (options && !Array.isArray(options)) {
+                    console.warn('Property: options prop must be an array')
+                }
+            }
+
+            // Invalid options prop
+            validateProps('not an array')
+            expect(console.warn).toHaveBeenCalledWith('Property: options prop must be an array')
+
+            console.warn.mockClear()
+
+            // Valid options prop
+            validateProps([{ label: 'Option 1', value: '1' }])
+            expect(console.warn).not.toHaveBeenCalled()
+
+            // Null options (valid)
+            validateProps(null)
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('validates value correctly', () => {
+            const validateValueFunc = (val, required, minLength, maxLength, pattern, validateValue) => {
+                if (!val && required) {
+                    return { isValid: false, error: 'This field is required' }
+                }
+
+                if (val && minLength && val.length < minLength) {
+                    return { isValid: false, error: `Minimum ${minLength} characters required` }
+                }
+
+                if (val && maxLength && val.length > maxLength) {
+                    return { isValid: false, error: `Maximum ${maxLength} characters allowed` }
+                }
+
+                if (val && pattern) {
+                    const regex = new RegExp(pattern)
+                    if (!regex.test(val)) {
+                        return { isValid: false, error: 'Invalid format' }
+                    }
+                }
+
+                if (validateValue) {
+                    const customValidation = validateValue(val)
+                    if (customValidation && !customValidation.isValid) {
+                        return customValidation
+                    }
+                }
+
+                return { isValid: true }
+            }
+
+            // Required field empty
+            expect(validateValueFunc('', true, null, null, null, null))
+                .toEqual({ isValid: false, error: 'This field is required' })
+
+            // Min length validation
+            expect(validateValueFunc('ab', false, 3, null, null, null))
+                .toEqual({ isValid: false, error: 'Minimum 3 characters required' })
+
+            // Max length validation
+            expect(validateValueFunc('abcdef', false, null, 5, null, null))
+                .toEqual({ isValid: false, error: 'Maximum 5 characters allowed' })
+
+            // Pattern validation
+            expect(validateValueFunc('invalid', false, null, null, '^[0-9]+$', null))
+                .toEqual({ isValid: false, error: 'Invalid format' })
+
+            // Custom validation
+            const customValidator = () => ({ isValid: false, error: 'Custom error' })
+            expect(validateValueFunc('test', false, null, null, null, customValidator))
+                .toEqual({ isValid: false, error: 'Custom error' })
+
+            // Valid value
+            expect(validateValueFunc('valid', false, null, null, null, null))
+                .toEqual({ isValid: true })
+        })
+
+        test('handles change correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockOnValidationError = jest.fn()
+
+            const change = (event, disabled, readOnly, validateValueFunc, onValidationError, onChange, id) => {
+                if (disabled || readOnly) return
+
+                const newValue = event.target.value
+
+                // Validate value
+                const validation = validateValueFunc(newValue)
+
+                if (!validation.isValid && onValidationError) {
+                    onValidationError(validation.error, newValue)
+                }
+
+                if (onChange) {
+                    onChange(id, newValue)
+                }
+            }
+
+            const mockEvent = { target: { value: 'new value' } }
+            const mockValidateFunc = jest.fn().mockReturnValue({ isValid: true })
+
+            // Normal change
+            change(mockEvent, false, false, mockValidateFunc, mockOnValidationError, mockOnChange, 'prop1')
+            expect(mockOnChange).toHaveBeenCalledWith('prop1', 'new value')
+            expect(mockValidateFunc).toHaveBeenCalledWith('new value')
+
+            mockOnChange.mockClear()
+
+            // Disabled change
+            change(mockEvent, true, false, mockValidateFunc, mockOnValidationError, mockOnChange, 'prop1')
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // ReadOnly change
+            change(mockEvent, false, true, mockValidateFunc, mockOnValidationError, mockOnChange, 'prop1')
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // Validation error
+            const mockValidateFuncError = jest.fn().mockReturnValue({ isValid: false, error: 'Validation error' })
+            change(mockEvent, false, false, mockValidateFuncError, mockOnValidationError, mockOnChange, 'prop1')
+            expect(mockOnValidationError).toHaveBeenCalledWith('Validation error', 'new value')
+        })
+
+        test('handles clear correctly', () => {
+            const mockOnChange = jest.fn()
+
+            const clear = (disabled, readOnly, onChange, id) => {
+                if (disabled || readOnly) return
+
+                if (onChange) onChange(id, "")
+            }
+
+            // Normal clear
+            clear(false, false, mockOnChange, 'prop1')
+            expect(mockOnChange).toHaveBeenCalledWith('prop1', '')
+
+            mockOnChange.mockClear()
+
+            // Disabled clear
+            clear(true, false, mockOnChange, 'prop1')
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // ReadOnly clear
+            clear(false, true, mockOnChange, 'prop1')
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('handles copy correctly', async () => {
+            const handleCopy = async (copyable, value) => {
+                if (!copyable || !value) return
+
+                try {
+                    await navigator.clipboard.writeText(value)
+                } catch (error) {
+                    console.warn('Failed to copy property value:', error)
+                }
+            }
+
+            // Normal copy
+            await handleCopy(true, 'test value')
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test value')
+
+            navigator.clipboard.writeText.mockClear()
+
+            // Copy disabled
+            await handleCopy(false, 'test value')
+            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+
+            // Empty value
+            await handleCopy(true, '')
+            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+        })
+
+        test('processes value with options correctly', () => {
+            const processValue = (value, initial, options) => {
+                let value2 = value || initial || ''
+
+                if (options && Array.isArray(options)) {
+                    const opt = options.find(option => option.value == value2)
+                    if (opt) value2 = opt.label
+                }
+
+                return value2
+            }
+
+            const options = [
+                { label: 'Option One', value: '1' },
+                { label: 'Option Two', value: '2' }
+            ]
+
+            // Value with options
+            expect(processValue('1', '', options)).toBe('Option One')
+            expect(processValue('2', '', options)).toBe('Option Two')
+
+            // Value not in options
+            expect(processValue('3', '', options)).toBe('3')
+
+            // No options
+            expect(processValue('test', '', null)).toBe('test')
+
+            // Initial value
+            expect(processValue('', 'initial', options)).toBe('initial')
+
+            // Empty value and initial
+            expect(processValue('', '', options)).toBe('')
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (id, size, variant, layout, disabled, readOnly, required, isFocused, error, isValid, loading, skeleton, copyable, className) => {
+                return [
+                    'property',
+                    `property-${id}`,
+                    `property--${size}`,
+                    `property--${variant}`,
+                    `property--${layout}`,
+                    disabled && 'property--disabled',
+                    readOnly && 'property--readonly',
+                    required && 'property--required',
+                    isFocused && 'property--focused',
+                    error && 'property--error',
+                    !isValid && 'property--invalid',
+                    loading && 'property--loading',
+                    skeleton && 'property--skeleton',
+                    copyable && 'property--copyable',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses('prop1', 'medium', 'default', 'horizontal', false, false, false, false, null, true, false, false, false, ''))
+                .toBe('property property-prop1 property--medium property--default property--horizontal')
+
+            expect(generateClasses('prop2', 'large', 'outlined', 'vertical', true, true, true, true, 'Error', false, true, true, true, 'custom'))
+                .toBe('property property-prop2 property--large property--outlined property--vertical property--disabled property--readonly property--required property--focused property--error property--invalid property--loading property--skeleton property--copyable custom')
+        })
+
+        test('handles keyboard events correctly', () => {
+            const handleKeyDown = (event, multiline, inputRef) => {
+                if (event.key === 'Enter' && !multiline) {
+                    event.preventDefault()
+                    if (inputRef.current) inputRef.current.blur()
+                }
+
+                if (event.key === 'Escape') {
+                    if (inputRef.current) inputRef.current.blur()
+                }
+            }
+
+            const mockEvent = {
+                preventDefault: jest.fn(),
+                key: 'Enter'
+            }
+            const mockInputRef = {
+                current: {
+                    blur: jest.fn()
+                }
+            }
+
+            // Enter key (not multiline)
+            handleKeyDown(mockEvent, false, mockInputRef)
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockInputRef.current.blur).toHaveBeenCalled()
+
+            mockEvent.preventDefault.mockClear()
+            mockInputRef.current.blur.mockClear()
+
+            // Enter key (multiline)
+            handleKeyDown(mockEvent, true, mockInputRef)
+            expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+
+            // Escape key
+            const escapeEvent = { ...mockEvent, key: 'Escape' }
+            handleKeyDown(escapeEvent, false, mockInputRef)
+            expect(mockInputRef.current.blur).toHaveBeenCalled()
+        })
+    })
+})
+
+// Original test component (maintaining compatibility)
+const PropertyTest = () => {
     const [form, setForm] = useState({
         name: 'John',
         address: 'Porto Colon'
@@ -19,4 +366,6 @@ const PropertyTest = (prop) => {
            <Property id="address" label="Address" initial="Porto Colon" value={form.address} editable={true} onChange={change}/>
         </>
     )
-}
+}
+
+export default PropertyTest

package/src/html/radio-visual-test.js

@@ -0,0 +1,289 @@
+import React, { useState } from 'react'
+import { RadioButton, RadioGroup } from './radio'
+
+/**
+ * Componente de prueba visual para verificar la apariencia de los radio buttons
+ */
+export const RadioVisualTest = () => {
+    const [selectedValue, setSelectedValue] = useState('option1')
+    const [groupValue, setGroupValue] = useState('medium')
+
+    return (
+        <div style={{ 
+            padding: '2rem', 
+            maxWidth: '800px',
+            fontFamily: 'Arial, sans-serif'
+        }}>
+            <h1>🔧 Prueba Visual de Radio Buttons</h1>
+            
+            <div style={{ 
+                background: '#fff3cd', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                border: '1px solid #ffeaa7',
+                marginBottom: '2rem'
+            }}>
+                <h3>🎯 Verificación Visual</h3>
+                <p>Verifica que los radio buttons se vean correctamente:</p>
+                <ul>
+                    <li><strong>Círculo externo:</strong> Borde de 2px, tamaño 1.2rem</li>
+                    <li><strong>Indicador interno:</strong> Círculo de 0.4rem, perfectamente centrado</li>
+                    <li><strong>Espaciado:</strong> Espacio uniforme entre borde e indicador</li>
+                    <li><strong>Alineación:</strong> Centrado perfecto sin desplazamientos</li>
+                </ul>
+            </div>
+
+            {/* Prueba básica de estados */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Estados Básicos</h3>
+                <div style={{ 
+                    background: '#ffffff', 
+                    padding: '2rem', 
+                    borderRadius: '8px',
+                    border: '2px solid #007bff',
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+                    gap: '1.5rem'
+                }}>
+                    <div style={{ textAlign: 'center' }}>
+                        <h4>No Seleccionado</h4>
+                        <RadioButton
+                            id="unselected"
+                            name="test-basic"
+                            label="Opción no seleccionada"
+                            value="unselected"
+                            checked={false}
+                            onChange={() => {}}
+                        />
+                        <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                            Solo círculo externo con borde
+                        </p>
+                    </div>
+
+                    <div style={{ textAlign: 'center' }}>
+                        <h4>Seleccionado</h4>
+                        <RadioButton
+                            id="selected"
+                            name="test-basic"
+                            label="Opción seleccionada"
+                            value="selected"
+                            checked={true}
+                            onChange={() => {}}
+                        />
+                        <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                            Círculo externo + indicador interno centrado
+                        </p>
+                    </div>
+
+                    <div style={{ textAlign: 'center' }}>
+                        <h4>Deshabilitado</h4>
+                        <RadioButton
+                            id="disabled"
+                            name="test-basic"
+                            label="Opción deshabilitada"
+                            value="disabled"
+                            checked={true}
+                            disabled={true}
+                            onChange={() => {}}
+                        />
+                        <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                            Colores atenuados, no interactivo
+                        </p>
+                    </div>
+
+                    <div style={{ textAlign: 'center' }}>
+                        <h4>Con Error</h4>
+                        <RadioButton
+                            id="error"
+                            name="test-basic"
+                            label="Opción con error"
+                            value="error"
+                            checked={true}
+                            error="Error de validación"
+                            onChange={() => {}}
+                        />
+                        <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                            Colores de error (rojo)
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Prueba interactiva */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Prueba Interactiva</h3>
+                <div style={{ 
+                    background: '#ffffff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <p><strong>Selecciona diferentes opciones y verifica la apariencia:</strong></p>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
+                        <RadioButton
+                            id="option1"
+                            name="interactive"
+                            label="Primera opción"
+                            value="option1"
+                            checked={selectedValue === 'option1'}
+                            onChange={(id, value) => setSelectedValue(value)}
+                        />
+                        <RadioButton
+                            id="option2"
+                            name="interactive"
+                            label="Segunda opción"
+                            value="option2"
+                            checked={selectedValue === 'option2'}
+                            onChange={(id, value) => setSelectedValue(value)}
+                        />
+                        <RadioButton
+                            id="option3"
+                            name="interactive"
+                            label="Tercera opción"
+                            value="option3"
+                            checked={selectedValue === 'option3'}
+                            onChange={(id, value) => setSelectedValue(value)}
+                        />
+                    </div>
+                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
+                        <strong>Valor seleccionado:</strong> {selectedValue}
+                    </p>
+                </div>
+            </section>
+
+            {/* RadioGroup */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>RadioGroup</h3>
+                <div style={{ 
+                    background: '#ffffff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <RadioGroup
+                        id="size-group"
+                        label="Tamaño de la interfaz"
+                        value={groupValue}
+                        onChange={(id, value) => setGroupValue(value)}
+                        options={[
+                            { id: 'small', label: 'Pequeño', value: 'small' },
+                            { id: 'medium', label: 'Mediano', value: 'medium' },
+                            { id: 'large', label: 'Grande', value: 'large' }
+                        ]}
+                    />
+                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
+                        <strong>Valor del grupo:</strong> {groupValue}
+                    </p>
+                </div>
+            </section>
+
+            {/* Comparación de tamaños */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Verificación de Dimensiones</h3>
+                <div style={{ 
+                    background: '#f8f9fa', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                            <span>No seleccionado:</span>
+                            <RadioButton
+                                id="size-test-1"
+                                name="size-test"
+                                value="test1"
+                                checked={false}
+                                onChange={() => {}}
+                            />
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                            <span>Seleccionado:</span>
+                            <RadioButton
+                                id="size-test-2"
+                                name="size-test"
+                                value="test2"
+                                checked={true}
+                                onChange={() => {}}
+                            />
+                        </div>
+                    </div>
+                    
+                    <div style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
+                        <h4>Especificaciones esperadas:</h4>
+                        <ul>
+                            <li><strong>Círculo externo:</strong> 1.2rem × 1.2rem, borde 2px</li>
+                            <li><strong>Indicador interno:</strong> 0.4rem × 0.4rem, perfectamente centrado</li>
+                            <li><strong>Espaciado:</strong> ~0.2rem entre borde e indicador</li>
+                            <li><strong>Alineación:</strong> Sin desplazamientos laterales</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            {/* Información de debug */}
+            <section>
+                <h3>📋 Información de Debug</h3>
+                <div style={{ 
+                    background: '#e9ecef', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #adb5bd'
+                }}>
+                    <h4>¿Qué deberías ver?</h4>
+                    <ul style={{ marginBottom: '1rem' }}>
+                        <li><strong>Radio no seleccionado:</strong> Círculo con borde, fondo blanco/claro</li>
+                        <li><strong>Radio seleccionado:</strong> Círculo con borde + punto interno centrado</li>
+                        <li><strong>Indicador interno:</strong> Círculo sólido, bien centrado, con espacio uniforme</li>
+                        <li><strong>Estados hover/focus:</strong> Indicadores visuales claros</li>
+                    </ul>
+
+                    <h4>Si el indicador se ve mal:</h4>
+                    <ul style={{ marginBottom: '1rem' }}>
+                        <li>Verifica que el CSS se esté aplicando correctamente</li>
+                        <li>Inspecciona el elemento en DevTools</li>
+                        <li>Revisa que no hay CSS conflictivo</li>
+                        <li>Asegúrate de que las variables CSS están definidas</li>
+                    </ul>
+
+                    <h4>CSS aplicado:</h4>
+                    <pre style={{ 
+                        background: '#ffffff', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        fontFamily: 'monospace',
+                        fontSize: '0.8rem',
+                        overflow: 'auto'
+                    }}>
+{`.radio .checkmark {
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 2px solid var(--primary-color);
+  border-radius: 50%;
+  position: relative;
+}
+
+.radio .checkmark:after {
+  content: "";
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background-color: var(--primary-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+input:checked ~ .checkmark:after {
+  display: block;
+}`}
+                    </pre>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default RadioVisualTest