ywana-core8 0.1.75 → 0.1.76

package/src/html/chip.example.js

@@ -0,0 +1,355 @@
+import React, { useState } from 'react'
+import { Chip, Chips } from './chip'
+
+/**
+ * Ejemplos de uso de los componentes Chip mejorados
+ */
+export const ChipExamples = () => {
+    const [selectedTags, setSelectedTags] = useState(['react', 'javascript'])
+    const [selectedCategories, setSelectedCategories] = useState(['frontend'])
+    const [filterChips, setFilterChips] = useState(['active', 'recent'])
+
+    const handleTagChange = (selectedIds) => {
+        setSelectedTags(selectedIds)
+    }
+
+    const handleCategoryChange = (selectedIds) => {
+        setSelectedCategories(selectedIds)
+    }
+
+    const handleFilterChange = (selectedIds) => {
+        setFilterChips(selectedIds)
+    }
+
+    const handleChipDelete = (id) => {
+        console.log(`Chip ${id} deleted`)
+    }
+
+    // Datos para chips
+    const tagItems = [
+        { id: 'react', label: 'React', icon: 'code' },
+        { id: 'javascript', label: 'JavaScript', icon: 'javascript' },
+        { id: 'typescript', label: 'TypeScript', icon: 'code' },
+        { id: 'css', label: 'CSS', icon: 'style' },
+        { id: 'html', label: 'HTML', icon: 'html' },
+        { id: 'nodejs', label: 'Node.js', icon: 'dns' }
+    ]
+
+    const categoryItems = [
+        { id: 'frontend', label: 'Frontend', variant: 'primary' },
+        { id: 'backend', label: 'Backend', variant: 'secondary' },
+        { id: 'mobile', label: 'Mobile', variant: 'success' },
+        { id: 'desktop', label: 'Desktop', variant: 'warning' },
+        { id: 'devops', label: 'DevOps', variant: 'error' }
+    ]
+
+    const filterItems = [
+        { id: 'active', label: 'Activos', deletable: true },
+        { id: 'recent', label: 'Recientes', deletable: true },
+        { id: 'popular', label: 'Populares', deletable: true },
+        { id: 'archived', label: 'Archivados', deletable: true }
+    ]
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1000px', overflow: 'auto', maxHeight: '100vh' }}>
+            <h1>Ejemplos de Componentes Chip Mejorados</h1>
+            
+            <div style={{ 
+                background: '#f8f9fa', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                marginBottom: '2rem',
+                border: '1px solid #e9ecef'
+            }}>
+                <h3>✅ Mejoras Implementadas:</h3>
+                <ul>
+                    <li>🛡️ <strong>Validación de props</strong> - Advertencias para props incorrectas</li>
+                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, soporte de teclado, focus</li>
+                    <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
+                    <li>🎯 <strong>Estados avanzados</strong> - disabled, deletable, variants</li>
+                    <li>🎨 <strong>CSS mejorado</strong> - Estados visuales consistentes y responsivos</li>
+                    <li>⌨️ <strong>Soporte de teclado</strong> - Enter, Espacio, Delete para interactuar</li>
+                    <li>📏 <strong>Tamaños múltiples</strong> - small, normal, large</li>
+                    <li>🎨 <strong>Variantes de color</strong> - default, primary, secondary, success, warning, error</li>
+                    <li>🗑️ <strong>Chips deletables</strong> - Con icono de eliminar integrado</li>
+                    <li>👥 <strong>Chips container mejorado</strong> - Manejo de selección múltiple</li>
+                    <li>🧪 <strong>Pruebas unitarias</strong> - 18 pruebas que cubren toda la funcionalidad</li>
+                </ul>
+            </div>
+
+            {/* Chips básicos */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Chips Básicos</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem' }}>
+                        <Chip label="Normal" />
+                        <Chip label="Outlined" outlined={true} />
+                        <Chip label="Selected" selected={true} />
+                        <Chip label="Con Icono" icon="star" />
+                        <Chip icon="favorite" ariaLabel="Favorito" />
+                        <Chip label="Deletable" deletable={true} onDelete={handleChipDelete} />
+                        <Chip label="Disabled" disabled={true} />
+                    </div>
+                </div>
+            </section>
+
+            {/* Diferentes tamaños */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Diferentes Tamaños</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '0.5rem' }}>
+                        <Chip label="Pequeño" size="small" />
+                        <Chip label="Normal" size="normal" />
+                        <Chip label="Grande" size="large" />
+                    </div>
+                </div>
+            </section>
+
+            {/* Variantes de color */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Variantes de Color</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                        <Chip label="Default" variant="default" />
+                        <Chip label="Primary" variant="primary" />
+                        <Chip label="Secondary" variant="secondary" />
+                        <Chip label="Success" variant="success" />
+                        <Chip label="Warning" variant="warning" />
+                        <Chip label="Error" variant="error" />
+                    </div>
+                </div>
+            </section>
+
+            {/* Chips con selección múltiple */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Tags de Tecnología (Selección Múltiple)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                }}>
+                    <Chips
+                        items={tagItems}
+                        selected={selectedTags}
+                        multiSelect={true}
+                        onChange={handleTagChange}
+                        size="normal"
+                    />
+                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
+                        <strong>Seleccionados:</strong> {selectedTags.join(', ') || 'Ninguno'}
+                    </p>
+                </div>
+            </section>
+
+            {/* Chips con selección única */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Categorías (Selección Única)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Chips
+                        items={categoryItems}
+                        selected={selectedCategories}
+                        multiSelect={false}
+                        onChange={handleCategoryChange}
+                        size="normal"
+                    />
+                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
+                        <strong>Categoría seleccionada:</strong> {selectedCategories[0] || 'Ninguna'}
+                    </p>
+                </div>
+            </section>
+
+            {/* Chips deletables */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Filtros (Deletables)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Chips
+                        items={filterItems}
+                        selected={filterChips}
+                        multiSelect={true}
+                        deletable={true}
+                        onChange={handleFilterChange}
+                        onDelete={handleChipDelete}
+                        size="normal"
+                    />
+                    <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
+                        <strong>Filtros activos:</strong> {filterChips.join(', ') || 'Ninguno'}
+                    </p>
+                    <p style={{ fontSize: '0.8rem', color: '#888' }}>
+                        Usa el icono X para eliminar filtros, o las teclas Delete/Backspace cuando están enfocados.
+                    </p>
+                </div>
+            </section>
+
+            {/* Chips individuales con diferentes configuraciones */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Configuraciones Especiales</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+                        <div>
+                            <h4>Con Tooltip</h4>
+                            <Chip 
+                                label="Hover me" 
+                                tooltip={{ content: 'Este es un tooltip informativo' }}
+                            />
+                        </div>
+                        <div>
+                            <h4>Con Acción</h4>
+                            <Chip 
+                                label="Con Badge" 
+                                action={<span style={{ 
+                                    background: '#dc3545', 
+                                    color: 'white', 
+                                    borderRadius: '50%', 
+                                    padding: '0.125rem 0.25rem', 
+                                    fontSize: '0.7rem' 
+                                }}>5</span>}
+                            />
+                        </div>
+                        <div>
+                            <h4>Outlined + Selected</h4>
+                            <Chip 
+                                label="Outlined Selected" 
+                                outlined={true}
+                                selected={true}
+                                icon="check_circle"
+                            />
+                        </div>
+                        <div>
+                            <h4>Large + Deletable</h4>
+                            <Chip 
+                                label="Large Deletable" 
+                                size="large"
+                                deletable={true}
+                                variant="primary"
+                                onDelete={handleChipDelete}
+                            />
+                        </div>
+                    </div>
+                </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 chips</li>
+                        <li>Usa <kbd>Enter</kbd> o <kbd>Espacio</kbd> para seleccionar/deseleccionar</li>
+                        <li>Usa <kbd>Delete</kbd> o <kbd>Backspace</kbd> para eliminar chips deletables</li>
+                        <li>Observa los indicadores de focus</li>
+                        <li>Los lectores de pantalla anunciarán el estado y etiquetas</li>
+                    </ol>
+                    
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '1rem' }}>
+                        <Chip label="Chip Accesible 1" onSelect={() => {}} />
+                        <Chip label="Chip Accesible 2" onSelect={() => {}} />
+                        <Chip label="Deletable" deletable={true} onDelete={handleChipDelete} />
+                        <Chip icon="accessibility" ariaLabel="Configuración de accesibilidad" />
+                    </div>
+                </div>
+            </section>
+
+            {/* Comparación antes/después */}
+            <section style={{ marginBottom: '2rem' }}>
+                <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>Sin validación de props</li>
+                            <li>Sin accesibilidad</li>
+                            <li>Manejo limitado de eventos</li>
+                            <li>Sin estados avanzados</li>
+                            <li>Chips container básico</li>
+                            <li>Sin tamaños múltiples</li>
+                            <li>Prop action confusa</li>
+                            <li>Sin modo deletable</li>
+                            <li>CSS hardcodeado</li>
+                        </ul>
+                    </div>
+                    <div style={{ 
+                        background: '#e8f5e8', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #c8e6c9'
+                    }}>
+                        <h4>✅ Después</h4>
+                        <ul>
+                            <li>PropTypes completos</li>
+                            <li>Accesibilidad total</li>
+                            <li>Eventos completos (click, keydown, focus)</li>
+                            <li>Estados avanzados (disabled, deletable)</li>
+                            <li>Chips container inteligente</li>
+                            <li>Tamaños small, normal, large</li>
+                            <li>Props claras y consistentes</li>
+                            <li>Modo deletable integrado</li>
+                            <li>CSS con variables y temas</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            {/* Estado actual */}
+            <section>
+                <h3>Estado Actual de Selecciones</h3>
+                <pre style={{ 
+                    background: '#f8f9fa', 
+                    padding: '1rem', 
+                    borderRadius: '4px',
+                    fontSize: '0.9rem',
+                    overflow: 'auto'
+                }}>
+                    {JSON.stringify({
+                        tags: selectedTags,
+                        categories: selectedCategories,
+                        filters: filterChips
+                    }, null, 2)}
+                </pre>
+            </section>
+        </div>
+    )
+}
+
+export default ChipExamples