ywana-core8 0.1.103 → 0.2.2

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

@@ -1,389 +0,0 @@
-import React, { useState } from 'react'
-import { RadioButton, RadioGroup } from './radio'
-
-/**
- * Ejemplos de uso de los componentes Radio mejorados
- */
-export const RadioExamples = () => {
-    const [settings, setSettings] = useState({
-        theme: 'light',
-        language: 'es',
-        notifications: 'email',
-        privacy: 'public',
-        size: 'medium'
-    })
-
-    const [validationErrors, setValidationErrors] = useState({})
-
-    const handleChange = (id, value) => {
-        setSettings(prev => ({ ...prev, [id]: value }))
-        
-        // Limpiar errores cuando el usuario interactúa
-        if (validationErrors[id]) {
-            setValidationErrors(prev => ({ ...prev, [id]: null }))
-        }
-    }
-
-    const validateSettings = () => {
-        const errors = {}
-        
-        if (!settings.theme) {
-            errors.theme = 'Debe seleccionar un tema'
-        }
-        
-        if (!settings.notifications) {
-            errors.notifications = 'Debe seleccionar un método de notificación'
-        }
-        
-        setValidationErrors(errors)
-        return Object.keys(errors).length === 0
-    }
-
-    const handleSave = () => {
-        if (validateSettings()) {
-            alert('Configuración guardada: ' + JSON.stringify(settings, null, 2))
-        }
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '800px' }}>
-            <h1>Ejemplos de Componentes Radio Mejorados</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, soporte de teclado, focus</li>
-                    <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
-                    <li>🎯 <strong>Estados avanzados</strong> - disabled, readOnly, error</li>
-                    <li>🎨 <strong>CSS mejorado</strong> - Estados visuales consistentes y responsivos</li>
-                    <li>⌨️ <strong>Soporte de teclado</strong> - Espacio para seleccionar</li>
-                    <li>🔧 <strong>Manejo de errores</strong> - Mensajes de error integrados</li>
-                    <li>👥 <strong>RadioGroup</strong> - Componente para manejar grupos</li>
-                    <li>🔄 <strong>Sincronización de estado</strong> - Control interno y externo</li>
-                    <li>🧪 <strong>Pruebas unitarias</strong> - 17 pruebas que cubren toda la funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* RadioButtons individuales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>RadioButtons Individuales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <p><strong>Tema de la aplicación:</strong></p>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                        <RadioButton 
-                            id="theme-light"
-                            name="theme"
-                            label="Tema claro"
-                            value="light"
-                            checked={settings.theme === 'light'}
-                            onChange={handleChange}
-                        />
-                        <RadioButton 
-                            id="theme-dark"
-                            name="theme"
-                            label="Tema oscuro"
-                            value="dark"
-                            checked={settings.theme === 'dark'}
-                            onChange={handleChange}
-                        />
-                        <RadioButton 
-                            id="theme-auto"
-                            name="theme"
-                            label="Automático (según sistema)"
-                            value="auto"
-                            checked={settings.theme === 'auto'}
-                            onChange={handleChange}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* RadioGroup básico */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>RadioGroup - Idioma</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <RadioGroup
-                        id="language"
-                        label="Idioma de la interfaz"
-                        value={settings.language}
-                        onChange={handleChange}
-                        options={[
-                            { id: 'es', label: 'Español', value: 'es' },
-                            { id: 'en', label: 'English', value: 'en' },
-                            { id: 'fr', label: 'Français', value: 'fr' },
-                            { id: 'de', label: 'Deutsch', value: 'de' }
-                        ]}
-                    />
-                </div>
-            </section>
-
-            {/* RadioGroup con validación */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>RadioGroup con Validación</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <RadioGroup
-                        id="notifications"
-                        label="Método de notificaciones"
-                        value={settings.notifications}
-                        onChange={handleChange}
-                        required={true}
-                        error={validationErrors.notifications}
-                        options={[
-                            { id: 'email', label: 'Correo electrónico', value: 'email' },
-                            { id: 'sms', label: 'SMS', value: 'sms' },
-                            { id: 'push', label: 'Notificaciones push', value: 'push' },
-                            { id: 'none', label: 'Sin notificaciones', value: 'none' }
-                        ]}
-                    />
-                </div>
-            </section>
-
-            {/* Estados especiales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estados Especiales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
-                        {/* Disabled */}
-                        <div>
-                            <h4>RadioGroup Deshabilitado</h4>
-                            <RadioGroup
-                                id="disabled-example"
-                                label="Configuración avanzada"
-                                value="option1"
-                                disabled={true}
-                                options={[
-                                    { id: 'opt1', label: 'Opción 1', value: 'option1' },
-                                    { id: 'opt2', label: 'Opción 2', value: 'option2' }
-                                ]}
-                            />
-                        </div>
-
-                        {/* ReadOnly */}
-                        <div>
-                            <h4>RadioGroup Solo Lectura</h4>
-                            <RadioGroup
-                                id="readonly-example"
-                                label="Configuración del sistema"
-                                value="option2"
-                                readOnly={true}
-                                options={[
-                                    { id: 'opt1', label: 'Opción 1', value: 'option1' },
-                                    { id: 'opt2', label: 'Opción 2', value: 'option2' }
-                                ]}
-                            />
-                        </div>
-
-                        {/* Con Error */}
-                        <div>
-                            <h4>RadioGroup con Error</h4>
-                            <RadioGroup
-                                id="error-example"
-                                label="Configuración requerida"
-                                value=""
-                                error="Debe seleccionar una opción"
-                                options={[
-                                    { id: 'opt1', label: 'Opción 1', value: 'option1' },
-                                    { id: 'opt2', label: 'Opción 2', value: 'option2' }
-                                ]}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Formulario completo */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Formulario de Configuración</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
-                        <RadioGroup
-                            id="privacy"
-                            label="Configuración de privacidad"
-                            value={settings.privacy}
-                            onChange={handleChange}
-                            required={true}
-                            options={[
-                                { id: 'public', label: 'Público', value: 'public' },
-                                { id: 'friends', label: 'Solo amigos', value: 'friends' },
-                                { id: 'private', label: 'Privado', value: 'private' }
-                            ]}
-                        />
-
-                        <RadioGroup
-                            id="size"
-                            label="Tamaño de la interfaz"
-                            value={settings.size}
-                            onChange={handleChange}
-                            options={[
-                                { id: 'small', label: 'Pequeño', value: 'small' },
-                                { id: 'medium', label: 'Mediano', value: 'medium' },
-                                { id: 'large', label: 'Grande', value: 'large' }
-                            ]}
-                        />
-                    </div>
-                    
-                    <div style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
-                        <button 
-                            onClick={handleSave}
-                            style={{
-                                padding: '0.5rem 1rem',
-                                backgroundColor: '#007bff',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: 'pointer'
-                            }}
-                        >
-                            Guardar Configuración
-                        </button>
-                        <button 
-                            onClick={() => {
-                                setSettings({
-                                    theme: 'light',
-                                    language: 'es',
-                                    notifications: 'email',
-                                    privacy: 'public',
-                                    size: 'medium'
-                                })
-                                setValidationErrors({})
-                            }}
-                            style={{
-                                padding: '0.5rem 1rem',
-                                backgroundColor: '#6c757d',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: 'pointer'
-                            }}
-                        >
-                            Resetear
-                        </button>
-                    </div>
-                </div>
-            </section>
-
-            {/* Demostración de accesibilidad */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Demostración de Accesibilidad</h3>
-                <div style={{ 
-                    background: '#e8f5e8', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #c8e6c9'
-                }}>
-                    <p><strong>Prueba la accesibilidad:</strong></p>
-                    <ol>
-                        <li>Usa <kbd>Tab</kbd> para navegar entre grupos de radio buttons</li>
-                        <li>Usa <kbd>Espacio</kbd> para seleccionar un radio button</li>
-                        <li>Usa las flechas <kbd>↑</kbd> <kbd>↓</kbd> para navegar dentro de un grupo</li>
-                        <li>Observa los indicadores de focus</li>
-                        <li>Los lectores de pantalla anunciarán el estado y etiquetas</li>
-                    </ol>
-                    
-                    <RadioGroup
-                        id="accessibility-demo"
-                        label="Demostración de accesibilidad"
-                        value="option1"
-                        onChange={() => {}}
-                        options={[
-                            { id: 'acc1', label: 'Opción accesible 1', value: 'option1' },
-                            { id: 'acc2', label: 'Opción accesible 2', value: 'option2' },
-                            { id: 'acc3', label: 'Opción accesible 3', value: 'option3' }
-                        ]}
-                    />
-                </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>Error de sintaxis (class vs className)</li>
-                            <li>Sin validación de props</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Evento incorrecto (onClick vs onChange)</li>
-                            <li>Props confusas (value para checked)</li>
-                            <li>Sin estados avanzados</li>
-                            <li>Sin componente de grupo</li>
-                            <li>Sin documentación</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Después</h4>
-                        <ul>
-                            <li>Sintaxis corregida</li>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total</li>
-                            <li>Eventos correctos</li>
-                            <li>Props claras y consistentes</li>
-                            <li>Estados avanzados (disabled, error, readOnly)</li>
-                            <li>RadioGroup para manejo de grupos</li>
-                            <li>Documentación y ejemplos completos</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-
-            {/* Estado actual */}
-            <section>
-                <h3>Estado Actual de la Configuración</h3>
-                <pre style={{ 
-                    background: '#f8f9fa', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    fontSize: '0.9rem',
-                    overflow: 'auto'
-                }}>
-                    {JSON.stringify(settings, null, 2)}
-                </pre>
-            </section>
-        </div>
-    )
-}
-
-export default RadioExamples