ywana-core8 0.1.95 → 0.1.98

package/src/widgets/login/LoginBox.example.js

@@ -0,0 +1,195 @@
+import React, { useState } from 'react'
+import { LoginBox } from './LoginBox'
+
+/**
+ * LoginBox Examples
+ * 
+ * Ejemplos de uso del componente LoginBox con diferentes configuraciones
+ * para verificar el centrado de iconos en los textfields.
+ */
+
+export const LoginBoxExamples = () => {
+    const [loginState, setLoginState] = useState({
+        loading: false,
+        message: '',
+        lastLogin: null
+    })
+
+    const handleLogin = (user, password) => {
+        console.log('Login attempt:', { user, password })
+        
+        setLoginState(prev => ({ ...prev, loading: true, message: '' }))
+        
+        // Simular proceso de login
+        setTimeout(() => {
+            if (user === 'admin' && password === 'admin') {
+                setLoginState({
+                    loading: false,
+                    message: '',
+                    lastLogin: { user, timestamp: new Date() }
+                })
+                console.log('Login successful!')
+            } else {
+                setLoginState({
+                    loading: false,
+                    message: 'Usuario o contraseña incorrectos',
+                    lastLogin: null
+                })
+            }
+        }, 2000)
+    }
+
+    const resetLogin = () => {
+        setLoginState({
+            loading: false,
+            message: '',
+            lastLogin: null
+        })
+    }
+
+    return (
+        <div style={{ 
+            padding: '2rem', 
+            backgroundColor: '#f5f5f5',
+            minHeight: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2rem'
+        }}>
+            <h1>LoginBox Examples</h1>
+            
+            {/* Ejemplo 1: LoginBox básico */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>1. LoginBox Básico</h2>
+                <p>LoginBox estándar con labels en español</p>
+                <LoginBox
+                    userLabel="Usuario"
+                    passwordLabel="Contraseña"
+                    loginLabel="Iniciar Sesión"
+                    onOK={handleLogin}
+                    loading={loginState.loading}
+                    message={loginState.message}
+                />
+                {loginState.lastLogin && (
+                    <div style={{ 
+                        marginTop: '1rem', 
+                        padding: '1rem', 
+                        backgroundColor: '#e8f5e8',
+                        borderRadius: '4px',
+                        fontSize: '0.9rem'
+                    }}>
+                        ✅ Login exitoso: {loginState.lastLogin.user} 
+                        <br />
+                        {loginState.lastLogin.timestamp.toLocaleString()}
+                        <br />
+                        <button onClick={resetLogin} style={{ marginTop: '0.5rem' }}>
+                            Reset
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            {/* Ejemplo 2: LoginBox con valores predefinidos */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>2. LoginBox con Valores Predefinidos</h2>
+                <p>Para probar el centrado de iconos con texto existente</p>
+                <LoginBox
+                    userLabel="Email"
+                    userValue="usuario@ejemplo.com"
+                    passwordLabel="Password"
+                    passwordValue="password123"
+                    loginLabel="Sign In"
+                    onOK={(user, pass) => console.log('Login with preset values:', { user, pass })}
+                />
+            </div>
+
+            {/* Ejemplo 3: LoginBox en inglés */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>3. LoginBox en Inglés</h2>
+                <p>Labels en inglés para verificar diferentes longitudes de texto</p>
+                <LoginBox
+                    userLabel="Username"
+                    passwordLabel="Password"
+                    loginLabel="Log In"
+                    onOK={(user, pass) => console.log('English login:', { user, pass })}
+                />
+            </div>
+
+            {/* Ejemplo 4: LoginBox con contenido adicional */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>4. LoginBox con Contenido Adicional</h2>
+                <p>LoginBox con elementos adicionales en el footer</p>
+                <LoginBox
+                    userLabel="Usuario"
+                    passwordLabel="Contraseña"
+                    loginLabel="Entrar"
+                    onOK={(user, pass) => console.log('Login with extra content:', { user, pass })}
+                >
+                    <div style={{ 
+                        width: '100%', 
+                        textAlign: 'center', 
+                        marginTop: '1rem',
+                        fontSize: '0.9rem',
+                        color: '#666'
+                    }}>
+                        <a href="#" style={{ color: '#2196f3', textDecoration: 'none' }}>
+                            ¿Olvidaste tu contraseña?
+                        </a>
+                        <br />
+                        <span style={{ fontSize: '0.8rem' }}>
+                            ¿No tienes cuenta? <a href="#" style={{ color: '#2196f3' }}>Regístrate</a>
+                        </span>
+                    </div>
+                </LoginBox>
+            </div>
+
+            {/* Información de prueba */}
+            <div style={{ 
+                backgroundColor: '#fff3cd', 
+                padding: '1rem', 
+                borderRadius: '4px',
+                border: '1px solid #ffeaa7',
+                maxWidth: '600px'
+            }}>
+                <h3>💡 Información de Prueba</h3>
+                <p><strong>Para probar el login exitoso:</strong></p>
+                <ul>
+                    <li>Usuario: <code>admin</code></li>
+                    <li>Contraseña: <code>admin</code></li>
+                </ul>
+                <p><strong>Verificar centrado de iconos:</strong></p>
+                <ul>
+                    <li>Los iconos de "clear" (X) deben aparecer centrados verticalmente en los campos</li>
+                    <li>El icono de "visibility toggle" en el campo de contraseña debe estar centrado</li>
+                    <li>Probar en diferentes tamaños de pantalla (responsive)</li>
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default LoginBoxExamples

package/test-publish.sh

@@ -0,0 +1,159 @@
+#!/bin/bash
+
+# 🧪 Script de Prueba para el Publisher
+# ====================================
+# Este script muestra cómo se ve el publisher sin hacer cambios reales
+
+# Colores para output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+PURPLE='\033[0;35m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+# Función para mostrar barras de progreso
+show_progress() {
+    local duration=$1
+    local message=$2
+    local progress=0
+    local bar_length=50
+    
+    echo -e "${CYAN}${message}${NC}"
+    
+    while [ $progress -le $duration ]; do
+        local filled=$((progress * bar_length / duration))
+        local empty=$((bar_length - filled))
+        
+        printf "\r${GREEN}["
+        printf "%*s" $filled | tr ' ' '='
+        printf "%*s" $empty | tr ' ' '-'
+        printf "]${NC} %d%%" $((progress * 100 / duration))
+        
+        sleep 0.05
+        progress=$((progress + 1))
+    done
+    echo ""
+}
+
+# Función para mostrar spinner
+show_spinner() {
+    local duration=$1
+    local message=$2
+    local spin='⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'
+    local i=0
+    local count=0
+    
+    echo -e "${CYAN}${message}${NC}"
+    while [ $count -lt $duration ]; do
+        i=$(( (i+1) %10 ))
+        printf "\r${YELLOW}${spin:$i:1}${NC} Procesando..."
+        sleep 0.1
+        count=$((count + 1))
+    done
+    printf "\r${GREEN}✓${NC} Completado\n"
+}
+
+# Función para log con timestamp
+log() {
+    local level=$1
+    local message=$2
+    local timestamp=$(date '+%H:%M:%S')
+    
+    case $level in
+        "INFO")  echo -e "${BLUE}[${timestamp}]${NC} ${message}" ;;
+        "SUCCESS") echo -e "${GREEN}[${timestamp}] ✓${NC} ${message}" ;;
+        "WARNING") echo -e "${YELLOW}[${timestamp}] ⚠${NC} ${message}" ;;
+        "ERROR") echo -e "${RED}[${timestamp}] ✗${NC} ${message}" ;;
+    esac
+}
+
+# Banner inicial
+echo -e "${PURPLE}"
+echo "╔══════════════════════════════════════════════════════════════╗"
+echo "║                    🧪 DEMO PUBLISHER                         ║"
+echo "║                  (Modo de Prueba - Sin Cambios)             ║"
+echo "╚══════════════════════════════════════════════════════════════╝"
+echo -e "${NC}"
+
+COMMIT_MESSAGE="Demo: Migración completa a Vite con mejoras de rendimiento"
+log "INFO" "Mensaje de commit: ${COMMIT_MESSAGE}"
+
+echo ""
+log "INFO" "Iniciando pipeline de publicación (DEMO)..."
+
+# PASO 1: Verificaciones Previas
+echo -e "\n${PURPLE}📋 PASO 1: Verificaciones Previas${NC}"
+log "INFO" "Rama actual: main"
+log "SUCCESS" "Working directory limpio"
+log "SUCCESS" "Conexión a internet OK"
+log "SUCCESS" "Verificaciones previas completadas"
+
+# PASO 2: Tests
+echo -e "\n${PURPLE}🧪 PASO 2: Ejecutando Tests${NC}"
+log "INFO" "Ejecutando suite de tests..."
+show_spinner 25 "Ejecutando tests"
+log "SUCCESS" "Todos los tests pasaron (19 suites, 348 tests)"
+
+# PASO 3: Build
+echo -e "\n${PURPLE}🔨 PASO 3: Building Proyecto${NC}"
+log "SUCCESS" "Build anterior eliminado"
+log "INFO" "Iniciando build con Vite..."
+show_spinner 15 "Compilando con Vite"
+log "SUCCESS" "Build completado en 1.37s"
+
+echo -e "${CYAN}📦 Archivos generados:${NC}"
+echo -e "  index.css (1.4M)"
+echo -e "  index.js (1.6M)"
+echo -e "  index.modern.js (1.6M)"
+echo -e "  index.umd.js (1.7M)"
+
+# PASO 4: Versión
+echo -e "\n${PURPLE}📈 PASO 4: Incrementando Versión${NC}"
+CURRENT_VERSION=$(node -p "require('./package.json').version" 2>/dev/null || echo "0.1.95")
+NEW_VERSION="0.1.96"
+log "INFO" "Versión actual: v${CURRENT_VERSION}"
+log "SUCCESS" "Nueva versión: v${NEW_VERSION}"
+
+# PASO 5: Git
+echo -e "\n${PURPLE}📤 PASO 5: Git Commit y Push${NC}"
+log "INFO" "Añadiendo archivos al staging..."
+show_progress 20 "Preparando commit..."
+FULL_COMMIT_MESSAGE="v${NEW_VERSION}: ${COMMIT_MESSAGE}"
+log "INFO" "Creando commit: ${FULL_COMMIT_MESSAGE}"
+log "SUCCESS" "Commit creado (DEMO - no real)"
+log "SUCCESS" "Tag v${NEW_VERSION} creado (DEMO - no real)"
+show_spinner 20 "Subiendo cambios a GitHub"
+log "SUCCESS" "Push completado exitosamente (DEMO - no real)"
+
+# PASO 6: NPM
+echo -e "\n${PURPLE}📦 PASO 6: Publicando a NPM${NC}"
+log "INFO" "Usuario NPM: demo-user"
+show_spinner 30 "Publicando a NPM Registry"
+log "SUCCESS" "Paquete publicado exitosamente (DEMO - no real)"
+
+# RESUMEN FINAL
+echo -e "\n${GREEN}"
+echo "╔══════════════════════════════════════════════════════════════╗"
+echo "║                    🎉 DEMO COMPLETADO                       ║"
+echo "╚══════════════════════════════════════════════════════════════╝"
+echo -e "${NC}"
+
+echo -e "${CYAN}📊 Resumen de la publicación (DEMO):${NC}"
+echo -e "  ${GREEN}✓${NC} Versión:     v${CURRENT_VERSION} → v${NEW_VERSION}"
+echo -e "  ${GREEN}✓${NC} Commit:      ${FULL_COMMIT_MESSAGE}"
+echo -e "  ${GREEN}✓${NC} Rama:        main"
+echo -e "  ${GREEN}✓${NC} Usuario NPM: demo-user"
+echo -e "  ${GREEN}✓${NC} Build time:  1.37s"
+
+echo -e "\n${CYAN}🔗 Enlaces útiles:${NC}"
+echo -e "  📦 NPM:    https://www.npmjs.com/package/ywana-core8"
+echo -e "  🐙 GitHub: https://github.com/ywana/ywana-core8"
+echo -e "  📋 Tag:    https://github.com/ywana/ywana-core8/releases/tag/v${NEW_VERSION}"
+
+echo -e "\n${CYAN}📥 Para instalar la nueva versión:${NC}"
+echo -e "  ${YELLOW}npm install ywana-core8@${NEW_VERSION}${NC}"
+
+echo -e "\n${GREEN}🚀 ¡Demo completado exitosamente!${NC}"
+echo -e "${PURPLE}Para usar el publisher real, ejecuta: ./publish.sh${NC}\n"

package/vite.config.js

@@ -0,0 +1,86 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    react({
+      // Usar React.createElement como microbundle
+      jsxRuntime: 'classic',
+      // Incluir archivos .js que contengan JSX
+      include: /\.(jsx|js|ts|tsx)$/
+    })
+  ],
+  
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'YwanaCore8',
+      formats: ['es', 'cjs', 'umd'],
+      fileName: (format) => {
+        switch (format) {
+          case 'es':
+            return 'index.modern.js'
+          case 'cjs':
+            return 'index.js'
+          case 'umd':
+            return 'index.umd.js'
+          default:
+            return `index.${format}.js`
+        }
+      }
+    },
+    
+    rollupOptions: {
+      // Externalizar peer dependencies
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        },
+        // Configurar nombres de archivos CSS
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+            return 'index.css'
+          }
+          return assetInfo.name
+        }
+      }
+    },
+    
+    // No comprimir como microbundle --no-compress
+    minify: false,
+    
+    // Generar sourcemaps
+    sourcemap: true
+  },
+  
+  // Configuración para desarrollo
+  server: {
+    port: 3000,
+    open: false
+  },
+  
+  // Configurar esbuild para JSX en archivos .js
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.js$/,
+    exclude: []
+  },
+
+  // Resolver alias si es necesario
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  
+  // Configuración para testing con Vitest
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/setupTests.js'],
+    globals: true,
+    css: true
+  }
+})

package/vitest.config.js

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic'
+    })
+  ],
+  
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/setupTests.js'],
+    globals: true,
+    css: true,
+    
+    // Configuración similar a Jest
+    include: [
+      'src/**/__tests__/**/*.(js|jsx)',
+      'src/**/?(*.)(spec|test).(js|jsx)'
+    ],
+    
+    coverage: {
+      include: [
+        'src/**/*.(js|jsx)'
+      ],
+      exclude: [
+        'src/index.js',
+        'src/setupTests.js',
+        'src/**/*.test.(js|jsx)',
+        'src/**/*.spec.(js|jsx)'
+      ]
+    }
+  },
+  
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  }
+})