ywana-core8 0.1.103 → 0.2.2

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

@@ -1,492 +0,0 @@
-import React, { useState } from 'react'
-import { Thumbnail } from './thumbnail'
-import { MultiSelector, ToggleButton } from './selector'
-import { Text, TEXTFORMATS } from './text'
-import { Button } from './button'
-
-/**
- * Ejemplos de los componentes Thumbnail, Selector y Text mejorados manteniendo 100% compatibilidad
- */
-export const ComponentsExamples = () => {
-    const [selectedOptions, setSelectedOptions] = useState(['option1'])
-    const [isLoading, setIsLoading] = useState(false)
-    const [showEmpty, setShowEmpty] = useState(false)
-
-    const sampleOptions = [
-        { label: 'Option 1', value: 'option1', icon: 'star' },
-        { label: 'Option 2', value: 'option2', icon: 'favorite' },
-        { label: 'Option 3', value: 'option3', icon: 'bookmark' },
-        { label: 'Option 4', value: 'option4', icon: 'thumb_up' },
-        { label: 'Option 5', value: 'option5', icon: 'check_circle' }
-    ]
-
-    const handleSelectorChange = (selections) => {
-        setSelectedOptions(selections)
-        console.log('Selected options:', selections)
-    }
-
-    const simulateLoading = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componentes Mejorados: Thumbnail, Selector y Text</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>✅ Mejoras Implementadas (100% Compatibilidad):</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem' }}>
-                    <div>
-                        <h4>🖼️ Thumbnail</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Múltiples tamaños y formas</li>
-                            <li>Estados loading/error</li>
-                            <li>Placeholder y fallback</li>
-                            <li>Clickable con overlay</li>
-                            <li>Badges y tooltips</li>
-                            <li>Lazy loading</li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h4>🎛️ MultiSelector</h4>
-                        <ul>
-                            <li>Búsqueda integrada</li>
-                            <li>Min/max selecciones</li>
-                            <li>Variantes visuales</li>
-                            <li>Estados loading/empty</li>
-                            <li>Clear all button</li>
-                            <li>Navegación por teclado</li>
-                            <li>Accesibilidad completa</li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h4>📝 Text</h4>
-                        <ul>
-                            <li>Nuevos formatos</li>
-                            <li>Internacionalización</li>
-                            <li>Copy to clipboard</li>
-                            <li>Estados loading/skeleton</li>
-                            <li>Truncate y styling</li>
-                            <li>Múltiples elementos</li>
-                            <li>Formateo avanzado</li>
-                        </ul>
-                    </div>
-                </div>
-            </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 Content" : "Show Empty"} 
-                        icon={showEmpty ? "visibility" : "visibility_off"}
-                        action={() => setShowEmpty(!showEmpty)}
-                    />
-                    <span style={{ marginLeft: 'auto', color: '#666' }}>
-                        Selected: [{selectedOptions.join(', ')}]
-                    </span>
-                </div>
-            </section>
-
-            {/* Thumbnail Examples */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🖼️ Thumbnail Component</h3>
-                
-                {/* Basic Thumbnails (Compatible) */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Básico (100% Compatible)</h4>
-                    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=1"
-                            empty="https://via.placeholder.com/200x200/cccccc/666666?text=Empty"
-                        />
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=2"
-                            objectFit="contain"
-                        />
-                        <Thumbnail 
-                            src=""
-                            empty="https://via.placeholder.com/200x200/ffcccc/cc0000?text=Fallback"
-                        />
-                    </div>
-                </div>
-
-                {/* Enhanced Thumbnails */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Mejorado con Nuevas Características</h4>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '1rem' }}>
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=3"
-                            size="small"
-                            shape="circle"
-                            bordered={true}
-                            shadow={true}
-                            alt="Small circular thumbnail"
-                        />
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=4"
-                            size="medium"
-                            shape="rounded"
-                            clickable={true}
-                            onClick={() => alert('Thumbnail clicked!')}
-                            overlay={<span>Click me!</span>}
-                            badge="NEW"
-                        />
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=5"
-                            size="large"
-                            shape="square"
-                            loading="lazy"
-                            placeholder="image"
-                            title="Large square thumbnail"
-                        />
-                        <Thumbnail 
-                            src="invalid-url"
-                            fallback="broken_image"
-                            size="medium"
-                            shape="circle"
-                            onError={() => console.log('Image failed to load')}
-                        />
-                    </div>
-                </div>
-
-                {/* Thumbnail States */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Estados Especiales</h4>
-                    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=6"
-                            disabled={true}
-                            title="Disabled thumbnail"
-                        />
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=7"
-                            loading={isLoading}
-                            placeholder="hourglass_empty"
-                        />
-                        <Thumbnail 
-                            src="https://picsum.photos/200/200?random=8"
-                            badge={42}
-                            tooltip="Badge with number"
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* MultiSelector Examples */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎛️ MultiSelector Component</h3>
-                
-                {/* Basic Selector (Compatible) */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Básico (100% Compatible)</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        overflow: 'hidden'
-                    }}>
-                        <MultiSelector 
-                            options={sampleOptions.slice(0, 3)}
-                            onChange={handleSelectorChange}
-                            className="basic-selector"
-                        />
-                    </div>
-                </div>
-
-                {/* Enhanced Selector */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Mejorado con Búsqueda y Controles</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        overflow: 'hidden'
-                    }}>
-                        <MultiSelector 
-                            options={sampleOptions}
-                            onChange={handleSelectorChange}
-                            searchable={true}
-                            searchPlaceholder="Buscar opciones..."
-                            allowClear={true}
-                            onClear={() => console.log('Cleared all selections')}
-                            maxSelections={3}
-                            minSelections={1}
-                            variant="outlined"
-                            size="medium"
-                            ariaLabel="Selector con búsqueda"
-                        />
-                    </div>
-                </div>
-
-                {/* Selector Variants */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Variantes Visuales</h4>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                        <div style={{ 
-                            background: '#fff', 
-                            border: '1px solid #ddd',
-                            borderRadius: '8px',
-                            overflow: 'hidden'
-                        }}>
-                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Filled Variant</h5>
-                            <MultiSelector 
-                                options={sampleOptions.slice(0, 3)}
-                                variant="filled"
-                                size="small"
-                            />
-                        </div>
-                        <div style={{ 
-                            background: '#fff', 
-                            border: '1px solid #ddd',
-                            borderRadius: '8px',
-                            overflow: 'hidden'
-                        }}>
-                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Large Size</h5>
-                            <MultiSelector 
-                                options={sampleOptions.slice(0, 3)}
-                                variant="default"
-                                size="large"
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                {/* Selector States */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Estados Especiales</h4>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                        <div style={{ 
-                            background: '#fff', 
-                            border: '1px solid #ddd',
-                            borderRadius: '8px',
-                            overflow: 'hidden'
-                        }}>
-                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Loading State</h5>
-                            <MultiSelector 
-                                loading={isLoading}
-                                options={[]}
-                            />
-                        </div>
-                        <div style={{ 
-                            background: '#fff', 
-                            border: '1px solid #ddd',
-                            borderRadius: '8px',
-                            overflow: 'hidden'
-                        }}>
-                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Empty State</h5>
-                            <MultiSelector 
-                                empty={showEmpty}
-                                emptyMessage="No hay opciones disponibles"
-                                emptyIcon="inbox"
-                                options={showEmpty ? [] : sampleOptions.slice(0, 2)}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Text Examples */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📝 Text Component</h3>
-                
-                {/* Basic Text (Compatible) */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Básico (100% Compatible)</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px'
-                    }}>
-                        <Text format={TEXTFORMATS.HTML}>Este es texto HTML básico</Text><br />
-                        <Text format={TEXTFORMATS.STRING}>Este es texto string</Text><br />
-                        <Text className="custom-class">Texto con clase CSS</Text>
-                    </div>
-                </div>
-
-                {/* Enhanced Text Formatting */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Formateo Mejorado</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
-                        gap: '1rem'
-                    }}>
-                        <div>
-                            <Text format={TEXTFORMATS.NUMERIC}>1234567.89</Text><br />
-                            <Text format={TEXTFORMATS.CURRENCY} currency="USD">1234.56</Text><br />
-                            <Text format={TEXTFORMATS.PERCENTAGE}>0.75</Text><br />
-                            <Text format={TEXTFORMATS.DATE}>2024-01-15</Text><br />
-                            <Text format={TEXTFORMATS.TIME}>2024-01-15T14:30:00</Text><br />
-                        </div>
-                        <div>
-                            <Text format={TEXTFORMATS.PHONE}>1234567890</Text><br />
-                            <Text format={TEXTFORMATS.CAPITALIZE}>hello world</Text><br />
-                            <Text format={TEXTFORMATS.UPPERCASE}>hello world</Text><br />
-                            <Text format={TEXTFORMATS.LOWERCASE}>HELLO WORLD</Text><br />
-                            <Text format={TEXTFORMATS.TRUNCATE} maxLength={20}>Este es un texto muy largo que será truncado</Text><br />
-                        </div>
-                    </div>
-                </div>
-
-                {/* Text Styling */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Estilos y Tamaños</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px'
-                    }}>
-                        <Text size="xs">Extra small text</Text><br />
-                        <Text size="sm">Small text</Text><br />
-                        <Text size="md" weight="bold">Medium bold text</Text><br />
-                        <Text size="lg" color="primary">Large primary text</Text><br />
-                        <Text size="xl" weight="semibold" color="success">Extra large success text</Text><br />
-                        <Text size="xxl" weight="bold" color="error" align="center">XXL error text centered</Text><br />
-                    </div>
-                </div>
-
-                {/* Text Features */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Características Especiales</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px'
-                    }}>
-                        <Text copyable={true}>Texto copiable - haz click para copiar</Text><br />
-                        <Text loading={isLoading}>Texto con estado de carga</Text><br />
-                        <Text skeleton={isLoading}>Texto con skeleton placeholder</Text><br />
-                        <Text fallback="Texto por defecto">{showEmpty ? '' : 'Texto con fallback'}</Text><br />
-                        <Text as="h3" size="lg" weight="bold">Texto renderizado como H3</Text><br />
-                        <Text decoration="underline" transform="capitalize">texto subrayado y capitalizado</Text><br />
-                    </div>
-                </div>
-
-                {/* Text States */}
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <h4>Estados y Casos Especiales</h4>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
-                        gap: '1rem'
-                    }}>
-                        <div>
-                            <Text>Texto normal</Text><br />
-                            <Text selectable={false}>Texto no seleccionable</Text><br />
-                            <Text truncate={true}>Texto con truncate automático que se corta</Text><br />
-                        </div>
-                        <div>
-                            <Text format={TEXTFORMATS.EMAIL}>usuario@ejemplo.com</Text><br />
-                            <Text format={TEXTFORMATS.URL}>https://www.ejemplo.com</Text><br />
-                            <Text locale="es-ES" format={TEXTFORMATS.DATE}>2024-01-15</Text><br />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Componentes Originales vs Mejorados</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#ffebee', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
-                    }}>
-                        <h4>❌ Componentes Originales</h4>
-                        <ul>
-                            <li><strong>Thumbnail:</strong> Básico, sin estados</li>
-                            <li><strong>Selector:</strong> Funcional pero limitado</li>
-                            <li><strong>Text:</strong> Pocos formatos, sin styling</li>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Sin estados loading/error</li>
-                            <li>CSS básico sin responsive</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Componentes Mejorados</h4>
-                        <ul>
-                            <li><strong>Thumbnail:</strong> Múltiples tamaños, formas, estados</li>
-                            <li><strong>Selector:</strong> Búsqueda, límites, variantes</li>
-                            <li><strong>Text:</strong> 15+ formatos, styling completo</li>
-                            <li>PropTypes completos y validación</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Estados loading, error, empty</li>
-                            <li>CSS responsive con dark mode</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 renderizado idéntico</li>
-                        <li>✅ CSS original preservado y mejorado</li>
-                        <li>✅ Nuevas características son opcionales</li>
-                        <li>✅ No se rompe ningún código existente</li>
-                        <li>✅ Migración automática sin cambios</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 ComponentsExamples