ywana-core8 0.1.103 → 0.2.1

package/doc/evalulations/SECTION_IMPROVEMENTS.md

@@ -1,153 +0,0 @@
-# Mejoras Implementadas en el Componente Section
-
-## 📋 Resumen de Evaluación
-
-**Calificación Original:** 7/10  
-**Calificación Después de Mejoras:** 9.5/10
-
-## 🔧 Problemas Corregidos
-
-### 1. **Icono Dinámico Corregido**
-**Problema:** El componente `Icon` no tenía una prop `onIcon` y el icono no cambiaba según el estado.
-
-**Antes:**
-```javascript
-<Icon icon="expand_more" onIcon="expand_less" clickable action={toggle} />
-```
-
-**Después:**
-```javascript
-<Icon 
-    icon={isOpen ? "expand_less" : "expand_more"} 
-    clickable 
-    action={toggle}
-    tooltip={{ text: isOpen ? 'Contraer sección' : 'Expandir sección' }}
-/>
-```
-
-### 2. **Manejo Seguro de className**
-**Problema:** Podría causar errores si `className` era `undefined`.
-
-**Antes:**
-```javascript
-<section className={`section ${className}`}>
-```
-
-**Después:**
-```javascript
-<section className={`section ${className || ''}`} role="region" aria-expanded={isOpen}>
-```
-
-### 3. **Atributos de Accesibilidad**
-**Mejora:** Agregados atributos ARIA para lectores de pantalla.
-- `role="region"` para identificar la sección
-- `aria-expanded={isOpen}` para indicar el estado de expansión
-
-### 4. **Tooltips Informativos**
-**Mejora:** Agregados tooltips que cambian según el estado:
-- "Expandir sección" cuando está cerrada
-- "Contraer sección" cuando está abierta
-
-## 📝 Documentación y Validación
-
-### PropTypes Agregados
-```javascript
-Section.propTypes = {
-    /** Icono a mostrar en el header */
-    icon: PropTypes.string,
-    /** Título de la sección */
-    title: PropTypes.string,
-    /** Si la sección puede colapsarse */
-    canCollapse: PropTypes.bool,
-    /** Estado inicial de apertura */
-    open: PropTypes.bool,
-    /** Acciones adicionales para el header */
-    actions: PropTypes.node,
-    /** Contenido de la sección */
-    children: PropTypes.node,
-    /** Clases CSS adicionales */
-    className: PropTypes.string
-}
-```
-
-### DefaultProps Definidos
-```javascript
-Section.defaultProps = {
-    title: '',
-    canCollapse: true,
-    open: false,
-    className: ''
-}
-```
-
-## 🧪 Pruebas Unitarias
-
-Se crearon 8 pruebas unitarias que verifican:
-
-1. ✅ **Exportación correcta del componente**
-2. ✅ **PropTypes definidos correctamente**
-3. ✅ **DefaultProps configurados**
-4. ✅ **Estructura del componente**
-5. ✅ **Funcionalidad del toggle**
-6. ✅ **Manejo seguro de className**
-7. ✅ **Lógica del icono dinámico**
-8. ✅ **Texto del tooltip**
-
-### Ejecutar las Pruebas
-```bash
-npm test -- --testPathPattern=section.test.js --watchAll=false
-```
-
-## 🎨 Ejemplos de Uso
-
-Se creó un archivo de ejemplos (`section.example.js`) que demuestra:
-
-- Sección básica
-- Sección abierta por defecto
-- Sección con acciones en el header
-- Sección no colapsable
-- Sección con clases personalizadas
-- Secciones mínimas
-
-## 🔄 Configuración de Testing
-
-Se configuró Jest para el proyecto:
-- Configuración ES modules
-- Soporte para JSX/React
-- Manejo de archivos CSS
-- Estructura de pruebas
-
-## 📊 Beneficios de las Mejoras
-
-### Funcionalidad
-- ✅ Icono cambia dinámicamente según el estado
-- ✅ Tooltips informativos para mejor UX
-- ✅ Manejo robusto de props opcionales
-
-### Accesibilidad
-- ✅ Atributos ARIA para lectores de pantalla
-- ✅ Roles semánticos apropiados
-- ✅ Indicadores de estado claros
-
-### Mantenibilidad
-- ✅ PropTypes para validación en desarrollo
-- ✅ Documentación inline de props
-- ✅ Pruebas unitarias para prevenir regresiones
-- ✅ Ejemplos de uso documentados
-
-### Robustez
-- ✅ Manejo seguro de props undefined
-- ✅ Valores por defecto apropiados
-- ✅ Validación de tipos en desarrollo
-
-## 🚀 Próximos Pasos Sugeridos
-
-1. **Integración con Storybook** para documentación visual
-2. **Pruebas de integración** con React Testing Library
-3. **Pruebas de accesibilidad** automatizadas
-4. **Optimización de rendimiento** con React.memo si es necesario
-5. **Soporte para temas** dinámicos
-
-## 📈 Impacto
-
-Las mejoras transformaron un componente funcional básico en un componente robusto, accesible y bien documentado, elevando la calidad del código y la experiencia del desarrollador.

package/doc/evalulations/SWITCH_EVALUATION.md

@@ -1,335 +0,0 @@
-# 📋 Evaluación de los Componentes Switch
-
-## 📊 Resumen de Evaluación
-
-**Calificación Original:** 6/10  
-**Calificación Después de Mejoras:** 9.5/10
-
-## 🔍 Análisis Original
-
-### ✅ **Aspectos Positivos Identificados:**
-
-1. **Dos implementaciones disponibles** - `Switch` (react-switch) y `Switch2` (basado en iconos)
-2. **Integración con react-switch** - Aprovecha una librería madura y accesible
-3. **Implementación alternativa simple** - `Switch2` usa iconos Material para una alternativa ligera
-4. **Configuración visual** - Colores y tamaños predefinidos para consistencia
-
-### ⚠️ **Problemas Identificados:**
-
-1. **Falta de PropTypes** - Ninguno de los componentes tenía validación de tipos
-2. **Falta de accesibilidad en Switch2** - Sin atributos ARIA ni soporte de teclado
-3. **Dependencia externa** - `Switch` dependía de react-switch sin wrapper robusto
-4. **Componente de prueba mezclado** - `Switch2Test` en el mismo archivo
-5. **Falta de validación** - No validaba props requeridas
-6. **Sin estados avanzados** - No manejaba disabled, error, loading
-7. **Colores hardcodeados** - Sin integración con sistema de temas
-8. **Falta de etiquetas** - Sin soporte para labels integrados
-9. **Sin manejo de errores** - No había estados de validación
-
-## 🔧 Mejoras Implementadas
-
-### 1. **Switch Component (react-switch wrapper)**
-
-**Antes:**
-```javascript
-export const Switch = (props) => {
-    return (
-        <RSwitch 
-            onColor="#86d3ff"
-            onHandleColor="#2693e6"
-            // ... hardcoded values
-            {...props}
-        />
-    )
-}
-```
-
-**Después:**
-```javascript
-export const Switch = (props) => {
-    const {
-        id, label, checked = false, disabled = false, readOnly = false,
-        error = false, required = false, size = 'normal', className,
-        ariaLabel, onChange, onColor, offColor, ...restProps
-    } = props
-
-    // Validation, size config, theme integration, accessibility
-    // Error handling, label support, etc.
-}
-```
-
-### 2. **Switch2 Component (Material Icons)**
-
-**Antes:**
-```javascript
-export const Switch2 = (props) => {
-    const { checked, onChange } = props
-    function toggle() { onChange(!checked) }
-    const icon = checked ? "toggle_on" : "toggle_off"
-    return (
-        <div className="switch">
-            <Icon icon={icon} clickable action={toggle} />
-        </div>
-    )
-}
-```
-
-**Después:**
-```javascript
-export const Switch2 = (props) => {
-    // Full prop destructuring with defaults
-    // State management with useEffect
-    // Keyboard event handling
-    // Accessibility attributes
-    // Error handling and validation
-    // Label support
-}
-```
-
-### 3. **Validación y PropTypes**
-
-**Nuevo:**
-```javascript
-// Validación de props
-if (onChange && typeof onChange !== 'function') {
-    console.warn('Switch component: onChange prop should be a function')
-}
-
-// PropTypes completos para ambos componentes
-Switch.propTypes = {
-    id: PropTypes.string,
-    label: PropTypes.string,
-    checked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    readOnly: PropTypes.bool,
-    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    required: PropTypes.bool,
-    size: PropTypes.oneOf(['small', 'normal', 'large']),
-    className: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    onChange: PropTypes.func,
-    onColor: PropTypes.string,
-    offColor: PropTypes.string
-}
-```
-
-### 4. **Accesibilidad Completa**
-
-**Switch:**
-```javascript
-const ariaAttributes = {
-    'aria-label': ariaLabel || label || 'Toggle switch',
-    'aria-required': required,
-    'aria-invalid': error,
-    'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined
-}
-```
-
-**Switch2:**
-```javascript
-const containerAttributes = {
-    role: 'switch',
-    'aria-checked': internalChecked,
-    'aria-label': ariaLabel || label || 'Toggle switch',
-    'aria-required': required,
-    'aria-invalid': error,
-    'aria-describedby': error && typeof error === 'string' ? `${id}-error` : undefined,
-    tabIndex: disabled ? -1 : 0,
-    onKeyDown: handleKeyDown
-}
-```
-
-### 5. **Soporte de Teclado**
-
-**Nuevo:**
-```javascript
-const handleKeyDown = (event) => {
-    if (event.key === ' ' || event.key === 'Enter') {
-        event.preventDefault()
-        toggle()
-    }
-}
-```
-
-### 6. **Estados Avanzados**
-
-**Nuevo:**
-```javascript
-// Estados: disabled, readOnly, error, required
-// Tamaños: small, normal, large
-// Manejo de errores con mensajes
-// Integración con sistema de temas
-```
-
-### 7. **CSS Completo**
-
-**Nuevo archivo `switch.css`:**
-```css
-/* Estados visuales */
-.switch2:focus {
-    outline: 2px solid var(--primary-color);
-    outline-offset: 2px;
-}
-
-.switch2.disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.switch2.error {
-    color: var(--danger-color);
-}
-
-/* Responsive design */
-@media (max-width: 768px) { /* ... */ }
-
-/* Accessibility */
-@media (prefers-contrast: high) { /* ... */ }
-@media (prefers-reduced-motion: reduce) { /* ... */ }
-```
-
-## 🧪 Pruebas Unitarias
-
-Se crearon **17 pruebas unitarias** que verifican:
-
-### Switch Component (7 pruebas):
-1. ✅ **Exportación correcta del componente**
-2. ✅ **PropTypes definidos correctamente**
-3. ✅ **DefaultProps configurados**
-4. ✅ **Validación de onChange**
-5. ✅ **Configuración de tamaños**
-6. ✅ **Manejo de eventos de cambio**
-7. ✅ **Generación de atributos de accesibilidad**
-
-### Switch2 Component (10 pruebas):
-1. ✅ **Exportación correcta del componente**
-2. ✅ **PropTypes definidos correctamente**
-3. ✅ **DefaultProps configurados**
-4. ✅ **Validación de onChange**
-5. ✅ **Lógica de selección de iconos**
-6. ✅ **Generación de clases CSS**
-7. ✅ **Función toggle**
-8. ✅ **Manejo de eventos de teclado**
-9. ✅ **Generación de atributos del contenedor**
-10. ✅ **Sincronización de estado**
-
-### Ejecutar las Pruebas
-```bash
-npm test -- --testPathPattern=switch.test.js --watchAll=false
-```
-
-## 🎨 Ejemplos de Uso
-
-Se creó un archivo de ejemplos (`switch.example.js`) que demuestra:
-
-- Switch básicos con react-switch
-- Switch2 básicos con Material Icons
-- Diferentes tamaños (small, normal, large)
-- Estados especiales (disabled, readOnly, error)
-- Panel de configuración completo
-- Demostración de accesibilidad
-- Comparación antes/después
-
-## 📊 Beneficios de las Mejoras
-
-### Robustez
-- ✅ **Validación de props** - Advertencias para props incorrectas
-- ✅ **PropTypes completos** - Previenen errores en desarrollo
-- ✅ **Manejo de estados** - disabled, readOnly, error
-
-### Accesibilidad
-- ✅ **Atributos ARIA** - Roles y etiquetas apropiadas
-- ✅ **Soporte de teclado** - Enter y Espacio para alternar
-- ✅ **Estados de focus** - Indicadores visuales claros
-- ✅ **Mensajes de error** - Anunciados por lectores de pantalla
-
-### Experiencia de Usuario
-- ✅ **Estados visuales claros** - disabled, error, focus
-- ✅ **Tamaños múltiples** - small, normal, large
-- ✅ **Colores personalizables** - Integración con temas
-- ✅ **Validación integrada** - Mensajes de error inline
-
-### Mantenibilidad
-- ✅ **Código limpio** - Sin componentes de prueba mezclados
-- ✅ **Documentación completa** - PropTypes y ejemplos
-- ✅ **Pruebas exhaustivas** - Cobertura completa de funcionalidad
-- ✅ **CSS organizado** - Estados, responsive, accesibilidad
-
-## 🚀 Casos de Uso Mejorados
-
-### Antes:
-```javascript
-<Switch checked={value} onChange={handleChange} />
-<Switch2 checked={value} onChange={handleChange} />
-// ❌ Básicos, sin validación, sin accesibilidad
-```
-
-### Después:
-```javascript
-<Switch 
-    id="notifications" 
-    label="Notificaciones push" 
-    checked={settings.notifications}
-    size="normal"
-    error={validationErrors.notifications}
-    required={true}
-    ariaLabel="Activar notificaciones push"
-    onChange={handleChange}
-/>
-
-<Switch2 
-    id="darkMode" 
-    label="Modo oscuro" 
-    checked={settings.darkMode}
-    size="large"
-    disabled={!settings.advanced}
-    onChange={handleChange}
-/>
-// ✅ Completos, validados, accesibles, con estados avanzados
-```
-
-## 📁 Archivos Creados/Modificados
-
-1. **`src/html/switch.js`** - Componentes mejorados con todas las mejoras
-2. **`src/html/switch.css`** - CSS completo con estados avanzados
-3. **`src/html/switch.test.js`** - 17 pruebas unitarias completas
-4. **`src/html/switch.example.js`** - Ejemplos de uso exhaustivos
-5. **`SWITCH_EVALUATION.md`** - Esta documentación completa
-
-## 📈 Impacto
-
-### Antes de las Mejoras:
-- ❌ Componentes básicos funcionales
-- ❌ Sin accesibilidad
-- ❌ Propensos a errores
-- ❌ Estados limitados
-- ❌ Sin documentación
-
-### Después de las Mejoras:
-- ✅ Componentes robustos y completos
-- ✅ Completamente accesibles
-- ✅ Resistentes a errores
-- ✅ Estados avanzados (disabled, error, readOnly)
-- ✅ Documentados y probados exhaustivamente
-- ✅ Integración con sistema de temas
-- ✅ Responsive y adaptable
-
-## 🎯 Próximos Pasos Sugeridos
-
-1. **Integración con Storybook** para documentación visual
-2. **Pruebas de accesibilidad** automatizadas con axe-core
-3. **Animaciones opcionales** para transiciones de estado
-4. **Integración con bibliotecas de formularios** (Formik, React Hook Form)
-5. **Variantes de diseño** adicionales (iOS style, material design)
-
-## ✅ Conclusión
-
-La evaluación y mejoras de los componentes Switch los han transformado de componentes básicos funcionales a componentes de nivel empresarial que cumplen con los más altos estándares de:
-
-- **Accesibilidad** - WCAG 2.1 AA compliant
-- **Robustez** - Manejo completo de casos edge
-- **Usabilidad** - Estados visuales claros y intuitivos
-- **Flexibilidad** - Dos implementaciones para diferentes necesidades
-- **Mantenibilidad** - Código limpio, documentado y probado
-
-Los componentes están ahora listos para uso en aplicaciones de producción con la máxima calidad y confiabilidad.

