ywana-core8 0.1.95 → 0.1.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.95",
+  "version": "0.1.98",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -12,57 +12,63 @@
   "previewjs": {
     "framework": "react",
     "react": {
-      "version": 17
+      "version": 18
     }
   },
   "scripts": {
-    "build": "microbundle --no-compress --jsx React.createElement",
-    "dev": "microbundle watch --no-compress --jsx React.createElement",
+    "build": "vite build",
+    "dev": "vite build --watch",
     "test": "jest",
+    "test:vitest": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
     "deploy-docs": "gh-pages -d doc/build"
   },
   "bugs": {
     "url": "https://github.com/ywana/ywana-core8/issues"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "nth-check": "^2.1.1",
+    "postcss": "^8.4.31",
+    "svgo": "^3.0.0",
+    "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
-    "react": "17.x",
-    "react-dom": "17.x"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/ui": "^3.2.4",
     "babel-jest": "^30.0.5",
-    "gh-pages": "^3.2.3",
+    "gh-pages": "^6.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jsdom": "^26.1.0",
-    "microbundle": "^0.14.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^7.1.4",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
-    "framer-motion": "^5.3.1",
     "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
     "react-image-pan-zoom-rotate": "^1.6.0",
-    "react-notifications-component": "^3.4.1",
-    "react-pdf": "^7.0.3",
+    "react-notifications-component": "^4.0.1",
     "react-switch": "^6.0.0",
-    "react-syntax-highlighter": "^15.6.1",
-    "react-tooltip": "^4.2.21",
+    "react-syntax-highlighter": "^15.6.6",
     "resumablejs": "^1.1.0"
   }
 }

package/publish.sh

@@ -1,6 +1,289 @@
-npm run build
+#!/bin/bash
+
+# 🚀 Ywana Core8 - Script de Publicación Automatizada
+# ================================================
+
+set -e  # Salir si cualquier comando falla
+
+# 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.1
+        progress=$((progress + 1))
+    done
+    echo ""
+}
+
+# Función para mostrar spinner
+show_spinner() {
+    local pid=$1
+    local message=$2
+    local spin='⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'
+    local i=0
+
+    echo -e "${CYAN}${message}${NC}"
+    while kill -0 $pid 2>/dev/null; do
+        i=$(( (i+1) %10 ))
+        printf "\r${YELLOW}${spin:$i:1}${NC} Procesando..."
+        sleep 0.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 "║                    🚀 YWANA CORE8 PUBLISHER                  ║"
+echo "║                  Automated Release Pipeline                  ║"
+echo "╚══════════════════════════════════════════════════════════════╝"
+echo -e "${NC}"
+
+# Obtener mensaje de commit del usuario
+if [ -z "$1" ]; then
+    echo -e "${YELLOW}💬 Ingresa el mensaje de commit:${NC}"
+    read -r COMMIT_MESSAGE
+    if [ -z "$COMMIT_MESSAGE" ]; then
+        log "ERROR" "Mensaje de commit requerido"
+        exit 1
+    fi
+else
+    COMMIT_MESSAGE="$1"
+fi
+
+log "INFO" "Mensaje de commit: ${COMMIT_MESSAGE}"
+
+echo ""
+log "INFO" "Iniciando pipeline de publicación..."
+
+# ============================================================================
+# PASO 1: Verificaciones Previas
+# ============================================================================
+echo -e "\n${PURPLE}📋 PASO 1: Verificaciones Previas${NC}"
+
+# Verificar que estamos en la rama correcta
+CURRENT_BRANCH=$(git branch --show-current)
+log "INFO" "Rama actual: ${CURRENT_BRANCH}"
+
+if [ "$CURRENT_BRANCH" != "main" ] && [ "$CURRENT_BRANCH" != "master" ]; then
+    log "WARNING" "No estás en la rama principal. ¿Continuar? (y/N)"
+    read -r CONTINUE
+    if [ "$CONTINUE" != "y" ] && [ "$CONTINUE" != "Y" ]; then
+        log "INFO" "Publicación cancelada"
+        exit 0
+    fi
+fi
+
+# Verificar que no hay cambios sin commitear
+if ! git diff-index --quiet HEAD --; then
+    log "INFO" "Hay cambios sin commitear. Se añadirán al commit."
+else
+    log "SUCCESS" "Working directory limpio"
+fi
+
+# Verificar conexión a internet
+if ! ping -c 1 google.com &> /dev/null; then
+    log "ERROR" "Sin conexión a internet"
+    exit 1
+fi
+
+log "SUCCESS" "Verificaciones previas completadas"
+
+# ============================================================================
+# PASO 2: Tests Omitidos (Opcional)
+# ============================================================================
+echo -e "\n${PURPLE}🧪 PASO 2: Tests (Omitido)${NC}"
+
+log "WARNING" "Tests omitidos para esta publicación"
+log "INFO" "Puedes ejecutar 'npm test' manualmente si lo deseas"
+
+# ============================================================================
+# PASO 3: Build del Proyecto
+# ============================================================================
+echo -e "\n${PURPLE}🔨 PASO 3: Building Proyecto${NC}"
+
+log "INFO" "Limpiando build anterior..."
+rm -rf dist/
+log "SUCCESS" "Build anterior eliminado"
+
+log "INFO" "Iniciando build con Vite..."
+BUILD_START=$(date +%s)
+
+if npm run build > /tmp/build_output.log 2>&1 & then
+    BUILD_PID=$!
+    show_spinner $BUILD_PID "Compilando con Vite"
+    wait $BUILD_PID
+    BUILD_EXIT_CODE=$?
+
+    BUILD_END=$(date +%s)
+    BUILD_TIME=$((BUILD_END - BUILD_START))
+
+    if [ $BUILD_EXIT_CODE -eq 0 ]; then
+        log "SUCCESS" "Build completado en ${BUILD_TIME}s"
+
+        # Mostrar tamaños de archivos
+        echo -e "${CYAN}📦 Archivos generados:${NC}"
+        ls -lah dist/ | grep -E '\.(js|css)$' | awk '{print "  " $9 " (" $5 ")"}'
+    else
+        log "ERROR" "Build falló. Ver /tmp/build_output.log para detalles"
+        echo -e "${RED}Últimas líneas del log:${NC}"
+        tail -10 /tmp/build_output.log
+        exit 1
+    fi
+else
+    log "ERROR" "No se pudo iniciar el build"
+    exit 1
+fi
+
+# ============================================================================
+# PASO 4: Incrementar Versión
+# ============================================================================
+echo -e "\n${PURPLE}📈 PASO 4: Incrementando Versión${NC}"
+
+CURRENT_VERSION=$(node -p "require('./package.json').version")
+log "INFO" "Versión actual: v${CURRENT_VERSION}"
+
+# Incrementar versión patch
+npm version patch --no-git-tag-version > /dev/null
+NEW_VERSION=$(node -p "require('./package.json').version")
+log "SUCCESS" "Nueva versión: v${NEW_VERSION}"
+
+# ============================================================================
+# PASO 5: Git Commit y Push
+# ============================================================================
+echo -e "\n${PURPLE}📤 PASO 5: Git Commit y Push${NC}"
+
+log "INFO" "Añadiendo archivos al staging..."
 git add --all
-git commit -m $0
-git push
-npm version patch
-npm publish
+show_progress 20 "Preparando commit..."
+
+FULL_COMMIT_MESSAGE="v${NEW_VERSION}: ${COMMIT_MESSAGE}"
+log "INFO" "Creando commit: ${FULL_COMMIT_MESSAGE}"
+git commit -m "$FULL_COMMIT_MESSAGE"
+log "SUCCESS" "Commit creado"
+
+log "INFO" "Creando tag de versión..."
+git tag "v${NEW_VERSION}"
+log "SUCCESS" "Tag v${NEW_VERSION} creado"
+
+log "INFO" "Pushing a GitHub..."
+if git push origin "$CURRENT_BRANCH" --tags > /tmp/push_output.log 2>&1 & then
+    PUSH_PID=$!
+    show_spinner $PUSH_PID "Subiendo cambios a GitHub"
+    wait $PUSH_PID
+    PUSH_EXIT_CODE=$?
+
+    if [ $PUSH_EXIT_CODE -eq 0 ]; then
+        log "SUCCESS" "Push completado exitosamente"
+    else
+        log "ERROR" "Push falló. Ver /tmp/push_output.log para detalles"
+        exit 1
+    fi
+else
+    log "ERROR" "No se pudo iniciar el push"
+    exit 1
+fi
+
+# ============================================================================
+# PASO 6: Publicar a NPM
+# ============================================================================
+echo -e "\n${PURPLE}📦 PASO 6: Publicando a NPM${NC}"
+
+# Verificar que estamos logueados en NPM
+if ! npm whoami > /dev/null 2>&1; then
+    log "ERROR" "No estás logueado en NPM. Ejecuta 'npm login' primero"
+    exit 1
+fi
+
+NPM_USER=$(npm whoami)
+log "INFO" "Usuario NPM: ${NPM_USER}"
+
+log "INFO" "Publicando v${NEW_VERSION} a NPM..."
+if npm publish > /tmp/publish_output.log 2>&1 & then
+    PUBLISH_PID=$!
+    show_spinner $PUBLISH_PID "Publicando a NPM Registry"
+    wait $PUBLISH_PID
+    PUBLISH_EXIT_CODE=$?
+
+    if [ $PUBLISH_EXIT_CODE -eq 0 ]; then
+        log "SUCCESS" "Paquete publicado exitosamente"
+    else
+        log "ERROR" "Publicación falló. Ver /tmp/publish_output.log para detalles"
+        echo -e "${RED}Últimas líneas del log:${NC}"
+        tail -10 /tmp/publish_output.log
+        exit 1
+    fi
+else
+    log "ERROR" "No se pudo iniciar la publicación"
+    exit 1
+fi
+
+# ============================================================================
+# RESUMEN FINAL
+# ============================================================================
+echo -e "\n${GREEN}"
+echo "╔══════════════════════════════════════════════════════════════╗"
+echo "║                    🎉 PUBLICACIÓN EXITOSA                   ║"
+echo "╚══════════════════════════════════════════════════════════════╝"
+echo -e "${NC}"
+
+TOTAL_END=$(date +%s)
+TOTAL_TIME=$((TOTAL_END - $(date +%s -d "1 minute ago")))
+
+echo -e "${CYAN}📊 Resumen de la publicación:${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:        ${CURRENT_BRANCH}"
+echo -e "  ${GREEN}✓${NC} Usuario NPM: ${NPM_USER}"
+echo -e "  ${GREEN}✓${NC} Build time:  ${BUILD_TIME}s"
+
+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}"
+
+# Limpiar archivos temporales
+rm -f /tmp/test_output.log /tmp/build_output.log /tmp/push_output.log /tmp/publish_output.log
+
+echo -e "\n${GREEN}🚀 ¡Publicación completada exitosamente!${NC}"
+echo -e "${PURPLE}Gracias por usar Ywana Core8 Publisher${NC}\n"

