ywana-core8 0.1.79 → 0.1.81

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

@@ -0,0 +1,492 @@
+import React, { useState } from 'react'
+import { Thumbnail } from './thumbnail'
+import { MultiSelector, ToggleButton } from './selector'
+import { Text, TEXTFORMATS } from './text'
+import { Button } from './button'
+
+/**
+ * Ejemplos de los componentes Thumbnail, Selector y Text mejorados manteniendo 100% compatibilidad
+ */
+export const ComponentsExamples = () => {
+    const [selectedOptions, setSelectedOptions] = useState(['option1'])
+    const [isLoading, setIsLoading] = useState(false)
+    const [showEmpty, setShowEmpty] = useState(false)
+
+    const sampleOptions = [
+        { label: 'Option 1', value: 'option1', icon: 'star' },
+        { label: 'Option 2', value: 'option2', icon: 'favorite' },
+        { label: 'Option 3', value: 'option3', icon: 'bookmark' },
+        { label: 'Option 4', value: 'option4', icon: 'thumb_up' },
+        { label: 'Option 5', value: 'option5', icon: 'check_circle' }
+    ]
+
+    const handleSelectorChange = (selections) => {
+        setSelectedOptions(selections)
+        console.log('Selected options:', selections)
+    }
+
+    const simulateLoading = () => {
+        setIsLoading(true)
+        setTimeout(() => setIsLoading(false), 2000)
+    }
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
+            <h1>Componentes Mejorados: Thumbnail, Selector y Text</h1>
+            
+            <div style={{ 
+                background: '#f8f9fa', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                marginBottom: '2rem',
+                border: '1px solid #e9ecef'
+            }}>
+                <h3>✅ Mejoras Implementadas (100% Compatibilidad):</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem' }}>
+                    <div>
+                        <h4>🖼️ Thumbnail</h4>
+                        <ul>
+                            <li>PropTypes completos</li>
+                            <li>Múltiples tamaños y formas</li>
+                            <li>Estados loading/error</li>
+                            <li>Placeholder y fallback</li>
+                            <li>Clickable con overlay</li>
+                            <li>Badges y tooltips</li>
+                            <li>Lazy loading</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4>🎛️ MultiSelector</h4>
+                        <ul>
+                            <li>Búsqueda integrada</li>
+                            <li>Min/max selecciones</li>
+                            <li>Variantes visuales</li>
+                            <li>Estados loading/empty</li>
+                            <li>Clear all button</li>
+                            <li>Navegación por teclado</li>
+                            <li>Accesibilidad completa</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4>📝 Text</h4>
+                        <ul>
+                            <li>Nuevos formatos</li>
+                            <li>Internacionalización</li>
+                            <li>Copy to clipboard</li>
+                            <li>Estados loading/skeleton</li>
+                            <li>Truncate y styling</li>
+                            <li>Múltiples elementos</li>
+                            <li>Formateo avanzado</li>
+                        </ul>
+                    </div>
+                </div>
+            </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={showEmpty ? "Show Content" : "Show Empty"} 
+                        icon={showEmpty ? "visibility" : "visibility_off"}
+                        action={() => setShowEmpty(!showEmpty)}
+                    />
+                    <span style={{ marginLeft: 'auto', color: '#666' }}>
+                        Selected: [{selectedOptions.join(', ')}]
+                    </span>
+                </div>
+            </section>
+
+            {/* Thumbnail Examples */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🖼️ Thumbnail Component</h3>
+                
+                {/* Basic Thumbnails (Compatible) */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Básico (100% Compatible)</h4>
+                    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=1"
+                            empty="https://via.placeholder.com/200x200/cccccc/666666?text=Empty"
+                        />
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=2"
+                            objectFit="contain"
+                        />
+                        <Thumbnail 
+                            src=""
+                            empty="https://via.placeholder.com/200x200/ffcccc/cc0000?text=Fallback"
+                        />
+                    </div>
+                </div>
+
+                {/* Enhanced Thumbnails */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Mejorado con Nuevas Características</h4>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '1rem' }}>
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=3"
+                            size="small"
+                            shape="circle"
+                            bordered={true}
+                            shadow={true}
+                            alt="Small circular thumbnail"
+                        />
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=4"
+                            size="medium"
+                            shape="rounded"
+                            clickable={true}
+                            onClick={() => alert('Thumbnail clicked!')}
+                            overlay={<span>Click me!</span>}
+                            badge="NEW"
+                        />
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=5"
+                            size="large"
+                            shape="square"
+                            loading="lazy"
+                            placeholder="image"
+                            title="Large square thumbnail"
+                        />
+                        <Thumbnail 
+                            src="invalid-url"
+                            fallback="broken_image"
+                            size="medium"
+                            shape="circle"
+                            onError={() => console.log('Image failed to load')}
+                        />
+                    </div>
+                </div>
+
+                {/* Thumbnail States */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Estados Especiales</h4>
+                    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=6"
+                            disabled={true}
+                            title="Disabled thumbnail"
+                        />
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=7"
+                            loading={isLoading}
+                            placeholder="hourglass_empty"
+                        />
+                        <Thumbnail 
+                            src="https://picsum.photos/200/200?random=8"
+                            badge={42}
+                            tooltip="Badge with number"
+                        />
+                    </div>
+                </div>
+            </section>
+
+            {/* MultiSelector Examples */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🎛️ MultiSelector Component</h3>
+                
+                {/* Basic Selector (Compatible) */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Básico (100% Compatible)</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <MultiSelector 
+                            options={sampleOptions.slice(0, 3)}
+                            onChange={handleSelectorChange}
+                            className="basic-selector"
+                        />
+                    </div>
+                </div>
+
+                {/* Enhanced Selector */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Mejorado con Búsqueda y Controles</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <MultiSelector 
+                            options={sampleOptions}
+                            onChange={handleSelectorChange}
+                            searchable={true}
+                            searchPlaceholder="Buscar opciones..."
+                            allowClear={true}
+                            onClear={() => console.log('Cleared all selections')}
+                            maxSelections={3}
+                            minSelections={1}
+                            variant="outlined"
+                            size="medium"
+                            ariaLabel="Selector con búsqueda"
+                        />
+                    </div>
+                </div>
+
+                {/* Selector Variants */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Variantes Visuales</h4>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                        <div style={{ 
+                            background: '#fff', 
+                            border: '1px solid #ddd',
+                            borderRadius: '8px',
+                            overflow: 'hidden'
+                        }}>
+                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Filled Variant</h5>
+                            <MultiSelector 
+                                options={sampleOptions.slice(0, 3)}
+                                variant="filled"
+                                size="small"
+                            />
+                        </div>
+                        <div style={{ 
+                            background: '#fff', 
+                            border: '1px solid #ddd',
+                            borderRadius: '8px',
+                            overflow: 'hidden'
+                        }}>
+                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Large Size</h5>
+                            <MultiSelector 
+                                options={sampleOptions.slice(0, 3)}
+                                variant="default"
+                                size="large"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Selector States */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Estados Especiales</h4>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                        <div style={{ 
+                            background: '#fff', 
+                            border: '1px solid #ddd',
+                            borderRadius: '8px',
+                            overflow: 'hidden'
+                        }}>
+                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Loading State</h5>
+                            <MultiSelector 
+                                loading={isLoading}
+                                options={[]}
+                            />
+                        </div>
+                        <div style={{ 
+                            background: '#fff', 
+                            border: '1px solid #ddd',
+                            borderRadius: '8px',
+                            overflow: 'hidden'
+                        }}>
+                            <h5 style={{ margin: '1rem', marginBottom: '0' }}>Empty State</h5>
+                            <MultiSelector 
+                                empty={showEmpty}
+                                emptyMessage="No hay opciones disponibles"
+                                emptyIcon="inbox"
+                                options={showEmpty ? [] : sampleOptions.slice(0, 2)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Text Examples */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>📝 Text Component</h3>
+                
+                {/* Basic Text (Compatible) */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Básico (100% Compatible)</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px'
+                    }}>
+                        <Text format={TEXTFORMATS.HTML}>Este es texto HTML básico</Text><br />
+                        <Text format={TEXTFORMATS.STRING}>Este es texto string</Text><br />
+                        <Text className="custom-class">Texto con clase CSS</Text>
+                    </div>
+                </div>
+
+                {/* Enhanced Text Formatting */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Formateo Mejorado</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '1rem'
+                    }}>
+                        <div>
+                            <Text format={TEXTFORMATS.NUMERIC}>1234567.89</Text><br />
+                            <Text format={TEXTFORMATS.CURRENCY} currency="USD">1234.56</Text><br />
+                            <Text format={TEXTFORMATS.PERCENTAGE}>0.75</Text><br />
+                            <Text format={TEXTFORMATS.DATE}>2024-01-15</Text><br />
+                            <Text format={TEXTFORMATS.TIME}>2024-01-15T14:30:00</Text><br />
+                        </div>
+                        <div>
+                            <Text format={TEXTFORMATS.PHONE}>1234567890</Text><br />
+                            <Text format={TEXTFORMATS.CAPITALIZE}>hello world</Text><br />
+                            <Text format={TEXTFORMATS.UPPERCASE}>hello world</Text><br />
+                            <Text format={TEXTFORMATS.LOWERCASE}>HELLO WORLD</Text><br />
+                            <Text format={TEXTFORMATS.TRUNCATE} maxLength={20}>Este es un texto muy largo que será truncado</Text><br />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Text Styling */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Estilos y Tamaños</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px'
+                    }}>
+                        <Text size="xs">Extra small text</Text><br />
+                        <Text size="sm">Small text</Text><br />
+                        <Text size="md" weight="bold">Medium bold text</Text><br />
+                        <Text size="lg" color="primary">Large primary text</Text><br />
+                        <Text size="xl" weight="semibold" color="success">Extra large success text</Text><br />
+                        <Text size="xxl" weight="bold" color="error" align="center">XXL error text centered</Text><br />
+                    </div>
+                </div>
+
+                {/* Text Features */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Características Especiales</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px'
+                    }}>
+                        <Text copyable={true}>Texto copiable - haz click para copiar</Text><br />
+                        <Text loading={isLoading}>Texto con estado de carga</Text><br />
+                        <Text skeleton={isLoading}>Texto con skeleton placeholder</Text><br />
+                        <Text fallback="Texto por defecto">{showEmpty ? '' : 'Texto con fallback'}</Text><br />
+                        <Text as="h3" size="lg" weight="bold">Texto renderizado como H3</Text><br />
+                        <Text decoration="underline" transform="capitalize">texto subrayado y capitalizado</Text><br />
+                    </div>
+                </div>
+
+                {/* Text States */}
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Estados y Casos Especiales</h4>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '1rem'
+                    }}>
+                        <div>
+                            <Text>Texto normal</Text><br />
+                            <Text selectable={false}>Texto no seleccionable</Text><br />
+                            <Text truncate={true}>Texto con truncate automático que se corta</Text><br />
+                        </div>
+                        <div>
+                            <Text format={TEXTFORMATS.EMAIL}>usuario@ejemplo.com</Text><br />
+                            <Text format={TEXTFORMATS.URL}>https://www.ejemplo.com</Text><br />
+                            <Text locale="es-ES" format={TEXTFORMATS.DATE}>2024-01-15</Text><br />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Comparación antes/después */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Comparación: Componentes Originales vs Mejorados</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <div style={{ 
+                        background: '#ffebee', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #ffcdd2'
+                    }}>
+                        <h4>❌ Componentes Originales</h4>
+                        <ul>
+                            <li><strong>Thumbnail:</strong> Básico, sin estados</li>
+                            <li><strong>Selector:</strong> Funcional pero limitado</li>
+                            <li><strong>Text:</strong> Pocos formatos, sin styling</li>
+                            <li>Sin PropTypes ni validación</li>
+                            <li>Sin accesibilidad</li>
+                            <li>Sin estados loading/error</li>
+                            <li>CSS básico sin responsive</li>
+                        </ul>
+                    </div>
+                    <div style={{ 
+                        background: '#e8f5e8', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #c8e6c9'
+                    }}>
+                        <h4>✅ Componentes Mejorados</h4>
+                        <ul>
+                            <li><strong>Thumbnail:</strong> Múltiples tamaños, formas, estados</li>
+                            <li><strong>Selector:</strong> Búsqueda, límites, variantes</li>
+                            <li><strong>Text:</strong> 15+ formatos, styling completo</li>
+                            <li>PropTypes completos y validación</li>
+                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
+                            <li>Estados loading, error, empty</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>✅ Todas las props originales funcionan exactamente igual</li>
+                        <li>✅ Comportamiento de renderizado idéntico</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>
+        </div>
+    )
+}
+
+export default ComponentsExamples

