@raphab3/hermes-notifier
Version:
JavaScript/React plugin for Hermes notifications system with SSE support
82 lines (81 loc) • 4.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* React components for displaying Hermes notifications
*/
import { useEffect } from 'react';
/**
* Single notification component
*/
export const NotificationItem = ({ notification, onMarkAsRead, onClose, className = '', autoClose = false, autoCloseDelay = 5000, }) => {
useEffect(() => {
if (autoClose && onClose) {
const timer = setTimeout(() => {
onClose(notification.id);
}, autoCloseDelay);
return () => clearTimeout(timer);
}
}, [autoClose, autoCloseDelay, notification.id, onClose]);
const handleMarkAsRead = () => {
if (onMarkAsRead && !notification.is_read) {
onMarkAsRead(notification.id);
}
};
const handleClose = () => {
if (onClose) {
onClose(notification.id);
}
};
const priorityClass = {
low: 'hermes-notification-low',
normal: 'hermes-notification-normal',
high: 'hermes-notification-high',
critical: 'hermes-notification-critical',
}[notification.priority] || 'hermes-notification-normal';
return (_jsxs("div", { className: `hermes-notification ${priorityClass} ${className}`, children: [_jsxs("div", { className: "hermes-notification-header", children: [_jsx("h4", { className: "hermes-notification-title", children: notification.title }), _jsxs("div", { className: "hermes-notification-actions", children: [!notification.is_read && onMarkAsRead && (_jsx("button", { onClick: handleMarkAsRead, className: "hermes-notification-mark-read", title: "Mark as read", children: "\u2713" })), onClose && (_jsx("button", { onClick: handleClose, className: "hermes-notification-close", title: "Close", children: "\u00D7" }))] })] }), _jsx("div", { className: "hermes-notification-body", children: notification.body }), _jsxs("div", { className: "hermes-notification-meta", children: [_jsx("span", { className: "hermes-notification-source", children: notification.source_system }), _jsx("span", { className: "hermes-notification-time", children: new Date(notification.created_at).toLocaleTimeString() })] })] }));
};
/**
* List of notifications component
*/
export const NotificationList = ({ notifications, onMarkAsRead, onClose, maxItems = 10, className = '', }) => {
const displayNotifications = notifications.slice(0, maxItems);
return (_jsx("div", { className: `hermes-notification-list ${className}`, children: displayNotifications.length === 0 ? (_jsx("div", { className: "hermes-notification-empty", children: "No notifications" })) : (displayNotifications.map((notification) => (_jsx(NotificationItem, { notification: notification, onMarkAsRead: onMarkAsRead, onClose: onClose }, notification.id)))) }));
};
/**
* Toast notification component (appears temporarily)
*/
export const NotificationToast = ({ notification, onMarkAsRead, onClose, position = 'top-right', autoClose = true, autoCloseDelay = 5000, className = '', }) => {
const positionClass = {
'top-right': 'hermes-toast-top-right',
'top-left': 'hermes-toast-top-left',
'bottom-right': 'hermes-toast-bottom-right',
'bottom-left': 'hermes-toast-bottom-left',
}[position];
return (_jsx("div", { className: `hermes-toast ${positionClass} ${className}`, children: _jsx(NotificationItem, { notification: notification, onMarkAsRead: onMarkAsRead, onClose: onClose, autoClose: autoClose, autoCloseDelay: autoCloseDelay, className: "hermes-toast-item" }) }));
};
/**
* Connection status indicator component
*/
export const ConnectionStatus = ({ connected, reconnecting, error, className = '', }) => {
let statusText = 'Disconnected';
let statusClass = 'hermes-status-disconnected';
if (connected) {
statusText = 'Connected';
statusClass = 'hermes-status-connected';
}
else if (reconnecting) {
statusText = 'Reconnecting...';
statusClass = 'hermes-status-reconnecting';
}
else if (error) {
statusText = `Error: ${error}`;
statusClass = 'hermes-status-error';
}
return (_jsxs("div", { className: `hermes-connection-status ${statusClass} ${className}`, children: [_jsx("span", { className: "hermes-status-indicator" }), _jsx("span", { className: "hermes-status-text", children: statusText })] }));
};
// Export all components
export default {
NotificationItem,
NotificationList,
NotificationToast,
ConnectionStatus,
};