ywana-core8 0.1.103 → 0.2.1

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

@@ -1,411 +0,0 @@
-import React, { useState } from 'react'
-import { Header2 } from './header2'
-import { Button } from './button'
-import { Icon } from './icon'
-
-/**
- * Ejemplos de uso del componente Header2 mejorado
- * Mantiene 100% compatibilidad visual con Header original
- */
-export const Header2Examples = () => {
-    const [isLoading, setIsLoading] = useState(false)
-    const [notifications, setNotifications] = useState(3)
-
-    const handleIconClick = () => {
-        console.log('Icon clicked!')
-    }
-
-    const handleHeaderClick = () => {
-        console.log('Header clicked!')
-    }
-
-    const handleMenuClick = () => {
-        console.log('Menu clicked!')
-    }
-
-    const handleNotificationClick = () => {
-        setNotifications(prev => Math.max(0, prev - 1))
-    }
-
-    const handleRefresh = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Ejemplos de Componente Header2 Mejorado</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>✅ Mejoras Implementadas (Manteniendo Compatibilidad Visual):</h3>
-                <ul>
-                    <li>🛡️ <strong>PropTypes completos</strong> - Validación y documentación</li>
-                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, roles, focus management</li>
-                    <li>🎯 <strong>Estados avanzados</strong> - disabled, loading con indicadores</li>
-                    <li>🔧 <strong>Manejo de eventos mejorado</strong> - onClick, onIconClick separados</li>
-                    <li>📏 <strong>Medidas exactas preservadas</strong> - 3rem, 2.4rem, 4rem, 12.8rem</li>
-                    <li>🎨 <strong>CSS corregido</strong> - Selector fijo, mejores estados</li>
-                    <li>📱 <strong>Responsive mejorado</strong> - Mantiene dimensiones en móviles</li>
-                    <li>🧪 <strong>Pruebas exhaustivas</strong> - 13 pruebas que verifican compatibilidad</li>
-                </ul>
-            </div>
-
-            {/* Headers básicos */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Headers Básicos (Altura: 3rem)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Header2
-                        title="Header Básico"
-                        icon="home"
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="more_vert" action={handleMenuClick} />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header con Imagen"
-                        iconSrc="https://via.placeholder.com/40x40/2196f3/ffffff?text=A"
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="search" />
-                        <Button icon="notifications" />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header Solo Título"
-                        onClick={handleHeaderClick}
-                    >
-                        <Button icon="settings" />
-                    </Header2>
-                </div>
-            </section>
-
-            {/* Headers con temas */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Headers con Temas</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Header2
-                        title="Header Primary"
-                        icon="dashboard"
-                        primary={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="account_circle" />
-                        <Button icon="logout" />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header Secondary"
-                        icon="business"
-                        secondary={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="help" />
-                        <Button icon="info" />
-                    </Header2>
-                </div>
-            </section>
-
-            {/* Variantes de tamaño */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Variantes de Tamaño (Dimensiones Exactas Preservadas)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Header2
-                        title="Header Dense (2.4rem)"
-                        icon="compress"
-                        dense={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="close" size="small" />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header Caption (4rem)"
-                        icon="article"
-                        caption={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="edit" />
-                        <Button icon="share" />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header Prominent (12.8rem)"
-                        icon="landscape"
-                        prominent={true}
-                        primary={true}
-                        img="https://via.placeholder.com/800x200/1976d2/ffffff?text=Background+Image"
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="favorite" />
-                        <Button icon="bookmark" />
-                    </Header2>
-                </div>
-            </section>
-
-            {/* Estados especiales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Estados Especiales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Header2
-                        title="Header con Loading"
-                        icon="refresh"
-                        loading={isLoading}
-                        clickable={true}
-                        onIconClick={handleRefresh}
-                    >
-                        <Button 
-                            icon="refresh" 
-                            action={handleRefresh}
-                            disabled={isLoading}
-                        />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header Disabled"
-                        icon="block"
-                        disabled={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="settings" disabled={true} />
-                    </Header2>
-                    
-                    <Header2
-                        title="Header con Notificaciones"
-                        icon="notifications"
-                        clickable={true}
-                        onIconClick={handleNotificationClick}
-                    >
-                        <div style={{ position: 'relative' }}>
-                            <Button icon="notifications" action={handleNotificationClick} />
-                            {notifications > 0 && (
-                                <span style={{
-                                    position: 'absolute',
-                                    top: '-8px',
-                                    right: '-8px',
-                                    background: '#f44336',
-                                    color: 'white',
-                                    borderRadius: '50%',
-                                    width: '20px',
-                                    height: '20px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    fontSize: '0.7rem',
-                                    fontWeight: 'bold'
-                                }}>
-                                    {notifications}
-                                </span>
-                            )}
-                        </div>
-                    </Header2>
-                </div>
-            </section>
-
-            {/* Headers con acciones complejas */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Headers con Acciones Complejas</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Header2
-                        title="Dashboard Principal"
-                        icon="dashboard"
-                        primary={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button icon="search" />
-                        <Button icon="filter_list" />
-                        <Button icon="view_list" />
-                        <Button icon="view_module" />
-                        <Button icon="more_vert" action={handleMenuClick} />
-                    </Header2>
-                    
-                    <Header2
-                        title="Editor de Documentos"
-                        icon="edit"
-                        caption={true}
-                        clickable={true}
-                        onIconClick={handleIconClick}
-                    >
-                        <Button label="Guardar" raised={true} />
-                        <Button icon="undo" />
-                        <Button icon="redo" />
-                        <Button icon="format_bold" />
-                        <Button icon="format_italic" />
-                    </Header2>
-                </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 elementos del header</li>
-                        <li>Usa <kbd>Enter</kbd> o <kbd>Espacio</kbd> para activar botones</li>
-                        <li>Observa los indicadores de focus</li>
-                        <li>Los lectores de pantalla anunciarán roles y estados</li>
-                        <li>Headers tienen role="banner" por defecto</li>
-                    </ol>
-                    
-                    <div style={{ marginTop: '1rem' }}>
-                        <Header2
-                            title="Header Accesible"
-                            icon="accessibility"
-                            ariaLabel="Header principal de la aplicación"
-                            role="banner"
-                            clickable={true}
-                            onIconClick={handleIconClick}
-                        >
-                            <Button icon="help" ariaLabel="Ayuda" />
-                            <Button icon="settings" ariaLabel="Configuración" />
-                        </Header2>
-                    </div>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Header Original vs Header2</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#ffebee', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
-                    }}>
-                        <h4>❌ Header Original</h4>
-                        <ul>
-                            <li>Sin PropTypes</li>
-                            <li>Sin accesibilidad</li>
-                            <li>CSS selector incorrecto</li>
-                            <li>Sin estados avanzados</li>
-                            <li>Concatenación de strings frágil</li>
-                            <li>Sin manejo de eventos separado</li>
-                            <li>Espaciado con &nbsp;</li>
-                            <li>Sin responsive mejorado</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Header2 Mejorado</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>CSS corregido y mejorado</li>
-                            <li>Estados disabled, loading</li>
-                            <li>Generación robusta de clases</li>
-                            <li>onClick y onIconClick separados</li>
-                            <li>Espaciado con CSS gap</li>
-                            <li>Responsive con medidas preservadas</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-
-            {/* Medidas exactas preservadas */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔒 Medidas Exactas Preservadas</h3>
-                <div style={{ 
-                    background: '#fff3cd', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #ffeaa7'
-                }}>
-                    <p><strong>Garantía de Compatibilidad Visual:</strong></p>
-                    <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '1rem' }}>
-                        <thead>
-                            <tr style={{ background: '#f8f9fa' }}>
-                                <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Variante</th>
-                                <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Altura Original</th>
-                                <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Altura Header2</th>
-                                <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Estado</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Normal</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>min-height: 3rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>min-height: 3rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
-                            </tr>
-                            <tr>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Dense</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 2.4rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 2.4rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
-                            </tr>
-                            <tr>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Caption</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 4rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 4rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
-                            </tr>
-                            <tr>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Prominent</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 12.8rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 12.8rem</td>
-                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#856404' }}>
-                        <strong>Nota:</strong> Todas las medidas, espaciados y comportamientos visuales 
-                        se mantienen exactamente iguales para garantizar que no se rompan diseños existentes.
-                    </p>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default Header2Examples