ywana-core8 0.1.85 → 0.1.87

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.86"
       }
     },
     "..": {
@@ -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.86",
+      "resolved": "https://registry.npmjs.org/ywana-core8/-/ywana-core8-0.1.86.tgz",
+      "integrity": "sha512-0MWgcYt8baMOnCgd2tfyvHGsTNdn9DMBj0gk1uUwINlKS5axUk19aD2QBgYz6VSGtLI8YLSHLUatE1dr6ofnkg==",
       "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.86"
   },
   "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

@@ -1,188 +1,16 @@
 import React from 'react';
 import { Site, Page } from 'ywana-core8';
+import { ButtonExample } from 'ywana-core8'
 import './App.css';
 
 // Importar componentes de ejemplo
 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'
-  }
-];
 
 function App() {
   return (
     <Site
       icon="widgets"
-      title="Ywana Core8"
+      title="Ywana Core8 Documentation"
       init="welcome"
     >
       {/* Página de bienvenida */}
@@ -195,18 +23,10 @@ function App() {
         <WelcomePage />
       </Page>
 
-      {/* Páginas de ejemplos */}
-      {EXAMPLES_CONFIG.map(example => (
-        <Page
-          key={example.id}
-          id={example.id}
-          title={example.title}
-          icon={example.icon}
-          section={example.category}
-        >
-          <ExamplePage example={example} />
-        </Page>
-      ))}
+      <Page id="button" title="Button" icon="widgets" section="Inputs">
+        <ButtonExample />
+      </Page>
+     
     </Site>
   );
 }

package/doc/src/components/ExamplePage.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import * as YwanaComponents from 'ywana-core8';
 
 const CATEGORIES = {
   'Inputs': { icon: 'input' },
@@ -13,54 +14,78 @@ const ExamplePage = ({ example }) => {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    const loadExample = async () => {
+    const createExample = () => {
       try {
         setLoading(true);
         setError(null);
 
-        // Intentar cargar el componente de ejemplo dinámicamente
-        // Esto asume que los archivos de ejemplo están en la carpeta examples/
+        // Obtener el nombre del componente
         const componentName = example.file.replace('.example.js', '');
-        const modulePath = `../examples/${componentName}.example.js`;
-        
-        try {
-          const module = await import(modulePath);
-          const Component = module.default || module[Object.keys(module)[0]];
-          
-          if (Component) {
-            setExampleComponent(() => Component);
-          } else {
-            throw new Error('No se encontró el componente exportado');
-          }
-        } catch (importError) {
-          console.warn(`No se pudo cargar ${modulePath}:`, importError);
-          
-          // Fallback: crear un componente placeholder
-          const PlaceholderComponent = () => (
-            <div className="example-placeholder">
-              <div className="placeholder-icon">
-                <span className="material-icons">{example.icon}</span>
+
+        // Crear un ejemplo simple usando el componente de ywana-core8
+        const ExampleComponent = () => {
+          const Component = YwanaComponents[componentName] || YwanaComponents[componentName.charAt(0).toUpperCase() + componentName.slice(1)];
+
+          if (!Component) {
+            return (
+              <div className="example-placeholder">
+                <div className="placeholder-icon">
+                  <span className="material-icons">{example.icon}</span>
+                </div>
+                <h3>{example.title}</h3>
+                <p>Componente: {componentName}</p>
+                <div className="placeholder-note">
+                  <span className="material-icons">info</span>
+                  <span>Ejemplo básico del componente {componentName}</span>
+                </div>
+                <div className="component-demo">
+                  <p>Este componente está disponible en ywana-core8 pero necesita configuración específica.</p>
+                </div>
               </div>
-              <h3>{example.title}</h3>
-              <p>{example.description}</p>
-              <div className="placeholder-note">
-                <span className="material-icons">info</span>
-                <span>Ejemplo en desarrollo - Archivo: {example.file}</span>
+            );
+          }
+
+          // Crear props básicas según el tipo de componente
+          const getBasicProps = () => {
+            switch (componentName.toLowerCase()) {
+              case 'button':
+                return { children: 'Ejemplo Button', onClick: () => alert('Button clicked!') };
+              case 'accordion':
+                return {
+                  sections: [
+                    { title: 'Sección 1', children: 'Contenido de la sección 1' },
+                    { title: 'Sección 2', children: 'Contenido de la sección 2' }
+                  ]
+                };
+              case 'checkbox':
+                return { label: 'Ejemplo Checkbox', checked: false };
+              case 'textfield':
+                return { label: 'Ejemplo TextField', placeholder: 'Escribe aquí...' };
+              default:
+                return {};
+            }
+          };
+
+          return (
+            <div className="component-demo">
+              <h4>Ejemplo de {componentName}</h4>
+              <div className="demo-container">
+                <Component {...getBasicProps()} />
               </div>
             </div>
           );
-          
-          setExampleComponent(() => PlaceholderComponent);
-        }
+        };
+
+        setExampleComponent(() => ExampleComponent);
       } catch (err) {
-        console.error('Error loading example:', err);
+        console.error('Error creating example:', err);
         setError(err.message);
       } finally {
         setLoading(false);
       }
     };
 
-    loadExample();
+    createExample();
   }, [example]);
 
   if (loading) {

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.87",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/index.js

@@ -25,4 +25,26 @@ export { Switch, Switch2 } from './switch'
 export { Tooltip } from './tooltip'
 export { Thumbnail } from './thumbnail'
 export { ColorField } from './color'
-export { MultiSelector, ToggleButton } from './selector'
+export { MultiSelector, ToggleButton } from './selector'
+
+// examples
+export { AccordionExamples } from './accordion.example'
+export { ButtonExamples } from './button.example'
+export { CheckBoxExamples } from './checkbox.example'
+export { ChipExamples } from './chip.example'
+export { ColorExamples } from './color.example'
+export { FormExamples } from './form.example'
+export { HeaderExamples } from './header.example'
+export { IconExamples } from './icon.example'
+export { ListExamples } from './list.example'
+export { ProgressExamples } from './progress.example'
+export { PropertyExamples } from './property.example'
+export { RadioExamples } from './radio.example'
+export { SectionExamples } from './section.example'
+export { SwitchExamples } from './switch.example'
+export { TabExamples } from './tab.example'
+export { TableExamples } from './table.example'
+export { Table2Examples } from './table2.example'
+export { TextfieldExamples } from './textfield.example'
+export { TokenFieldExamples } from './tokenfield.example'
+export { TreeExamples } from './tree.example'

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