ywana-core8 0.1.85 → 0.1.87

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 };

package/doc/src/examples/button.example.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Button } from 'ywana-core8/html';
-
-const ButtonExamples = () => {
-  return (
-    <div className="examples-grid">
-      <div className="example-section">
-        <h3>Variantes Básicas</h3>
-        <div className="example-row">
-          <Button>Primario</Button>
-          <Button variant="secondary">Secundario</Button>
-          <Button variant="outline">Outline</Button>
-          <Button variant="ghost">Ghost</Button>
-        </div>
-      </div>
-
-      <div className="example-section">
-        <h3>Tamaños</h3>
-        <div className="example-row">
-          <Button size="small">Pequeño</Button>
-          <Button size="medium">Mediano</Button>
-          <Button size="large">Grande</Button>
-        </div>
-      </div>
-
-      <div className="example-section">
-        <h3>Estados</h3>
-        <div className="example-row">
-          <Button>Normal</Button>
-          <Button disabled>Deshabilitado</Button>
-          <Button loading>Cargando</Button>
-        </div>
-      </div>
-
-      <div className="example-section">
-        <h3>Con Iconos</h3>
-        <div className="example-row">
-          <Button icon="add">Agregar</Button>
-          <Button icon="delete" variant="outline">Eliminar</Button>
-          <Button icon="save" iconPosition="right">Guardar</Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ButtonExamples;

package/doc/src/examples/input.example.js

@@ -1,91 +0,0 @@
-import React, { useState } from 'react';
-import { Input } from 'ywana-core8/html';
-
-const InputExamples = () => {
-  const [values, setValues] = useState({
-    basic: '',
-    email: '',
-    password: '',
-    search: ''
-  });
-
-  const handleChange = (name, value) => {
-    setValues(prev => ({ ...prev, [name]: value }));
-  };
-
-  return (
-    <div className="examples-grid">
-      <div className="example-section">
-        <h3>Tipos Básicos</h3>
-        <div className="example-column">
-          <Input
-            label="Texto básico"
-            placeholder="Ingresa tu nombre"
-            value={values.basic}
-            onChange={(value) => handleChange('basic', value)}
-          />
-          <Input
-            type="email"
-            label="Email"
-            placeholder="tu@email.com"
-            value={values.email}
-            onChange={(value) => handleChange('email', value)}
-          />
-          <Input
-            type="password"
-            label="Contraseña"
-            placeholder="••••••••"
-            value={values.password}
-            onChange={(value) => handleChange('password', value)}
-          />
-        </div>
-      </div>
-
-      <div className="example-section">
-        <h3>Con Iconos</h3>
-        <div className="example-column">
-          <Input
-            label="Búsqueda"
-            placeholder="Buscar..."
-            icon="search"
-            value={values.search}
-            onChange={(value) => handleChange('search', value)}
-          />
-          <Input
-            label="Usuario"
-            placeholder="Nombre de usuario"
-            icon="person"
-            iconPosition="left"
-          />
-        </div>
-      </div>
-
-      <div className="example-section">
-        <h3>Estados</h3>
-        <div className="example-column">
-          <Input
-            label="Campo normal"
-            placeholder="Estado normal"
-          />
-          <Input
-            label="Campo deshabilitado"
-            placeholder="No editable"
-            disabled
-          />
-          <Input
-            label="Campo con error"
-            placeholder="Valor inválido"
-            error="Este campo es requerido"
-          />
-          <Input
-            label="Campo exitoso"
-            placeholder="Valor válido"
-            success="¡Perfecto!"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default InputExamples;