package/src/html/convert-examples.js

@@ -0,0 +1,183 @@
+#!/usr/bin/env node
+
+/**
+ * Script para convertir archivos de ejemplos existentes al nuevo formato con ExampleLayout
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// Función para obtener todos los archivos .example.js
+function getExampleFiles() {
+    const htmlDir = path.join(__dirname)
+    return fs.readdirSync(htmlDir)
+        .filter(file => file.endsWith('.example.js'))
+        .filter(file => !file.includes('.new.js')) // Excluir archivos ya convertidos
+        .map(file => path.join(htmlDir, file))
+}
+
+// Función para extraer el nombre del componente del archivo
+function getComponentName(filePath) {
+    const fileName = path.basename(filePath, '.example.js')
+    return fileName.charAt(0).toUpperCase() + fileName.slice(1)
+}
+
+// Función para generar secciones básicas basadas en el contenido
+function generateSections(content, componentName) {
+    const sections = [
+        {
+            id: 'overview',
+            title: 'Introducción',
+            icon: 'info'
+        }
+    ]
+
+    // Buscar secciones comunes en el contenido
+    const commonSections = [
+        { pattern: /basic|básico|simple/i, id: 'basic-examples', title: 'Ejemplos Básicos', icon: 'widgets' },
+        { pattern: /advanced|avanzado/i, id: 'advanced-features', title: 'Características Avanzadas', icon: 'settings' },
+        { pattern: /variant|variante|theme|tema/i, id: 'variants', title: 'Variantes y Temas', icon: 'palette' },
+        { pattern: /state|estado|loading|carga/i, id: 'states', title: 'Estados', icon: 'toggle_on' },
+        { pattern: /size|tamaño|density|densidad/i, id: 'sizes', title: 'Tamaños', icon: 'format_size' },
+        { pattern: /api|reference|referencia/i, id: 'api-reference', title: 'Referencia API', icon: 'code' }
+    ]
+
+    commonSections.forEach(({ pattern, id, title, icon }) => {
+        if (pattern.test(content)) {
+            sections.push({ id, title, icon })
+        }
+    })
+
+    // Si no se encontraron secciones específicas, agregar secciones genéricas
+    if (sections.length === 1) {
+        sections.push(
+            { id: 'examples', title: 'Ejemplos', icon: 'widgets' },
+            { id: 'api-reference', title: 'Referencia API', icon: 'code' }
+        )
+    }
+
+    return sections
+}
+
+// Función para convertir un archivo
+function convertFile(filePath) {
+    console.log(`Convirtiendo: ${filePath}`)
+    
+    try {
+        const content = fs.readFileSync(filePath, 'utf8')
+        const componentName = getComponentName(filePath)
+        
+        // Verificar si ya está convertido
+        if (content.includes('ExampleLayout')) {
+            console.log(`  ⚠️  Ya convertido: ${filePath}`)
+            return
+        }
+
+        // Generar secciones basadas en el contenido
+        const sections = generateSections(content, componentName)
+        
+        // Crear el nuevo contenido
+        let newContent = content
+
+        // 1. Agregar import del ExampleLayout
+        const importRegex = /(import.*from.*['"][^'"]*['"])/g
+        const imports = content.match(importRegex) || []
+        const lastImport = imports[imports.length - 1]
+        
+        if (lastImport && !content.includes('ExampleLayout')) {
+            newContent = newContent.replace(
+                lastImport,
+                lastImport + '\nimport { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from \'./ExampleLayout\''
+            )
+        }
+
+        // 2. Agregar definición de secciones antes del return
+        const returnMatch = newContent.match(/(\s+)return\s*\(/m)
+        if (returnMatch) {
+            const indent = returnMatch[1]
+            const sectionsCode = `${indent}// Definir secciones para el menú lateral
+${indent}const sections = ${JSON.stringify(sections, null, 8).replace(/^/gm, indent)}
+
+${indent}`
+            
+            newContent = newContent.replace(
+                /(\s+)return\s*\(/m,
+                sectionsCode + 'return ('
+            )
+        }
+
+        // 3. Envolver el contenido principal con ExampleLayout
+        const mainDivRegex = /<div[^>]*style[^>]*>\s*<h1[^>]*>([^<]+)<\/h1>/
+        const mainDivMatch = newContent.match(mainDivRegex)
+        
+        if (mainDivMatch) {
+            const title = mainDivMatch[1]
+            newContent = newContent.replace(
+                mainDivRegex,
+                `<ExampleLayout title="${componentName} Examples" sections={sections}>
+            <ExampleSection id="overview" title="${title}" icon="widgets">`
+            )
+        }
+
+        // 4. Cerrar las etiquetas al final
+        const lastClosingDiv = newContent.lastIndexOf('</div>')
+        if (lastClosingDiv !== -1) {
+            newContent = newContent.substring(0, lastClosingDiv) + 
+                '            </ExampleSection>\n        </ExampleLayout>' +
+                newContent.substring(lastClosingDiv + 6)
+        }
+
+        // 5. Crear archivo de respaldo
+        const backupPath = filePath + '.backup'
+        fs.writeFileSync(backupPath, content)
+
+        // 6. Escribir el nuevo contenido
+        fs.writeFileSync(filePath, newContent)
+        
+        console.log(`  ✅ Convertido exitosamente: ${filePath}`)
+        console.log(`  📁 Respaldo creado: ${backupPath}`)
+        
+    } catch (error) {
+        console.error(`  ❌ Error convirtiendo ${filePath}:`, error.message)
+    }
+}
+
+// Función principal
+function main() {
+    console.log('🚀 Iniciando conversión de archivos de ejemplos...\n')
+    
+    const exampleFiles = getExampleFiles()
+    
+    if (exampleFiles.length === 0) {
+        console.log('No se encontraron archivos .example.js para convertir.')
+        return
+    }
+    
+    console.log(`Encontrados ${exampleFiles.length} archivos para convertir:\n`)
+    
+    exampleFiles.forEach(file => {
+        convertFile(file)
+        console.log() // Línea en blanco entre archivos
+    })
+    
+    console.log('✨ Conversión completada!')
+    console.log('\n📝 Notas importantes:')
+    console.log('- Se crearon archivos .backup con el contenido original')
+    console.log('- Revisa los archivos convertidos y ajusta las secciones según sea necesario')
+    console.log('- Algunos archivos pueden requerir ajustes manuales adicionales')
+}
+
+// Ejecutar si se llama directamente
+if (import.meta.url === `file://${process.argv[1]}`) {
+    main()
+}
+
+export {
+    convertFile,
+    getExampleFiles,
+    generateSections
+}