@jysperu/browser-alert

Utilidades modernas para gestión de alertas y diálogos en el navegador usando SweetAlert2.

🚀 Características

• 🎨 SweetAlert2 integrado con configuración optimizada
• 🔧 TypeScript completamente tipado
• ✅ Interfaces robustas para configuración
• 🛡️ Manejo de errores comprehensivo

📦 Instalación

npm install @jysperu/browser-alert

SweetAlert2 se instala automáticamente como dependencia del paquete.

⚡ Inicio Rápido

import { alert_success, alert_confirm, alert_loading } from "@jysperu/browser-alert";

// Mensaje de éxito
await alert_success("¡Operación completada exitosamente!");

// Confirmación
const confirmed = await alert_confirm("¿Estás seguro de eliminar este elemento?");
if (confirmed) {
  console.log("Usuario confirmó la acción");
}

// Indicador de carga
alert_loading("Procesando", "Por favor espere...");

// Acceso directo a SweetAlert2
import { Swal } from "@jysperu/browser-alert";

await Swal.fire({
  title: "Configuración personalizada",
  html: "Usa Swal directamente para casos complejos",
  icon: "info",
});

📚 API Reference

🎯 alert_loading

Muestra un diálogo de carga con spinner.

function alert_loading(title?: string, html?: string, config?: AlertMessageConfig): Promise<void>;

Parámetros:

• title - Título del diálogo (por defecto: "Guardando datos")
• html - Contenido HTML del mensaje
• config - Configuración adicional

Ejemplos:

// Carga básica
alert_loading();

// Carga personalizada
alert_loading("Subiendo archivo", "Procesando imagen, por favor espere...");

// Con configuración adicional
alert_loading("Conectando", "Estableciendo conexión con el servidor...", {
  position: "top",
  toast: false,
});

✅ alert_confirm

Muestra un diálogo de confirmación.

interface AlertConfirmOptions {
  icon?: "question" | "warning" | "info";
  confirmButtonText?: string;
  cancelButtonText?: string;
  hideCancelButton?: boolean;
}

function alert_confirm(html: string, title?: string, options?: AlertConfirmOptions, config?: AlertMessageConfig): Promise<boolean>;

Retorna: true si se confirmó, false si se canceló

Ejemplos:

// Confirmación básica
const result = await alert_confirm("¿Desea continuar?");

// Confirmación personalizada
const result = await alert_confirm("Se eliminarán todos los datos. Esta acción no se puede deshacer.", "Confirmar eliminación", {
  icon: "warning",
  confirmButtonText: "Sí, eliminar",
  cancelButtonText: "Cancelar",
});

// Sin botón de cancelar
const result = await alert_confirm("Por favor confirme que ha leído los términos", "Aceptar términos", {
  hideCancelButton: true,
  confirmButtonText: "He leído y acepto",
});

💬 alert_message

Muestra un mensaje con icono específico.

function alert_message(icon: "success" | "error" | "warning" | "info", html: string, title?: string, config?: AlertMessageConfig): Promise<void>;

Ejemplos:

// Mensaje informativo
await alert_message("info", "El sistema se actualizará en 5 minutos");

// Mensaje de advertencia
await alert_message("warning", "Memoria baja disponible", "Advertencia del sistema");

// Mensaje personalizado
await alert_message("success", "Datos guardados", "Éxito", {
  timer: 3000,
  position: "top-end",
  toast: true,
});

🎉 alert_success

Muestra un mensaje de éxito.

function alert_success(html: string, title?: string, config?: AlertMessageConfig): Promise<void>;

Ejemplos:

// Éxito básico
await alert_success("Usuario creado correctamente");

// Éxito personalizado
await alert_success("Perfil actualizado con éxito", "Cambios guardados", { timer: 1500 });

❌ alert_error

Muestra un mensaje de error.

function alert_error(html: string, title?: string, config?: AlertMessageConfig): Promise<void>;

Ejemplos:

// Error básico
await alert_error("No se pudo conectar con el servidor");

// Error detallado
await alert_error("El archivo es demasiado grande. Máximo permitido: 10MB", "Error de validación", { timer: 8000 });

⚠️ alert_warning

Muestra un mensaje de advertencia.

function alert_warning(html: string, title?: string, config?: AlertMessageConfig): Promise<void>;

Ejemplo:

await alert_warning("La sesión expirará en 5 minutos", "Sesión por expirar");

ℹ️ alert_info

Muestra un mensaje informativo.

function alert_info(html: string, title?: string, config?: AlertMessageConfig): Promise<void>;

Ejemplo:

await alert_info("Nueva funcionalidad disponible en el menú principal");

❌ alert_close

Cierra cualquier diálogo activo.

function alert_close(): void;

Ejemplo:

// Cerrar después de 3 segundos
setTimeout(() => {
  alert_close();
}, 3000);

🔧 Configuración Avanzada

AlertMessageConfig Interface

interface AlertMessageConfig {
  timer?: number; // Tiempo en ms para auto-cerrar
  showConfirmButton?: boolean; // Mostrar botón de confirmación
  position?: "top" | "top-start" | "top-end" | "center" | "center-start" | "center-end" | "bottom" | "bottom-start" | "bottom-end";
  toast?: boolean; // Modo toast (esquina de pantalla)
  [key: string]: any; // Cualquier opción adicional de SweetAlert2
}

🎯 Casos de Uso Prácticos

Sistema de Autenticación

import { alert_loading, alert_success, alert_error, alert_confirm } from "@jysperu/browser-alert";

class AuthManager {
  static async login(email: string, password: string) {
    // Mostrar indicador de carga
    alert_loading("Iniciando sesión", "Verificando credenciales...");

    try {
      const response = await fetch("/api/login", {
        method: "POST",
        body: JSON.stringify({ email, password }),
        headers: { "Content-Type": "application/json" },
      });

      if (response.ok) {
        await alert_success("¡Bienvenido!", "Inicio de sesión exitoso");
        // Redirigir al dashboard
      } else {
        await alert_error("Credenciales incorrectas", "Error de autenticación");
      }
    } catch (error) {
      await alert_error("No se pudo conectar con el servidor", "Error de conexión");
    }
  }

  static async logout() {
    const confirmed = await alert_confirm("¿Estás seguro de que deseas cerrar sesión?", "Confirmar cierre de sesión", {
      icon: "question",
      confirmButtonText: "Sí, cerrar sesión",
      cancelButtonText: "Cancelar",
    });

    if (confirmed) {
      alert_loading("Cerrando sesión...");
      // Lógica de logout
      await alert_success("Sesión cerrada correctamente");
    }
  }
}

📦 Build y Distribución

# Construir el proyecto
npm run build

# Genera automáticamente:
# └── dist/
#     ├── alert.esm.js      # ES Modules
#     ├── alert.cjs.js      # CommonJS
#     ├── alert.umd.js      # UMD
#     └── alert.d.ts        # TypeScript definitions

🌐 Compatibilidad

• ✅ Todos los navegadores modernos
• ✅ Compatible con frameworks (React, Vue, Angular)
• ✅ SSR friendly
• ✅ TypeScript nativo

🔗 Enlaces y Recursos

• 📘 Repositorio: GitLab - browser-alert
• 🐛 Issues: Reportar problemas
• 📦 npm: @jysperu/browser-alert
• 📚 SweetAlert2: Documentación oficial
• 🏢 JYS Perú: www.jys.pe

📄 Licencia

MIT License - Consulta el archivo LICENSE para detalles completos.

MIT License - Copyright (c) 2025 JYS Perú

Desarrollado con ❤️ por JYS Perú