ywana-core8 0.1.85 → 0.1.86

package/doc/package-lock.json

@@ -12,7 +12,7 @@
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-scripts": "^5.0.1",
-        "ywana-core8": "^0.1.84"
+        "ywana-core8": "^0.1.85"
       }
     },
     "..": {
@@ -17268,9 +17268,9 @@
       }
     },
     "node_modules/ywana-core8": {
-      "version": "0.1.84",
-      "resolved": "https://registry.npmjs.org/ywana-core8/-/ywana-core8-0.1.84.tgz",
-      "integrity": "sha512-ePmMlqSWXb6HD6B8mHwMTdRw3UQ/5MpRwNg+OyobShBJxcyh7tVJvfLCutRBu4N0FPnoZegZ5e3ZWtiIykBjTg==",
+      "version": "0.1.85",
+      "resolved": "https://registry.npmjs.org/ywana-core8/-/ywana-core8-0.1.85.tgz",
+      "integrity": "sha512-XaWRXswsTOGKdqLZ+HDcW1WlbaZ2FDfPWmiPoVdVEQbFVl1Yt9CpYgb2aNdPN0CMQleoiv0lpIn6AZX5ayEsLg==",
       "dependencies": {
         "axios": "^1.3.4",
         "crypto-js": "^4.1.1",

package/doc/package.json

@@ -7,7 +7,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "generate-examples": "node scripts/generate-examples.js"
   },
   "keywords": [],
   "author": "",
@@ -16,7 +17,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-scripts": "^5.0.1",
-    "ywana-core8": "^0.1.84"
+    "ywana-core8": "^0.1.85"
   },
   "browserslist": {
     "production": [

package/doc/scripts/generate-examples.js

@@ -0,0 +1,129 @@
+const fs = require('fs');
+const path = require('path');
+
+// Función para convertir nombre de archivo a título legible
+function fileNameToTitle(fileName) {
+  return fileName
+    .replace('.example.js', '')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, l => l.toUpperCase());
+}
+
+// Función para determinar el icono basado en el tipo de componente
+function getIconForComponent(fileName) {
+  const iconMap = {
+    'button': 'smart_button',
+    'input': 'input',
+    'textfield': 'text_fields',
+    'checkbox': 'check_box',
+    'radio': 'radio_button_checked',
+    'switch': 'toggle_on',
+    'accordion': 'expand_more',
+    'tab': 'tab',
+    'table': 'table_chart',
+    'form': 'description',
+    'header': 'title',
+    'icon': 'star',
+    'list': 'list',
+    'menu': 'menu',
+    'progress': 'progress_activity',
+    'chip': 'label',
+    'color': 'palette',
+    'section': 'view_module',
+    'tree': 'account_tree',
+    'tooltip': 'help',
+    'thumbnail': 'image',
+    'tokenfield': 'token'
+  };
+  
+  const componentName = fileName.replace('.example.js', '');
+  return iconMap[componentName] || 'widgets';
+}
+
+// Función para determinar la categoría
+function getCategoryForComponent(fileName) {
+  const categoryMap = {
+    'button': 'Inputs',
+    'textfield': 'Inputs',
+    'textfield2': 'Inputs',
+    'checkbox': 'Inputs',
+    'radio': 'Inputs',
+    'switch': 'Inputs',
+    'tokenfield': 'Inputs',
+    'form': 'Forms',
+    'accordion': 'Layout',
+    'tab': 'Layout',
+    'section': 'Layout',
+    'header': 'Layout',
+    'header2': 'Layout',
+    'table': 'Data',
+    'table2': 'Data',
+    'list': 'Data',
+    'tree': 'Data',
+    'icon': 'Display',
+    'chip': 'Display',
+    'color': 'Display',
+    'progress': 'Display',
+    'thumbnail': 'Display',
+    'tooltip': 'Display',
+    'menu': 'Navigation',
+    'property': 'Utils',
+    'selector': 'Utils',
+    'actions-cell': 'Utils'
+  };
+  
+  const componentName = fileName.replace('.example.js', '');
+  return categoryMap[componentName] || 'Components';
+}
+
+// Leer archivos de ejemplos
+function generateExamplesConfig() {
+  const examplesDir = path.join(__dirname, '../src/examples');
+
+  if (!fs.existsSync(examplesDir)) {
+    console.error('La carpeta src/examples no existe. Creando ejemplos básicos...');
+    createBasicExamples();
+    return;
+  }
+  
+  const files = fs.readdirSync(examplesDir);
+  const exampleFiles = files.filter(file => file.endsWith('.example.js'));
+  
+  const examples = exampleFiles.map(file => {
+    const componentName = file.replace('.example.js', '');
+    return {
+      id: componentName,
+      title: fileNameToTitle(file),
+      icon: getIconForComponent(file),
+      category: getCategoryForComponent(file),
+      file: file
+    };
+  });
+  
+  // Generar el archivo de configuración
+  const configContent = `// Este archivo es generado automáticamente por scripts/generate-examples.js
+// No editar manualmente
+
+export const EXAMPLES_CONFIG = ${JSON.stringify(examples, null, 2)};
+
+// Función para importar dinámicamente los ejemplos
+export const importExample = async (fileName) => {
+  try {
+    const module = await import(\`../examples/\${fileName}\`);
+    return module.default || module;
+  } catch (error) {
+    console.error(\`Error importing example \${fileName}:\`, error);
+    return null;
+  }
+};
+`;
+  
+  // Escribir el archivo
+  const configPath = path.join(__dirname, '../src/examples-config.js');
+  fs.writeFileSync(configPath, configContent);
+  
+  console.log(`✅ Generados ${examples.length} ejemplos en src/examples-config.js`);
+  console.log('Categorías encontradas:', [...new Set(examples.map(e => e.category))]);
+}
+
+generateExamplesConfig();

package/doc/src/App.js

@@ -6,183 +6,14 @@ import './App.css';
 import WelcomePage from './components/WelcomePage';
 import ExamplePage from './components/ExamplePage';
 
-// Configuración de ejemplos
-const EXAMPLES_CONFIG = [
-  {
-    id: 'button-examples',
-    title: 'Button',
-    description: 'Componente de botón con diferentes variantes y estados',
-    category: 'Inputs',
-    icon: 'smart_button',
-    file: 'button.example.js'
-  },
-  {
-    id: 'input-examples',
-    title: 'Input',
-    description: 'Campos de entrada de texto con validación y estados',
-    category: 'Inputs',
-    icon: 'input',
-    file: 'input.example.js'
-  },
-  {
-    id: 'select-examples',
-    title: 'Select',
-    description: 'Componente de selección con opciones múltiples',
-    category: 'Inputs',
-    icon: 'arrow_drop_down_circle',
-    file: 'select.example.js'
-  },
-  {
-    id: 'checkbox-examples',
-    title: 'Checkbox',
-    description: 'Casillas de verificación con estados personalizados',
-    category: 'Inputs',
-    icon: 'check_box',
-    file: 'checkbox.example.js'
-  },
-  {
-    id: 'radio-examples',
-    title: 'Radio',
-    description: 'Botones de radio para selección única',
-    category: 'Inputs',
-    icon: 'radio_button_checked',
-    file: 'radio.example.js'
-  },
-  {
-    id: 'textarea-examples',
-    title: 'Textarea',
-    description: 'Área de texto multilínea con redimensionamiento',
-    category: 'Inputs',
-    icon: 'notes',
-    file: 'textarea.example.js'
-  },
-  {
-    id: 'switch-examples',
-    title: 'Switch',
-    description: 'Interruptores de encendido/apagado',
-    category: 'Inputs',
-    icon: 'toggle_on',
-    file: 'switch.example.js'
-  },
-  {
-    id: 'slider-examples',
-    title: 'Slider',
-    description: 'Control deslizante para selección de valores',
-    category: 'Inputs',
-    icon: 'tune',
-    file: 'slider.example.js'
-  },
-  {
-    id: 'card-examples',
-    title: 'Card',
-    description: 'Tarjetas de contenido con diferentes layouts',
-    category: 'Layout',
-    icon: 'credit_card',
-    file: 'card.example.js'
-  },
-  {
-    id: 'modal-examples',
-    title: 'Modal',
-    description: 'Ventanas modales y diálogos',
-    category: 'Layout',
-    icon: 'open_in_new',
-    file: 'modal.example.js'
-  },
-  {
-    id: 'tabs-examples',
-    title: 'Tabs',
-    description: 'Pestañas para organizar contenido',
-    category: 'Layout',
-    icon: 'tab',
-    file: 'tabs.example.js'
-  },
-  {
-    id: 'accordion-examples',
-    title: 'Accordion',
-    description: 'Paneles expandibles para contenido',
-    category: 'Layout',
-    icon: 'expand_more',
-    file: 'accordion.example.js'
-  },
-  {
-    id: 'table-examples',
-    title: 'Table',
-    description: 'Tablas de datos con ordenamiento y filtros',
-    category: 'Data',
-    icon: 'table_chart',
-    file: 'table.example.js'
-  },
-  {
-    id: 'list-examples',
-    title: 'List',
-    description: 'Listas de elementos con diferentes estilos',
-    category: 'Data',
-    icon: 'list',
-    file: 'list.example.js'
-  },
-  {
-    id: 'pagination-examples',
-    title: 'Pagination',
-    description: 'Controles de paginación para datos',
-    category: 'Data',
-    icon: 'last_page',
-    file: 'pagination.example.js'
-  },
-  {
-    id: 'alert-examples',
-    title: 'Alert',
-    description: 'Alertas y notificaciones para el usuario',
-    category: 'Feedback',
-    icon: 'notification_important',
-    file: 'alert.example.js'
-  },
-  {
-    id: 'toast-examples',
-    title: 'Toast',
-    description: 'Notificaciones temporales tipo toast',
-    category: 'Feedback',
-    icon: 'campaign',
-    file: 'toast.example.js'
-  },
-  {
-    id: 'progress-examples',
-    title: 'Progress',
-    description: 'Barras de progreso y indicadores de carga',
-    category: 'Feedback',
-    icon: 'progress_activity',
-    file: 'progress.example.js'
-  },
-  {
-    id: 'spinner-examples',
-    title: 'Spinner',
-    description: 'Indicadores de carga giratorios',
-    category: 'Feedback',
-    icon: 'refresh',
-    file: 'spinner.example.js'
-  },
-  {
-    id: 'tooltip-examples',
-    title: 'Tooltip',
-    description: 'Información contextual en hover',
-    category: 'Feedback',
-    icon: 'help',
-    file: 'tooltip.example.js'
-  },
-  {
-    id: 'badge-examples',
-    title: 'Badge',
-    description: 'Etiquetas y badges informativos',
-    category: 'Feedback',
-    icon: 'label',
-    file: 'badge.example.js'
-  }
-];
+// Importar configuración de ejemplos (se genera automáticamente)
+import { EXAMPLES_CONFIG } from './examples-config.js';
 
 function App() {
   return (
     <Site
       icon="widgets"
-      title="Ywana Core8"
+      title="Ywana Core8 Documentation"
       init="welcome"
     >
       {/* Página de bienvenida */}
@@ -195,7 +26,7 @@ function App() {
         <WelcomePage />
       </Page>
 
-      {/* Páginas de ejemplos */}
+      {/* Páginas generadas dinámicamente desde los ejemplos */}
       {EXAMPLES_CONFIG.map(example => (
         <Page
           key={example.id}

package/doc/src/examples-config.js

@@ -0,0 +1,170 @@
+// Este archivo es generado automáticamente por scripts/generate-examples.js
+// No editar manualmente
+
+export const EXAMPLES_CONFIG = [
+  {
+    "id": "accordion",
+    "title": "Accordion",
+    "icon": "expand_more",
+    "category": "Layout",
+    "file": "accordion.example.js"
+  },
+  {
+    "id": "actions-cell",
+    "title": "Actions Cell",
+    "icon": "widgets",
+    "category": "Utils",
+    "file": "actions-cell.example.js"
+  },
+  {
+    "id": "button",
+    "title": "Button",
+    "icon": "smart_button",
+    "category": "Inputs",
+    "file": "button.example.js"
+  },
+  {
+    "id": "checkbox",
+    "title": "Checkbox",
+    "icon": "check_box",
+    "category": "Inputs",
+    "file": "checkbox.example.js"
+  },
+  {
+    "id": "chip",
+    "title": "Chip",
+    "icon": "label",
+    "category": "Display",
+    "file": "chip.example.js"
+  },
+  {
+    "id": "color",
+    "title": "Color",
+    "icon": "palette",
+    "category": "Display",
+    "file": "color.example.js"
+  },
+  {
+    "id": "components",
+    "title": "Components",
+    "icon": "widgets",
+    "category": "Components",
+    "file": "components.example.js"
+  },
+  {
+    "id": "form",
+    "title": "Form",
+    "icon": "description",
+    "category": "Forms",
+    "file": "form.example.js"
+  },
+  {
+    "id": "header2",
+    "title": "Header2",
+    "icon": "widgets",
+    "category": "Layout",
+    "file": "header2.example.js"
+  },
+  {
+    "id": "icon",
+    "title": "Icon",
+    "icon": "star",
+    "category": "Display",
+    "file": "icon.example.js"
+  },
+  {
+    "id": "list",
+    "title": "List",
+    "icon": "list",
+    "category": "Data",
+    "file": "list.example.js"
+  },
+  {
+    "id": "progress",
+    "title": "Progress",
+    "icon": "progress_activity",
+    "category": "Display",
+    "file": "progress.example.js"
+  },
+  {
+    "id": "property",
+    "title": "Property",
+    "icon": "widgets",
+    "category": "Utils",
+    "file": "property.example.js"
+  },
+  {
+    "id": "radio",
+    "title": "Radio",
+    "icon": "radio_button_checked",
+    "category": "Inputs",
+    "file": "radio.example.js"
+  },
+  {
+    "id": "section",
+    "title": "Section",
+    "icon": "view_module",
+    "category": "Layout",
+    "file": "section.example.js"
+  },
+  {
+    "id": "switch",
+    "title": "Switch",
+    "icon": "toggle_on",
+    "category": "Inputs",
+    "file": "switch.example.js"
+  },
+  {
+    "id": "tab",
+    "title": "Tab",
+    "icon": "tab",
+    "category": "Layout",
+    "file": "tab.example.js"
+  },
+  {
+    "id": "table",
+    "title": "Table",
+    "icon": "table_chart",
+    "category": "Data",
+    "file": "table.example.js"
+  },
+  {
+    "id": "table2",
+    "title": "Table2",
+    "icon": "widgets",
+    "category": "Data",
+    "file": "table2.example.js"
+  },
+  {
+    "id": "textfield2",
+    "title": "Textfield2",
+    "icon": "widgets",
+    "category": "Inputs",
+    "file": "textfield2.example.js"
+  },
+  {
+    "id": "tokenfield",
+    "title": "Tokenfield",
+    "icon": "token",
+    "category": "Inputs",
+    "file": "tokenfield.example.js"
+  },
+  {
+    "id": "tree",
+    "title": "Tree",
+    "icon": "account_tree",
+    "category": "Data",
+    "file": "tree.example.js"
+  }
+];
+
+// Función para importar dinámicamente los ejemplos
+export const importExample = async (fileName) => {
+  try {
+    const module = await import(`ywana-core8/src/html/${fileName}`);
+    return module.default || module;
+  } catch (error) {
+    console.error(`Error importing example ${fileName}:`, error);
+    return null;
+  }
+};

package/doc/src/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'ywana-core8/dist/index.css'
+import 'ywana-core8/src/css/theme_light.css'
 import './index.css';
 import App from './App';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/doc/craco.config.js

@@ -1,31 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  webpack: {
-    configure: (webpackConfig) => {
-      // Resolver el problema con moment/locale/es
-      webpackConfig.resolve.alias = {
-        ...webpackConfig.resolve.alias,
-        'moment/locale/es': path.resolve(__dirname, 'node_modules/moment/locale/es.js'),
-      };
-
-      // Configurar fallbacks para módulos de Node.js
-      webpackConfig.resolve.fallback = {
-        ...webpackConfig.resolve.fallback,
-        "path": require.resolve("path-browserify"),
-        "os": require.resolve("os-browserify/browser"),
-        "crypto": require.resolve("crypto-browserify"),
-        "stream": require.resolve("stream-browserify"),
-        "buffer": require.resolve("buffer"),
-        "util": require.resolve("util"),
-        "assert": require.resolve("assert"),
-        "url": require.resolve("url"),
-        "fs": false,
-        "net": false,
-        "tls": false,
-      };
-
-      return webpackConfig;
-    },
-  },
-};

package/doc/generate-examples.cjs

@@ -1,310 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-/**
- * Configuración de dependencias para cada componente
- */
-const COMPONENT_DEPENDENCIES = {
-    'accordion': {
-        css: ['ExampleLayout.css', 'accordion.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'accordion.js']
-    },
-    'actions-cell': {
-        css: ['ExampleLayout.css', 'actions-cell.css', 'icon.css', 'menu.css', 'button.css'],
-        js: ['icon.js', 'text.js', 'menu.js', 'button.js', 'SimpleExampleLayout.js', 'actions-cell.js']
-    },
-    'button': {
-        css: ['ExampleLayout.css', 'button.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'button.js']
-    },
-    'checkbox': {
-        css: ['ExampleLayout.css', 'checkbox.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'checkbox.js']
-    },
-    'chip': {
-        css: ['ExampleLayout.css', 'chip.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'chip.js']
-    },
-    'color': {
-        css: ['ExampleLayout.css', 'color.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'color.js']
-    },
-    'components': {
-        css: ['ExampleLayout.css', 'button.css', 'icon.css', 'checkbox.css', 'textfield.css'],
-        js: ['icon.js', 'text.js', 'button.js', 'checkbox.js', 'textfield.js', 'SimpleExampleLayout.js']
-    },
-    'form': {
-        css: ['ExampleLayout.css', 'form.css', 'textfield.css', 'button.css', 'checkbox.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'textfield.js', 'button.js', 'checkbox.js', 'SimpleExampleLayout.js', 'form.js']
-    },
-    'header2': {
-        css: ['ExampleLayout.css', 'header2.css', 'icon.css', 'button.css'],
-        js: ['icon.js', 'text.js', 'button.js', 'SimpleExampleLayout.js', 'header2.js']
-    },
-    'icon': {
-        css: ['ExampleLayout.css', 'icon.css'],
-        js: ['text.js', 'SimpleExampleLayout.js', 'icon.js']
-    },
-    'list': {
-        css: ['ExampleLayout.css', 'list.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'list.js']
-    },
-    'progress': {
-        css: ['ExampleLayout.css', 'progress.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'progress.js']
-    },
-    'property': {
-        css: ['ExampleLayout.css', 'property.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'property.js']
-    },
-    'radio': {
-        css: ['ExampleLayout.css', 'radio.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'radio.js']
-    },
-    'section': {
-        css: ['ExampleLayout.css', 'section.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'section.js']
-    },
-    'switch': {
-        css: ['ExampleLayout.css', 'switch.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'switch.js']
-    },
-    'tab': {
-        css: ['ExampleLayout.css', 'tab.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'tab.js']
-    },
-    'table': {
-        css: ['ExampleLayout.css', 'table.css', 'icon.css', 'textfield.css', 'checkbox.css', 'actions-cell.css', 'menu.css', 'button.css'],
-        js: ['icon.js', 'text.js', 'textfield.js', 'checkbox.js', 'menu.js', 'button.js', 'actions-cell.js', 'SimpleExampleLayout.js', 'table.js']
-    },
-    'table2': {
-        css: ['ExampleLayout.css', 'table2.css', 'icon.css', 'textfield.css', 'checkbox.css', 'actions-cell.css', 'menu.css', 'button.css'],
-        js: ['icon.js', 'text.js', 'textfield.js', 'checkbox.js', 'menu.js', 'button.js', 'actions-cell.js', 'SimpleExampleLayout.js', 'table2.js']
-    },
-    'textfield2': {
-        css: ['ExampleLayout.css', 'textfield2.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'textfield2.js']
-    },
-    'tokenfield': {
-        css: ['ExampleLayout.css', 'tokenfield.css', 'icon.css', 'chip.css'],
-        js: ['icon.js', 'text.js', 'chip.js', 'SimpleExampleLayout.js', 'tokenfield.js']
-    },
-    'tree': {
-        css: ['ExampleLayout.css', 'tree.css', 'icon.css'],
-        js: ['icon.js', 'text.js', 'SimpleExampleLayout.js', 'tree.js']
-    }
-};
-
-/**
- * Mapeo de nombres de componentes a nombres de clases de ejemplo
- */
-const COMPONENT_CLASS_NAMES = {
-    'accordion': 'AccordionExamples',
-    'actions-cell': 'ActionsCellExamples',
-    'button': 'ButtonExamples',
-    'checkbox': 'CheckboxExamples',
-    'chip': 'ChipExamples',
-    'color': 'ColorExamples',
-    'components': 'ComponentsExamples',
-    'form': 'FormExamples',
-    'header2': 'Header2Examples',
-    'icon': 'IconExamples',
-    'list': 'ListExamples',
-    'progress': 'ProgressExamples',
-    'property': 'PropertyExamples',
-    'radio': 'RadioExamples',
-    'section': 'SectionExamples',
-    'switch': 'SwitchExamples',
-    'tab': 'TabExamples',
-    'table': 'TableExamples',
-    'table2': 'Table2Examples',
-    'textfield2': 'TextField2Examples',
-    'tokenfield': 'TokenFieldExamples',
-    'tree': 'TreeExamples'
-};
-
-/**
- * Generar HTML para un componente específico
- */
-function generateExampleHTML(componentName, title) {
-    const deps = COMPONENT_DEPENDENCIES[componentName] || { css: [], js: [] };
-    const className = COMPONENT_CLASS_NAMES[componentName] || `${componentName}Examples`;
-
-    const cssImports = deps.css.map(file => `    <link rel="stylesheet" href="${file}">`).join('\n');
-    const jsImports = deps.js.map(file => `    <script type="text/babel" src="${file}"></script>`).join('\n');
-
-    return `<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${title} - Ywana Core8</title>
-
-    <!-- CSS Variables -->
-    <style>
-        :root {
-            --primary-color: #1976d2;
-            --primary-color-light: #42a5f5;
-            --primary-color-lighter: #e3f2fd;
-            --secondary-color: #424242;
-            --text-color: #212121;
-            --text-color-light: #757575;
-            --text-color-lighter: #bdbdbd;
-            --paper-color: #ffffff;
-            --background-color: #fafafa;
-            --divider-color: #e0e0e0;
-            --shadow1: 0 2px 4px rgba(0,0,0,0.1);
-            --shadow2: 0 4px 8px rgba(0,0,0,0.15);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--background-color);
-            color: var(--text-color);
-            line-height: 1.6;
-        }
-
-        #root {
-            min-height: 100vh;
-        }
-
-        .loading {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 50vh;
-            font-size: 1.2rem;
-            color: var(--text-color-light);
-        }
-
-        /* Hide code snippets in iframe view */
-        .code-snippet,
-        .example-code,
-        pre,
-        code {
-            display: none !important;
-        }
-
-        /* Ensure examples are visible and well-spaced */
-        .example-section {
-            margin-bottom: 2rem;
-        }
-
-        .example-subsection {
-            margin-bottom: 1.5rem;
-        }
-
-        /* Make sure interactive elements work in iframe */
-        .example-content {
-            padding: 1rem;
-        }
-    </style>
-
-    <!-- Material Icons -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
-    <!-- Component Styles -->
-${cssImports}
-
-    <!-- React Development -->
-    <script crossorigin src="react.development.js"></script>
-    <script crossorigin src="react-dom.development.js"></script>
-
-    <!-- Babel for JSX transformation -->
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-</head>
-<body>
-    <div id="root">
-        <div class="loading">Cargando ${title}...</div>
-    </div>
-
-    <!-- Component Scripts -->
-${jsImports}
-
-    <!-- Example Script -->
-    <script type="text/babel">
-        // Import the example component and override CodeSnippet
-        const originalCodeSnippet = window.CodeSnippet;
-        window.CodeSnippet = () => null; // Hide all code snippets
-
-        // Load the example
-        import('./${componentName}.example.js').then(module => {
-            const ExampleComponent = module.${className} || module.default;
-            if (ExampleComponent) {
-                ReactDOM.render(React.createElement(ExampleComponent), document.getElementById('root'));
-            }
-        }).catch(() => {
-            // Fallback: try to load synchronously
-            const script = document.createElement('script');
-            script.type = 'text/babel';
-            script.src = '${componentName}.example.js';
-            script.onload = () => {
-                setTimeout(() => {
-                    const ExampleComponent = window.${className};
-                    if (ExampleComponent) {
-                        ReactDOM.render(React.createElement(ExampleComponent), document.getElementById('root'));
-                    }
-                }, 100);
-            };
-            document.head.appendChild(script);
-        });
-    </script>
-</body>
-</html>`;
-}
-
-/**
- * Generar todos los archivos HTML
- */
-function generateAllExamples() {
-    const examples = [
-        { name: 'accordion', title: 'Accordion Examples' },
-        { name: 'actions-cell', title: 'Actions Cell Examples' },
-        { name: 'button', title: 'Button Examples' },
-        { name: 'checkbox', title: 'Checkbox Examples' },
-        { name: 'chip', title: 'Chip Examples' },
-        { name: 'color', title: 'Color Examples' },
-        { name: 'components', title: 'Components Overview' },
-        { name: 'form', title: 'Form Examples' },
-        { name: 'header2', title: 'Header Examples' },
-        { name: 'icon', title: 'Icon Examples' },
-        { name: 'list', title: 'List Examples' },
-        { name: 'progress', title: 'Progress Examples' },
-        { name: 'property', title: 'Property Examples' },
-        { name: 'radio', title: 'Radio Examples' },
-        { name: 'section', title: 'Section Examples' },
-        { name: 'switch', title: 'Switch Examples' },
-        { name: 'tab', title: 'Tab Examples' },
-        { name: 'table', title: 'Table Examples' },
-        { name: 'table2', title: 'Table2 Examples' },
-        { name: 'textfield2', title: 'TextField Examples' },
-        { name: 'tokenfield', title: 'TokenField Examples' },
-        { name: 'tree', title: 'Tree Examples' }
-    ];
-    
-    const libDir = path.join(__dirname, 'lib');
-    
-    examples.forEach(example => {
-        const html = generateExampleHTML(example.name, example.title);
-        const filename = `${example.name}.example.html`;
-        const filepath = path.join(libDir, filename);
-        
-        fs.writeFileSync(filepath, html, 'utf8');
-        console.log(`Generated: ${filename}`);
-    });
-    
-    console.log(`\nGenerated ${examples.length} example HTML files!`);
-}
-
-// Ejecutar si se llama directamente
-if (require.main === module) {
-    generateAllExamples();
-}
-
-module.exports = { generateAllExamples, generateExampleHTML };