package/src/html/accordion.example.js

@@ -176,117 +176,43 @@ export const AccordionExamples = () => {
     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"
-
-
             },
-
-
             {
-
-
                     "id": "api-reference",
-
-
                     "title": "Referencia API",
-
-
                     "icon": "code"
-
-
             }
-
-
     ]
 
-
-
     return (
         <ExampleLayout title="Accordion Examples" sections={sections}>
             <ExampleSection id="overview" title="Ejemplos de Componente Accordion Mejorado" icon="widgets">

package/src/html/textfield2.css

@@ -117,8 +117,7 @@
 .textfield2-outlined .textfield2-clear,
 .textfield2-outlined .textfield2-password-toggle {
     /* Para outlined, centramos respecto al input que tiene padding de 1rem */
-    top: 50%;
-    right: 0.75rem;  /* Alineado con el padding del input */
+    top: 3.3rem;
 }
 
 .textfield2-clear:hover,
@@ -133,20 +132,6 @@
     top: calc(0.5rem + 1.25rem);  /* padding-top reducido + mitad altura input */
 }
 
-.textfield2-password-toggle {
-    right: 2.5rem;  /* Más espacio para el clear button */
-}
-
-/* When both clear and password toggle are present */
-.textfield2.textfield2-password .textfield2-clear {
-    right: 2.5rem;
-}
-
-/* Outlined variant - icon spacing */
-.textfield2-outlined .textfield2-password-toggle {
-    right: 2.5rem;
-}
-
 .textfield2-outlined.textfield2-password .textfield2-clear {
     right: 2.5rem;
 }

package/src/setupTests.js

@@ -0,0 +1,38 @@
+// Setup file for tests
+import '@testing-library/jest-dom'
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock window.getComputedStyle
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => ({
+    getPropertyValue: () => '',
+  }),
+})