ywana-core8 0.1.78 → 0.1.80

package/src/html/button.example.new.js

@@ -0,0 +1,416 @@
+import React, { useState } from 'react'
+import { Button } from './button'
+import { Icon } from './icon'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
+
+/**
+ * Ejemplos del componente Button con menú lateral de navegación
+ */
+export const ButtonExamples = () => {
+    const [loading, setLoading] = useState(false)
+    const [disabled, setDisabled] = useState(false)
+
+    // Definir secciones para el menú lateral
+    const sections = [
+        {
+            id: 'overview',
+            title: 'Introducción',
+            icon: 'info'
+        },
+        {
+            id: 'basic-buttons',
+            title: 'Botones Básicos',
+            icon: 'smart_button',
+            subsections: [
+                { id: 'primary-buttons', title: 'Botones Primarios' },
+                { id: 'secondary-buttons', title: 'Botones Secundarios' },
+                { id: 'text-buttons', title: 'Botones de Texto' }
+            ]
+        },
+        {
+            id: 'button-states',
+            title: 'Estados de Botones',
+            icon: 'toggle_on',
+            subsections: [
+                { id: 'loading-state', title: 'Estado de Carga' },
+                { id: 'disabled-state', title: 'Estado Deshabilitado' },
+                { id: 'active-state', title: 'Estado Activo' }
+            ]
+        },
+        {
+            id: 'button-sizes',
+            title: 'Tamaños',
+            icon: 'format_size'
+        },
+        {
+            id: 'button-icons',
+            title: 'Botones con Iconos',
+            icon: 'add_circle'
+        },
+        {
+            id: 'button-groups',
+            title: 'Grupos de Botones',
+            icon: 'view_module'
+        },
+        {
+            id: 'api-reference',
+            title: 'Referencia API',
+            icon: 'code'
+        }
+    ]
+
+    const handleClick = (label) => {
+        console.log(`Button clicked: ${label}`)
+    }
+
+    const simulateLoading = () => {
+        setLoading(true)
+        setTimeout(() => setLoading(false), 3000)
+    }
+
+    return (
+        <ExampleLayout title="Button Examples" sections={sections}>
+            <ExampleSection id="overview" title="Button - Componente de Botón" icon="smart_button">
+                <p>Componente versátil de botón con múltiples variantes, estados y opciones de personalización.</p>
+                
+                <div style={{ 
+                    background: '#f8f9fa', 
+                    padding: '1rem', 
+                    borderRadius: '8px',
+                    marginBottom: '2rem',
+                    border: '1px solid #e9ecef'
+                }}>
+                    <h4>✨ Características principales:</h4>
+                    <ul style={{ columns: 2, columnGap: '2rem', margin: '0.5rem 0' }}>
+                        <li>🎨 Múltiples variantes (primary, secondary, text)</li>
+                        <li>📏 Diferentes tamaños (small, medium, large)</li>
+                        <li>🔄 Estados de carga y deshabilitado</li>
+                        <li>🎯 Iconos integrados</li>
+                        <li>⌨️ Accesibilidad completa</li>
+                        <li>📱 Responsive design</li>
+                    </ul>
+                </div>
+            </ExampleSection>
+
+            <ExampleSection id="basic-buttons" title="Botones Básicos" icon="smart_button">
+                <ExampleSubsection id="primary-buttons" title="Botones Primarios">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                        marginBottom: '1rem'
+                    }}>
+                        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+                            <Button 
+                                label="Primary Button" 
+                                variant="primary"
+                                action={() => handleClick('Primary')}
+                            />
+                            <Button 
+                                label="Primary with Icon" 
+                                variant="primary"
+                                icon="add"
+                                action={() => handleClick('Primary with Icon')}
+                            />
+                            <Button 
+                                label="Primary Loading" 
+                                variant="primary"
+                                loading={loading}
+                                action={simulateLoading}
+                            />
+                        </div>
+                    </div>
+
+                    <CodeSnippet 
+                        title="Código de Botones Primarios"
+                        code={`<Button 
+    label="Primary Button" 
+    variant="primary"
+    action={() => handleClick('Primary')}
+/>
+
+<Button 
+    label="Primary with Icon" 
+    variant="primary"
+    icon="add"
+    action={() => handleClick('Primary with Icon')}
+/>
+
+<Button 
+    label="Primary Loading" 
+    variant="primary"
+    loading={loading}
+    action={simulateLoading}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="secondary-buttons" title="Botones Secundarios">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                        marginBottom: '1rem'
+                    }}>
+                        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+                            <Button 
+                                label="Secondary Button" 
+                                variant="secondary"
+                                action={() => handleClick('Secondary')}
+                            />
+                            <Button 
+                                label="Secondary with Icon" 
+                                variant="secondary"
+                                icon="edit"
+                                action={() => handleClick('Secondary with Icon')}
+                            />
+                            <Button 
+                                label="Secondary Disabled" 
+                                variant="secondary"
+                                disabled={true}
+                                action={() => handleClick('Secondary Disabled')}
+                            />
+                        </div>
+                    </div>
+
+                    <CodeSnippet 
+                        title="Código de Botones Secundarios"
+                        code={`<Button 
+    label="Secondary Button" 
+    variant="secondary"
+    action={() => handleClick('Secondary')}
+/>
+
+<Button 
+    label="Secondary with Icon" 
+    variant="secondary"
+    icon="edit"
+    action={() => handleClick('Secondary with Icon')}
+/>
+
+<Button 
+    label="Secondary Disabled" 
+    variant="secondary"
+    disabled={true}
+    action={() => handleClick('Secondary Disabled')}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="text-buttons" title="Botones de Texto">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                        marginBottom: '1rem'
+                    }}>
+                        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+                            <Button 
+                                label="Text Button" 
+                                variant="text"
+                                action={() => handleClick('Text')}
+                            />
+                            <Button 
+                                label="Text with Icon" 
+                                variant="text"
+                                icon="link"
+                                action={() => handleClick('Text with Icon')}
+                            />
+                            <Button 
+                                label="Text Danger" 
+                                variant="text"
+                                color="danger"
+                                action={() => handleClick('Text Danger')}
+                            />
+                        </div>
+                    </div>
+
+                    <CodeSnippet 
+                        title="Código de Botones de Texto"
+                        code={`<Button 
+    label="Text Button" 
+    variant="text"
+    action={() => handleClick('Text')}
+/>
+
+<Button 
+    label="Text with Icon" 
+    variant="text"
+    icon="link"
+    action={() => handleClick('Text with Icon')}
+/>
+
+<Button 
+    label="Text Danger" 
+    variant="text"
+    color="danger"
+    action={() => handleClick('Text Danger')}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="button-states" title="Estados de Botones" icon="toggle_on">
+                <ExampleSubsection id="loading-state" title="Estado de Carga">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                        marginBottom: '1rem'
+                    }}>
+                        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+                            <Button 
+                                label="Simulate Loading" 
+                                variant="primary"
+                                loading={loading}
+                                action={simulateLoading}
+                            />
+                            <Button 
+                                label="Always Loading" 
+                                variant="secondary"
+                                loading={true}
+                                action={() => {}}
+                            />
+                        </div>
+                        <p style={{ fontSize: '0.875rem', color: '#666', margin: '0' }}>
+                            Los botones en estado de carga muestran un spinner y se deshabilitan automáticamente.
+                        </p>
+                    </div>
+
+                    <CodeSnippet 
+                        title="Código de Estados de Carga"
+                        code={`const [loading, setLoading] = useState(false)
+
+const simulateLoading = () => {
+    setLoading(true)
+    setTimeout(() => setLoading(false), 3000)
+}
+
+<Button 
+    label="Simulate Loading" 
+    variant="primary"
+    loading={loading}
+    action={simulateLoading}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="disabled-state" title="Estado Deshabilitado">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                        marginBottom: '1rem'
+                    }}>
+                        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+                            <Button 
+                                label="Toggle Disabled" 
+                                variant="primary"
+                                action={() => setDisabled(!disabled)}
+                            />
+                            <Button 
+                                label="Disabled Button" 
+                                variant="secondary"
+                                disabled={disabled}
+                                action={() => handleClick('Disabled')}
+                            />
+                        </div>
+                        <p style={{ fontSize: '0.875rem', color: '#666', margin: '0' }}>
+                            Estado actual: {disabled ? 'Deshabilitado' : 'Habilitado'}
+                        </p>
+                    </div>
+
+                    <CodeSnippet 
+                        title="Código de Estados Deshabilitados"
+                        code={`const [disabled, setDisabled] = useState(false)
+
+<Button 
+    label="Toggle Disabled" 
+    variant="primary"
+    action={() => setDisabled(!disabled)}
+/>
+
+<Button 
+    label="Disabled Button" 
+    variant="secondary"
+    disabled={disabled}
+    action={() => handleClick('Disabled')}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="api-reference" title="Referencia API" icon="code">
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <h4>Props del componente Button:</h4>
+                    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
+                        <thead>
+                            <tr style={{ background: '#f8f9fa' }}>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Prop</th>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Tipo</th>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Default</th>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Descripción</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>label</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>-</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Texto del botón</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>variant</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>primary</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Variante: primary, secondary, text</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>size</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>medium</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Tamaño: small, medium, large</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>icon</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>-</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Icono Material Design</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>loading</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>boolean</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>false</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Muestra spinner de carga</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>disabled</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>boolean</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>false</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Deshabilita el botón</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>action</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>function</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>-</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Función a ejecutar al hacer click</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </ExampleSection>
+        </ExampleLayout>
+    )
+}
+
+export default ButtonExamples

package/src/html/checkbox.example.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { CheckBox } from './checkbox'
+import { CheckBox } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./checkbox'
 
 /**
  * Ejemplos de uso del componente CheckBox mejorado
@@ -46,9 +47,96 @@ export const CheckBoxExamples = () => {
         }
     }
 
+    // Definir secciones para el menú lateral
+
+
+    const sections = 
+
+    [
+
+
+            {
+
+
+                    "id": "overview",
+
+
+                    "title": "Introducción",
+
+
+                    "icon": "info"
+
+
+            },
+
+
+            {
+
+
+                    "id": "basic-examples",
+
+
+                    "title": "Ejemplos Básicos",
+
+
+                    "icon": "widgets"
+
+
+            },
+
+
+            {
+
+
+                    "id": "advanced-features",
+
+
+                    "title": "Características Avanzadas",
+
+
+                    "icon": "settings"
+
+
+            },
+
+
+            {
+
+
+                    "id": "states",
+
+
+                    "title": "Estados",
+
+
+                    "icon": "toggle_on"
+
+
+            },
+
+
+            {
+
+
+                    "id": "sizes",
+
+
+                    "title": "Tamaños",
+
+
+                    "icon": "format_size"
+
+
+            }
+
+
+    ]
+
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '800px' }}>
-            <h1>Ejemplos del Componente CheckBox Mejorado</h1>
+        <ExampleLayout title="Checkbox Examples" sections={sections}>
+            <ExampleSection id="overview" title="Ejemplos del Componente CheckBox Mejorado" icon="widgets">
             
             <div style={{ 
                 background: '#f8f9fa', 
@@ -309,7 +397,8 @@ export const CheckBoxExamples = () => {
                     {JSON.stringify(formData, null, 2)}
                 </pre>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }