ywana-core8 0.1.103 → 0.2.1

package/src/html/form.example.js.backup

@@ -1,385 +0,0 @@
-import React, { useState } from 'react'
-import { Form } from './form'
-import { TextField2 } from './textfield2'
-import { Button } from './button'
-import { RadioGroup } from './radio'
-import { Chips } from './chip'
-
-/**
- * Ejemplos de uso del componente Form mejorado
- */
-export const FormExamples = () => {
-    const [formData, setFormData] = useState({})
-    const [isValid, setIsValid] = useState(false)
-    const [isSubmitting, setIsSubmitting] = useState(false)
-
-    const handleFormChange = (data, valid) => {
-        setFormData(data)
-        setIsValid(valid)
-    }
-
-    const handleSubmit = async (data) => {
-        setIsSubmitting(true)
-        try {
-            // Simular envío de formulario
-            await new Promise(resolve => setTimeout(resolve, 2000))
-            alert(`Formulario enviado: ${JSON.stringify(data, null, 2)}`)
-        } catch (error) {
-            alert('Error al enviar formulario')
-        } finally {
-            setIsSubmitting(false)
-        }
-    }
-
-    const handleReset = () => {
-        setFormData({})
-        setIsValid(false)
-    }
-
-    // Validaciones personalizadas
-    const validateEmail = (value) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-        return emailRegex.test(value)
-    }
-
-    const validatePassword = (value) => {
-        return value && value.length >= 6
-    }
-
-    const validateAge = (value) => {
-        const age = parseInt(value)
-        return age >= 18 && age <= 100
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1000px' }}>
-            <h1>Ejemplos de Componente Form Mejorado</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>✅ Mejoras Implementadas:</h3>
-                <ul>
-                    <li>🛡️ <strong>Validación de props</strong> - Advertencias para props incorrectas</li>
-                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, manejo de formularios</li>
-                    <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
-                    <li>🎯 <strong>Estados avanzados</strong> - disabled, loading, submission</li>
-                    <li>🎨 <strong>CSS mejorado</strong> - Altura automática, responsive design</li>
-                    <li>🔧 <strong>Manejo de envío</strong> - onSubmit, onReset, validación</li>
-                    <li>📊 <strong>Validación integrada</strong> - Validación automática de campos</li>
-                    <li>🔄 <strong>Estado inmutable</strong> - Sin mutación directa de estado</li>
-                    <li>📱 <strong>Responsive</strong> - Adaptable a diferentes tamaños</li>
-                    <li>🧪 <strong>Pruebas unitarias</strong> - 15 pruebas que cubren toda la funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* Formulario básico */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Formulario Básico</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <Form
-                        title="Información Personal"
-                        columns={2}
-                        outlined={true}
-                        onChange={handleFormChange}
-                        onSubmit={handleSubmit}
-                        onReset={handleReset}
-                    >
-                        <TextField2 
-                            id="firstName"
-                            label="Nombre"
-                            required={true}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="lastName"
-                            label="Apellido"
-                            required={true}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="email"
-                            label="Email"
-                            type="email"
-                            required={true}
-                            validation={validateEmail}
-                            span={2}
-                        />
-                        <TextField2 
-                            id="age"
-                            label="Edad"
-                            type="number"
-                            required={true}
-                            validation={validateAge}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="phone"
-                            label="Teléfono"
-                            type="tel"
-                            span={1}
-                        />
-                        
-                        <div style={{ gridColumn: 'span 2', display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
-                            <Button 
-                                type="reset"
-                                label="Limpiar"
-                                outlined={true}
-                            />
-                            <Button 
-                                type="submit"
-                                label="Enviar"
-                                raised={true}
-                                disabled={!isValid}
-                                loading={isSubmitting}
-                            />
-                        </div>
-                    </Form>
-                </div>
-            </section>
-
-            {/* Formulario con validación */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Formulario con Validación Avanzada</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <Form
-                        title="Registro de Usuario"
-                        columns={1}
-                        outlined={true}
-                        onChange={handleFormChange}
-                    >
-                        <TextField2 
-                            id="username"
-                            label="Nombre de usuario"
-                            required={true}
-                            validation={(value) => value && value.length >= 3}
-                        />
-                        <TextField2 
-                            id="password"
-                            label="Contraseña"
-                            type="password"
-                            required={true}
-                            validation={validatePassword}
-                        />
-                        <TextField2 
-                            id="confirmPassword"
-                            label="Confirmar contraseña"
-                            type="password"
-                            required={true}
-                            validation={(value) => value === formData.password}
-                        />
-                        
-                        <RadioGroup
-                            id="accountType"
-                            label="Tipo de cuenta"
-                            required={true}
-                            options={[
-                                { id: 'personal', label: 'Personal', value: 'personal' },
-                                { id: 'business', label: 'Empresarial', value: 'business' },
-                                { id: 'developer', label: 'Desarrollador', value: 'developer' }
-                            ]}
-                        />
-                    </Form>
-                </div>
-            </section>
-
-            {/* Formulario de múltiples columnas */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Formulario de Múltiples Columnas</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <Form
-                        title="Dirección de Envío"
-                        columns={3}
-                        outlined={true}
-                        onChange={handleFormChange}
-                    >
-                        <TextField2 
-                            id="street"
-                            label="Calle"
-                            required={true}
-                            span={2}
-                        />
-                        <TextField2 
-                            id="number"
-                            label="Número"
-                            required={true}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="city"
-                            label="Ciudad"
-                            required={true}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="state"
-                            label="Estado/Provincia"
-                            required={true}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="zipCode"
-                            label="Código Postal"
-                            required={true}
-                            span={1}
-                        />
-                        <TextField2 
-                            id="country"
-                            label="País"
-                            required={true}
-                            span={3}
-                        />
-                    </Form>
-                </div>
-            </section>
-
-            {/* Formulario deshabilitado */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estados Especiales</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1.5rem', 
-                        borderRadius: '8px',
-                        border: '1px solid #ddd'
-                    }}>
-                        <h4>Formulario Deshabilitado</h4>
-                        <Form
-                            title="Solo Lectura"
-                            columns={1}
-                            outlined={true}
-                            disabled={true}
-                        >
-                            <TextField2 
-                                id="readOnlyField1"
-                                label="Campo 1"
-                                value="Valor fijo"
-                            />
-                            <TextField2 
-                                id="readOnlyField2"
-                                label="Campo 2"
-                                value="Otro valor"
-                            />
-                        </Form>
-                    </div>
-                    
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1.5rem', 
-                        borderRadius: '8px',
-                        border: '1px solid #ddd'
-                    }}>
-                        <h4>Formulario Cargando</h4>
-                        <Form
-                            title="Enviando..."
-                            columns={1}
-                            outlined={true}
-                            loading={true}
-                        >
-                            <TextField2 
-                                id="loadingField1"
-                                label="Campo 1"
-                                value="Enviando datos..."
-                            />
-                            <TextField2 
-                                id="loadingField2"
-                                label="Campo 2"
-                                value="Por favor espere..."
-                            />
-                        </Form>
-                    </div>
-                </div>
-            </section>
-
-            {/* Estado actual del formulario */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estado Actual del Formulario</h3>
-                <div style={{ 
-                    background: '#f8f9fa', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #dee2e6'
-                }}>
-                    <p><strong>Válido:</strong> {isValid ? '✅ Sí' : '❌ No'}</p>
-                    <p><strong>Enviando:</strong> {isSubmitting ? '⏳ Sí' : '✅ No'}</p>
-                    <pre style={{ 
-                        background: '#ffffff', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        fontSize: '0.9rem',
-                        overflow: 'auto',
-                        maxHeight: '200px'
-                    }}>
-                        {JSON.stringify(formData, null, 2)}
-                    </pre>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Antes vs Después</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#ffebee', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
-                    }}>
-                        <h4>❌ Antes</h4>
-                        <ul>
-                            <li>Sin validación de props</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Mutación directa de estado</li>
-                            <li>Sin manejo de submit</li>
-                            <li>CSS con altura fija</li>
-                            <li>Dependencias frágiles</li>
-                            <li>Sin estados de loading/error</li>
-                            <li>Sin reset de formulario</li>
-                            <li>Sin soporte para fieldsets</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Después</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total</li>
-                            <li>Estado inmutable</li>
-                            <li>Manejo completo de envío</li>
-                            <li>CSS con altura automática</li>
-                            <li>Props robustas</li>
-                            <li>Estados de loading/disabled</li>
-                            <li>Reset integrado</li>
-                            <li>Estructura flexible</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default FormExamples