ywana-core8 0.1.79 → 0.1.80

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

@@ -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

package/src/html/section.example.js

@@ -6,9 +6,47 @@ import { Button } from './button'
  * Ejemplos de uso del componente Section mejorado
  */
 export const SectionExamples = () => {
+    // Definir secciones para el menú lateral
+
+    const sections = 
+    [
+
+            {
+
+                    "id": "overview",
+
+                    "title": "Introducción",
+
+                    "icon": "info"
+
+            },
+
+            {
+
+                    "id": "basic-examples",
+
+                    "title": "Ejemplos Básicos",
+
+                    "icon": "widgets"
+
+            },
+
+            {
+
+                    "id": "states",
+
+                    "title": "Estados",
+
+                    "icon": "toggle_on"
+
+            }
+
+    ]
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '800px' }}>
-            <h1>Ejemplos del Componente Section Mejorado</h1>
+        <ExampleLayout title="Section Examples" sections={sections}>
+            <ExampleSection id="overview" title="Ejemplos del Componente Section Mejorado" icon="widgets">
             
             {/* Ejemplo básico */}
             <Section title="Sección Básica" icon="info">
@@ -92,7 +130,8 @@ export const SectionExamples = () => {
                 <p>Sección mínima sin título ni icono.</p>
                 <p>Solo con el contenido y funcionalidad de colapsar.</p>
             </Section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }
 

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

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Section } from './section'
+import { Button } from './button'
+
+/**
+ * Ejemplos de uso del componente Section mejorado
+ */
+export const SectionExamples = () => {
+    return (
+        <div style={{ padding: '2rem', maxWidth: '800px' }}>
+            <h1>Ejemplos del Componente Section Mejorado</h1>
+            
+            {/* Ejemplo básico */}
+            <Section title="Sección Básica" icon="info">
+                <p>Esta es una sección básica que está cerrada por defecto.</p>
+                <p>Haz clic en el icono de expansión para abrirla.</p>
+            </Section>
+
+            {/* Sección abierta por defecto */}
+            <Section title="Sección Abierta" icon="folder_open" open={true}>
+                <p>Esta sección está abierta por defecto.</p>
+                <p>El icono cambia dinámicamente según el estado.</p>
+                <ul>
+                    <li>✅ Icono dinámico (expand_more/expand_less)</li>
+                    <li>✅ Tooltip informativo</li>
+                    <li>✅ Atributos de accesibilidad</li>
+                </ul>
+            </Section>
+
+            {/* Sección con acciones */}
+            <Section 
+                title="Sección con Acciones" 
+                icon="settings"
+                actions={
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                        <Button label="Editar" icon="edit" outlined />
+                        <Button label="Eliminar" icon="delete" outlined />
+                    </div>
+                }
+            >
+                <p>Esta sección incluye botones de acción en el header.</p>
+                <p>Las acciones se muestran junto al botón de colapsar.</p>
+            </Section>
+
+            {/* Sección no colapsable */}
+            <Section 
+                title="Sección No Colapsable" 
+                icon="lock"
+                canCollapse={false}
+                className="always-open"
+            >
+                <p>Esta sección no puede colapsarse.</p>
+                <p>No muestra el icono de expansión/contracción.</p>
+                <p>Útil para contenido que siempre debe estar visible.</p>
+            </Section>
+
+            {/* Sección con clase personalizada */}
+            <Section 
+                title="Sección Personalizada" 
+                icon="palette"
+                className="custom-section"
+                open={true}
+            >
+                <p>Esta sección tiene una clase CSS personalizada.</p>
+                <p>El manejo de className es seguro y no causa errores.</p>
+                <div style={{ 
+                    background: '#f0f8ff', 
+                    padding: '1rem', 
+                    borderRadius: '4px',
+                    border: '1px solid #e0e0e0'
+                }}>
+                    <strong>Mejoras implementadas:</strong>
+                    <ul>
+                        <li>🔧 Icono dinámico corregido</li>
+                        <li>🛡️ Manejo seguro de className</li>
+                        <li>📝 PropTypes y documentación</li>
+                        <li>♿ Atributos de accesibilidad</li>
+                        <li>💬 Tooltips informativos</li>
+                        <li>✅ Pruebas unitarias</li>
+                    </ul>
+                </div>
+            </Section>
+
+            {/* Sección sin título */}
+            <Section icon="description">
+                <p>Esta sección no tiene título, solo icono.</p>
+                <p>Demuestra la flexibilidad del componente.</p>
+            </Section>
+
+            {/* Sección mínima */}
+            <Section>
+                <p>Sección mínima sin título ni icono.</p>
+                <p>Solo con el contenido y funcionalidad de colapsar.</p>
+            </Section>
+        </div>
+    )
+}
+
+export default SectionExamples

package/src/html/switch.example.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Switch, Switch2 } from './switch'
+import { Switch, Switch2 } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./switch'
 
 /**
  * Ejemplos de uso de los componentes Switch mejorados
@@ -45,9 +46,111 @@ export const SwitchExamples = () => {
         }
     }
 
+    // Definir secciones para el menú lateral
+
+
+    const sections = 
+
+    [
+
+
+            {
+
+
+                    "id": "overview",
+
+
+                    "title": "Introducción",
+
+
+                    "icon": "info"
+
+
+            },
+
+
+            {
+
+
+                    "id": "basic-examples",
+
+
+                    "title": "Ejemplos Básicos",
+
+
+                    "icon": "widgets"
+
+
+            },
+
+
+            {
+
+
+                    "id": "advanced-features",
+
+
+                    "title": "Características Avanzadas",
+
+
+                    "icon": "settings"
+
+
+            },
+
+
+            {
+
+
+                    "id": "variants",
+
+
+                    "title": "Variantes y Temas",
+
+
+                    "icon": "palette"
+
+
+            },
+
+
+            {
+
+
+                    "id": "states",
+
+
+                    "title": "Estados",
+
+
+                    "icon": "toggle_on"
+
+
+            },
+
+
+            {
+
+
+                    "id": "sizes",
+
+
+                    "title": "Tamaños",
+
+
+                    "icon": "format_size"
+
+
+            }
+
+
+    ]
+
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '800px' }}>
-            <h1>Ejemplos de Componentes Switch Mejorados</h1>
+        <ExampleLayout title="Switch Examples" sections={sections}>
+            <ExampleSection id="overview" title="Ejemplos de Componentes Switch Mejorados" icon="widgets">
             
             {/* Prueba visual rápida */}
             <section style={{ marginBottom: '2rem' }}>
@@ -454,7 +557,8 @@ export const SwitchExamples = () => {
                     {JSON.stringify(settings, null, 2)}
                 </pre>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }