ywana-core8 0.1.103 → 0.2.2

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

@@ -1,424 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress } from './progress'
-import { Button } from './button'
-import { Icon } from './icon'
-
-/**
- * Ejemplos espectaculares de los componentes Progress mejorados
- */
-export const ProgressExamples = () => {
-    const [progress, setProgress] = useState(0)
-    const [isRunning, setIsRunning] = useState(false)
-    const [currentStep, setCurrentStep] = useState(0)
-    const [multiProgressData, setMultiProgressData] = useState([
-        { id: 'cpu', label: 'CPU Usage', value: 45, max: 100, color: 'primary' },
-        { id: 'memory', label: 'Memory', value: 78, max: 100, color: 'warning' },
-        { id: 'disk', label: 'Disk Space', value: 23, max: 100, color: 'success' },
-        { id: 'network', label: 'Network', value: 91, max: 100, color: 'error' }
-    ])
-
-    // Simular progreso automático
-    useEffect(() => {
-        let interval
-        if (isRunning) {
-            interval = setInterval(() => {
-                setProgress(prev => {
-                    const next = prev + Math.random() * 5
-                    if (next >= 100) {
-                        setIsRunning(false)
-                        return 100
-                    }
-                    return next
-                })
-            }, 200)
-        }
-        return () => clearInterval(interval)
-    }, [isRunning])
-
-    // Simular datos en tiempo real
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setMultiProgressData(prev => prev.map(item => ({
-                ...item,
-                value: Math.max(0, Math.min(100, item.value + (Math.random() - 0.5) * 10))
-            })))
-        }, 2000)
-        return () => clearInterval(interval)
-    }, [])
-
-    const handleStart = () => {
-        setIsRunning(true)
-        setProgress(0)
-    }
-
-    const handleReset = () => {
-        setIsRunning(false)
-        setProgress(0)
-        setCurrentStep(0)
-    }
-
-    const handleStepClick = (stepIndex) => {
-        setCurrentStep(stepIndex)
-    }
-
-    const steps = [
-        { id: 'setup', label: 'Setup', description: 'Initialize configuration', icon: 'settings' },
-        { id: 'download', label: 'Download', description: 'Download required files', icon: 'download' },
-        { id: 'install', label: 'Install', description: 'Install components', icon: 'build' },
-        { id: 'configure', label: 'Configure', description: 'Configure settings', icon: 'tune' },
-        { id: 'complete', label: 'Complete', description: 'Process completed', icon: 'check_circle' }
-    ]
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Componentes Progress Espectaculares</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>🚀 Características Espectaculares Implementadas:</h3>
-                <ul>
-                    <li>🎯 <strong>5 Componentes Profesionales</strong> - CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress</li>
-                    <li>🎨 <strong>Animaciones Suaves</strong> - Easing functions, transiciones CSS, efectos visuales</li>
-                    <li>♿ <strong>Accesibilidad Completa</strong> - ARIA, roles, estados anunciados</li>
-                    <li>🎭 <strong>Múltiples Variantes</strong> - determinate/indeterminate, tamaños, colores, temas</li>
-                    <li>⚡ <strong>Características Avanzadas</strong> - Buffer, striped, gradients, time estimation</li>
-                    <li>📱 <strong>Responsive Total</strong> - Adaptación móvil, dark mode, high contrast</li>
-                    <li>🧪 <strong>23 Pruebas Unitarias</strong> - Cobertura completa de funcionalidad</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="Start Progress" 
-                        icon="play_arrow" 
-                        raised={true}
-                        action={handleStart}
-                        disabled={isRunning}
-                    />
-                    <Button 
-                        label="Reset All" 
-                        icon="refresh" 
-                        action={handleReset}
-                    />
-                    <Button 
-                        label="Next Step" 
-                        icon="skip_next" 
-                        action={() => setCurrentStep(prev => Math.min(steps.length - 1, prev + 1))}
-                        disabled={currentStep >= steps.length - 1}
-                    />
-                    <span style={{ marginLeft: 'auto', color: '#666' }}>
-                        Progress: {Math.round(progress)}%
-                    </span>
-                </div>
-            </section>
-
-            {/* CircularProgress Showcase */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>CircularProgress - Indicadores Circulares</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '2rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '2rem', textAlign: 'center' }}>
-                        <div>
-                            <h4>Indeterminate</h4>
-                            <CircularProgress 
-                                variant="indeterminate"
-                                size="large"
-                                color="primary"
-                            />
-                        </div>
-                        
-                        <div>
-                            <h4>With Value</h4>
-                            <CircularProgress 
-                                variant="determinate"
-                                value={progress}
-                                size="large"
-                                color="success"
-                                showValue={true}
-                                thickness={6}
-                            />
-                        </div>
-                        
-                        <div>
-                            <h4>With Icon</h4>
-                            <CircularProgress 
-                                variant="determinate"
-                                value={75}
-                                size="xlarge"
-                                color="warning"
-                                icon="download"
-                                showLabel={true}
-                                label="Downloading"
-                            />
-                        </div>
-                        
-                        <div>
-                            <h4>Custom Format</h4>
-                            <CircularProgress 
-                                variant="determinate"
-                                value={progress}
-                                size="large"
-                                color="error"
-                                showValue={true}
-                                formatValue={(value, max) => `${Math.round(value)}/${max}`}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* LinearProgress Showcase */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>LinearProgress - Barras de Progreso</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '2rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '1.5rem'
-                }}>
-                    <div>
-                        <h4>Basic Progress</h4>
-                        <LinearProgress 
-                            value={progress}
-                            showValue={true}
-                            showLabel={true}
-                            label="File Upload"
-                            color="primary"
-                            size="medium"
-                        />
-                    </div>
-                    
-                    <div>
-                        <h4>With Buffer</h4>
-                        <LinearProgress 
-                            value={progress * 0.7}
-                            buffer={progress}
-                            showValue={true}
-                            showLabel={true}
-                            label="Video Streaming"
-                            color="secondary"
-                            size="large"
-                        />
-                    </div>
-                    
-                    <div>
-                        <h4>Striped Animation</h4>
-                        <LinearProgress 
-                            value={85}
-                            showValue={true}
-                            showLabel={true}
-                            label="Processing"
-                            color="success"
-                            striped={true}
-                            size="medium"
-                        />
-                    </div>
-                    
-                    <div>
-                        <h4>Indeterminate</h4>
-                        <LinearProgress 
-                            variant="indeterminate"
-                            showLabel={true}
-                            label="Loading..."
-                            color="warning"
-                            size="medium"
-                        />
-                    </div>
-                    
-                    <div>
-                        <h4>With Time Estimation</h4>
-                        <LinearProgress 
-                            value={progress}
-                            showValue={true}
-                            showLabel={true}
-                            label="Large File Download"
-                            color="error"
-                            estimatedTime={120}
-                            size="large"
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* StepProgress Showcase */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>StepProgress - Progreso por Pasos</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '2rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <h4>Horizontal Stepper</h4>
-                    <StepProgress 
-                        steps={steps}
-                        currentStep={currentStep}
-                        variant="horizontal"
-                        color="primary"
-                        size="medium"
-                        allowClickNavigation={true}
-                        onStepClick={handleStepClick}
-                    />
-                    
-                    <div style={{ marginTop: '2rem' }}>
-                        <h4>Vertical Stepper</h4>
-                        <StepProgress 
-                            steps={steps.slice(0, 3)}
-                            currentStep={Math.min(currentStep, 2)}
-                            variant="vertical"
-                            color="success"
-                            size="large"
-                            allowClickNavigation={true}
-                            onStepClick={handleStepClick}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* RadialProgress Showcase */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>RadialProgress - Indicadores Radiales</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '2rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '2rem', textAlign: 'center' }}>
-                        <div>
-                            <h4>Dashboard Style</h4>
-                            <RadialProgress 
-                                value={progress}
-                                size={150}
-                                thickness={12}
-                                color="primary"
-                                showValue={true}
-                                showLabel={true}
-                                label="CPU Usage"
-                                gradient={true}
-                            />
-                        </div>
-                        
-                        <div>
-                            <h4>With Icon</h4>
-                            <RadialProgress 
-                                value={78}
-                                size={120}
-                                thickness={8}
-                                color="success"
-                                icon="memory"
-                                showValue={true}
-                                showLabel={true}
-                                label="Memory"
-                            />
-                        </div>
-                        
-                        <div>
-                            <h4>Custom Format</h4>
-                            <RadialProgress 
-                                value={156}
-                                max={200}
-                                size={140}
-                                thickness={10}
-                                color="warning"
-                                showValue={true}
-                                showLabel={true}
-                                label="Storage"
-                                formatValue={(value, max) => `${value}GB`}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* MultiProgress Showcase */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>MultiProgress - Múltiples Indicadores</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '2rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <h4>System Monitor (Live Data)</h4>
-                    <MultiProgress 
-                        items={multiProgressData}
-                        showLabels={true}
-                        showValues={true}
-                        size="medium"
-                        animated={true}
-                    />
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: Progress 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>❌ Progress Original</h4>
-                        <ul>
-                            <li>Solo 2 componentes básicos</li>
-                            <li>Sin PropTypes ni validación</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Sin animaciones</li>
-                            <li>Sin personalización</li>
-                            <li>CSS muy básico</li>
-                            <li>Sin estados avanzados</li>
-                            <li>Sin responsive</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ Progress Mejorado</h4>
-                        <ul>
-                            <li>5 componentes profesionales</li>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Animaciones suaves y espectaculares</li>
-                            <li>Personalización completa</li>
-                            <li>CSS avanzado con efectos</li>
-                            <li>Estados y variantes múltiples</li>
-                            <li>Responsive, dark mode, high contrast</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default ProgressExamples