ywana-core8 0.1.103 → 0.2.2

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

@@ -1,461 +0,0 @@
-import React, { useState } from 'react'
-import { Switch, Switch2 } from './switch'
-
-/**
- * Ejemplos de uso de los componentes Switch mejorados
- */
-export const SwitchExamples = () => {
-    const [settings, setSettings] = useState({
-        notifications: true,
-        darkMode: false,
-        autoSave: true,
-        analytics: false,
-        marketing: false,
-        location: true,
-        bluetooth: false,
-        wifi: true
-    })
-
-    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.notifications && !settings.analytics) {
-            errors.notifications = 'Al menos una opción de comunicación debe estar activa'
-            errors.analytics = 'Al menos una opción de comunicación debe estar activa'
-        }
-        
-        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 Switch Mejorados</h1>
-            
-            {/* Prueba visual rápida */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔍 Prueba Visual Rápida</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '2px solid #007bff',
-                    marginBottom: '1rem'
-                }}>
-                    <p><strong>Verifica que estos switches se vean correctamente:</strong></p>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                            <span>OFF:</span>
-                            <Switch checked={false} onChange={() => {}} />
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                            <span>ON:</span>
-                            <Switch checked={true} onChange={() => {}} />
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                            <span>Disabled:</span>
-                            <Switch checked={true} disabled={true} onChange={() => {}} />
-                        </div>
-                    </div>
-                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
-                        ✅ Deberías ver switches con fondo azul cuando están ON, gris cuando están OFF, y con handle blanco que se desliza.
-                    </p>
-                </div>
-            </section>
-
-            <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> - Enter y Espacio para alternar</li>
-                    <li>🔧 <strong>Manejo de errores</strong> - Mensajes de error integrados</li>
-                    <li>📏 <strong>Tamaños múltiples</strong> - small, normal, large</li>
-                    <li>🎨 <strong>Colores personalizables</strong> - Integración con sistema de temas</li>
-                    <li>🧪 <strong>Pruebas unitarias</strong> - 17 pruebas que cubren toda la funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* Switch básicos */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Switch Básicos (react-switch)</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                        <Switch
-                            id="notifications"
-                            label="Notificaciones push"
-                            checked={settings.notifications}
-                            onChange={handleChange}
-                        />
-                        <Switch
-                            id="darkMode"
-                            label="Modo oscuro"
-                            checked={settings.darkMode}
-                            onChange={handleChange}
-                        />
-                        <Switch
-                            id="autoSave"
-                            label="Guardado automático"
-                            checked={settings.autoSave}
-                            onChange={handleChange}
-                        />
-
-                        {/* Switches con colores personalizados */}
-                        <div style={{ marginTop: '1rem', paddingTop: '1rem', borderTop: '1px solid #eee' }}>
-                            <h4 style={{ margin: '0 0 1rem 0', fontSize: '1rem', color: '#666' }}>Con colores personalizados:</h4>
-                            <Switch
-                                id="custom1"
-                                label="Switch verde"
-                                checked={true}
-                                onColor="#28a745"
-                                onChange={() => {}}
-                            />
-                            <br />
-                            <Switch
-                                id="custom2"
-                                label="Switch naranja"
-                                checked={true}
-                                onColor="#fd7e14"
-                                onChange={() => {}}
-                            />
-                            <br />
-                            <Switch
-                                id="custom3"
-                                label="Switch púrpura"
-                                checked={true}
-                                onColor="#6f42c1"
-                                onChange={() => {}}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Switch2 básicos */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Switch2 Básicos (Material Icons)</h3>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <Switch2 
-                        id="analytics" 
-                        label="Análisis de uso" 
-                        checked={settings.analytics}
-                        onChange={handleChange}
-                    />
-                    <Switch2 
-                        id="marketing" 
-                        label="Comunicaciones de marketing" 
-                        checked={settings.marketing}
-                        onChange={handleChange}
-                    />
-                    <Switch2 
-                        id="location" 
-                        label="Servicios de ubicación" 
-                        checked={settings.location}
-                        onChange={handleChange}
-                    />
-                </div>
-            </section>
-
-            {/* Diferentes tamaños */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Diferentes Tamaños</h3>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                        <span style={{ minWidth: '100px' }}>Small:</span>
-                        <Switch 
-                            id="size-small" 
-                            size="small"
-                            checked={true}
-                            onChange={() => {}}
-                        />
-                        <Switch2 
-                            id="size2-small" 
-                            size="small"
-                            checked={true}
-                            onChange={() => {}}
-                        />
-                    </div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                        <span style={{ minWidth: '100px' }}>Normal:</span>
-                        <Switch 
-                            id="size-normal" 
-                            size="normal"
-                            checked={true}
-                            onChange={() => {}}
-                        />
-                        <Switch2 
-                            id="size2-normal" 
-                            size="normal"
-                            checked={true}
-                            onChange={() => {}}
-                        />
-                    </div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                        <span style={{ minWidth: '100px' }}>Large:</span>
-                        <Switch 
-                            id="size-large" 
-                            size="large"
-                            checked={true}
-                            onChange={() => {}}
-                        />
-                        <Switch2 
-                            id="size2-large" 
-                            size="large"
-                            checked={true}
-                            onChange={() => {}}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* Estados especiales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estados Especiales</h3>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <Switch 
-                        id="disabled" 
-                        label="Switch deshabilitado" 
-                        checked={true}
-                        disabled={true}
-                        onChange={handleChange}
-                    />
-                    <Switch2 
-                        id="readonly" 
-                        label="Switch2 solo lectura" 
-                        checked={true}
-                        readOnly={true}
-                        onChange={handleChange}
-                    />
-                    <Switch 
-                        id="error-switch" 
-                        label="Switch con error" 
-                        checked={settings.notifications}
-                        error={validationErrors.notifications}
-                        onChange={handleChange}
-                    />
-                    <Switch2 
-                        id="error-switch2" 
-                        label="Switch2 con error" 
-                        checked={settings.analytics}
-                        error={validationErrors.analytics}
-                        onChange={handleChange}
-                    />
-                </div>
-            </section>
-
-            {/* Panel de configuración */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Panel de Configuración</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <h4>Conectividad</h4>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
-                        <Switch2 
-                            id="wifi" 
-                            label="Wi-Fi" 
-                            checked={settings.wifi}
-                            onChange={handleChange}
-                            ariaLabel="Activar o desactivar conexión Wi-Fi"
-                        />
-                        <Switch2 
-                            id="bluetooth" 
-                            label="Bluetooth" 
-                            checked={settings.bluetooth}
-                            onChange={handleChange}
-                            ariaLabel="Activar o desactivar Bluetooth"
-                        />
-                    </div>
-
-                    <h4>Privacidad</h4>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
-                        <Switch 
-                            id="notifications" 
-                            label="Notificaciones" 
-                            checked={settings.notifications}
-                            error={validationErrors.notifications}
-                            required={true}
-                            onChange={handleChange}
-                        />
-                        <Switch 
-                            id="analytics" 
-                            label="Análisis de uso" 
-                            checked={settings.analytics}
-                            error={validationErrors.analytics}
-                            onChange={handleChange}
-                        />
-                    </div>
-                    
-                    <div style={{ display: 'flex', gap: '1rem' }}>
-                        <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({
-                                    notifications: true,
-                                    darkMode: false,
-                                    autoSave: true,
-                                    analytics: false,
-                                    marketing: false,
-                                    location: true,
-                                    bluetooth: false,
-                                    wifi: true
-                                })
-                                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 switches</li>
-                        <li>Usa <kbd>Espacio</kbd> o <kbd>Enter</kbd> para alternar el estado</li>
-                        <li>Observa los indicadores de focus</li>
-                        <li>Los lectores de pantalla anunciarán el estado y etiquetas</li>
-                    </ol>
-                    
-                    <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                        <Switch 
-                            id="a11y1" 
-                            label="Switch accesible 1" 
-                            onChange={handleChange}
-                        />
-                        <Switch2 
-                            id="a11y2" 
-                            label="Switch2 accesible 2" 
-                            onChange={handleChange}
-                        />
-                        <Switch 
-                            id="a11y3" 
-                            label="Switch accesible 3" 
-                            onChange={handleChange}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section>
-                <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>Colores hardcodeados</li>
-                            <li>Sin estados avanzados</li>
-                            <li>Sin manejo de errores</li>
-                            <li>Sin soporte de teclado</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>PropTypes completos</li>
-                            <li>Accesibilidad total</li>
-                            <li>Colores personalizables</li>
-                            <li>Estados avanzados</li>
-                            <li>Manejo integrado de errores</li>
-                            <li>Soporte completo de teclado</li>
-                            <li>Documentación y ejemplos</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-
-            {/* Estado actual */}
-            <section style={{ marginTop: '2rem' }}>
-                <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 SwitchExamples