ywana-core8 0.1.78 → 0.1.80

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

@@ -0,0 +1,268 @@
+import React, { useState } from 'react'
+import { Icon } from './icon'
+
+/**
+ * Ejemplos de uso del componente Icon mejorado
+ */
+export const IconExamples = () => {
+    const [clickCount, setClickCount] = useState(0)
+    const [isDisabled, setIsDisabled] = useState(false)
+
+    const handleClick = () => {
+        setClickCount(prev => prev + 1)
+    }
+
+    const toggleDisabled = () => {
+        setIsDisabled(prev => !prev)
+    }
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '800px' }}>
+            <h1>Ejemplos del Componente Icon Mejorado</h1>
+            
+            <div style={{ 
+                background: '#f8f9fa', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                marginBottom: '2rem',
+                border: '1px solid #e9ecef'
+            }}>
+                <h3>✅ Mejoras Implementadas:</h3>
+                <ul>
+                    <li>🛡️ <strong>Manejo seguro de className</strong> - No falla con valores undefined</li>
+                    <li>♿ <strong>Accesibilidad mejorada</strong> - Atributos ARIA y soporte de teclado</li>
+                    <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
+                    <li>🎯 <strong>Validación de props</strong> - Advertencias para props requeridos</li>
+                    <li>🎨 <strong>CSS mejorado</strong> - Cursor consistente y estados de focus</li>
+                    <li>⌨️ <strong>Soporte de teclado</strong> - Enter y Espacio para activar</li>
+                    <li>🧪 <strong>Pruebas unitarias</strong> - 11 pruebas que cubren toda la funcionalidad</li>
+                </ul>
+            </div>
+
+            {/* Iconos básicos */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Iconos Básicos</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon icon="home" />
+                    <Icon icon="settings" />
+                    <Icon icon="favorite" />
+                    <Icon icon="info" />
+                </div>
+                <p><em>Iconos simples sin interacción</em></p>
+            </section>
+
+            {/* Diferentes tamaños */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Diferentes Tamaños</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon icon="star" size="small" />
+                    <Icon icon="star" size="normal" />
+                    <Icon icon="star" size="large" />
+                </div>
+                <p><em>Tamaños: small, normal, large</em></p>
+            </section>
+
+            {/* Iconos clickables */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Iconos Clickables</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon 
+                        icon="thumb_up" 
+                        clickable 
+                        action={handleClick}
+                        tooltip={{
+                            text: 'Hacer clic para incrementar',
+                            top: '-3rem',
+                            left: '-2rem'
+                        }}
+                    />
+                    <Icon 
+                        icon="refresh" 
+                        clickable 
+                        action={() => setClickCount(0)}
+                        tooltip={{
+                            text: 'Resetear contador',
+                            top: '-3rem',
+                            left: '-2rem'
+                        }}
+                    />
+                    <span>Clics: {clickCount}</span>
+                </div>
+                <p><em>Prueba hacer clic en los iconos o usar Enter/Espacio cuando tengan focus</em></p>
+            </section>
+
+            {/* Estados disabled */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Estados Disabled</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon 
+                        icon="toggle_on" 
+                        clickable 
+                        action={toggleDisabled}
+                        tooltip={{
+                            text: 'Alternar estado disabled',
+                            top: '-3rem',
+                            left: '-3rem'
+                        }}
+                    />
+                    <Icon 
+                        icon="delete" 
+                        clickable 
+                        disabled={isDisabled}
+                        action={() => alert('¡Eliminado!')}
+                        tooltip={{
+                            text: isDisabled ? 'Icono deshabilitado' : 'Eliminar elemento',
+                            top: '-3rem',
+                            left: '-2rem'
+                        }}
+                    />
+                    <span>Estado: {isDisabled ? 'Disabled' : 'Enabled'}</span>
+                </div>
+                <p><em>El primer icono alterna el estado del segundo</em></p>
+            </section>
+
+            {/* Iconos con tooltips */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Iconos con Tooltips</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon 
+                        icon="help" 
+                        clickable
+                        tooltip={{
+                            text: 'Ayuda y soporte',
+                            top: '-3rem',
+                            left: '-2rem'
+                        }}
+                        action={() => alert('¡Ayuda!')}
+                    />
+                    <Icon 
+                        icon="download" 
+                        clickable
+                        tooltip={{
+                            text: 'Descargar archivo',
+                            top: '-3rem',
+                            left: '-2rem'
+                        }}
+                        action={() => alert('¡Descargando!')}
+                    />
+                    <Icon 
+                        icon="share" 
+                        clickable
+                        tooltip={{
+                            text: 'Compartir contenido',
+                            top: '-3rem',
+                            left: '-2rem'
+                        }}
+                        action={() => alert('¡Compartiendo!')}
+                    />
+                </div>
+                <p><em>Tooltips posicionados para no interferir con los clics</em></p>
+            </section>
+
+            {/* Accesibilidad */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Accesibilidad Mejorada</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon 
+                        icon="accessibility" 
+                        clickable
+                        ariaLabel="Configuración de accesibilidad"
+                        action={() => alert('Configuración de accesibilidad')}
+                    />
+                    <Icon 
+                        icon="visibility" 
+                        clickable
+                        ariaLabel="Alternar visibilidad"
+                        action={() => alert('Visibilidad alternada')}
+                    />
+                    <Icon 
+                        icon="hearing" 
+                        clickable
+                        ariaLabel="Configuración de audio"
+                        action={() => alert('Configuración de audio')}
+                    />
+                </div>
+                <p><em>Iconos con etiquetas ARIA personalizadas y soporte completo de teclado</em></p>
+            </section>
+
+            {/* Clases personalizadas */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Clases CSS Personalizadas</h3>
+                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <Icon 
+                        icon="palette" 
+                        className="custom-icon-style"
+                        style={{ color: '#e91e63' }}
+                    />
+                    <Icon 
+                        icon="brush" 
+                        className="another-custom-class"
+                        style={{ color: '#2196f3' }}
+                    />
+                    <Icon 
+                        icon="color_lens" 
+                        className={undefined} // Manejo seguro de undefined
+                        style={{ color: '#4caf50' }}
+                    />
+                </div>
+                <p><em>Manejo seguro de className, incluso con valores undefined</em></p>
+            </section>
+
+            {/* Demostración de validación */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Validación de Props</h3>
+                <div style={{ 
+                    background: '#fff3cd', 
+                    padding: '1rem', 
+                    borderRadius: '4px',
+                    border: '1px solid #ffeaa7'
+                }}>
+                    <p><strong>Prueba en la consola del navegador:</strong></p>
+                    <p>El componente ahora valida que la prop <code>icon</code> sea requerida y muestra advertencias apropiadas.</p>
+                    <p>También valida tipos de props en desarrollo para detectar errores temprano.</p>
+                </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>className undefined causaba errores</li>
+                            <li>Sin validación de props</li>
+                            <li>Sin accesibilidad</li>
+                            <li>Sin soporte de teclado</li>
+                            <li>Cursor inconsistente</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>Manejo seguro de todas las props</li>
+                            <li>PropTypes completos</li>
+                            <li>Atributos ARIA apropiados</li>
+                            <li>Soporte completo de teclado</li>
+                            <li>Estados visuales consistentes</li>
+                            <li>Documentación y ejemplos</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default IconExamples

package/src/html/list.example.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { List } from './list'
 import { Button } from './button'
-import { Icon } from './icon'
+import { Icon } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./icon'
 
 /**
  * Ejemplos del componente List mejorado manteniendo 100% compatibilidad
@@ -81,9 +82,96 @@ export const ListExamples = () => {
         setTimeout(() => setIsLoading(false), 2000)
     }
 
+    // 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": "states",
+
+
+                    "title": "Estados",
+
+
+                    "icon": "toggle_on"
+
+
+            },
+
+
+            {
+
+
+                    "id": "sizes",
+
+
+                    "title": "Tamaños",
+
+
+                    "icon": "format_size"
+
+
+            }
+
+
+    ]
+
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componente List Mejorado</h1>
+        <ExampleLayout title="List Examples" sections={sections}>
+            <ExampleSection id="overview" title="Componente List Mejorado" icon="widgets">
             
             <div style={{ 
                 background: '#f8f9fa', 
@@ -397,7 +485,8 @@ export const ListExamples = () => {
                     </p>
                 </div>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }