ywana-core8 0.1.79 → 0.1.81

package/src/html/form.example.js.backup

@@ -0,0 +1,385 @@
+import React, { useState } from 'react'
+import { Form } from './form'
+import { TextField2 } from './textfield2'
+import { Button } from './button'
+import { RadioGroup } from './radio'
+import { Chips } from './chip'
+
+/**
+ * Ejemplos de uso del componente Form mejorado
+ */
+export const FormExamples = () => {
+    const [formData, setFormData] = useState({})
+    const [isValid, setIsValid] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+
+    const handleFormChange = (data, valid) => {
+        setFormData(data)
+        setIsValid(valid)
+    }
+
+    const handleSubmit = async (data) => {
+        setIsSubmitting(true)
+        try {
+            // Simular envío de formulario
+            await new Promise(resolve => setTimeout(resolve, 2000))
+            alert(`Formulario enviado: ${JSON.stringify(data, null, 2)}`)
+        } catch (error) {
+            alert('Error al enviar formulario')
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    const handleReset = () => {
+        setFormData({})
+        setIsValid(false)
+    }
+
+    // Validaciones personalizadas
+    const validateEmail = (value) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        return emailRegex.test(value)
+    }
+
+    const validatePassword = (value) => {
+        return value && value.length >= 6
+    }
+
+    const validateAge = (value) => {
+        const age = parseInt(value)
+        return age >= 18 && age <= 100
+    }
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1000px' }}>
+            <h1>Ejemplos de Componente Form Mejorado</h1>
+            
+            <div style={{ 
+                background: '#f8f9fa', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                marginBottom: '2rem',
+                border: '1px solid #e9ecef'
+            }}>
+                <h3>✅ Mejoras Implementadas:</h3>
+                <ul>
+                    <li>🛡️ <strong>Validación de props</strong> - Advertencias para props incorrectas</li>
+                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, manejo de formularios</li>
+                    <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
+                    <li>🎯 <strong>Estados avanzados</strong> - disabled, loading, submission</li>
+                    <li>🎨 <strong>CSS mejorado</strong> - Altura automática, responsive design</li>
+                    <li>🔧 <strong>Manejo de envío</strong> - onSubmit, onReset, validación</li>
+                    <li>📊 <strong>Validación integrada</strong> - Validación automática de campos</li>
+                    <li>🔄 <strong>Estado inmutable</strong> - Sin mutación directa de estado</li>
+                    <li>📱 <strong>Responsive</strong> - Adaptable a diferentes tamaños</li>
+                    <li>🧪 <strong>Pruebas unitarias</strong> - 15 pruebas que cubren toda la funcionalidad</li>
+                </ul>
+            </div>
+
+            {/* Formulario básico */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Formulario Básico</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Form
+                        title="Información Personal"
+                        columns={2}
+                        outlined={true}
+                        onChange={handleFormChange}
+                        onSubmit={handleSubmit}
+                        onReset={handleReset}
+                    >
+                        <TextField2 
+                            id="firstName"
+                            label="Nombre"
+                            required={true}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="lastName"
+                            label="Apellido"
+                            required={true}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="email"
+                            label="Email"
+                            type="email"
+                            required={true}
+                            validation={validateEmail}
+                            span={2}
+                        />
+                        <TextField2 
+                            id="age"
+                            label="Edad"
+                            type="number"
+                            required={true}
+                            validation={validateAge}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="phone"
+                            label="Teléfono"
+                            type="tel"
+                            span={1}
+                        />
+                        
+                        <div style={{ gridColumn: 'span 2', display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                            <Button 
+                                type="reset"
+                                label="Limpiar"
+                                outlined={true}
+                            />
+                            <Button 
+                                type="submit"
+                                label="Enviar"
+                                raised={true}
+                                disabled={!isValid}
+                                loading={isSubmitting}
+                            />
+                        </div>
+                    </Form>
+                </div>
+            </section>
+
+            {/* Formulario con validación */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Formulario con Validación Avanzada</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Form
+                        title="Registro de Usuario"
+                        columns={1}
+                        outlined={true}
+                        onChange={handleFormChange}
+                    >
+                        <TextField2 
+                            id="username"
+                            label="Nombre de usuario"
+                            required={true}
+                            validation={(value) => value && value.length >= 3}
+                        />
+                        <TextField2 
+                            id="password"
+                            label="Contraseña"
+                            type="password"
+                            required={true}
+                            validation={validatePassword}
+                        />
+                        <TextField2 
+                            id="confirmPassword"
+                            label="Confirmar contraseña"
+                            type="password"
+                            required={true}
+                            validation={(value) => value === formData.password}
+                        />
+                        
+                        <RadioGroup
+                            id="accountType"
+                            label="Tipo de cuenta"
+                            required={true}
+                            options={[
+                                { id: 'personal', label: 'Personal', value: 'personal' },
+                                { id: 'business', label: 'Empresarial', value: 'business' },
+                                { id: 'developer', label: 'Desarrollador', value: 'developer' }
+                            ]}
+                        />
+                    </Form>
+                </div>
+            </section>
+
+            {/* Formulario de múltiples columnas */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Formulario de Múltiples Columnas</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Form
+                        title="Dirección de Envío"
+                        columns={3}
+                        outlined={true}
+                        onChange={handleFormChange}
+                    >
+                        <TextField2 
+                            id="street"
+                            label="Calle"
+                            required={true}
+                            span={2}
+                        />
+                        <TextField2 
+                            id="number"
+                            label="Número"
+                            required={true}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="city"
+                            label="Ciudad"
+                            required={true}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="state"
+                            label="Estado/Provincia"
+                            required={true}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="zipCode"
+                            label="Código Postal"
+                            required={true}
+                            span={1}
+                        />
+                        <TextField2 
+                            id="country"
+                            label="País"
+                            required={true}
+                            span={3}
+                        />
+                    </Form>
+                </div>
+            </section>
+
+            {/* Formulario deshabilitado */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Estados Especiales</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd'
+                    }}>
+                        <h4>Formulario Deshabilitado</h4>
+                        <Form
+                            title="Solo Lectura"
+                            columns={1}
+                            outlined={true}
+                            disabled={true}
+                        >
+                            <TextField2 
+                                id="readOnlyField1"
+                                label="Campo 1"
+                                value="Valor fijo"
+                            />
+                            <TextField2 
+                                id="readOnlyField2"
+                                label="Campo 2"
+                                value="Otro valor"
+                            />
+                        </Form>
+                    </div>
+                    
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1.5rem', 
+                        borderRadius: '8px',
+                        border: '1px solid #ddd'
+                    }}>
+                        <h4>Formulario Cargando</h4>
+                        <Form
+                            title="Enviando..."
+                            columns={1}
+                            outlined={true}
+                            loading={true}
+                        >
+                            <TextField2 
+                                id="loadingField1"
+                                label="Campo 1"
+                                value="Enviando datos..."
+                            />
+                            <TextField2 
+                                id="loadingField2"
+                                label="Campo 2"
+                                value="Por favor espere..."
+                            />
+                        </Form>
+                    </div>
+                </div>
+            </section>
+
+            {/* Estado actual del formulario */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Estado Actual del Formulario</h3>
+                <div style={{ 
+                    background: '#f8f9fa', 
+                    padding: '1rem', 
+                    borderRadius: '4px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <p><strong>Válido:</strong> {isValid ? '✅ Sí' : '❌ No'}</p>
+                    <p><strong>Enviando:</strong> {isSubmitting ? '⏳ Sí' : '✅ No'}</p>
+                    <pre style={{ 
+                        background: '#ffffff', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        fontSize: '0.9rem',
+                        overflow: 'auto',
+                        maxHeight: '200px'
+                    }}>
+                        {JSON.stringify(formData, null, 2)}
+                    </pre>
+                </div>
+            </section>
+
+            {/* Comparación antes/después */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Comparación: Antes vs Después</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <div style={{ 
+                        background: '#ffebee', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #ffcdd2'
+                    }}>
+                        <h4>❌ Antes</h4>
+                        <ul>
+                            <li>Sin validación de props</li>
+                            <li>Sin accesibilidad</li>
+                            <li>Mutación directa de estado</li>
+                            <li>Sin manejo de submit</li>
+                            <li>CSS con altura fija</li>
+                            <li>Dependencias frágiles</li>
+                            <li>Sin estados de loading/error</li>
+                            <li>Sin reset de formulario</li>
+                            <li>Sin soporte para fieldsets</li>
+                        </ul>
+                    </div>
+                    <div style={{ 
+                        background: '#e8f5e8', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        border: '1px solid #c8e6c9'
+                    }}>
+                        <h4>✅ Después</h4>
+                        <ul>
+                            <li>PropTypes completos</li>
+                            <li>Accesibilidad total</li>
+                            <li>Estado inmutable</li>
+                            <li>Manejo completo de envío</li>
+                            <li>CSS con altura automática</li>
+                            <li>Props robustas</li>
+                            <li>Estados de loading/disabled</li>
+                            <li>Reset integrado</li>
+                            <li>Estructura flexible</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default FormExamples

package/src/html/header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Icon } from './icon';
 import { Text } from './text';
 import './header.css';
@@ -18,11 +18,28 @@ export const Header = (props) => {
 
     const style = props.img ? { backgroundImage: `url(${props.img })` } : {}
 
-    const title=<Text>{props.title}</Text>
+    // Title element - support both string and React components
+    const titleElement = useMemo(() => {
+        if (!props.title) return null
+
+        // If title is already a React element, use it directly
+        if (React.isValidElement(props.title)) {
+            return props.title
+        }
+
+        // If title is a string, wrap it in Text component
+        if (typeof props.title === 'string') {
+            return <Text>{props.title}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(props.title)}</Text>
+    }, [props.title])
+
     return (
         <header className={`header ${caption} ${prominent} ${dense} ${theme} ${props.className}`} style={style}>
             {icon}
-            {props.title ? <label>{title}</label> : null }
+            {props.title ? <label>{titleElement}</label> : null }
             <span className="actions">{props.children}</span>
         </header>
     )

package/src/html/header2.example.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { Header2 } from './header2'
 import { Button } from './button'
-import { Icon } from './icon'
+import { Icon } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./icon'
 
 /**
  * Ejemplos de uso del componente Header2 mejorado
@@ -32,9 +33,111 @@ export const Header2Examples = () => {
         setTimeout(() => setIsLoading(false), 2000)
     }
 
+    // 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": "variants",
+
+
+                    "title": "Variantes y Temas",
+
+
+                    "icon": "palette"
+
+
+            },
+
+
+            {
+
+
+                    "id": "states",
+
+
+                    "title": "Estados",
+
+
+                    "icon": "toggle_on"
+
+
+            },
+
+
+            {
+
+
+                    "id": "sizes",
+
+
+                    "title": "Tamaños",
+
+
+                    "icon": "format_size"
+
+
+            }
+
+
+    ]
+
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Ejemplos de Componente Header2 Mejorado</h1>
+        <ExampleLayout title="Header2 Examples" sections={sections}>
+            <ExampleSection id="overview" title="Ejemplos de Componente Header2 Mejorado" icon="widgets">
             
             <div style={{ 
                 background: '#f8f9fa', 
@@ -404,7 +507,8 @@ export const Header2Examples = () => {
                     </p>
                 </div>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }