ywana-core8 0.1.103 → 0.2.2

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

@@ -1,527 +0,0 @@
-import React, { useState } from 'react'
-import { ColorField, ColorPicker, ColorUtils } from './color'
-import { Button } from './button'
-import { Text } from './text'
-
-/**
- * Ejemplos del componente Color mejorado manteniendo 100% compatibilidad
- */
-export const ColorExamples = () => {
-    const [selectedColor, setSelectedColor] = useState('#2196f3')
-    const [formColors, setFormColors] = useState({
-        primary: '#2196f3',
-        secondary: '#757575',
-        accent: '#ff4081',
-        background: '#ffffff'
-    })
-    const [isLoading, setIsLoading] = useState(false)
-    const [showAdvanced, setShowAdvanced] = useState(false)
-
-    const presetColors = [
-        '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
-        '#000000', '#FFFFFF', '#808080', '#800000', '#008000', '#000080',
-        '#FFA500', '#800080', '#FFC0CB', '#A52A2A', '#808000', '#008080'
-    ]
-
-    const handleColorChange = (id, color) => {
-        setFormColors(prev => ({ ...prev, [id]: color }))
-        console.log(`Color changed: ${id} = ${color}`)
-    }
-
-    const handleSingleColorChange = (color) => {
-        setSelectedColor(color)
-        console.log(`Selected color: ${color}`)
-    }
-
-    const simulateLoading = () => {
-        setIsLoading(true)
-        setTimeout(() => setIsLoading(false), 2000)
-    }
-
-    const generatePalette = () => {
-        const palette = ColorUtils.generatePalette(selectedColor, 5)
-        console.log('Generated palette:', palette)
-        return palette
-    }
-
-    const analyzeColor = (color) => {
-        const rgb = ColorUtils.hexToRgb(color)
-        const isLight = ColorUtils.isLight(color)
-        const contrastWithWhite = ColorUtils.getContrastRatio(color, '#FFFFFF')
-        const contrastWithBlack = ColorUtils.getContrastRatio(color, '#000000')
-
-        return {
-            rgb,
-            isLight,
-            contrastWithWhite: contrastWithWhite.toFixed(2),
-            contrastWithBlack: contrastWithBlack.toFixed(2),
-            recommendedText: isLight ? '#000000' : '#FFFFFF'
-        }
-    }
-
-    const colorAnalysis = analyzeColor(selectedColor)
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componente Color 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 formatos</strong> - hex, rgb, hsl con validación</li>
-                    <li>👁️ <strong>Preview visual</strong> - Vista previa del color seleccionado</li>
-                    <li>🎯 <strong>Colores preset</strong> - Paleta de colores predefinidos</li>
-                    <li>🧹 <strong>Clear functionality</strong> - Botón para limpiar selección</li>
-                    <li>📏 <strong>Múltiples tamaños</strong> - small, medium, large</li>
-                    <li>🎭 <strong>Variantes visuales</strong> - default, outlined, filled</li>
-                    <li>⚠️ <strong>Validación y errores</strong> - Estados de error y helper text</li>
-                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, focus, navegación</li>
-                    <li>🔧 <strong>Utilidades de color</strong> - Conversiones y análisis</li>
-                    <li>🎨 <strong>Color picker</strong> - Selector de colores avanzado</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)}
-                    />
-                    <Button 
-                        label="Generate Palette" 
-                        icon="palette" 
-                        action={generatePalette}
-                    />
-                    <span style={{ marginLeft: 'auto', color: '#666' }}>
-                        Selected: {selectedColor}
-                    </span>
-                </div>
-            </section>
-
-            {/* ColorField básico (Compatible) */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎨 ColorField Básico (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
-                    gap: '1rem'
-                }}>
-                    <ColorField 
-                        id="basic1" 
-                        label="Color Básico" 
-                        value={formColors.primary} 
-                        onChange={handleColorChange}
-                    />
-                    <ColorField 
-                        id="basic2" 
-                        label="Color Secundario" 
-                        value={formColors.secondary} 
-                        onChange={handleColorChange}
-                    />
-                </div>
-            </section>
-
-            {/* ColorField mejorado */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎨 ColorField 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'
-                }}>
-                    <ColorField 
-                        id="enhanced1" 
-                        label="Color con Preview" 
-                        value={formColors.accent} 
-                        onChange={handleColorChange}
-                        showPreview={true}
-                        showValue={true}
-                        clearable={true}
-                        size="medium"
-                        variant="outlined"
-                        helperText="Selecciona un color de acento"
-                    />
-                    <ColorField 
-                        id="enhanced2" 
-                        label="Color con Presets" 
-                        value={formColors.background} 
-                        onChange={handleColorChange}
-                        showPreview={true}
-                        presetColors={presetColors.slice(0, 8)}
-                        size="large"
-                        variant="filled"
-                        helperText="Color de fondo con presets"
-                    />
-                </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'
-                }}>
-                    <ColorField 
-                        id="small" 
-                        label="Small Size" 
-                        value="#FF5722" 
-                        onChange={handleColorChange}
-                        size="small"
-                        variant="default"
-                        showPreview={true}
-                    />
-                    <ColorField 
-                        id="medium" 
-                        label="Medium Size" 
-                        value="#4CAF50" 
-                        onChange={handleColorChange}
-                        size="medium"
-                        variant="outlined"
-                        showPreview={true}
-                    />
-                    <ColorField 
-                        id="large" 
-                        label="Large Size" 
-                        value="#9C27B0" 
-                        onChange={handleColorChange}
-                        size="large"
-                        variant="filled"
-                        showPreview={true}
-                    />
-                </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'
-                }}>
-                    <ColorField 
-                        id="required" 
-                        label="Campo Requerido" 
-                        value={formColors.primary} 
-                        onChange={handleColorChange}
-                        required={true}
-                        showPreview={true}
-                        helperText="Este campo es obligatorio"
-                    />
-                    <ColorField 
-                        id="error" 
-                        label="Campo con Error" 
-                        value="#invalid" 
-                        onChange={handleColorChange}
-                        showPreview={true}
-                        error="Color inválido"
-                    />
-                    <ColorField 
-                        id="disabled" 
-                        label="Campo Deshabilitado" 
-                        value="#607D8B" 
-                        onChange={handleColorChange}
-                        disabled={isLoading}
-                        showPreview={true}
-                        helperText="Campo deshabilitado"
-                    />
-                    <ColorField 
-                        id="transparent" 
-                        label="Con Transparencia" 
-                        value="transparent" 
-                        onChange={handleColorChange}
-                        allowTransparent={true}
-                        showPreview={true}
-                        clearable={true}
-                        helperText="Permite colores transparentes"
-                    />
-                </div>
-            </section>
-
-            {/* ColorPicker */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎯 ColorPicker Component</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    display: 'flex',
-                    gap: '1rem',
-                    alignItems: 'center',
-                    flexWrap: 'wrap'
-                }}>
-                    <Text>Color Picker:</Text>
-                    <ColorPicker 
-                        value={selectedColor}
-                        onChange={handleSingleColorChange}
-                        presetColors={presetColors}
-                        disabled={isLoading}
-                    />
-                    <Text>Selected: {selectedColor}</Text>
-                    <div 
-                        style={{ 
-                            width: '3rem', 
-                            height: '3rem', 
-                            backgroundColor: selectedColor,
-                            border: '2px solid #ddd',
-                            borderRadius: '4px'
-                        }}
-                        title={selectedColor}
-                    />
-                </div>
-            </section>
-
-            {/* Color Analysis */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔬 Análisis de Color</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1rem', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                        <div>
-                            <h4>Color Seleccionado: {selectedColor}</h4>
-                            <div 
-                                style={{ 
-                                    width: '100%', 
-                                    height: '4rem', 
-                                    backgroundColor: selectedColor,
-                                    border: '2px solid #ddd',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    color: colorAnalysis.recommendedText,
-                                    fontWeight: 'bold'
-                                }}
-                            >
-                                Texto de ejemplo
-                            </div>
-                        </div>
-                        <div>
-                            <h4>Información del Color:</h4>
-                            <ul style={{ listStyle: 'none', padding: 0 }}>
-                                <li><strong>RGB:</strong> {colorAnalysis.rgb ? `${colorAnalysis.rgb.r}, ${colorAnalysis.rgb.g}, ${colorAnalysis.rgb.b}` : 'N/A'}</li>
-                                <li><strong>Tipo:</strong> {colorAnalysis.isLight ? 'Claro' : 'Oscuro'}</li>
-                                <li><strong>Contraste con blanco:</strong> {colorAnalysis.contrastWithWhite}:1</li>
-                                <li><strong>Contraste con negro:</strong> {colorAnalysis.contrastWithBlack}:1</li>
-                                <li><strong>Texto recomendado:</strong> {colorAnalysis.recommendedText}</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Color Utilities */}
-            {showAdvanced && (
-                <section style={{ marginBottom: '2rem' }}>
-                    <h3>🔧 Utilidades de Color</h3>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
-                        border: '1px solid #ddd',
-                        borderRadius: '8px'
-                    }}>
-                        <h4>Paleta Generada:</h4>
-                        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
-                            {generatePalette().map((color, index) => (
-                                <div
-                                    key={index}
-                                    style={{
-                                        width: '3rem',
-                                        height: '3rem',
-                                        backgroundColor: color,
-                                        border: '1px solid #ddd',
-                                        borderRadius: '4px',
-                                        cursor: 'pointer',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        fontSize: '0.7rem',
-                                        color: ColorUtils.isLight(color) ? '#000' : '#fff'
-                                    }}
-                                    onClick={() => handleSingleColorChange(color)}
-                                    title={color}
-                                >
-                                    {index + 1}
-                                </div>
-                            ))}
-                        </div>
-
-                        <h4>Conversiones:</h4>
-                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                            <div>
-                                <Text><strong>Hex to RGB:</strong></Text>
-                                <Text>ColorUtils.hexToRgb('{selectedColor}') = {JSON.stringify(ColorUtils.hexToRgb(selectedColor))}</Text>
-                            </div>
-                            <div>
-                                <Text><strong>RGB to Hex:</strong></Text>
-                                {colorAnalysis.rgb && (
-                                    <Text>ColorUtils.rgbToHex({colorAnalysis.rgb.r}, {colorAnalysis.rgb.g}, {colorAnalysis.rgb.b}) = {ColorUtils.rgbToHex(colorAnalysis.rgb.r, colorAnalysis.rgb.g, colorAnalysis.rgb.b)}</Text>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            )}
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: ColorField 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>❌ ColorField Original</h4>
-                        <ul>
-                            <li>Solo input type="color" básico</li>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin preview visual</li>
-                            <li>Sin colores preset</li>
-                            <li>Sin estados de error</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Sin utilidades de color</li>
-                            <li>CSS básico sin responsive</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ ColorField Mejorado</h4>
-                        <ul>
-                            <li>PropTypes completos y validación</li>
-                            <li>Preview visual con transparencia</li>
-                            <li>Colores preset configurables</li>
-                            <li>Estados error, disabled, required</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Utilidades de conversión y análisis</li>
-                            <li>ColorPicker component adicional</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, value, onChange) funcionan idéntico</li>
-                        <li>✅ Comportamiento de onChange sin cambios</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>🎨 Diseño de Temas</h4>
-                        <ColorField 
-                            id="theme-primary" 
-                            label="Color Primario" 
-                            value="#2196f3" 
-                            onChange={handleColorChange}
-                            showPreview={true}
-                            showValue={true}
-                            presetColors={['#2196f3', '#4caf50', '#ff9800', '#f44336']}
-                            helperText="Color principal del tema"
-                        />
-                    </div>
-                    <div>
-                        <h4>🖌️ Editor de Contenido</h4>
-                        <ColorField 
-                            id="text-color" 
-                            label="Color de Texto" 
-                            value="#333333" 
-                            onChange={handleColorChange}
-                            showPreview={true}
-                            clearable={true}
-                            presetColors={['#000000', '#333333', '#666666', '#999999']}
-                            helperText="Color del texto seleccionado"
-                        />
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default ColorExamples