ywana-core8 0.1.103 → 0.2.1

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

@@ -1,446 +0,0 @@
-import React, { useState } from 'react'
-import { Tabs, Tab, Stack } from './tab'
-import { Button } from './button'
-import { Icon } from './icon'
-
-/**
- * Ejemplos de los componentes Tab mejorados manteniendo 100% compatibilidad
- */
-export const TabExamples = () => {
-    const [selectedTab, setSelectedTab] = useState(0)
-    const [selectedVerticalTab, setSelectedVerticalTab] = useState(0)
-    const [selectedPersistentTab, setSelectedPersistentTab] = useState(0)
-    const [closableTabs, setClosableTabs] = useState([
-        { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
-        { id: 'tab2', label: 'Tab 2', content: 'Content 2' },
-        { id: 'tab3', label: 'Tab 3', content: 'Content 3' }
-    ])
-
-    const handleTabChange = (index) => {
-        setSelectedTab(index)
-    }
-
-    const handleVerticalTabChange = (index) => {
-        setSelectedVerticalTab(index)
-    }
-
-    const handlePersistentTabChange = (index) => {
-        setSelectedPersistentTab(index)
-    }
-
-    const handleCloseTab = (id) => {
-        const newTabs = closableTabs.filter(tab => tab.id !== id)
-        setClosableTabs(newTabs)
-        
-        // Adjust selected tab if necessary
-        const currentIndex = closableTabs.findIndex(tab => tab.id === id)
-        if (currentIndex <= selectedTab && selectedTab > 0) {
-            setSelectedTab(selectedTab - 1)
-        }
-    }
-
-    const beforeChangeHandler = async (newTab, currentTab) => {
-        // Simulate validation
-        if (newTab === 2) {
-            const confirmed = window.confirm('Are you sure you want to switch to Tab 3?')
-            return confirmed
-        }
-        return true
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componentes Tab Mejorados</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>Orientación vertical</strong> - Tabs horizontales y verticales</li>
-                    <li>🔒 <strong>Tabs cerrable</strong> - Con botón de cierre y callbacks</li>
-                    <li>🏷️ <strong>Badges y tooltips</strong> - Indicadores de contenido y ayuda</li>
-                    <li>💾 <strong>Persistencia</strong> - Recuerda tab seleccionado en localStorage</li>
-                    <li>🔄 <strong>Validación de cambios</strong> - Hook beforeChange para validar</li>
-                    <li>⚡ <strong>Lazy loading</strong> - Stack con carga perezosa de contenido</li>
-                    <li>📱 <strong>Responsive total</strong> - Adaptación móvil, dark mode, high contrast</li>
-                    <li>🧪 <strong>21 Pruebas unitarias</strong> - Verifican compatibilidad y funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* Tabs básicos (compatible con versión original) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tabs Básicos (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Tabs selected={selectedTab} onChange={handleTabChange}>
-                        <Tab label="Home" icon="home" />
-                        <Tab label="Profile" icon="person" />
-                        <Tab label="Settings" icon="settings" />
-                        <Tab label="Help" icon="help" />
-                    </Tabs>
-                    <Stack selected={selectedTab}>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Home Content</h4>
-                            <p>Welcome to the home page. This is the main dashboard.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Profile Content</h4>
-                            <p>Manage your profile information and preferences.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Settings Content</h4>
-                            <p>Configure application settings and options.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Help Content</h4>
-                            <p>Find help and documentation for using the application.</p>
-                        </div>
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Tabs con badges */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tabs con Badges y Tooltips</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Tabs selected={selectedTab} onChange={handleTabChange}>
-                        <Tab 
-                            label="Messages" 
-                            icon="mail" 
-                            badge={5}
-                            tooltip="You have 5 unread messages"
-                        />
-                        <Tab 
-                            label="Notifications" 
-                            icon="notifications" 
-                            badge="99+"
-                            tooltip="You have many notifications"
-                        />
-                        <Tab 
-                            label="Tasks" 
-                            icon="task_alt" 
-                            badge={3}
-                            tooltip="You have 3 pending tasks"
-                        />
-                        <Tab 
-                            label="Archive" 
-                            icon="archive" 
-                            tooltip="Archived items"
-                        />
-                    </Tabs>
-                    <Stack selected={selectedTab}>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Messages (5 unread)</h4>
-                            <p>Your inbox with unread messages highlighted.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Notifications (99+)</h4>
-                            <p>System notifications and alerts.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Tasks (3 pending)</h4>
-                            <p>Your task list with pending items.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Archive</h4>
-                            <p>Archived messages and notifications.</p>
-                        </div>
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Tabs verticales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tabs Verticales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    display: 'flex',
-                    height: '300px'
-                }}>
-                    <Tabs 
-                        selected={selectedVerticalTab} 
-                        onChange={handleVerticalTabChange}
-                        orientation="vertical"
-                        fillLeft={false}
-                        fillRight={false}
-                    >
-                        <Tab label="Dashboard" icon="dashboard" />
-                        <Tab label="Analytics" icon="analytics" />
-                        <Tab label="Reports" icon="assessment" />
-                        <Tab label="Users" icon="people" />
-                    </Tabs>
-                    <Stack selected={selectedVerticalTab} style={{ flex: 1 }}>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Dashboard</h4>
-                            <p>Main dashboard with key metrics and overview.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Analytics</h4>
-                            <p>Detailed analytics and data visualization.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Reports</h4>
-                            <p>Generate and view various reports.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Users</h4>
-                            <p>User management and administration.</p>
-                        </div>
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Tabs cerrables */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tabs Cerrables</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Tabs selected={selectedTab} onChange={handleTabChange}>
-                        {closableTabs.map((tab, index) => (
-                            <Tab 
-                                key={tab.id}
-                                id={tab.id}
-                                label={tab.label}
-                                icon="description"
-                                closeable={true}
-                                onClose={handleCloseTab}
-                            />
-                        ))}
-                        <Tab 
-                            label="Add New" 
-                            icon="add" 
-                            onSelect={() => {
-                                const newId = `tab${Date.now()}`
-                                const newTab = {
-                                    id: newId,
-                                    label: `New Tab ${closableTabs.length + 1}`,
-                                    content: `Content for new tab ${closableTabs.length + 1}`
-                                }
-                                setClosableTabs([...closableTabs, newTab])
-                                setSelectedTab(closableTabs.length)
-                            }}
-                        />
-                    </Tabs>
-                    <Stack selected={selectedTab}>
-                        {closableTabs.map((tab, index) => (
-                            <div key={tab.id} style={{ padding: '2rem' }}>
-                                <h4>{tab.label}</h4>
-                                <p>{tab.content}</p>
-                                <Button 
-                                    label="Close Tab" 
-                                    icon="close"
-                                    action={() => handleCloseTab(tab.id)}
-                                />
-                            </div>
-                        ))}
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Tabs con validación */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tabs con Validación (beforeChange)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Tabs 
-                        selected={selectedTab} 
-                        onChange={handleTabChange}
-                        beforeChange={beforeChangeHandler}
-                    >
-                        <Tab label="Tab 1" icon="looks_one" />
-                        <Tab label="Tab 2" icon="looks_two" />
-                        <Tab label="Tab 3 (Protected)" icon="looks_3" />
-                        <Tab label="Tab 4" icon="looks_4" />
-                    </Tabs>
-                    <Stack selected={selectedTab}>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Tab 1</h4>
-                            <p>This tab can be accessed freely.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Tab 2</h4>
-                            <p>This tab can also be accessed freely.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Tab 3 (Protected)</h4>
-                            <p>This tab requires confirmation before switching to it.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Tab 4</h4>
-                            <p>This tab can be accessed freely.</p>
-                        </div>
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Tabs persistentes */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Tabs Persistentes (localStorage)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Tabs 
-                        selected={selectedPersistentTab} 
-                        onChange={handlePersistentTabChange}
-                        persistent={true}
-                        persistKey="example-tabs"
-                    >
-                        <Tab label="Persistent 1" icon="save" />
-                        <Tab label="Persistent 2" icon="bookmark" />
-                        <Tab label="Persistent 3" icon="favorite" />
-                    </Tabs>
-                    <Stack selected={selectedPersistentTab}>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Persistent Tab 1</h4>
-                            <p>This tab selection is saved to localStorage and will be remembered when you reload the page.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Persistent Tab 2</h4>
-                            <p>Try switching tabs and then refreshing the page - your selection will be preserved.</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Persistent Tab 3</h4>
-                            <p>This persistence feature is useful for maintaining user preferences across sessions.</p>
-                        </div>
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Stack con lazy loading */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Stack con Lazy Loading</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <Tabs selected={selectedTab} onChange={handleTabChange}>
-                        <Tab label="Lazy 1" icon="hourglass_empty" />
-                        <Tab label="Lazy 2" icon="hourglass_full" />
-                        <Tab label="Lazy 3" icon="schedule" />
-                    </Tabs>
-                    <Stack selected={selectedTab} lazy={true} keepMounted={true}>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Lazy Loaded Content 1</h4>
-                            <p>This content is only rendered when the tab is first accessed.</p>
-                            <p>Timestamp: {new Date().toLocaleTimeString()}</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Lazy Loaded Content 2</h4>
-                            <p>Heavy components can benefit from lazy loading to improve initial render performance.</p>
-                            <p>Timestamp: {new Date().toLocaleTimeString()}</p>
-                        </div>
-                        <div style={{ padding: '2rem' }}>
-                            <h4>Lazy Loaded Content 3</h4>
-                            <p>Once loaded, content is kept mounted for better user experience.</p>
-                            <p>Timestamp: {new Date().toLocaleTimeString()}</p>
-                        </div>
-                    </Stack>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Tab 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>❌ Tab Original</h4>
-                        <ul>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Solo orientación horizontal</li>
-                            <li>Sin tabs cerrables</li>
-                            <li>Sin badges ni tooltips</li>
-                            <li>Sin persistencia</li>
-                            <li>Sin validación de cambios</li>
-                            <li>Sin lazy loading</li>
-                            <li>CSS básico sin responsive</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Tab Mejorado</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Orientación horizontal y vertical</li>
-                            <li>Tabs cerrables con callbacks</li>
-                            <li>Badges, tooltips y meta información</li>
-                            <li>Persistencia en localStorage</li>
-                            <li>Hook beforeChange para validación</li>
-                            <li>Stack con lazy loading</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 selección idéntico</li>
-                        <li>✅ Stack 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 TabExamples

package/src/html/tab.test.js

@@ -1,25 +0,0 @@
-import React, { useState } from 'react'
-import { Icon, Stack } from '.'
-import { Tabs, Tab } from './tab'
-
-const TabTest = (prop) => {
-
-    const [selected, setSelected] = useState(0)
-
-    return (
-        <>
-            <Tabs selected={selected} onChange={(id) => setSelected(id) }>
-                {null}
-                <Tab label="tab1" action={<Icon icon="close" size="small" />} />
-                <Tab label="tab2" action={<Icon icon="close" size="small" />} />
-                <Tab label="tab3" action={<Icon icon="close" size="small" />} />
-            </Tabs>
-            <Stack selected={selected}>
-                <div>Content 1</div>
-                {null}
-                <div>Content 2</div>
-                <div>Content 3</div>
-            </Stack>
-        </>
-    )
-}