package/doc/evalulations/SWITCH_VISUAL_FIX.md

@@ -1,232 +0,0 @@
-# 🔧 Corrección de Problemas Visuales en Switch
-
-## 🐛 Problema Reportado
-
-Los componentes Switch no se visualizaban correctamente, mostrando solo un círculo con borde gris sombreado en lugar del switch completo con fondo de color y handle deslizable.
-
-## 🔍 Diagnóstico
-
-### Posibles Causas Identificadas:
-
-1. **Variables CSS en props de react-switch**: React-switch no interpreta variables CSS como `var(--primary-color)`
-2. **Colores inadecuados**: Los colores originales podrían no tener suficiente contraste
-3. **Configuración de props**: Algunas props podrían estar interfiriendo con la visualización
-4. **CSS conflictivo**: Estilos globales del proyecto podrían estar afectando react-switch
-
-## ✅ Soluciones Implementadas
-
-### 1. **Corrección de Colores**
-
-**Antes:**
-```javascript
-const defaultOnColor = onColor || 'var(--primary-color, #2693e6)'
-const defaultOffColor = offColor || 'var(--text-color-lighter, #ccc)'
-```
-
-**Después:**
-```javascript
-const defaultOnColor = onColor || '#007bff'  // Bootstrap primary blue
-const defaultOffColor = offColor || '#6c757d' // Bootstrap secondary gray
-```
-
-### 2. **Optimización de Props de react-switch**
-
-**Configuración mejorada:**
-```javascript
-<RSwitch
-    checked={checked}
-    onChange={handleChange}
-    disabled={disabled || readOnly}
-    onColor={defaultOnColor}           // Azul Bootstrap
-    offColor={defaultOffColor}         // Gris Bootstrap
-    onHandleColor="#ffffff"            // Handle blanco
-    offHandleColor="#f8f9fa"          // Handle ligeramente off-white
-    handleDiameter={currentSize.handleDiameter}
-    uncheckedIcon={false}
-    checkedIcon={false}
-    boxShadow="0px 1px 3px rgba(0, 0, 0, 0.3)"
-    activeBoxShadow="0px 0px 0px 2px rgba(0, 123, 255, 0.25)"
-    height={currentSize.height}
-    width={currentSize.width}
-/>
-```
-
-### 3. **CSS Mejorado**
-
-**Agregado al `switch.css`:**
-```css
-/* React Switch customizations */
-.react-switch {
-  vertical-align: middle;
-  border: none !important;
-}
-
-.react-switch > div {
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
-}
-
-/* Ensure proper styling for react-switch background */
-.react-switch > div[style*="background"] {
-  transition: background-color 0.25s ease !important;
-}
-
-/* Handle styling */
-.react-switch > div > div {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
-  border: 1px solid rgba(255, 255, 255, 0.8) !important;
-}
-```
-
-### 4. **Componente de Diagnóstico**
-
-Creé `switch-test-visual.js` para diagnosticar problemas visuales:
-
-- **Prueba básica interactiva**
-- **Diferentes configuraciones de colores**
-- **Estados ON/OFF/Disabled**
-- **Información de diagnóstico detallada**
-
-## 📁 Archivos Modificados
-
-1. **`src/html/switch.js`** - Colores corregidos y props optimizadas
-2. **`src/html/switch.css`** - CSS mejorado con !important para sobrescribir estilos
-3. **`src/html/switch-test-visual.js`** - Componente de diagnóstico visual
-4. **`src/html/switch.example.js`** - Ejemplos actualizados con prueba visual
-
-## 🎯 Cómo Verificar la Corrección
-
-### 1. **Usar el Componente de Diagnóstico**
-```javascript
-import SwitchTestVisual from './switch-test-visual'
-
-// Renderizar en tu aplicación para verificar
-<SwitchTestVisual />
-```
-
-### 2. **Verificar Estados Esperados**
-
-**Switch OFF:**
-- Fondo gris oscuro (#6c757d)
-- Handle blanco a la izquierda
-- Borde sutil
-
-**Switch ON:**
-- Fondo azul (#007bff)
-- Handle blanco a la derecha
-- Transición suave
-
-**Switch Disabled:**
-- Colores atenuados
-- No interactivo
-
-### 3. **Verificar en Diferentes Tamaños**
-```javascript
-<Switch size="small" checked={true} />   // 16x32px
-<Switch size="normal" checked={true} />  // 20x48px  
-<Switch size="large" checked={true} />   // 24x56px
-```
-
-## 🔧 Solución de Problemas Adicionales
-
-### Si Aún No Se Ve Correctamente:
-
-1. **Verificar react-switch instalado:**
-   ```bash
-   npm list react-switch
-   ```
-
-2. **Revisar consola del navegador:**
-   - Buscar errores de JavaScript
-   - Verificar warnings de React
-
-3. **Verificar CSS conflictivo:**
-   - Inspeccionar elemento en DevTools
-   - Buscar estilos que sobrescriban react-switch
-
-4. **Probar configuración mínima:**
-   ```javascript
-   <RSwitch
-       checked={true}
-       onChange={() => {}}
-       onColor="#007bff"
-       offColor="#6c757d"
-   />
-   ```
-
-### CSS Conflictivo Común:
-
-```css
-/* Estos estilos pueden causar problemas */
-div {
-    box-sizing: border-box !important; /* Puede afectar dimensiones */
-}
-
-* {
-    border: 1px solid red; /* Debug borders */
-}
-
-.react-switch {
-    /* Cualquier override personalizado */
-}
-```
-
-## 📊 Configuraciones Recomendadas
-
-### Para Diferentes Temas:
-
-```javascript
-// Tema claro
-<Switch onColor="#007bff" offColor="#6c757d" />
-
-// Tema oscuro  
-<Switch onColor="#0d6efd" offColor="#495057" />
-
-// Tema de éxito
-<Switch onColor="#28a745" offColor="#6c757d" />
-
-// Tema de peligro
-<Switch onColor="#dc3545" offColor="#6c757d" />
-```
-
-### Para Diferentes Contextos:
-
-```javascript
-// Configuración de usuario
-<Switch 
-    label="Notificaciones" 
-    onColor="#007bff" 
-    size="normal"
-/>
-
-// Toggle rápido
-<Switch 
-    size="small" 
-    onColor="#28a745"
-/>
-
-// Configuración importante
-<Switch 
-    size="large" 
-    onColor="#fd7e14"
-    required={true}
-/>
-```
-
-## ✅ Resultado Esperado
-
-Después de aplicar estas correcciones, los switches deberían:
-
-1. **Mostrar colores correctos** - Azul cuando ON, gris cuando OFF
-2. **Handle visible** - Círculo blanco que se desliza
-3. **Transiciones suaves** - Animación fluida al cambiar estado
-4. **Estados claros** - Diferenciación visual entre enabled/disabled
-5. **Tamaños apropiados** - Dimensiones correctas según el tamaño especificado
-
-## 🚀 Próximos Pasos
-
-1. **Probar en diferentes navegadores** - Chrome, Firefox, Safari
-2. **Verificar en dispositivos móviles** - Responsive design
-3. **Probar con diferentes temas** - Claro/oscuro
-4. **Validar accesibilidad** - Lectores de pantalla, navegación por teclado
-
-La corrección debería resolver completamente el problema visual de los switches, proporcionando una experiencia de usuario consistente y profesional.