ywana-core8 0.1.75 → 0.1.76

package/src/html/radio.css

@@ -4,29 +4,42 @@
     display: flex;
     align-items: center;
     position: relative;
-  }
+    cursor: pointer;
+}
+
+.radio.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.radio.readonly {
+    cursor: default;
+}
   
   .radio .checkmark {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.2rem;
+    height: 1.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0.3rem;
-    border: solid 1px var(--primary-color);
+    border: 2px solid var(--primary-color);
     background-color: var(--paper-color);
-    border-radius: 3rem;
+    border-radius: 50%;
+    position: relative;
   }
   
   .radio .checkmark:after {
     content: "";
-    width: .3rem;
-    height: .3rem;
-    border: solid 5px var(--primary-color);
-    border-radius: 5rem;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
     background-color: var(--primary-color);
     display: none;
-    z-index: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
   
   .radio > input {
@@ -46,5 +59,118 @@
     color: var(--text-color-light);
     font-size: 1rem;
     font-weight: normal;
-  }
+    cursor: pointer;
+}
+
+.radio.disabled > label {
+    color: var(--text-color-lighter);
+    cursor: not-allowed;
+}
+
+.radio.readonly > label {
+    cursor: default;
+}
+
+.radio.error > .checkmark {
+    border-color: var(--danger-color, #dc3545);
+}
+
+.radio.error > label {
+    color: var(--danger-color, #dc3545);
+}
+
+.radio.disabled > .checkmark {
+    border-color: var(--text-color-lighter);
+    background-color: var(--background-color);
+}
+
+.radio.disabled .checkmark {
+    border-color: var(--text-color-lighter);
+    background-color: var(--background-color);
+}
+
+.radio.disabled .checkmark:after {
+    background-color: var(--text-color-lighter);
+}
+
+.radio.error .checkmark:after {
+    background-color: var(--danger-color, #dc3545);
+}
+
+/* Focus styles */
+.radio:focus-within > .checkmark {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* Error message styling */
+.radio .error-message {
+    color: var(--danger-color, #dc3545);
+    font-size: 0.8rem;
+    margin-left: 2.1rem;
+    margin-top: 0.2rem;
+    display: block;
+}
+
+/* RadioGroup styles */
+.radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.radio-group-label {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.radio-group-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.radio-group.disabled {
+    opacity: 0.6;
+}
+
+.radio-group.error .radio-group-label {
+    color: var(--danger-color, #dc3545);
+}
+
+.required-indicator {
+    color: var(--danger-color, #dc3545);
+    font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .radio-group-options {
+        gap: 0.5rem;
+    }
+
+    .radio > label {
+        font-size: 0.9rem;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .radio:focus-within > .checkmark {
+        outline-width: 3px;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .radio .checkmark,
+    .radio .checkmark:after {
+        transition: none;
+    }
+}
   

package/src/html/radio.example.js

@@ -0,0 +1,389 @@
+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