ywana-core8 0.1.86 → 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.85"
+        "ywana-core8": "^0.1.86"
       }
     },
     "..": {
@@ -17268,9 +17268,9 @@
       }
     },
     "node_modules/ywana-core8": {
-      "version": "0.1.85",
-      "resolved": "https://registry.npmjs.org/ywana-core8/-/ywana-core8-0.1.85.tgz",
-      "integrity": "sha512-XaWRXswsTOGKdqLZ+HDcW1WlbaZ2FDfPWmiPoVdVEQbFVl1Yt9CpYgb2aNdPN0CMQleoiv0lpIn6AZX5ayEsLg==",
+      "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

@@ -17,7 +17,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-scripts": "^5.0.1",
-    "ywana-core8": "^0.1.85"
+    "ywana-core8": "^0.1.86"
   },
   "browserslist": {
     "production": [

package/doc/src/App.js

@@ -1,13 +1,10 @@
 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';
-
-// Importar configuración de ejemplos (se genera automáticamente)
-import { EXAMPLES_CONFIG } from './examples-config.js';
 
 function App() {
   return (
@@ -26,18 +23,10 @@ function App() {
         <WelcomePage />
       </Page>
 
-      {/* Páginas generadas dinámicamente desde los 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.86",
+  "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/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;

package/doc/src/examples-config.js

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