@kwirthmagnify/kwirth-common-front 0.5.43 → 0.5.45

package/dist/HelpButton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpButton = void 0;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const icons_material_1 = require("@mui/icons-material");
+const HelpOutline_1 = __importDefault(require("@mui/icons-material/HelpOutline"));
 // Botón de ayuda reutilizable para dialogs de configuración: abre la guía (docsify) en un NUEVO tab en
 // una sección concreta, deep-link vía hash routing (p.ej. …/#/admin/06-sla-settings). `section` puede
 // llevar ancla de heading (…?id=slug). Pensado para la barra de título de un dialog.
@@ -38,6 +38,6 @@ const HelpButton = ({ docsUrl, section }) => {
     };
     return (react_1.default.createElement(material_1.Tooltip, { arrow: true, title: 'Open the guide for this section' },
         react_1.default.createElement(material_1.IconButton, { size: 'small', "aria-label": 'help', onClick: open },
-            react_1.default.createElement(icons_material_1.HelpOutline, { fontSize: 'small' }))));
+            react_1.default.createElement(HelpOutline_1.default, { fontSize: 'small' }))));
 };
 exports.HelpButton = HelpButton;

package/dist/MenuNotification.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ENotifyLevel } from '@kwirthmagnify/kwirth-common';
+export interface INotification {
+    channelId: string | undefined;
+    text: string;
+    level: ENotifyLevel;
+    timestamp: Date;
+}
+interface MenuNotificationProps {
+    anchorParent: HTMLElement | null;
+    notifications: INotification[];
+    onClose: () => void;
+    onRefresh: () => void;
+    renderIcon?: (channelId: string | undefined) => React.ReactNode;
+}
+declare const MenuNotification: React.FC<MenuNotificationProps>;
+export { MenuNotification };

package/dist/MenuNotification.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuNotification = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const kwirthicons_1 = require("./kwirthicons");
+const kwirth_common_1 = require("@kwirthmagnify/kwirth-common");
+const MenuNotification = ({ anchorParent, onClose, notifications, onRefresh, renderIcon }) => {
+    const getSeverityColor = (level) => {
+        const colors = {
+            [kwirth_common_1.ENotifyLevel.ERROR]: 'error.main',
+            [kwirth_common_1.ENotifyLevel.WARNING]: 'warning.main',
+            [kwirth_common_1.ENotifyLevel.SUCCESS]: 'success.main',
+            [kwirth_common_1.ENotifyLevel.INFO]: 'info.main',
+        };
+        return colors[level];
+    };
+    const onDelete = (index) => {
+        notifications.splice(index, 1);
+        onRefresh();
+    };
+    const onClear = () => {
+        while (notifications.length > 0)
+            notifications.splice(0, 1);
+        onClose();
+    };
+    return (react_1.default.createElement(material_1.Popover, { anchorEl: anchorParent, open: true, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, PaperProps: { sx: { width: 400, maxHeight: 500 } } },
+        react_1.default.createElement(material_1.Box, { sx: { p: 2, display: 'flex', alignItems: 'center', gap: 1 } },
+            react_1.default.createElement(material_1.Typography, { variant: 'subtitle1', sx: { fontWeight: 700, flexGrow: 1 } }, "Notifications"),
+            notifications.length > 0 && react_1.default.createElement(material_1.Button, { size: 'small', color: 'error', startIcon: react_1.default.createElement(kwirthicons_1.DeleteSweep, null), onClick: onClear, sx: { fontSize: '0.75rem' } }, "Clear"),
+            react_1.default.createElement(material_1.Chip, { label: notifications.length, size: 'small' })),
+        react_1.default.createElement(material_1.Divider, null),
+        react_1.default.createElement(material_1.List, { sx: { p: 0 } }, notifications.length > 0 ? (notifications.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime()).map((msg, index) => (react_1.default.createElement(material_1.ListItem, { key: index, divider: true, secondaryAction: react_1.default.createElement(material_1.IconButton, { edge: 'end', size: 'small', onClick: () => onDelete(index) },
+                react_1.default.createElement(kwirthicons_1.Close, { fontSize: 'small' })) },
+            react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'start' },
+                react_1.default.createElement("span", { style: { marginTop: 2 } }, renderIcon ? renderIcon(msg.channelId) : react_1.default.createElement(kwirthicons_1.Notifications, { sx: { fontSize: 20, opacity: 0.5 } })),
+                react_1.default.createElement(material_1.ListItemText, { primary: msg.text, primaryTypographyProps: { variant: 'body2', sx: { pr: 2, pl: 1 } }, secondary: react_1.default.createElement(material_1.Box, { component: 'span', sx: { display: 'flex', justifyContent: 'space-between', mt: 0.5 } },
+                        react_1.default.createElement(material_1.Typography, { variant: 'caption', sx: { color: getSeverityColor(msg.level), fontWeight: 'bold', pl: 1 } }, msg.level),
+                        react_1.default.createElement(material_1.Typography, { variant: 'caption', color: 'text.secondary' }, msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }))) }))))))
+            :
+                (react_1.default.createElement(material_1.Box, { sx: { p: 4, textAlign: 'center' } },
+                    react_1.default.createElement(kwirthicons_1.NotificationsOff, { sx: { opacity: 0.2, fontSize: 40, mb: 1 } }),
+                    react_1.default.createElement(material_1.Typography, { variant: 'body2', color: 'text.secondary' }, "No new notifications."))))));
+};
+exports.MenuNotification = MenuNotification;

