ywana-core8 0.1.84 → 0.1.85

package/doc/README.md

@@ -0,0 +1,196 @@
+# Ywana Core8 - Documentación de Componentes
+
+Este directorio contiene la documentación interactiva de todos los componentes de Ywana Core8, implementada como un sitio web estático con React.
+
+## 🌐 Sitio Web
+
+El sitio web principal se encuentra en `index.html` y proporciona:
+
+- **Menú lateral navegable** con todos los componentes organizados por categorías
+- **Búsqueda en tiempo real** de componentes
+- **Filtrado por categorías** (Input, Data Display, Layout, etc.)
+- **Vista previa interactiva** de cada componente
+- **Diseño responsive** que funciona en desktop y móvil
+
+## 📁 Estructura de Archivos
+
+```
+doc/
+├── index.html              # Página principal del sitio web
+├── app.js                  # Aplicación React principal
+├── styles.css              # Estilos del sitio web
+├── generate-examples.cjs   # Script para generar archivos HTML
+├── lib/                    # Componentes y ejemplos
+│   ├── *.js               # Componentes React
+│   ├── *.css              # Estilos de componentes
+│   ├── *.example.js       # Archivos de ejemplos
+│   ├── *.example.html     # Páginas HTML generadas
+│   ├── react.development.js
+│   ├── react-dom.development.js
+│   └── ExampleLayout.js   # Layout común para ejemplos
+└── README.md              # Este archivo
+```
+
+## 🚀 Uso
+
+### Ver la Documentación
+
+1. Abrir `doc/index.html` en un navegador web
+2. Navegar por el menú lateral para ver diferentes componentes
+3. Usar la búsqueda para encontrar componentes específicos
+4. Filtrar por categoría usando el dropdown
+
+### Agregar Nuevos Componentes
+
+1. **Crear el componente**: `lib/mi-componente.js`
+2. **Crear los estilos**: `lib/mi-componente.css`
+3. **Crear el ejemplo**: `lib/mi-componente.example.js`
+4. **Actualizar la configuración** en `app.js`:
+   ```javascript
+   {
+       id: 'mi-componente',
+       title: 'Mi Componente',
+       description: 'Descripción del componente',
+       category: 'Input', // o la categoría apropiada
+       icon: 'icono_material',
+       file: 'mi-componente.example.js'
+   }
+   ```
+5. **Regenerar archivos HTML**: `node generate-examples.cjs`
+
+## 📊 Componentes Disponibles
+
+### Input (9 componentes)
+- **Button** - Botones y acciones interactivas
+- **Checkbox** - Casillas de verificación
+- **Color** - Selector y visualizador de colores
+- **Form** - Formularios y validación
+- **Radio** - Botones de radio
+- **Switch** - Interruptores de encendido/apagado
+- **TextField** - Campos de texto y entrada
+- **TokenField** - Campo de tokens y etiquetas
+
+### Data Display (8 componentes)
+- **Actions Cell** - Celda de acciones con overflow automático
+- **Chip** - Etiquetas y chips interactivos
+- **Icon** - Iconos de Material Design
+- **List** - Listas y elementos de lista
+- **Property** - Visualizador de propiedades
+- **Table** - Tabla de datos original
+- **Table2** - Tabla de datos mejorada
+- **Tree** - Árbol jerárquico de datos
+
+### Layout (3 componentes)
+- **Accordion** - Componente de acordeón expandible
+- **Header** - Cabeceras y navegación
+- **Section** - Secciones y contenedores
+
+### Navigation (1 componente)
+- **Tab** - Pestañas y navegación por tabs
+
+### Feedback (1 componente)
+- **Progress** - Indicadores de progreso
+
+### Overview (1 componente)
+- **Components** - Vista general de todos los componentes
+
+## 🛠️ Desarrollo
+
+### Tecnologías Utilizadas
+
+- **React 18** (modo desarrollo)
+- **Babel Standalone** (transformación JSX en el navegador)
+- **Material Icons** (iconografía)
+- **CSS Variables** (theming)
+- **Vanilla JavaScript** (sin bundlers)
+
+### Características Técnicas
+
+- **Sin Build Process**: Todo funciona directamente en el navegador
+- **Hot Reload**: Los cambios se ven inmediatamente al recargar
+- **Modular**: Cada componente es independiente
+- **Responsive**: Diseño adaptativo para todos los dispositivos
+- **Accesible**: Navegación por teclado y screen readers
+
+### Scripts Útiles
+
+```bash
+# Generar todos los archivos HTML de ejemplos
+node generate-examples.cjs
+
+# Servir localmente (opcional)
+python -m http.server 8000
+# o
+npx serve .
+```
+
+## 🎨 Personalización
+
+### Temas y Colores
+
+Los colores se definen en CSS Variables en `index.html`:
+
+```css
+:root {
+    --primary-color: #1976d2;
+    --primary-color-light: #42a5f5;
+    --primary-color-lighter: #e3f2fd;
+    --text-color: #212121;
+    --background-color: #fafafa;
+    /* ... más variables */
+}
+```
+
+### Layout de Ejemplos
+
+Todos los ejemplos usan `ExampleLayout.js` que proporciona:
+
+- **Navegación lateral** con secciones y subsecciones
+- **Snippets de código** con syntax highlighting
+- **Responsive design** automático
+- **Scroll spy** para navegación activa
+
+## 📱 Responsive Design
+
+El sitio web es completamente responsive:
+
+- **Desktop**: Sidebar fijo de 320px
+- **Tablet**: Sidebar colapsable
+- **Mobile**: Sidebar overlay con navegación táctil
+
+## 🔍 Búsqueda y Filtrado
+
+- **Búsqueda en tiempo real** por nombre y descripción
+- **Filtrado por categorías** con contador de resultados
+- **Navegación por teclado** para accesibilidad
+- **URLs amigables** (futuro: deep linking)
+
+## 📈 Métricas
+
+- **22 componentes** documentados
+- **6 categorías** organizadas
+- **100% responsive** design
+- **0 dependencias** de build
+- **< 2MB** tamaño total
+
+## 🚀 Despliegue
+
+El sitio está configurado para GitHub Pages:
+
+1. Los archivos están en la carpeta `doc/`
+2. GitHub Pages sirve automáticamente desde esta carpeta
+3. Accesible en: `https://[usuario].github.io/[repo]/`
+
+## 🤝 Contribución
+
+Para contribuir:
+
+1. Agregar nuevos componentes siguiendo la estructura existente
+2. Actualizar la configuración en `app.js`
+3. Regenerar archivos HTML con el script
+4. Probar localmente antes de hacer commit
+5. Documentar cambios en este README
+
+---
+
+**Ywana Core8** - Sistema de Diseño y Componentes React

package/doc/craco.config.js

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,310 @@
+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 };