ywana-core8 0.1.75 → 0.1.77

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

@@ -0,0 +1,294 @@
+import React, { useState } from 'react'
+import RSwitch from 'react-switch'
+
+/**
+ * Componente de prueba visual para diagnosticar problemas con react-switch
+ */
+export const SwitchTestVisual = () => {
+    const [checked, setChecked] = useState(false)
+
+    return (
+        <div style={{ 
+            padding: '2rem', 
+            maxWidth: '800px',
+            fontFamily: 'Arial, sans-serif'
+        }}>
+            <h1>🔧 Diagnóstico Visual de Switch</h1>
+            
+            <div style={{ 
+                background: '#fff3cd', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                border: '1px solid #ffeaa7',
+                marginBottom: '2rem'
+            }}>
+                <h3>🎯 Objetivo</h3>
+                <p>Este componente usa react-switch directamente con configuraciones optimizadas para verificar que se vea correctamente.</p>
+            </div>
+
+            {/* Prueba básica */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Prueba Básica</h3>
+                <div style={{ 
+                    background: '#ffffff', 
+                    padding: '2rem', 
+                    borderRadius: '8px',
+                    border: '2px solid #007bff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '1rem'
+                }}>
+                    <span style={{ fontSize: '1.1rem', fontWeight: 'bold' }}>
+                        Estado: {checked ? '🟢 ON' : '🔴 OFF'}
+                    </span>
+                    <RSwitch
+                        checked={checked}
+                        onChange={setChecked}
+                        onColor="#007bff"
+                        offColor="#6c757d"
+                        onHandleColor="#ffffff"
+                        offHandleColor="#ffffff"
+                        handleDiameter={20}
+                        uncheckedIcon={false}
+                        checkedIcon={false}
+                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
+                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
+                        height={24}
+                        width={52}
+                    />
+                    <button 
+                        onClick={() => setChecked(!checked)}
+                        style={{
+                            padding: '0.5rem 1rem',
+                            backgroundColor: '#28a745',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Toggle
+                    </button>
+                </div>
+            </section>
+
+            {/* Diferentes configuraciones */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Diferentes Configuraciones</h3>
+                <div style={{ 
+                    background: '#ffffff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <div style={{ 
+                        display: 'grid', 
+                        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', 
+                        gap: '1.5rem' 
+                    }}>
+                        {/* Switch 1: Configuración original */}
+                        <div style={{ textAlign: 'center' }}>
+                            <h4>Configuración Original</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                onColor="#86d3ff"
+                                onHandleColor="#2693e6"
+                                handleDiameter={30}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                                boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
+                                activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
+                                height={20}
+                                width={48}
+                            />
+                            <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                                onColor: #86d3ff<br/>
+                                handleColor: #2693e6
+                            </p>
+                        </div>
+
+                        {/* Switch 2: Configuración mejorada */}
+                        <div style={{ textAlign: 'center' }}>
+                            <h4>Configuración Mejorada</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                onColor="#007bff"
+                                offColor="#6c757d"
+                                onHandleColor="#ffffff"
+                                offHandleColor="#ffffff"
+                                handleDiameter={20}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                                boxShadow="0px 1px 3px rgba(0, 0, 0, 0.3)"
+                                activeBoxShadow="0px 0px 0px 2px rgba(0, 123, 255, 0.25)"
+                                height={24}
+                                width={52}
+                            />
+                            <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                                onColor: #007bff<br/>
+                                handleColor: #ffffff
+                            </p>
+                        </div>
+
+                        {/* Switch 3: Configuración simple */}
+                        <div style={{ textAlign: 'center' }}>
+                            <h4>Configuración Simple</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                onColor="#28a745"
+                                offColor="#dc3545"
+                                height={20}
+                                width={40}
+                            />
+                            <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
+                                Configuración mínima<br/>
+                                Verde/Rojo
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Estados ON/OFF */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Estados ON/OFF</h3>
+                <div style={{ 
+                    background: '#ffffff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <div style={{ 
+                        display: 'grid', 
+                        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
+                        gap: '1rem' 
+                    }}>
+                        <div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>OFF</h4>
+                            <RSwitch
+                                checked={false}
+                                onChange={() => {}}
+                                onColor="#007bff"
+                                offColor="#6c757d"
+                                onHandleColor="#ffffff"
+                                offHandleColor="#ffffff"
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                                height={22}
+                                width={48}
+                            />
+                        </div>
+                        <div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>ON</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                onColor="#007bff"
+                                offColor="#6c757d"
+                                onHandleColor="#ffffff"
+                                offHandleColor="#ffffff"
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                                height={22}
+                                width={48}
+                            />
+                        </div>
+                        <div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>Disabled OFF</h4>
+                            <RSwitch
+                                checked={false}
+                                onChange={() => {}}
+                                disabled={true}
+                                onColor="#007bff"
+                                offColor="#6c757d"
+                                onHandleColor="#ffffff"
+                                offHandleColor="#ffffff"
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                                height={22}
+                                width={48}
+                            />
+                        </div>
+                        <div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>Disabled ON</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                disabled={true}
+                                onColor="#007bff"
+                                offColor="#6c757d"
+                                onHandleColor="#ffffff"
+                                offHandleColor="#ffffff"
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                                height={22}
+                                width={48}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Información de diagnóstico */}
+            <section>
+                <h3>📋 Información de Diagnóstico</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>Switch OFF:</strong> Fondo gris oscuro, handle blanco a la izquierda</li>
+                        <li><strong>Switch ON:</strong> Fondo azul, handle blanco a la derecha</li>
+                        <li><strong>Handle:</strong> Círculo blanco que se desliza suavemente</li>
+                        <li><strong>Transición:</strong> Animación fluida al cambiar estado</li>
+                    </ul>
+
+                    <h4>Si solo ves un círculo gris con borde:</h4>
+                    <ul style={{ marginBottom: '1rem' }}>
+                        <li>El problema podría ser CSS conflictivo en el proyecto</li>
+                        <li>Verifica la consola del navegador por errores</li>
+                        <li>Asegúrate de que react-switch se importa correctamente</li>
+                        <li>Revisa si hay estilos globales que afecten los elementos div</li>
+                    </ul>
+
+                    <h4>Versión de react-switch:</h4>
+                    <p style={{ 
+                        background: '#ffffff', 
+                        padding: '0.5rem', 
+                        borderRadius: '4px',
+                        fontFamily: 'monospace',
+                        margin: '0.5rem 0'
+                    }}>
+                        Ejecuta: <code>npm list react-switch</code>
+                    </p>
+
+                    <h4>Estado actual del switch interactivo:</h4>
+                    <pre style={{ 
+                        background: '#ffffff', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        fontFamily: 'monospace',
+                        overflow: 'auto'
+                    }}>
+                        {JSON.stringify({ 
+                            checked,
+                            timestamp: new Date().toISOString()
+                        }, null, 2)}
+                    </pre>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default SwitchTestVisual

package/src/html/switch.css

@@ -0,0 +1,200 @@
+/* Switch Container Styles */
+.switch-wrapper,
+.switch-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.switch-container {
+  align-items: flex-start;
+}
+
+.switch-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--text-color);
+}
+
+.switch-wrapper.disabled,
+.switch-container.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.switch-wrapper.disabled .switch-label,
+.switch-container.disabled .switch-label {
+  cursor: not-allowed;
+  color: var(--text-color-lighter);
+}
+
+/* Error states */
+.switch-wrapper.error .react-switch,
+.switch-container.error .react-switch {
+  border: 2px solid var(--danger-color, #dc3545);
+  border-radius: 25px;
+}
+
+/* Switch2 Styles */
+.switch2-wrapper,
+.switch2-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.switch2-container {
+  align-items: flex-start;
+}
+
+.switch2-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--text-color);
+}
+
+.switch2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+
+.switch2:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.switch2:focus {
+  outline: 2px solid var(--primary-color, #2693e6);
+  outline-offset: 2px;
+}
+
+.switch2.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.switch2.disabled:hover {
+  background-color: transparent;
+}
+
+.switch2.readonly {
+  cursor: default;
+}
+
+.switch2.readonly:hover {
+  background-color: transparent;
+}
+
+.switch2.error {
+  color: var(--danger-color, #dc3545);
+}
+
+/* Error message styles */
+.error-message {
+  color: var(--danger-color, #dc3545);
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+/* React Switch customizations */
+.react-switch {
+  vertical-align: middle;
+  border: none !important;
+}
+
+.react-switch > div {
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+.react-switch.error {
+  box-shadow: 0 0 0 2px var(--danger-color, #dc3545) !important;
+}
+
+.react-switch.error > div {
+  border-color: var(--danger-color, #dc3545) !important;
+}
+
+/* Focus styles for react-switch */
+.react-switch:focus {
+  outline: 2px solid var(--primary-color, #2693e6);
+  outline-offset: 2px;
+}
+
+/* Ensure proper styling for react-switch background */
+.react-switch > div[style*="background"] {
+  transition: background-color 0.25s ease !important;
+}
+
+/* Handle styling */
+.react-switch > div > div {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid rgba(255, 255, 255, 0.8) !important;
+}
+
+/* Size variants for Switch2 */
+.switch2.small {
+  padding: 0.25rem;
+}
+
+.switch2.normal {
+  padding: 0.375rem;
+}
+
+.switch2.large {
+  padding: 0.5rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .switch-label,
+  .switch2-label {
+    font-size: 0.9rem;
+    gap: 0.5rem;
+  }
+
+  .switch-wrapper,
+  .switch-container,
+  .switch2-wrapper,
+  .switch2-container {
+    gap: 0.25rem;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .switch2:focus {
+    outline-width: 3px;
+  }
+
+  .react-switch:focus {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .switch2 {
+    transition: none;
+  }
+
+  .react-switch * {
+    transition: none !important;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .switch2:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+}