openSnackbar

Paquetes: @tiendana/utils @tiendana/web-foundation

Sistema de notificaciones tipo snackbar con cola automática, animaciones, stacking y expresiones personalizadas.

Características

✅ Cola con máximo 3 snackbars visibles
✅ Stacking visual con escala y sombras
✅ 13 expresiones faciales disponibles
✅ Auto-dismiss configurable
✅ CTA buttons con callbacks
✅ Variante accent
✅ Animaciones suaves de entrada/salida

Firma

interface SnackbarOpts {
  msj: string;
  iconExpression?: 'congrat_dark' | 'congrat_forrest' | 'congrat_light' | 
    'done_dark' | 'done_light' | 'error_dark' | 'error_light' | 
    'error_green_neon_dark' | 'error_green_neon_light' | 
    'play_dark' | 'play_light' | 'smile_dark' | 'smile_light';
  duration?: number;
  showClose?: boolean;
  ctaText?: string;
  ctaCallback?: () => void;
  accent?: boolean;
}

function openSnackbar(opts: SnackbarOpts): void

Parámetros

Parámetro	Tipo	Descripción	Default
msj	string	Mensaje a mostrar	-
iconExpression	string	Icono de expresión facial	'done_light'
duration	number	Duración en ms (0 = sin auto-dismiss)	4000
showClose	boolean	Mostrar botón de cierre	true
ctaText	string	Texto del botón CTA	-
ctaCallback	() => void	Callback del botón CTA	-
accent	boolean	Usar variante accent	false

Demo - Snackbar Básico

Cargando demo...

Ver código

Demo - Con Botón CTA

Cargando demo...

Ver código

Demo - Variante Accent

Cargando demo...

Ver código

Demo - Cola de Snackbars

Cargando demo...

Ver código

Uso en Código

import { openSnackbar } from '@tiendana/utils';

// Básico
openSnackbar({
  msj: 'Operación completada exitosamente',
  iconExpression: 'done_light',
  duration: 4000
});

// Con CTA
openSnackbar({
  msj: 'Archivo listo para descargar',
  iconExpression: 'smile_light',
  ctaText: 'Descargar',
  ctaCallback: () => downloadFile(url),
  duration: 0
});

// Accent variant
openSnackbar({
  msj: 'Nueva notificación importante',
  iconExpression: 'congrat_forrest',
  accent: true,
  duration: 5000
});

Expresiones Disponibles

Light Mode	Dark Mode	Forrest
done_light	done_dark	-
error_light	error_dark	-
smile_light	smile_dark	-
play_light	play_dark	-
congrat_light	congrat_dark	congrat_forrest
error_green_neon_light	error_green_neon_dark	-

Comportamiento

Cola de Snackbars

• Máximo 3 snackbars visibles simultáneamente
• Nuevos snackbars se agregan a la cola
• Cuando uno se cierra, el siguiente en cola aparece

Stacking Visual

// Cada snackbar tiene:
- scale: 1 - (index * 0.04)    // 1, 0.96, 0.92
- bottom: 24 + (index * 8)     // 24px, 32px, 40px
- zIndex: 9000 + index
- boxShadow: Aumenta con el índice

Animaciones

1. Entrada: Muestra icono primero, luego expande texto (1000ms)
2. Salida: Contrae y desvanece (1400ms)
3. Auto-dismiss: Solo el snackbar superior cuenta duración

Casos de Uso

• Feedback de acciones: Confirmar operaciones (guardar, eliminar, copiar)
• Notificaciones: Mensajes del sistema, actualizaciones
• Errores no críticos: Alertas que no bloquean la UI
• CTAs opcionales: Acciones secundarias (deshacer, ver detalles)

Notas Técnicas

• Dependencias: Requiere estilos de @tiendana/web-foundation
• Expresiones: Cargadas desde CloudFront (assets/icons/logos/expressions/)
• DOM: Se agrega directamente a document.body
• Timeouts: Gestionados con Map<HTMLDivElement, number> para limpieza correcta

Ver También

• copyTextToClipboard - Usa snackbar automáticamente
• SVG Icons - Constantes SVG disponibles