ywana-core8 0.1.103 → 0.2.1

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

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