package/dist/index.d.ts

@@ -125,6 +125,8 @@ export { HelpButton } from './HelpButton';
 export type { IHelpButtonProps } from './HelpButton';
 export { DialogTitleHelp } from './DialogTitleHelp';
 export type { IDialogTitleHelpProps } from './DialogTitleHelp';
+export { MenuNotification } from './MenuNotification';
+export type { INotification } from './MenuNotification';
 export interface ITabSummary {
     name: string;
     description: string;

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogTitleHelp = exports.HelpButton = exports.UserPicker = exports.MsgBoxWaitCancel = exports.MsgBoxWait = exports.MsgBoxYesNoCancel = exports.MsgBoxYesNo = exports.MsgBoxOkCancel = exports.MsgBoxOkError = exports.MsgBoxOkWarning = exports.MsgBoxOk = exports.MsgBoxButtons = exports.MiniGauge = exports.MarkdownViewer = exports.cleanANSI = exports.MetricDefinition = exports.ERemoteConnState = exports.ENotifyLevel = exports.EChannelRefreshAction = exports.useKeyboard = void 0;
+exports.MenuNotification = exports.DialogTitleHelp = exports.HelpButton = exports.UserPicker = exports.MsgBoxWaitCancel = exports.MsgBoxWait = exports.MsgBoxYesNoCancel = exports.MsgBoxYesNo = exports.MsgBoxOkCancel = exports.MsgBoxOkError = exports.MsgBoxOkWarning = exports.MsgBoxOk = exports.MsgBoxButtons = exports.MiniGauge = exports.MarkdownViewer = exports.cleanANSI = exports.MetricDefinition = exports.ERemoteConnState = exports.ENotifyLevel = exports.EChannelRefreshAction = exports.useKeyboard = void 0;
 const react_1 = require("react");
 const kwirth_common_1 = require("@kwirthmagnify/kwirth-common");
 Object.defineProperty(exports, "EChannelRefreshAction", { enumerable: true, get: function () { return kwirth_common_1.EChannelRefreshAction; } });
@@ -66,3 +66,5 @@ var HelpButton_1 = require("./HelpButton");
 Object.defineProperty(exports, "HelpButton", { enumerable: true, get: function () { return HelpButton_1.HelpButton; } });
 var DialogTitleHelp_1 = require("./DialogTitleHelp");
 Object.defineProperty(exports, "DialogTitleHelp", { enumerable: true, get: function () { return DialogTitleHelp_1.DialogTitleHelp; } });
+var MenuNotification_1 = require("./MenuNotification");
+Object.defineProperty(exports, "MenuNotification", { enumerable: true, get: function () { return MenuNotification_1.MenuNotification; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwirthmagnify/kwirth-common-front",
-  "version": "0.5.43",
+  "version": "0.5.45",
   "description": "Frontend channel interfaces for Kwirth plugins and channels",
   "scripts": {
     "build": "del .\\dist\\* /s /q && tsc"
@@ -18,7 +18,7 @@
   "author": "Julio Fernandez",
   "license": "ISC",
   "dependencies": {
-    "@kwirthmagnify/kwirth-common": "^0.5.29",
+    "@kwirthmagnify/kwirth-common": "^0.5.40",
     "react-markdown": "^10.1.0"
   },
   "peerDependencies": {