ywana-core8 0.1.78 → 0.1.80

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

@@ -0,0 +1,404 @@
+import React, { useState } from 'react'
+import { List } from './list'
+import { Button } from './button'
+import { Icon } from './icon'
+
+/**
+ * Ejemplos del componente List mejorado manteniendo 100% compatibilidad
+ */
+export const ListExamples = () => {
+    const [selectedItem, setSelectedItem] = useState(null)
+    const [selectedItems, setSelectedItems] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [showEmpty, setShowEmpty] = useState(false)
+
+    // Datos de ejemplo
+    const basicItems = [
+        { 
+            id: 1, 
+            line1: 'John Doe', 
+            line2: 'Software Engineer', 
+            icon: 'person',
+            meta: 'Active',
+            badge: 'New'
+        },
+        { 
+            id: 2, 
+            line1: 'Jane Smith', 
+            line2: 'Product Manager', 
+            icon: 'business_center',
+            meta: '2 days ago',
+            avatar: 'https://via.placeholder.com/40x40/2196f3/ffffff?text=JS'
+        },
+        { 
+            id: 3, 
+            line1: 'Mike Johnson', 
+            line2: 'UX Designer', 
+            icon: 'design_services',
+            meta: 'Offline',
+            actions: (
+                <div style={{ display: 'flex', gap: '0.25rem' }}>
+                    <Button icon="edit" size="small" />
+                    <Button icon="delete" size="small" />
+                </div>
+            )
+        },
+        { 
+            id: 4, 
+            line1: 'Sarah Wilson', 
+            line2: 'Data Scientist', 
+            icon: 'analytics',
+            meta: 'Online',
+            disabled: true
+        }
+    ]
+
+    const groupedItems = [
+        { id: 1, line1: 'Apple iPhone 14', line2: '$999', category: 'Electronics', icon: 'phone_iphone' },
+        { id: 2, line1: 'Samsung Galaxy S23', line2: '$899', category: 'Electronics', icon: 'smartphone' },
+        { id: 3, line1: 'Nike Air Max', line2: '$120', category: 'Clothing', icon: 'sports_soccer' },
+        { id: 4, line1: 'Adidas Ultraboost', line2: '$180', category: 'Clothing', icon: 'directions_run' },
+        { id: 5, line1: 'MacBook Pro', line2: '$2499', category: 'Electronics', icon: 'laptop_mac' },
+        { id: 6, line1: 'Levi\'s Jeans', line2: '$80', category: 'Clothing', icon: 'checkroom' }
+    ]
+
+    const handleSelect = (id) => {
+        setSelectedItem(id)
+        console.log('Selected:', id)
+    }
+
+    const handleMultiSelect = (ids) => {
+        setSelectedItems(ids)
+        console.log('Multi-selected:', ids)
+    }
+
+    const handleSort = (sortConfig) => {
+        console.log('Sort config:', sortConfig)
+    }
+
+    const simulateLoading = () => {
+        setIsLoading(true)
+        setTimeout(() => setIsLoading(false), 2000)
+    }
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
+            <h1>Componente List Mejorado</h1>
+            
+            <div style={{ 
+                background: '#f8f9fa', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                marginBottom: '2rem',
+                border: '1px solid #e9ecef'
+            }}>
+                <h3>✅ Mejoras Implementadas (100% Compatibilidad):</h3>
+                <ul>
+                    <li>🛡️ <strong>PropTypes completos</strong> - Validación y documentación detallada</li>
+                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, navegación por teclado, focus management</li>
+                    <li>🔍 <strong>Búsqueda integrada</strong> - Filtrado en tiempo real por múltiples campos</li>
+                    <li>📊 <strong>Ordenamiento</strong> - Sorting ascendente/descendente por cualquier campo</li>
+                    <li>✅ <strong>Selección múltiple</strong> - Con Ctrl+click y estados visuales</li>
+                    <li>🎭 <strong>Estados avanzados</strong> - loading, empty, disabled, dense</li>
+                    <li>👤 <strong>Avatares y badges</strong> - Soporte para imágenes y etiquetas</li>
+                    <li>⚡ <strong>Acciones por item</strong> - Botones que aparecen en hover</li>
+                    <li>📱 <strong>Responsive total</strong> - Adaptación móvil, dark mode, high contrast</li>
+                    <li>🧪 <strong>16 Pruebas unitarias</strong> - Verifican compatibilidad y funcionalidad</li>
+                </ul>
+            </div>
+
+            {/* Controles de demostración */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Controles de Demostración</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                    display: 'flex',
+                    gap: '1rem',
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                }}>
+                    <Button 
+                        label="Simulate Loading" 
+                        icon="refresh" 
+                        action={simulateLoading}
+                        disabled={isLoading}
+                    />
+                    <Button 
+                        label={showEmpty ? "Show Items" : "Show Empty"} 
+                        icon={showEmpty ? "list" : "inbox"}
+                        action={() => setShowEmpty(!showEmpty)}
+                    />
+                    <Button 
+                        label="Clear Selection" 
+                        icon="clear" 
+                        action={() => {
+                            setSelectedItem(null)
+                            setSelectedItems([])
+                        }}
+                    />
+                    <span style={{ marginLeft: 'auto', color: '#666' }}>
+                        Selected: {selectedItem || 'None'} | Multi: [{selectedItems.join(', ')}]
+                    </span>
+                </div>
+            </section>
+
+            {/* Lista básica (compatible con versión original) */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista Básica (100% Compatible)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={basicItems}
+                        selected={selectedItem}
+                        onSelect={handleSelect}
+                    />
+                </div>
+            </section>
+
+            {/* Lista con búsqueda */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista con Búsqueda Integrada</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={basicItems}
+                        selected={selectedItem}
+                        onSelect={handleSelect}
+                        searchable={true}
+                        searchPlaceholder="Buscar personas..."
+                        searchBy={['line1', 'line2']}
+                        ariaLabel="Lista de personas con búsqueda"
+                    />
+                </div>
+            </section>
+
+            {/* Lista con ordenamiento */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista con Ordenamiento</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={basicItems}
+                        selected={selectedItem}
+                        onSelect={handleSelect}
+                        sortable={true}
+                        sortBy="line1"
+                        onSort={handleSort}
+                        ariaLabel="Lista ordenable de personas"
+                    />
+                </div>
+            </section>
+
+            {/* Lista con selección múltiple */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista con Selección Múltiple</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={basicItems}
+                        selected={selectedItems}
+                        onSelect={handleSelect}
+                        multiSelect={true}
+                        onMultiSelect={handleMultiSelect}
+                        ariaLabel="Lista con selección múltiple"
+                    />
+                </div>
+            </section>
+
+            {/* Lista agrupada (compatible con versión original) */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista Agrupada (100% Compatible)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={groupedItems}
+                        selected={selectedItem}
+                        onSelect={handleSelect}
+                        groupBy="category"
+                        searchable={true}
+                        searchPlaceholder="Buscar productos..."
+                    />
+                </div>
+            </section>
+
+            {/* Lista densa */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista Densa</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={basicItems}
+                        selected={selectedItem}
+                        onSelect={handleSelect}
+                        dense={true}
+                        ariaLabel="Lista densa"
+                    />
+                </div>
+            </section>
+
+            {/* Estados especiales */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Estados Especiales</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <div style={{ 
+                        background: '#fff', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <h4 style={{ margin: '1rem', marginBottom: '0' }}>Loading State</h4>
+                        <List
+                            items={basicItems}
+                            loading={isLoading}
+                            ariaLabel="Lista en estado de carga"
+                        />
+                    </div>
+                    
+                    <div style={{ 
+                        background: '#fff', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <h4 style={{ margin: '1rem', marginBottom: '0' }}>Empty State</h4>
+                        <List
+                            items={showEmpty ? [] : basicItems}
+                            empty={showEmpty}
+                            emptyMessage="No hay elementos para mostrar"
+                            emptyIcon="inbox"
+                            searchable={true}
+                            ariaLabel="Lista vacía"
+                        />
+                    </div>
+                </div>
+            </section>
+
+            {/* Lista completa con todas las características */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista Completa (Todas las Características)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={basicItems}
+                        selected={selectedItems}
+                        onSelect={handleSelect}
+                        multiSelect={true}
+                        onMultiSelect={handleMultiSelect}
+                        searchable={true}
+                        searchPlaceholder="Buscar en la lista completa..."
+                        searchBy={['line1', 'line2', 'meta']}
+                        sortable={true}
+                        sortBy="line1"
+                        onSort={handleSort}
+                        animated={true}
+                        maxHeight="300px"
+                        ariaLabel="Lista completa con todas las características"
+                    />
+                </div>
+            </section>
+
+            {/* Comparación antes/después */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Comparación: List Original vs Mejorado</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <div style={{ 
+                        background: '#ffebee', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #ffcdd2'
+                    }}>
+                        <h4>❌ List Original</h4>
+                        <ul>
+                            <li>Sin PropTypes ni validación</li>
+                            <li>Sin accesibilidad</li>
+                            <li>Sin búsqueda integrada</li>
+                            <li>Sin ordenamiento</li>
+                            <li>Selección múltiple básica</li>
+                            <li>Sin estados loading/empty</li>
+                            <li>CSS básico sin responsive</li>
+                            <li>Sin avatares ni badges</li>
+                            <li>Sin acciones por item</li>
+                        </ul>
+                    </div>
+                    <div style={{ 
+                        background: '#e8f5e8', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #c8e6c9'
+                    }}>
+                        <h4>✅ List Mejorado</h4>
+                        <ul>
+                            <li>PropTypes completos</li>
+                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
+                            <li>Búsqueda en tiempo real</li>
+                            <li>Ordenamiento ascendente/descendente</li>
+                            <li>Selección múltiple avanzada</li>
+                            <li>Estados loading, empty, disabled</li>
+                            <li>CSS responsive con dark mode</li>
+                            <li>Avatares, badges y meta</li>
+                            <li>Acciones que aparecen en hover</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            {/* Garantía de compatibilidad */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🔒 Garantía de Compatibilidad</h3>
+                <div style={{ 
+                    background: '#fff3cd', 
+                    padding: '1rem', 
+                    borderRadius: '4px',
+                    border: '1px solid #ffeaa7'
+                }}>
+                    <p><strong>100% Compatible con Código Existente:</strong></p>
+                    <ul>
+                        <li>✅ Todas las props originales funcionan exactamente igual</li>
+                        <li>✅ Comportamiento de selección idéntico</li>
+                        <li>✅ Agrupación funciona sin cambios</li>
+                        <li>✅ CSS original preservado</li>
+                        <li>✅ Nuevas características son opcionales</li>
+                        <li>✅ No se rompe ningún código existente</li>
+                    </ul>
+                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#856404' }}>
+                        <strong>Migración:</strong> Simplemente reemplaza el import y todas las 
+                        mejoras se aplican automáticamente sin cambiar una línea de código existente.
+                    </p>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default ListExamples

package/src/html/progress.example.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress } from './progress'
 import { Button } from './button'
-import { Icon } from './icon'
+import { Icon } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./icon'
 
 /**
  * Ejemplos espectaculares de los componentes Progress mejorados
@@ -32,6 +33,74 @@ export const ProgressExamples = () => {
                 })
             }, 200)
         }
+        // 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 () => clearInterval(interval)
     }, [isRunning])
 
@@ -70,8 +139,8 @@ export const ProgressExamples = () => {
     ]
 
     return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componentes Progress Espectaculares</h1>
+        <ExampleLayout title="Progress Examples" sections={sections}>
+            <ExampleSection id="overview" title="Componentes Progress Espectaculares" icon="widgets">
             
             <div style={{ 
                 background: '#f8f9fa', 
@@ -417,7 +486,8 @@ export const ProgressExamples = () => {
                     </div>
                 </div>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }