ywana-core8 0.1.103 → 0.2.1

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

@@ -1,503 +0,0 @@
-import React, { useState } from 'react'
-import { TokenField } from './tokenfield'
-import { Button } from './button'
-import { Text } from './text'
-
-/**
- * Ejemplos del componente TokenField mejorado manteniendo 100% compatibilidad
- */
-export const TokenFieldExamples = () => {
-    const [basicTokens, setBasicTokens] = useState(['React', 'JavaScript'])
-    const [tagTokens, setTagTokens] = useState(['frontend', 'ui', 'components'])
-    const [emailTokens, setEmailTokens] = useState(['user@example.com'])
-    const [skillTokens, setSkillTokens] = useState(['JavaScript'])
-    const [isLoading, setIsLoading] = useState(false)
-    const [showAdvanced, setShowAdvanced] = useState(false)
-
-    const skillOptions = [
-        { label: 'JavaScript', value: 'javascript' },
-        { label: 'TypeScript', value: 'typescript' },
-        { label: 'React', value: 'react' },
-        { label: 'Vue.js', value: 'vue' },
-        { label: 'Angular', value: 'angular' },
-        { label: 'Node.js', value: 'nodejs' },
-        { label: 'Python', value: 'python' },
-        { label: 'Java', value: 'java' },
-        { label: 'C++', value: 'cpp' },
-        { label: 'Go', value: 'go' }
-    ]
-
-    const categoryOptions = [
-        { label: 'Frontend', value: 'frontend' },
-        { label: 'Backend', value: 'backend' },
-        { label: 'Database', value: 'database' },
-        { label: 'DevOps', value: 'devops' },
-        { label: 'Mobile', value: 'mobile' },
-        { label: 'Testing', value: 'testing' }
-    ]
-
-    const handleBasicChange = (id, tokens) => {
-        setBasicTokens(tokens)
-        console.log('Basic tokens changed:', tokens)
-    }
-
-    const handleTagChange = (id, tokens) => {
-        setTagTokens(tokens)
-        console.log('Tag tokens changed:', tokens)
-    }
-
-    const handleEmailChange = (id, tokens) => {
-        setEmailTokens(tokens)
-        console.log('Email tokens changed:', tokens)
-    }
-
-    const handleSkillChange = (id, tokens) => {
-        setSkillTokens(tokens)
-        console.log('Skill tokens changed:', tokens)
-    }
-
-    const validateEmail = (token) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-        if (!emailRegex.test(token)) {
-            return { isValid: false, error: 'Invalid email format' }
-        }
-        return { isValid: true }
-    }
-
-    const validateTag = (token) => {
-        if (token.length < 2) {
-            return { isValid: false, error: 'Tag must be at least 2 characters' }
-        }
-        if (token.includes(' ')) {
-            return { isValid: false, error: 'Tags cannot contain spaces' }
-        }
-        return { isValid: true }
-    }
-
-    const simulateLoading = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componente TokenField 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>Límites de tokens</strong> - minTokens, maxTokens con validación</li>
-                    <li>🚫 <strong>Control de duplicados</strong> - allowDuplicates configurable</li>
-                    <li>✅ <strong>Validación personalizada</strong> - validateToken function</li>
-                    <li>⌨️ <strong>Separadores múltiples</strong> - comma, semicolon, enter</li>
-                    <li>📏 <strong>Múltiples tamaños</strong> - small, medium, large</li>
-                    <li>🎭 <strong>Variantes visuales</strong> - default, outlined, filled</li>
-                    <li>⚠️ <strong>Estados avanzados</strong> - disabled, error, required, loading</li>
-                    <li>🧹 <strong>Clear functionality</strong> - Botón para limpiar todos los tokens</li>
-                    <li>🔍 <strong>Búsqueda en opciones</strong> - Filtrado en tiempo real</li>
-                    <li>📊 <strong>Ordenamiento</strong> - Opciones ordenadas alfabéticamente</li>
-                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, navegación por teclado</li>
-                    <li>📱 <strong>Responsive total</strong> - Adaptación móvil y dark mode</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={showAdvanced ? "Hide Advanced" : "Show Advanced"} 
-                        icon={showAdvanced ? "visibility_off" : "visibility"}
-                        action={() => setShowAdvanced(!showAdvanced)}
-                    />
-                    <span style={{ marginLeft: 'auto', color: '#666' }}>
-                        Total tokens: {basicTokens.length + tagTokens.length + emailTokens.length + skillTokens.length}
-                    </span>
-                </div>
-            </section>
-
-            {/* TokenField básico (Compatible) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🏷️ TokenField Básico (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px'
-                }}>
-                    <TokenField 
-                        id="basic" 
-                        label="Basic Tokens" 
-                        tokens={basicTokens} 
-                        onChange={handleBasicChange}
-                    />
-                    <Text size="sm" color="muted" style={{ marginTop: '0.5rem' }}>
-                        Funcionalidad original: agregar tokens con Enter, eliminar con click
-                    </Text>
-                </div>
-            </section>
-
-            {/* TokenField con opciones */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎯 TokenField con Opciones (Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px'
-                }}>
-                    <TokenField 
-                        id="skills" 
-                        label="Skills" 
-                        tokens={skillTokens} 
-                        options={skillOptions}
-                        predictive={true}
-                        onChange={handleSkillChange}
-                    />
-                    <Text size="sm" color="muted" style={{ marginTop: '0.5rem' }}>
-                        Dropdown con opciones predefinidas y búsqueda predictiva
-                    </Text>
-                </div>
-            </section>
-
-            {/* TokenField mejorado */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🚀 TokenField Mejorado con Nuevas Características</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <TokenField 
-                        id="tags" 
-                        label="Tags" 
-                        tokens={tagTokens} 
-                        onChange={handleTagChange}
-                        placeholder="Add tag..."
-                        maxTokens={5}
-                        minTokens={1}
-                        allowDuplicates={false}
-                        validateToken={validateTag}
-                        tokenSeparators={[',', ';', ' ']}
-                        size="medium"
-                        variant="outlined"
-                        clearable={true}
-                        helperText="Max 5 tags, no duplicates, no spaces"
-                        onTokenAdd={(token) => console.log('Tag added:', token)}
-                        onTokenRemove={(token) => console.log('Tag removed:', token)}
-                        onValidationError={(error, token) => console.log('Validation error:', error, token)}
-                    />
-                    <TokenField 
-                        id="emails" 
-                        label="Email Addresses" 
-                        tokens={emailTokens} 
-                        onChange={handleEmailChange}
-                        placeholder="Add email..."
-                        validateToken={validateEmail}
-                        size="large"
-                        variant="filled"
-                        required={true}
-                        helperText="Enter valid email addresses"
-                        disabled={isLoading}
-                    />
-                </div>
-            </section>
-
-            {/* Tamaños y variantes */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📏 Tamaños y Variantes</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <TokenField 
-                        id="small" 
-                        label="Small Size" 
-                        tokens={['small', 'tokens']} 
-                        onChange={() => {}}
-                        size="small"
-                        variant="default"
-                        placeholder="Small..."
-                    />
-                    <TokenField 
-                        id="medium" 
-                        label="Medium Size" 
-                        tokens={['medium', 'tokens']} 
-                        onChange={() => {}}
-                        size="medium"
-                        variant="outlined"
-                        placeholder="Medium..."
-                    />
-                    <TokenField 
-                        id="large" 
-                        label="Large Size" 
-                        tokens={['large', 'tokens']} 
-                        onChange={() => {}}
-                        size="large"
-                        variant="filled"
-                        placeholder="Large..."
-                    />
-                </div>
-            </section>
-
-            {/* Estados especiales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>⚠️ Estados Especiales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <TokenField 
-                        id="required" 
-                        label="Required Field" 
-                        tokens={['required']} 
-                        onChange={() => {}}
-                        required={true}
-                        minTokens={1}
-                        helperText="This field is required"
-                    />
-                    <TokenField 
-                        id="error" 
-                        label="Field with Error" 
-                        tokens={['invalid-token']} 
-                        onChange={() => {}}
-                        error="Invalid token detected"
-                    />
-                    <TokenField 
-                        id="disabled" 
-                        label="Disabled Field" 
-                        tokens={['disabled', 'tokens']} 
-                        onChange={() => {}}
-                        disabled={isLoading}
-                        helperText="Field is disabled"
-                    />
-                    <TokenField 
-                        id="readonly" 
-                        label="Read-only Field" 
-                        tokens={['readonly', 'tokens']} 
-                        onChange={() => {}}
-                        readOnly={true}
-                        helperText="Field is read-only"
-                    />
-                </div>
-            </section>
-
-            {/* Características avanzadas */}
-            {showAdvanced && (
-                <section style={{ marginBottom: '2rem' }}>
-                    <h3>🔬 Características Avanzadas</h3>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
-                        gap: '1rem'
-                    }}>
-                        <TokenField 
-                            id="searchable" 
-                            label="Searchable Options" 
-                            tokens={[]} 
-                            options={categoryOptions}
-                            onChange={() => {}}
-                            searchable={true}
-                            sortable={true}
-                            placeholder="Search categories..."
-                            helperText="Type to search and filter options"
-                        />
-                        <TokenField 
-                            id="limits" 
-                            label="With Limits" 
-                            tokens={['token1', 'token2']} 
-                            onChange={() => {}}
-                            maxTokens={3}
-                            minTokens={2}
-                            allowDuplicates={false}
-                            clearable={false}
-                            helperText="2-3 tokens, no duplicates"
-                        />
-                    </div>
-                </section>
-            )}
-
-            {/* Separadores y validación */}
-            {showAdvanced && (
-                <section style={{ marginBottom: '2rem' }}>
-                    <h3>⌨️ Separadores y Validación</h3>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px'
-                    }}>
-                        <TokenField 
-                            id="separators" 
-                            label="Multiple Separators" 
-                            tokens={[]} 
-                            onChange={() => {}}
-                            tokenSeparators={[',', ';', '|', '\n']}
-                            placeholder="Use comma, semicolon, pipe, or enter..."
-                            helperText="Try typing: token1,token2;token3|token4 and press enter"
-                        />
-                        <div style={{ marginTop: '1rem' }}>
-                            <Text size="sm" color="muted">
-                                <strong>Separadores soportados:</strong> Comma (,), Semicolon (;), Pipe (|), Enter
-                            </Text>
-                        </div>
-                    </div>
-                </section>
-            )}
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: TokenField 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>❌ TokenField Original</h4>
-                        <ul>
-                            <li>Funcionalidad básica de tokens</li>
-                            <li>Soporte para opciones dropdown</li>
-                            <li>Búsqueda predictiva</li>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin límites de tokens</li>
-                            <li>Sin validación personalizada</li>
-                            <li>Sin estados avanzados</li>
-                            <li>Sin accesibilidad</li>
-                            <li>CSS básico sin responsive</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ TokenField Mejorado</h4>
-                        <ul>
-                            <li>Mantiene funcionalidad original</li>
-                            <li>PropTypes completos y validación</li>
-                            <li>Límites min/max con advertencias</li>
-                            <li>Validación personalizada de tokens</li>
-                            <li>Múltiples separadores configurables</li>
-                            <li>Estados disabled, error, required</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Búsqueda y ordenamiento en opciones</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>✅ Props originales (id, label, tokens, readOnly, options, predictive, onChange) funcionan idéntico</li>
-                        <li>✅ Comportamiento de onChange sin cambios</li>
-                        <li>✅ Estructura de tokens y opciones preservada</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>
-
-            {/* Casos de uso */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎯 Casos de Uso Comunes</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <div>
-                        <h4>🏷️ Sistema de Tags</h4>
-                        <TokenField 
-                            id="blog-tags" 
-                            label="Blog Tags" 
-                            tokens={['react', 'javascript']} 
-                            onChange={() => {}}
-                            maxTokens={10}
-                            allowDuplicates={false}
-                            validateToken={(token) => token.length >= 2 ? { isValid: true } : { isValid: false, error: 'Too short' }}
-                            placeholder="Add tags..."
-                            helperText="Tags for blog post categorization"
-                        />
-                    </div>
-                    <div>
-                        <h4>👥 Gestión de Usuarios</h4>
-                        <TokenField 
-                            id="user-emails" 
-                            label="Invite Users" 
-                            tokens={[]} 
-                            onChange={() => {}}
-                            validateToken={validateEmail}
-                            placeholder="Enter email addresses..."
-                            helperText="Add users to invite to the project"
-                        />
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default TokenFieldExamples