ywana-core8 0.1.103 → 0.2.2

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

@@ -1,553 +0,0 @@
-import React, { useState } from 'react'
-import { Property } from './property'
-import { Button } from './button'
-import { Text } from './text'
-
-/**
- * Ejemplos del componente Property mejorado manteniendo 100% compatibilidad
- */
-export const PropertyExamples = () => {
-    const [userProfile, setUserProfile] = useState({
-        name: 'John Doe',
-        email: 'john@example.com',
-        age: '30',
-        bio: 'Software developer with 5+ years of experience',
-        status: 'active',
-        location: 'New York'
-    })
-    const [isLoading, setIsLoading] = useState(false)
-    const [showAdvanced, setShowAdvanced] = useState(false)
-
-    const statusOptions = [
-        { label: 'Active', value: 'active' },
-        { label: 'Inactive', value: 'inactive' },
-        { label: 'Pending', value: 'pending' },
-        { label: 'Suspended', value: 'suspended' }
-    ]
-
-    const handlePropertyChange = (id, value) => {
-        setUserProfile(prev => ({ ...prev, [id]: value }))
-        console.log(`Property changed: ${id} = ${value}`)
-    }
-
-    const validateEmail = (value) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-        if (!emailRegex.test(value)) {
-            return { isValid: false, error: 'Invalid email format' }
-        }
-        return { isValid: true }
-    }
-
-    const validateAge = (value) => {
-        const age = parseInt(value)
-        if (isNaN(age) || age < 0 || age > 120) {
-            return { isValid: false, error: 'Age must be between 0 and 120' }
-        }
-        return { isValid: true }
-    }
-
-    const simulateLoading = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componente Property 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>Múltiples tipos de input</strong> - text, email, number, password, etc.</li>
-                    <li>📏 <strong>Validación avanzada</strong> - required, minLength, maxLength, pattern</li>
-                    <li>✅ <strong>Validación personalizada</strong> - validateValue function</li>
-                    <li>📄 <strong>Soporte multiline</strong> - textarea para textos largos</li>
-                    <li>📐 <strong>Múltiples tamaños</strong> - small, medium, large</li>
-                    <li>🎭 <strong>Variantes visuales</strong> - default, outlined, filled</li>
-                    <li>📱 <strong>Layouts flexibles</strong> - horizontal, vertical</li>
-                    <li>📋 <strong>Copy functionality</strong> - Copiar valores al clipboard</li>
-                    <li>⚠️ <strong>Estados avanzados</strong> - disabled, error, required, loading</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' }}>
-                        Profile: {userProfile.name} ({userProfile.status})
-                    </span>
-                </div>
-            </section>
-
-            {/* Property básico (Compatible) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📋 Property Básico (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <Property 
-                        id="name" 
-                        label="Name" 
-                        initial="John Doe" 
-                        value={userProfile.name} 
-                        editable={true} 
-                        onChange={handlePropertyChange}
-                    />
-                    <Property 
-                        id="location" 
-                        label="Location" 
-                        initial="New York" 
-                        value={userProfile.location} 
-                        editable={true} 
-                        onChange={handlePropertyChange}
-                    />
-                </div>
-                <Text size="sm" color="muted" style={{ marginTop: '0.5rem' }}>
-                    Funcionalidad original: editable con clear button
-                </Text>
-            </section>
-
-            {/* Property con opciones */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎯 Property con Opciones (Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px'
-                }}>
-                    <Property 
-                        id="status" 
-                        label="Status" 
-                        value={userProfile.status} 
-                        options={statusOptions}
-                        editable={false}
-                        copyable={true}
-                    />
-                    <Text size="sm" color="muted" style={{ marginTop: '0.5rem' }}>
-                        Valor mapeado desde opciones con funcionalidad de copia
-                    </Text>
-                </div>
-            </section>
-
-            {/* Property mejorado */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🚀 Property 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'
-                }}>
-                    <Property 
-                        id="email" 
-                        label="Email Address" 
-                        value={userProfile.email} 
-                        onChange={handlePropertyChange}
-                        editable={true}
-                        type="email"
-                        required={true}
-                        validateValue={validateEmail}
-                        placeholder="Enter email address"
-                        size="medium"
-                        variant="outlined"
-                        helperText="Valid email required"
-                        onValidationError={(error) => console.log('Email validation error:', error)}
-                    />
-                    <Property 
-                        id="age" 
-                        label="Age" 
-                        value={userProfile.age} 
-                        onChange={handlePropertyChange}
-                        editable={true}
-                        type="number"
-                        validateValue={validateAge}
-                        placeholder="Enter age"
-                        size="large"
-                        variant="filled"
-                        helperText="Age between 0-120"
-                        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'
-                }}>
-                    <Property 
-                        id="small-prop" 
-                        label="Small Size" 
-                        value="Small property" 
-                        editable={false}
-                        size="small"
-                        variant="default"
-                        copyable={true}
-                    />
-                    <Property 
-                        id="medium-prop" 
-                        label="Medium Size" 
-                        value="Medium property" 
-                        editable={false}
-                        size="medium"
-                        variant="outlined"
-                        copyable={true}
-                    />
-                    <Property 
-                        id="large-prop" 
-                        label="Large Size" 
-                        value="Large property" 
-                        editable={false}
-                        size="large"
-                        variant="filled"
-                        copyable={true}
-                    />
-                </div>
-            </section>
-
-            {/* Layouts */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📐 Layouts y Configuraciones</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <div>
-                        <h4>Horizontal Layout</h4>
-                        <Property 
-                            id="horizontal" 
-                            label="Property Name" 
-                            value="Property Value" 
-                            editable={false}
-                            layout="horizontal"
-                            nameWidth="40%"
-                            copyable={true}
-                        />
-                    </div>
-                    <div>
-                        <h4>Vertical Layout</h4>
-                        <Property 
-                            id="vertical" 
-                            label="Property Name" 
-                            value="Property Value" 
-                            editable={false}
-                            layout="vertical"
-                            copyable={true}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* Multiline y tipos especiales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📄 Multiline y Tipos Especiales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px'
-                }}>
-                    <Property 
-                        id="bio" 
-                        label="Biography" 
-                        value={userProfile.bio} 
-                        onChange={handlePropertyChange}
-                        editable={true}
-                        multiline={true}
-                        rows={4}
-                        placeholder="Enter biography..."
-                        maxLength={500}
-                        layout="vertical"
-                        variant="outlined"
-                        helperText="Maximum 500 characters"
-                    />
-                </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'
-                }}>
-                    <Property 
-                        id="required-prop" 
-                        label="Required Field" 
-                        value="" 
-                        onChange={() => {}}
-                        editable={true}
-                        required={true}
-                        placeholder="This field is required"
-                        helperText="This field is required"
-                    />
-                    <Property 
-                        id="error-prop" 
-                        label="Field with Error" 
-                        value="invalid-value" 
-                        onChange={() => {}}
-                        editable={true}
-                        error="This value is invalid"
-                    />
-                    <Property 
-                        id="disabled-prop" 
-                        label="Disabled Field" 
-                        value="Disabled value" 
-                        onChange={() => {}}
-                        editable={true}
-                        disabled={isLoading}
-                        helperText="Field is disabled"
-                    />
-                    <Property 
-                        id="readonly-prop" 
-                        label="Read-only Field" 
-                        value="Read-only value" 
-                        onChange={() => {}}
-                        editable={true}
-                        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'
-                    }}>
-                        <Property 
-                            id="pattern-prop" 
-                            label="Pattern Validation" 
-                            value="" 
-                            onChange={() => {}}
-                            editable={true}
-                            pattern="^[A-Z]{2,3}[0-9]{3,4}$"
-                            placeholder="ABC123"
-                            helperText="Format: 2-3 letters + 3-4 numbers"
-                        />
-                        <Property 
-                            id="length-prop" 
-                            label="Length Validation" 
-                            value="" 
-                            onChange={() => {}}
-                            editable={true}
-                            minLength={5}
-                            maxLength={20}
-                            placeholder="5-20 characters"
-                            helperText="Between 5 and 20 characters"
-                        />
-                    </div>
-                </section>
-            )}
-
-            {/* Loading y skeleton */}
-            {showAdvanced && (
-                <section style={{ marginBottom: '2rem' }}>
-                    <h3>⏳ Loading y Skeleton States</h3>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px',
-                        display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
-                        gap: '1rem'
-                    }}>
-                        <Property 
-                            id="loading-prop" 
-                            label="Loading Property" 
-                            value="Loading content..." 
-                            loading={isLoading}
-                        />
-                        <Property 
-                            id="skeleton-prop" 
-                            label="Skeleton Property" 
-                            value="Skeleton content" 
-                            skeleton={isLoading}
-                        />
-                    </div>
-                </section>
-            )}
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Property 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>❌ Property Original</h4>
-                        <ul>
-                            <li>Visualización clave-valor básica</li>
-                            <li>Modo editable con input text</li>
-                            <li>Soporte para opciones</li>
-                            <li>Clear button básico</li>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin tipos de input</li>
-                            <li>Sin validación de datos</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>✅ Property Mejorado</h4>
-                        <ul>
-                            <li>Mantiene funcionalidad original</li>
-                            <li>PropTypes completos y validación</li>
-                            <li>Múltiples tipos de input</li>
-                            <li>Validación avanzada y personalizada</li>
-                            <li>Soporte multiline (textarea)</li>
-                            <li>Estados disabled, error, required</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Copy functionality integrada</li>
-                            <li>Layouts flexibles (horizontal/vertical)</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, className, label, name, initial, value, editable, onChange, options) funcionan idéntico</li>
-                        <li>✅ Comportamiento de onChange sin cambios</li>
-                        <li>✅ Lógica de 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>👤 Perfil de Usuario</h4>
-                        <Property 
-                            id="user-name" 
-                            label="Full Name" 
-                            value="John Doe" 
-                            editable={true}
-                            onChange={() => {}}
-                            required={true}
-                            placeholder="Enter full name"
-                            helperText="First and last name"
-                        />
-                    </div>
-                    <div>
-                        <h4>⚙️ Configuración</h4>
-                        <Property 
-                            id="api-key" 
-                            label="API Key" 
-                            value="sk-1234567890abcdef" 
-                            editable={false}
-                            copyable={true}
-                            type="password"
-                            helperText="Click to copy API key"
-                        />
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default PropertyExamples