ywana-core8 0.1.98 → 0.1.101

package/doc/src/index.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom/client';
-import './ywana-core8.css'
+import 'ywana-core8/dist/index.css'
+import 'ywana-core8/src/css/theme_light.css'
 import './index.css';
 import App from './App';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.98",
+  "version": "0.1.101",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -12,63 +12,57 @@
   "previewjs": {
     "framework": "react",
     "react": {
-      "version": 18
+      "version": 17
     }
   },
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "microbundle --no-compress --jsx React.createElement",
+    "dev": "microbundle watch --no-compress --jsx React.createElement",
     "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",
-    "nth-check": "^2.1.1",
-    "postcss": "^8.4.31",
-    "svgo": "^3.0.0",
-    "webpack-dev-server": "^4.15.1"
+    "react-error-overlay": "6.0.9"
   },
   "peerDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "17.x",
+    "react-dom": "17.x"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^12.1.5",
     "@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": "^6.3.0",
+    "gh-pages": "^3.2.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jsdom": "^26.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "vite": "^7.1.4",
-    "vitest": "^3.2.4"
+    "microbundle": "^0.14.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^5.0.1"
   },
   "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": "^4.0.1",
+    "react-notifications-component": "^3.4.1",
+    "react-pdf": "^7.0.3",
     "react-switch": "^6.0.0",
-    "react-syntax-highlighter": "^15.6.6",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-tooltip": "^4.2.21",
     "resumablejs": "^1.1.0"
   }
 }

package/publish.sh

@@ -1,289 +1,6 @@
-#!/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..."
+npm run build
 git add --all
-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"
+git commit -m $0
+git push
+npm version patch
+npm publish

package/src/html/accordion.example.js

@@ -176,43 +176,117 @@ 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/property.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react'
+import React, { useState, useCallback, useRef, useEffect, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text } from './text'
@@ -229,7 +229,7 @@ export const Property = (props) => {
             {/* Property value (maintaining original structure) */}
             <div className="property-value">
                 {editable ? (
-                    <>
+                    <Fragment>
                         {multiline ? (
                             <textarea
                                 ref={inputRef}
@@ -282,9 +282,9 @@ export const Property = (props) => {
                                 aria-label="Clear value"
                             />
                         )}
-                    </>
+                    </Fragment>
                 ) : (
-                    <>
+                    <Fragment>
                         {/* Display value */}
                         <span
                             className={`property-value__display ${copyable ? 'property-value__display--copyable' : ''}`}
@@ -303,7 +303,7 @@ export const Property = (props) => {
                                 aria-label="Copy value"
                             />
                         )}
-                    </>
+                    </Fragment>
                 )}
             </div>
 

package/src/incubator/pdfViewer.js

@@ -0,0 +1,33 @@
+import React, {useState} from 'react'
+import { Document, Page } from 'react-pdf'
+
+export const PDFViewer = (props) => {
+
+    const { file } = props
+    const [numPages, setNumPages] = useState(null)
+    const [pageNumber, setPageNumber] = useState(1)
+
+    function onDocumentLoadSuccess({ numPages }) {
+        setNumPages(numPages)
+    }
+
+    return (
+        <div className="pdfViewer">
+            <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
+                <Page pageNumber={pageNumber} />
+            </Document>
+        </div>
+    )
+}
+
+export const PDFViewerTest = (props) => {
+
+    const base64 = "xx"
+
+    const file = "https://pro.ywanadigital.com/files/20230602102630601/original/files/Label1_7_ok.pdf"
+
+    return (
+        <PDFViewer file={file} />
+    )
+
+}