ywana-core8 0.1.75 → 0.1.77

package/src/html/form.js

@@ -1,67 +1,203 @@
-import React, { Fragment, useState, useEffect } from 'react'
-import { Text } from './text';
+import React, { Fragment, useState, useEffect, useCallback, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Text } from './text'
 import './form.css'
 
 /**
- * Form
+ * Form component with enhanced validation and accessibility
  */
-export const Form = ({ title, columns = 1, children, outlined, onChange }) => {
+export const Form = (props) => {
+    const {
+        id,
+        title,
+        columns = 1,
+        children,
+        outlined = false,
+        disabled = false,
+        loading = false,
+        autoComplete = 'on',
+        noValidate = false,
+        className,
+        onChange,
+        onSubmit,
+        onReset,
+        onValidationChange,
+        ...restProps
+    } = props
 
     const [fields, setFields] = useState([])
-    const isEmpty = (value) => value === void 0 || value === null || value === '';
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const formRef = useRef(null)
 
+    // Validate required props
+    if (!children) {
+        console.warn('Form component: children prop is required')
+    }
+
+    const isEmpty = (value) => value === void 0 || value === null || value === ''
+
+    // Initialize fields from children
     useEffect(() => {
         const initFields = React.Children
             .toArray(children)
             .filter(child => child !== null && child !== '')
             .map(child => {
+                if (!child.props) return null
                 const { id, value, required = false, validation } = child.props
-                const valid = required ? validation ? validation(value) : !isEmpty(value) : true
+                if (!id) return null
+
+                const valid = required ?
+                    validation ? validation(value) : !isEmpty(value) :
+                    true
                 return { id, value, required, validation, valid }
             })
-            .filter(field => field.id !== void 0)
+            .filter(field => field !== null)
         setFields(initFields)
-    }, [])
+    }, [children])
 
+    // Notify parent of form changes and validation state
     useEffect(() => {
-        if (onChange) {
+        if (onChange || onValidationChange) {
             const valid = fields.every(({ valid }) => valid === true)
-            const form = fields.reduce((form, { id, value }) => {
-                if (value || value === false) form[id] = value
-                return form
+            const form = fields.reduce((formData, { id, value }) => {
+                if (value !== undefined && value !== null) {
+                    formData[id] = value
+                }
+                return formData
             }, {})
-            onChange(form, valid)
+
+            if (onChange) onChange(form, valid)
+            if (onValidationChange) onValidationChange(valid, fields)
         }
-    }, [fields])
-
-    const changeField = (id, value) => {
-        const field = fields.find(f => f.id === id)
-        if (field) {
-            const valid = field.required ? field.validation ? field.validation(value) : !isEmpty(value) : true
-            Object.assign(field, { value, valid })
-            setFields(fields.slice())
+    }, [fields, onChange, onValidationChange])
+
+    // Handle field value changes
+    const changeField = useCallback((id, value) => {
+        if (disabled) return
+
+        setFields(prevFields => {
+            return prevFields.map(field => {
+                if (field.id === id) {
+                    const valid = field.required ?
+                        field.validation ? field.validation(value) : !isEmpty(value) :
+                        true
+                    return { ...field, value, valid }
+                }
+                return field
+            })
+        })
+    }, [disabled])
+
+    // Handle form submission
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        if (disabled || loading || isSubmitting) return
+
+        const valid = fields.every(({ valid }) => valid === true)
+        if (!valid && !noValidate) return
+
+        const formData = fields.reduce((data, { id, value }) => {
+            if (value !== undefined && value !== null) {
+                data[id] = value
+            }
+            return data
+        }, {})
+
+        if (onSubmit) {
+            setIsSubmitting(true)
+            try {
+                await onSubmit(formData, event)
+            } catch (error) {
+                console.error('Form submission error:', error)
+            } finally {
+                setIsSubmitting(false)
+            }
         }
-    }
+    }, [disabled, loading, isSubmitting, fields, noValidate, onSubmit])
+
+    // Handle form reset
+    const handleReset = useCallback((event) => {
+        if (disabled) return
+
+        setFields(prevFields => {
+            return prevFields.map(field => ({
+                ...field,
+                value: '',
+                valid: !field.required
+            }))
+        })
 
+        if (onReset) onReset(event)
+    }, [disabled, onReset])
+
+    // Render form fields with enhanced props
     const items = React.Children
         .toArray(children)
         .filter(child => child !== null && child !== '')
