📦 MessageBox & InputBox Components

Sistema de componentes reutilizables para mensajes e inputs modales en aplicaciones web. Diseñado con estilo moderno, validación automática y soporte completo para formularios complejos.

🎯 Características

MessageBox

• ✅ Alertas estilizadas: Success, Error, Warning, Info
• ✅ Confirmaciones: Con callbacks para acciones
• ✅ Prompts: Input rápido con validación
• ✅ Personalizable: Botones y acciones custom
• ✅ Auto-close: Cierre automático configurable
• ✅ Tipos especiales: Delete, Question

InputBox

• ✅ Inputs simples: Text, Email, Number, Password, Textarea
• ✅ Formularios complejos: Multi-campo con validación
• ✅ Tipos avanzados: Select, Checkbox
• ✅ Validación automática: Required, email, minLength, maxLength
• ✅ Validación custom: Lógica personalizada
• ✅ Scroll inteligente: Formularios largos con botones siempre visibles
• ✅ Iconos: Soporte para Font Awesome
• ✅ Responsive: Adaptable a cualquier pantalla

📁 Estructura de Archivos

proyecto/
├── js/
│   ├── MessageBox.js      # Componente de mensajes
│   └── InputBox.js        # Componente de inputs
├── demo-boxes.html        # Página de demostración
└── README.md             # Este archivo

🚀 Instalación

1. Incluir archivos JavaScript

<!-- Dependencias -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Componentes -->
<script src="js/MessageBox.js"></script>
<script src="js/InputBox.js"></script>

2. Usar componentes globales

Los componentes se inicializan automáticamente como variables globales:

• msgBox → MessageBox
• inputBox → InputBox

📖 Uso - MessageBox

Alertas Básicas

// Success con auto-close (3 segundos)
msgBox.success('Operación completada', '¡Éxito!', 3000);

// Error sin auto-close
msgBox.error('No se pudo conectar', 'Error de Conexión');

// Warning
msgBox.warning('Cambios sin guardar', 'Advertencia');

// Info
msgBox.info('Nueva versión disponible', 'Información');

Confirmaciones

// Confirmación simple
msgBox.confirm(
    '¿Estás seguro de continuar?',
    '¿Confirmar?',
    () => console.log('Confirmado'),
    () => console.log('Cancelado')
);

// Delete con estilo danger
msgBox.delete(
    'Esta acción no se puede deshacer',
    '¿Eliminar?',
    () => console.log('Eliminado')
);

// Prompt para input rápido
const result = await msgBox.prompt(
    '¿Cómo te llamas?',
    'Nombre',
    'Juan Pérez...'
);
console.log(result.value);

Personalizado

msgBox.show({
    type: 'warning',
    title: 'Acción Requerida',
    message: 'Selecciona una opción',
    buttons: [
        { text: 'Cancelar', action: 'cancel', type: 'secondary' },
        { text: 'Continuar', action: 'continue', type: 'primary' },
        { text: 'Eliminar', action: 'delete', type: 'danger' }
    ],
    onConfirm: (action) => console.log(`Acción: ${action}`),
    autoClose: 0  // Sin auto-close
});

📖 Uso - InputBox

Inputs Simples

// Text
const result = await inputBox.text('Nombre del producto', 'Laptop HP');
console.log(result.value);

// Email
const email = await inputBox.email('Tu correo');
console.log(email.email);

// Number
const cantidad = await inputBox.number('Cantidad', '0');
console.log(cantidad.value);

// Password
const pass = await inputBox.password('Nueva contraseña');
console.log(pass.password);

// Textarea
const desc = await inputBox.textarea('Descripción', 'Escribe aquí...', true, 5);
console.log(desc.value);

🎨 Tipos de Campos Soportados

Tipo	Descripción	Validación
text	Input de texto	required, minLength, maxLength
email	Input de email	required, formato email
number	Input numérico	required, valor numérico
password	Input de contraseña	required, minLength
textarea	Área de texto	required, minLength, maxLength
select	Selector dropdown	required
checkbox	Casilla de verificación	required

⚙️ Opciones de Configuración

MessageBox.show()

{
    type: 'success' | 'error' | 'warning' | 'info' | 'question',
    title: string,
    message: string,
    buttons: [
        { text: string, action: string, type: 'primary' | 'secondary' | 'danger' }
    ],
    input: boolean,
    inputPlaceholder: string,
    onConfirm: function(result),
    onCancel: function(),
    autoClose: number  // milisegundos, 0 = sin auto-close
}

InputBox.show()

{
    title: string,
    description: string,
    icon: string,
    fields: [
        {
            name: string,
            label: string,
            type: 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox',
            placeholder: string,
            required: boolean,
            icon: string,  // clase Font Awesome
            options: [{ value: string, label: string }],  // para select
            value: any,  // valor por defecto
            rows: number,  // para textarea
            minLength: number,
            maxLength: number
        }
    ],
    confirmText: string,
    cancelText: string,
    showCancel: boolean,
    validate: function(values),  // return true o string con error
    onConfirm: function(values),
    onCancel: function()
}

🎯 Validación

Validación Automática

• required: Campo obligatorio
• email: Formato de email válido
• number: Valor numérico
• minLength: Longitud mínima
• maxLength: Longitud máxima

Validación Custom

validate: (values) => {
    // Validar passwords coinciden
    if (values.password !== values.confirm_password) {
        return 'Las contraseñas no coinciden';
    }
    
    // Validar edad
    if (values.edad < 18) {
        return 'Debes ser mayor de 18 años';
    }
    
    // Todo OK
    return true;
}

🎨 Personalización de Estilos

Los componentes usan CSS variables para fácil personalización:

:root {
    --primary: #00D4AA;
    --primary-dark: #00B894;
    --secondary: #6C5CE7;
    --error: #FF7675;
    --success: #00B894;
    --warning: #FDCB6E;
}

📱 Responsive

• ✅ Adaptable a móviles, tablets y desktop
• ✅ Scroll automático en formularios largos
• ✅ Botones siempre visibles
• ✅ Touch-friendly

⌨️ Atajos de Teclado

• Enter: Confirmar/Aceptar
• Escape: Cancelar (si está disponible)
• Tab: Navegar entre campos

🔧 Compatibilidad

• ✅ Chrome, Firefox, Safari, Edge (últimas versiones)
• ✅ Requiere ES6+ (async/await, arrow functions)
• ✅ Font Awesome 6.x
• ✅ Google Fonts (Syne, DM Sans)

📋 Ejemplo Completo

Ver demo-boxes.html para ejemplos interactivos de todos los casos de uso.

🤝 Contribuir

Para agregar nuevas características o reportar bugs, crea un issue o pull request en el repositorio.

📄 Licencia

MIT License - Libre para uso personal y comercial.

---

Desarrollado con ❤️ por mi para aplicaciones web modernas