-        .map(child => {
-            const { span = 1 } = child.props
-            const field = React.cloneElement(child, {
+        .map((child, index) => {
+            if (!child.props) return null
+
+            const { span = 1, id } = child.props
+            const field = fields.find(f => f.id === id)
+
+            const enhancedChild = React.cloneElement(child, {
                 onChange: changeField,
-                outlined: !!outlined
+                outlined: outlined,
+                disabled: disabled || child.props.disabled,
+                error: field && !field.valid ? (field.required ? 'This field is required' : false) : child.props.error,
+                key: id || index
             })
-            const columnLayout = { gridColumn: `span ${span}`}
-            return (<FieldWrapper style={columnLayout}>{field}</FieldWrapper>)
+
+            const columnLayout = { gridColumn: `span ${span}` }
+            return (
+                <FieldWrapper key={id || index} style={columnLayout}>
+                    {enhancedChild}
+                </FieldWrapper>
+            )
         })
+        .filter(item => item !== null)
 
+    // Generate CSS classes
+    const safeClassName = className || ''
+    const cssClasses = [
+        'form-grid',
+        disabled && 'disabled',
+        loading && 'loading',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    const gridLayout = {
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridAutoRows: 'auto' // Changed from fixed height
+    }
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-busy': loading || isSubmitting,
+        'aria-disabled': disabled,
+        noValidate: noValidate,
+        autoComplete: autoComplete
+    }
 
-    const gridLayout = { gridTemplateColumns: `repeat(${columns}, 1fr)` }
     return (
         <Fragment>
-            {title ? (<header className="form-header"><Text use="headline6">{title}</Text></header>) : ''}
-            <form className="form-grid" style={gridLayout}>
+            {title && (
+                <header className="form-header">
+                    <Text use="headline6">{title}</Text>
+                </header>
+            )}
+            <form
+                ref={formRef}
+                id={id}
+                className={cssClasses}
+                style={gridLayout}
+                onSubmit={handleSubmit}
+                onReset={handleReset}
+                {...ariaAttributes}
+                {...restProps}
+            >
                 {items}
             </form>
         </Fragment>
@@ -69,12 +205,74 @@ export const Form = ({ title, columns = 1, children, outlined, onChange }) => {
 }
 
 /**
- * Form Field Wrapper
+ * FieldWrapper component for individual form fields
  */
-const FieldWrapper = ({ style, children }) => {
+const FieldWrapper = ({ style, children, className }) => {
+    const safeClassName = className || ''
+    const cssClasses = [
+        'field-wrapper',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
     return (
-        <div className="field-wrapper" style={style}>
+        <div className={cssClasses} style={style}>
             {children}
         </div>
     )
+}
+
+// PropTypes para Form
+Form.propTypes = {
+    /** Unique identifier for the form */
+    id: PropTypes.string,
+    /** Form title displayed in header */
+    title: PropTypes.string,
+    /** Number of grid columns */
+    columns: PropTypes.number,
+    /** Form field components */
+    children: PropTypes.node,
+    /** Whether fields should have outlined style */
+    outlined: PropTypes.bool,
+    /** Whether the form is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the form is in loading state */
+    loading: PropTypes.bool,
+    /** HTML autocomplete attribute */
+    autoComplete: PropTypes.oneOf(['on', 'off']),
+    /** Whether to disable HTML5 validation */
+    noValidate: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Form data change handler */
+    onChange: PropTypes.func,
+    /** Form submission handler */
+    onSubmit: PropTypes.func,
+    /** Form reset handler */
+    onReset: PropTypes.func,
+    /** Validation state change handler */
+    onValidationChange: PropTypes.func
+}
+
+Form.defaultProps = {
+    columns: 1,
+    outlined: false,
+    disabled: false,
+    loading: false,
+    autoComplete: 'on',
+    noValidate: false,
+    className: ''
+}
+
+// PropTypes para FieldWrapper
+FieldWrapper.propTypes = {
+    /** Inline styles for the wrapper */
+    style: PropTypes.object,
+    /** Child form field components */
+    children: PropTypes.node,
+    /** Additional CSS classes */
+    className: PropTypes.string
+}
+
+FieldWrapper.defaultProps = {
+    className: ''
 }

package/src/html/form.test.js

@@ -0,0 +1,369 @@
+import React from 'react'
+import { Form } from './form'
+
+// Pruebas unitarias para el componente Form
+describe('Form Component', () => {
+    // Mock de los componentes dependientes
+    const mockText = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock del componente Text
+        jest.doMock('./text', () => ({
+            Text: mockText
+        }))
+        
+        // Mock de console.warn para las pruebas
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+        jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+        console.error.mockRestore()
+    })
+
+    test('component exports correctly', () => {
+        expect(Form).toBeDefined()
+        expect(typeof Form).toBe('function')
+    })
+
+    test('component has correct PropTypes', () => {
+        expect(Form.propTypes).toBeDefined()
+        expect(Form.propTypes.id).toBeDefined()
+        expect(Form.propTypes.title).toBeDefined()
+        expect(Form.propTypes.columns).toBeDefined()
+        expect(Form.propTypes.children).toBeDefined()
+        expect(Form.propTypes.outlined).toBeDefined()
+        expect(Form.propTypes.disabled).toBeDefined()
+        expect(Form.propTypes.loading).toBeDefined()
+        expect(Form.propTypes.autoComplete).toBeDefined()
+        expect(Form.propTypes.noValidate).toBeDefined()
+        expect(Form.propTypes.className).toBeDefined()
+        expect(Form.propTypes.onChange).toBeDefined()
+        expect(Form.propTypes.onSubmit).toBeDefined()
+        expect(Form.propTypes.onReset).toBeDefined()
+        expect(Form.propTypes.onValidationChange).toBeDefined()
+    })
+
+    test('component has correct defaultProps', () => {
+        expect(Form.defaultProps).toBeDefined()
+        expect(Form.defaultProps.columns).toBe(1)
+        expect(Form.defaultProps.outlined).toBe(false)
+        expect(Form.defaultProps.disabled).toBe(false)
+        expect(Form.defaultProps.loading).toBe(false)
+        expect(Form.defaultProps.autoComplete).toBe('on')
+        expect(Form.defaultProps.noValidate).toBe(false)
+        expect(Form.defaultProps.className).toBe('')
+    })
+
+    test('warns when children prop is missing', () => {
+        const validateChildren = (children) => {
+            if (!children) {
+                console.warn('Form component: children prop is required')
+            }
+        }
+        
+        validateChildren(null)
+        expect(console.warn).toHaveBeenCalledWith('Form component: children prop is required')
+
+        console.warn.mockClear()
+        validateChildren('some children')
+        expect(console.warn).not.toHaveBeenCalled()
+    })
+
+    test('isEmpty function works correctly', () => {
+        const isEmpty = (value) => value === void 0 || value === null || value === ''
+
+        expect(isEmpty(undefined)).toBe(true)
+        expect(isEmpty(null)).toBe(true)
+        expect(isEmpty('')).toBe(true)
+        expect(isEmpty('text')).toBe(false)
+        expect(isEmpty(0)).toBe(false)
+        expect(isEmpty(false)).toBe(false)
+        expect(isEmpty([])).toBe(false)
+        expect(isEmpty({})).toBe(false)
+    })
+
+    test('field initialization works correctly', () => {
+        const mockChildren = [
+            { props: { id: 'field1', value: 'test', required: true } },
+            { props: { id: 'field2', value: '', required: false } },
+            { props: { id: 'field3', value: 'valid', required: true, validation: (v) => v.length > 3 } },
+            { props: {} }, // No id, should be filtered out
+            null // Null child, should be filtered out
+        ]
+
+        const initFields = mockChildren
+            .filter(child => child !== null && child !== '')
+            .map(child => {
+                if (!child.props) return null
+                const { id, value, required = false, validation } = child.props
+                if (!id) return null
+                
+                const isEmpty = (value) => value === void 0 || value === null || value === ''
+                const valid = required ? 
+                    validation ? validation(value) : !isEmpty(value) : 
+                    true
+                return { id, value, required, validation, valid }
+            })
+            .filter(field => field !== null)
+
+        expect(initFields).toHaveLength(3)
+        expect(initFields[0]).toEqual({ id: 'field1', value: 'test', required: true, validation: undefined, valid: true })
+        expect(initFields[1]).toEqual({ id: 'field2', value: '', required: false, validation: undefined, valid: true })
+        expect(initFields[2]).toEqual({ id: 'field3', value: 'valid', required: true, validation: expect.any(Function), valid: true })
+    })
+
+    test('field change logic works correctly', () => {
+        const fields = [
+            { id: 'field1', value: 'test', required: true, validation: undefined, valid: true },
+            { id: 'field2', value: '', required: false, validation: undefined, valid: true }
+        ]
+
+        const changeField = (fields, id, value) => {
+            const isEmpty = (value) => value === void 0 || value === null || value === ''
+            
+            return fields.map(field => {
+                if (field.id === id) {
+                    const valid = field.required ? 
+                        field.validation ? field.validation(value) : !isEmpty(value) : 
+                        true
+                    return { ...field, value, valid }
+                }
+                return field
+            })
+        }
+
+        // Change field1 to empty (should be invalid because required)
+        const result1 = changeField(fields, 'field1', '')
+        expect(result1[0].value).toBe('')
+        expect(result1[0].valid).toBe(false)
+
+        // Change field2 to empty (should be valid because not required)
+        const result2 = changeField(fields, 'field2', '')
+        expect(result2[1].value).toBe('')
+        expect(result2[1].valid).toBe(true)
+
+        // Change field1 to valid value
+        const result3 = changeField(fields, 'field1', 'new value')
+        expect(result3[0].value).toBe('new value')
+        expect(result3[0].valid).toBe(true)
+    })
+
+    test('form data generation works correctly', () => {
+        const fields = [
+            { id: 'field1', value: 'test', required: true, valid: true },
+            { id: 'field2', value: '', required: false, valid: true },
+            { id: 'field3', value: null, required: false, valid: true },
+            { id: 'field4', value: undefined, required: false, valid: true },
+            { id: 'field5', value: 0, required: false, valid: true },
+            { id: 'field6', value: false, required: false, valid: true }
+        ]
+
+        const formData = fields.reduce((data, { id, value }) => {
+            if (value !== undefined && value !== null) {
+                data[id] = value
+            }
+            return data
+        }, {})
+
+        expect(formData).toEqual({
+            field1: 'test',
+            field2: '',
+            field5: 0,
+            field6: false
+        })
+    })
+
+    test('form validation works correctly', () => {
+        const fields1 = [
+            { id: 'field1', value: 'test', required: true, valid: true },
+            { id: 'field2', value: '', required: false, valid: true }
+        ]
+
+        const fields2 = [
+            { id: 'field1', value: 'test', required: true, valid: true },
+            { id: 'field2', value: '', required: true, valid: false }
+        ]
+
+        const isFormValid = (fields) => fields.every(({ valid }) => valid === true)
+
+        expect(isFormValid(fields1)).toBe(true)
+        expect(isFormValid(fields2)).toBe(false)
+    })
+
+    test('CSS classes generation works correctly', () => {
+        const generateClasses = (disabled, loading, className) => {
+            return [
+                'form-grid',
+                disabled && 'disabled',
+                loading && 'loading',
+                className || ''
+            ].filter(Boolean).join(' ')
+        }
+
+        expect(generateClasses(false, false, '')).toBe('form-grid')
+        expect(generateClasses(true, false, '')).toBe('form-grid disabled')
+        expect(generateClasses(false, true, '')).toBe('form-grid loading')
+        expect(generateClasses(true, true, '')).toBe('form-grid disabled loading')
+        expect(generateClasses(false, false, 'custom')).toBe('form-grid custom')
+    })
+
+    test('grid layout generation works correctly', () => {
+        const generateGridLayout = (columns) => {
+            return { 
+                gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                gridAutoRows: 'auto'
+            }
+        }
+
+        expect(generateGridLayout(1)).toEqual({
+            gridTemplateColumns: 'repeat(1, 1fr)',
+            gridAutoRows: 'auto'
+        })
+
+        expect(generateGridLayout(3)).toEqual({
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gridAutoRows: 'auto'
+        })
+    })
+
+    test('accessibility attributes generation works correctly', () => {
+        const generateAriaAttributes = (loading, isSubmitting, disabled, noValidate, autoComplete) => {
+            return {
+                'aria-busy': loading || isSubmitting,
+                'aria-disabled': disabled,
+                noValidate: noValidate,
+                autoComplete: autoComplete
+            }
+        }
+
+        const basic = generateAriaAttributes(false, false, false, false, 'on')
+        expect(basic['aria-busy']).toBe(false)
+        expect(basic['aria-disabled']).toBe(false)
+        expect(basic.noValidate).toBe(false)
+        expect(basic.autoComplete).toBe('on')
+
+        const loading = generateAriaAttributes(true, false, false, false, 'on')
+        expect(loading['aria-busy']).toBe(true)
+
+        const submitting = generateAriaAttributes(false, true, false, false, 'on')
+        expect(submitting['aria-busy']).toBe(true)
+
+        const disabled = generateAriaAttributes(false, false, true, false, 'on')
+        expect(disabled['aria-disabled']).toBe(true)
+
+        const noValidate = generateAriaAttributes(false, false, false, true, 'off')
+        expect(noValidate.noValidate).toBe(true)
+        expect(noValidate.autoComplete).toBe('off')
+    })
+
+    test('form submission logic works correctly', async () => {
+        const mockOnSubmit = jest.fn().mockResolvedValue()
+        
+        const simulateSubmit = async (disabled, loading, isSubmitting, fields, noValidate, onSubmit) => {
+            const event = {
+                preventDefault: jest.fn(),
+                stopPropagation: jest.fn()
+            }
+            
+            event.preventDefault()
+            event.stopPropagation()
+            
+            if (disabled || loading || isSubmitting) return false
+            
+            const valid = fields.every(({ valid }) => valid === true)
+            if (!valid && !noValidate) return false
+            
+            const formData = fields.reduce((data, { id, value }) => {
+                if (value !== undefined && value !== null) {
+                    data[id] = value
+                }
+                return data
+            }, {})
+            
+            if (onSubmit) {
+                await onSubmit(formData, event)
+            }
+            
+            return true
+        }
+
+        const validFields = [
+            { id: 'field1', value: 'test', valid: true }
+        ]
+
+        const invalidFields = [
+            { id: 'field1', value: '', valid: false }
+        ]
+
+        // Valid form submission
+        const result1 = await simulateSubmit(false, false, false, validFields, false, mockOnSubmit)
+        expect(result1).toBe(true)
+        expect(mockOnSubmit).toHaveBeenCalledWith({ field1: 'test' }, expect.any(Object))
+
+        mockOnSubmit.mockClear()
+
+        // Invalid form submission (should not submit)
+        const result2 = await simulateSubmit(false, false, false, invalidFields, false, mockOnSubmit)
+        expect(result2).toBe(false)
+        expect(mockOnSubmit).not.toHaveBeenCalled()
+
+        // Invalid form submission with noValidate (should submit)
+        const result3 = await simulateSubmit(false, false, false, invalidFields, true, mockOnSubmit)
+        expect(result3).toBe(true)
+        expect(mockOnSubmit).toHaveBeenCalled()
+
+        mockOnSubmit.mockClear()
+
+        // Disabled form (should not submit)
+        const result4 = await simulateSubmit(true, false, false, validFields, false, mockOnSubmit)
+        expect(result4).toBe(false)
+        expect(mockOnSubmit).not.toHaveBeenCalled()
+    })
+
+    test('form reset logic works correctly', () => {
+        const fields = [
+            { id: 'field1', value: 'test', required: true, valid: true },
+            { id: 'field2', value: 'data', required: false, valid: true }
+        ]
+
+        const resetFields = (fields) => {
+            return fields.map(field => ({
+                ...field,
+                value: '',
+                valid: !field.required
+            }))
+        }
+
+        const result = resetFields(fields)
+        expect(result[0]).toEqual({ id: 'field1', value: '', required: true, valid: false })
+        expect(result[1]).toEqual({ id: 'field2', value: '', required: false, valid: true })
+    })
+
+    test('child enhancement works correctly', () => {
+        const enhanceChild = (child, changeField, outlined, disabled, field) => {
+            const enhancedProps = {
+                onChange: changeField,
+                outlined: outlined,
+                disabled: disabled || child.props.disabled,
+                error: field && !field.valid ? (field.required ? 'This field is required' : false) : child.props.error
+            }
+            return enhancedProps
+        }
+
+        const mockChild = { props: { disabled: false, error: false } }
+        const mockField = { valid: false, required: true }
+
+        const result = enhanceChild(mockChild, () => {}, true, false, mockField)
+        expect(result.outlined).toBe(true)
+        expect(result.disabled).toBe(false)
+        expect(result.error).toBe('This field is required')
+
+        const validField = { valid: true, required: true }
+        const result2 = enhanceChild(mockChild, () => {}, false, false, validField)
+        expect(result2.error).toBe(false)
+    })
+})