@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/Common/MUIDialog.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import CloseIcon from "@mui/icons-material/Close";
+import { styled } from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
+// #region: Styled Components
+const StyledDialogTitle = styled(DialogTitle)({
+    fontSize: "1rem",
+    maxWidth: "580px",
+    paddingBottom: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+// #endregion: Types
+export const MUIDialog = ({ children, className, closeable = true, contentSx, footer, id, isOpen, onClose, paperProps, title, }) => (_jsxs(Dialog, { "data-testid": id, id: id, onClose: onClose, open: isOpen, className: className, slotProps: {
+        paper: { sx: paperProps },
+    }, children: [_jsx(StyledDialogTitle, { id: `${id}-title`, children: title }), closeable && (_jsx(IconButton, { "aria-label": "close", id: `${id}-close-icon-btn`, onClick: onClose, sx: {
+                position: "absolute",
+                right: 8,
+                top: 8,
+            }, children: _jsx(CloseIcon, { "data-testid": `${id}-close-icon`, id: `${id}-close-icon`, sx: { color: "var(--bs-gray-medium)", fontSize: "1rem" } }) })), _jsx(DialogContent, { id: `${id}-content`, sx: contentSx, children: children }), _jsx(DialogActions, { id: `${id}-footer`, sx: { padding: "10px" }, children: footer })] }));

package/dist/components/Common/Navbar.d.ts

@@ -0,0 +1,15 @@
+import { JSX as ReactJSX } from "react";
+export interface NavbarProps {
+    readonly id: string;
+    readonly logo: string;
+    readonly query: Record<string, string | string[]>;
+    readonly pathname: string;
+    readonly userInfo: {
+        name: string;
+        image: string;
+    };
+    readonly authenticationType: string;
+    readonly signOut: () => void;
+    readonly supportEmailAddress: string;
+}
+export declare const Navbar: ({ authenticationType, id, logo, pathname, query, signOut, supportEmailAddress, userInfo, }: NavbarProps) => ReactJSX.Element;

package/dist/components/Common/Navbar.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/**
+ * Main navigation bar that appears at the top of each page
+ */
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import { IconButton, Menu, MenuItem, Tooltip, Typography, useColorScheme } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import { useEffect, useState } from "react";
+import { ConfirmationModal } from "./confirmationModal.js";
+import { LoadingSpinner } from "./LoadingSpinner.js";
+import { authenticationEnabled, CONTACT_US_CONFIRMATION_DIALOG_TEXT, CONTACT_US_CONFIRMATION_DIALOG_TITLE, DEFAULT_USER_IMAGE, NEURO_SAN_UI_VERSION, } from "../../const.js";
+import { navigateToUrl } from "../../utils/BrowserNavigation.js";
+import { isDarkMode } from "../../utils/Theme.js";
+const MENU_ITEM_TEXT_PROPS = {
+    color: "var(--bs-white)",
+    backgroundColor: "var(--bs-primary)",
+    fontFamily: "var(--bs-body-font-family)",
+    fontSize: "18px",
+};
+const DISABLE_OUTLINE_PROPS = {
+    outline: "none",
+    "&:focus": {
+        outline: "none",
+    },
+    "&:active": {
+        outline: "none",
+    },
+};
+export const Navbar = ({ authenticationType, id, logo, pathname, query, signOut, supportEmailAddress, userInfo, }) => {
+    // For email dialog
+    const [emailDialogOpen, setEmailDialogOpen] = useState(false);
+    // Dark mode
+    const { mode, setMode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    // Gate to make sure we only attempt to render after Next.js has completed its rehydration
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => {
+        // Indicate that the component has been hydrated
+        setHydrated(true);
+    }, []);
+    // Help menu wiring
+    const [helpMenuAnchorEl, setHelpMenuAnchorEl] = useState(null);
+    const helpMenuOpen = Boolean(helpMenuAnchorEl);
+    const handleCloseHelpMenu = () => {
+        setHelpMenuAnchorEl(null);
+    };
+    // User menu wiring
+    const [userMenuAnchorEl, setUserMenuAnchorEl] = useState(null);
+    const userMenuOpen = Boolean(userMenuAnchorEl);
+    const handleCloseUserMenu = () => {
+        setUserMenuAnchorEl(null);
+    };
+    // Explore menu wiring
+    const [exploreMenuAnchorEl, setExploreMenuAnchorEl] = useState(null);
+    const exploreMenuOpen = Boolean(exploreMenuAnchorEl);
+    const handleCloseExploreMenu = () => {
+        setExploreMenuAnchorEl(null);
+    };
+    return hydrated ? (_jsxs(Grid, { id: "nav-bar-container", container: true, alignItems: "center", sx: {
+            ...MENU_ITEM_TEXT_PROPS,
+            color: "var(--bs-white)",
+            padding: "0.25rem",
+        }, children: [_jsx("a", { id: "splash-logo-link", href: "https://www.cognizant.com/us/en", style: {
+                    display: "flex",
+                    paddingLeft: "0.15rem",
+                }, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { id: "logo-img", width: "200", height: "45", src: "/cognizant-logo-white.svg", alt: "Cognizant Logo" }) }), _jsx(Grid, { id: id, children: _jsx(Typography, { id: "nav-bar-brand", sx: {
+                        ...MENU_ITEM_TEXT_PROPS,
+                        color: "var(--bs-white)",
+                        marginLeft: "0.85rem",
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                    }, children: _jsxs("a", { id: "navbar-brand-link", style: {
+                            fontWeight: 500,
+                            fontSize: "1.1rem",
+                            color: "var(--bs-white)",
+                            position: "relative",
+                            bottom: "1px",
+                            textDecoration: "none",
+                        }, href: Object.keys(query || {}).length > 0
+                            ? `/?${new URLSearchParams(query).toString()}`
+                            : "/", children: [logo, " ", pathname === "/multiAgentAccelerator" ? "Multi-Agent Accelerator" : "Decisioning"] }) }) }), _jsx(Grid, { id: "build", sx: {
+                    flex: 1, // Take available space
+                    display: "flex",
+                    justifyContent: "flex-end", // Right align
+                    alignItems: "center", // Vertically center
+                    color: "var(--bs-white)",
+                    marginRight: "50px",
+                }, children: _jsxs(Typography, { id: "build-text", sx: { ...MENU_ITEM_TEXT_PROPS }, children: ["Build: ", _jsx("strong", { id: "build-strong", children: NEURO_SAN_UI_VERSION })] }) }), _jsxs(Grid, { id: "explore-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "explore-toggle", sx: {
+                            ...MENU_ITEM_TEXT_PROPS,
+                            display: "flex",
+                            alignItems: "center",
+                        }, onClick: (event) => {
+                            setExploreMenuAnchorEl(event.currentTarget);
+                        }, children: ["Explore", _jsx(ArrowDropDownIcon, { id: "nav-explore-dropdown-arrow", sx: { color: "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "explore-menu", anchorEl: exploreMenuAnchorEl, open: exploreMenuOpen, onClose: handleCloseExploreMenu, children: [_jsx(MenuItem, { id: "explore-neuro-san-studio", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san-studio", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san studio (examples)" }, "explore-neuro-san-studio"), _jsx(MenuItem, { id: "explore-neuro-san", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san (core)" }, "explore-neuro-san")] })] }), _jsxs(Grid, { id: "help-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "help-toggle", sx: {
+                            ...MENU_ITEM_TEXT_PROPS,
+                            display: "flex",
+                            alignItems: "center",
+                        }, onClick: (event) => {
+                            setHelpMenuAnchorEl(event.currentTarget);
+                        }, children: ["Help", _jsx(ArrowDropDownIcon, { id: "nav-help-dropdown-arrow", sx: { color: "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "help-menu", anchorEl: helpMenuAnchorEl, open: helpMenuOpen, onClose: handleCloseHelpMenu, children: [_jsx(MenuItem, { id: "user-guide", component: "a", href: "/userguide", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "User guide" }, "user-guide"), _jsx(MenuItem, { href: null, id: "contact-us-help", onClick: () => setEmailDialogOpen(true), children: "Contact Us" }, "contact-us-help")] })] }), emailDialogOpen ? (_jsx(ConfirmationModal, { id: "email-dialog", content: CONTACT_US_CONFIRMATION_DIALOG_TEXT, handleCancel: () => {
+                    setEmailDialogOpen(false);
+                }, handleOk: () => {
+                    navigateToUrl(`mailto:${supportEmailAddress}`);
+                    setEmailDialogOpen(false);
+                }, title: CONTACT_US_CONFIRMATION_DIALOG_TITLE })) : null, userInfo ? (_jsxs(Grid, { id: "user-dropdown", children: [_jsxs(IconButton, { "aria-label": "User dropdown toggle", id: "user-dropdown-toggle", onClick: (event) => {
+                            setUserMenuAnchorEl(event.currentTarget);
+                        }, sx: {
+                            ...MENU_ITEM_TEXT_PROPS,
+                        }, children: [_jsx("img", { id: "user-image", src: userInfo.image || DEFAULT_USER_IMAGE, width: 30, height: 30, title: userInfo.name, alt: "" }), _jsx(ArrowDropDownIcon, { id: "nav-user-dropdown-arrow", sx: { color: "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "user-menu", anchorEl: userMenuAnchorEl, open: userMenuOpen, onClose: handleCloseUserMenu, children: [_jsx(MenuItem, { id: "user-signed-in-as", disabled: true, sx: { fontWeight: "bold" }, children: "Signed in as" }), _jsx(MenuItem, { id: "user-name", disabled: true, sx: {
+                                    whiteSpace: "normal",
+                                    wordWrap: "break-word",
+                                    fontSize: "smaller",
+                                }, children: userInfo.name }), _jsx(MenuItem, { id: "auth-type-title", disabled: true, sx: { fontWeight: "bold" }, children: "Authentication" }), _jsx(MenuItem, { id: "authentication-type-menu-item", disabled: true, sx: { fontSize: "smaller" }, children: authenticationType }), authenticationEnabled() && (_jsx(MenuItem, { id: "user-sign-out", sx: { ...DISABLE_OUTLINE_PROPS, fontWeight: "bold" }, onClick: signOut, children: "Sign out" }))] })] })) : null, _jsx(Tooltip, { id: "dark-mode-toggle", title: "Toggle dark mode", children: _jsx(DarkModeIcon, { id: "dark-mode-icon", sx: {
+                        marginRight: "1rem",
+                        fontSize: "1rem",
+                        cursor: "pointer",
+                        color: darkMode ? "var(--bs-yellow)" : "var(--bs-gray-dark)",
+                    }, onClick: () => {
+                        setMode(darkMode ? "light" : "dark");
+                    } }) })] })) : (_jsx(LoadingSpinner, { id: "navbar-loading-spinner" }));
+};

package/dist/components/Common/PageLoader.d.ts

@@ -0,0 +1,5 @@
+interface PageLoaderProps {
+    id: string;
+}
+export declare const PageLoader: ({ id }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Common/PageLoader.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { CircularProgress, Typography } from "@mui/material";
+export const PageLoader = ({ id }) => (_jsxs("div", { id: `${id}__loader`, style: {
+        left: "0",
+        position: "absolute",
+        right: "0",
+        textAlign: "center",
+        top: "50%",
+    }, children: [_jsx(Typography, { id: `${id}-loader__message`, variant: "h3", children: "Loading... Please wait" }), _jsx(CircularProgress, { id: `${id}-loader__spinner`, sx: {
+                color: "var(--bs-primary)",
+            }, size: "100px" })] }));

package/dist/components/Common/Snackbar.d.ts

@@ -0,0 +1,5 @@
+import { CustomContentProps } from "notistack";
+export interface SnackbarProps extends CustomContentProps {
+    description: string;
+}
+export declare const Snackbar: import("react").ForwardRefExoticComponent<SnackbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Common/Snackbar.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import CloseIcon from "@mui/icons-material/Close";
+import { styled, useColorScheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { SnackbarContent, useSnackbar } from "notistack";
+import { forwardRef } from "react";
+import { isDarkMode } from "../../utils/Theme.js";
+// #region: Styled Components
+const IconBox = styled(Box)({
+    position: "relative",
+    bottom: "2px",
+    "&.success": {
+        color: "var(--bs-success)",
+    },
+    "&.error": {
+        color: "var(--bs-danger)",
+    },
+    "&.warning": {
+        color: "var(--bs-warning)",
+    },
+    "&.info": {
+        color: "var(--bs-info)",
+    },
+});
+// #endregion: Types
+// Passing Snackbar callback as a function because if we use an arrow function here we'd have to set displayName
+export const Snackbar = forwardRef(
+// eslint-disable-next-line prefer-arrow-callback
+function Snackbar({ description, hideIconVariant = false, iconVariant, id, message, variant }, ref) {
+    const { closeSnackbar } = useSnackbar();
+    const handleCloseSnackbar = () => closeSnackbar(id);
+    const icon = iconVariant[variant];
+    const { mode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    // Temporary styling for implementation of dark mode
+    const darkModeStyling = {
+        backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",
+        color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
+    };
+    return (_jsx(SnackbarContent, { ref: ref, role: "alert", children: _jsxs(Box, { className: `${variant}-snackbar-notification`, id: `${id}-snackbar-box`, sx: {
+                ...darkModeStyling,
+                borderColor: "transparent",
+                borderRadius: "var(--bs-border-radius)",
+                borderWidth: "1px",
+                boxShadow: `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 
+                                    0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
+                maxWidth: "450px",
+                minWidth: "250px",
+                padding: "0.9rem",
+            }, children: [!hideIconVariant && (_jsx(Box, { id: `${id}-snackbar-icon-box-container`, sx: { display: "inline-flex", flexDirection: "column" }, children: _jsx(IconBox, { className: variant, "data-testid": `${id}-snackbar-icon-box`, id: `${id}-snackbar-icon-box`, children: icon }) })), _jsxs(Box, { id: `${id}-snackbar-content-box`, sx: {
+                        display: "inline-flex",
+                        flexDirection: "column",
+                        width: "88%",
+                        wordWrap: "break-word",
+                    }, children: [_jsx(Box, { id: `${id}-snackbar-message-box`, sx: {
+                                display: "block",
+                                // If no description, this is the only message, so reduce font size
+                                fontSize: description ? "0.95rem" : "0.85rem",
+                                paddingRight: "25px",
+                            }, children: message }), _jsx(IconButton, { "aria-label": "close", id: `${id}-close-icon-btn`, onClick: handleCloseSnackbar, sx: {
+                                position: "absolute",
+                                right: 4,
+                                top: 4,
+                            }, children: _jsx(CloseIcon, { "data-testid": `${id}-close-icon`, id: `${id}-close-icon`, sx: {
+                                    color: "var(--bs-gray-medium)",
+                                    fontSize: "0.6em",
+                                } }) }), description && (_jsx(Box, { id: `${id}-snackbar-description-box`, sx: { fontSize: "0.8rem", paddingTop: "10px", paddingBottom: "10px" }, children: description }))] })] }) }));
+});

package/dist/components/Common/confirmationModal.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+interface ConfirmationModalProps {
+    cancelBtnLabel?: string;
+    closeable?: boolean;
+    content: ReactNode;
+    handleCancel?: () => void;
+    handleOk?: () => void;
+    id: string;
+    maskCloseable?: boolean;
+    okBtnLabel?: string;
+    title: ReactNode;
+}
+export declare const ConfirmationModal: FC<ConfirmationModalProps>;
+export {};

package/dist/components/Common/confirmationModal.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { styled } from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { useState } from "react";
+import { MUIDialog } from "./MUIDialog.js";
+// #region: Styled Components
+const StyledButton = styled(Button)({
+    fontSize: "0.8em",
+    padding: "0px 7px",
+});
+const StyledOKButton = styled(StyledButton)(({ disabled }) => ({
+    backgroundColor: disabled ? "rgba(0, 0, 0, 0.12) !important" : "var(--bs-primary) !important",
+}));
+// #endregion: Types
+export const ConfirmationModal = ({ cancelBtnLabel, closeable = true, content = "", handleCancel = null, handleOk = null, id = "", maskCloseable = false, okBtnLabel, title = "", }) => {
+    const [modalOpen, setModalOpen] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+    const handleCloseWrapper = (_event, reason) => {
+        // Prevent closing on click of gray background mask
+        if (!maskCloseable && reason === "backdropClick") {
+            return;
+        }
+        handleCancel?.(); // call handleCancel if it's not null
+        setModalOpen(false);
+    };
+    const handleOKWrapper = async () => {
+        try {
+            if (handleOk) {
+                setIsLoading(true);
+                handleOk();
+            }
+        }
+        finally {
+            setModalOpen(false);
+            setIsLoading(false);
+        }
+    };
+    const Footer = (_jsxs(_Fragment, { children: [handleCancel && ( // If there is no handleCancel passed, Cancel button will not be rendered
+            _jsx(StyledButton
+            // This ID needs to be dynamic because there can be several instances of this on the page
+            , { 
+                // This ID needs to be dynamic because there can be several instances of this on the page
+                id: `${id}-confirm-cancel-btn`, onClick: () => handleCloseWrapper(), disabled: isLoading, variant: "outlined", children: cancelBtnLabel ?? "Cancel" }, "confirm-cancel")), _jsx(StyledOKButton
+            // This ID needs to be dynamic because there can be several instances of this on the page
+            , { 
+                // This ID needs to be dynamic because there can be several instances of this on the page
+                id: `${id}-confirm-ok-btn`, disabled: isLoading, onClick: () => handleOKWrapper(), variant: "contained", children: okBtnLabel ?? "Confirm" }, "confirm-ok")] }));
+    return (_jsx(MUIDialog, { closeable: closeable, contentSx: { fontSize: "0.8rem", minWidth: "550px", paddingTop: "0" }, footer: Footer, id: `${id}-confirm-main`, isOpen: modalOpen, onClose: (_event, reason) => handleCloseWrapper(_event, reason), title: title, children: _jsx(Box, { id: `${id}-confirm-content`, sx: { marginTop: "15px" }, children: content }) }));
+};

package/dist/components/Common/notification.d.ts

@@ -0,0 +1,18 @@
+import { SnackbarKey, SnackbarOrigin } from "notistack";
+import { JSX as ReactJSX } from "react";
+export declare enum NotificationType {
+    "success" = 0,
+    "info" = 1,
+    "warning" = 2,
+    "error" = 3
+}
+export declare function closeNotification(snackbarId?: SnackbarKey): void;
+/**
+ * Convenience method to allow sending notifications to user with a one-liner.
+ * Simply wraps @Notification function
+ * @param variantType Indicates whether it's error, warning, info etc.
+ * @param message Brief summary of the notification
+ * @param description More complete description of the notification
+ * @param placement Where to show notification. Defaults to top-right.
+ */
+export declare function sendNotification(variantType: NotificationType, message: string, description?: string | ReactJSX.Element, placement?: SnackbarOrigin): void;

package/dist/components/Common/notification.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { closeSnackbar, enqueueSnackbar } from "notistack";
+import { renderToString } from "react-dom/server";
+export var NotificationType;
+(function (NotificationType) {
+    NotificationType[NotificationType["success"] = 0] = "success";
+    NotificationType[NotificationType["info"] = 1] = "info";
+    NotificationType[NotificationType["warning"] = 2] = "warning";
+    NotificationType[NotificationType["error"] = 3] = "error";
+})(NotificationType || (NotificationType = {}));
+// Display warning and error notification popups for this many seconds
+const ERROR_WARNING_NOTIFICATION_DURATION_MS = 15_000;
+// Display info notification popups for this many seconds
+const SUCCESS_NOTIFICATION_DURATION_MS = 5000;
+export function closeNotification(snackbarId) {
+    closeSnackbar(snackbarId);
+}
+/**
+ * Convenience method to allow sending notifications to user with a one-liner.
+ * Simply wraps @Notification function
+ * @param variantType Indicates whether it's error, warning, info etc.
+ * @param message Brief summary of the notification
+ * @param description More complete description of the notification
+ * @param placement Where to show notification. Defaults to top-right.
+ */
+export function sendNotification(variantType, message, description = "", 
+// eslint-disable-next-line unicorn/no-object-as-default-parameter
+placement = {
+    vertical: "top",
+    horizontal: "right",
+}) {
+    // Log a copy to the console for troubleshooting
+    const descriptionAsString = typeof description === "string" ? description : renderToString(description);
+    console.debug(`Notification: Message: "${message}" Description: "${descriptionAsString}"`);
+    // Show error and warnings for longer
+    let duration;
+    switch (variantType) {
+        case NotificationType.info:
+        case NotificationType.success:
+            duration = SUCCESS_NOTIFICATION_DURATION_MS;
+            break;
+        case NotificationType.warning:
+        case NotificationType.error:
+        default:
+            duration = ERROR_WARNING_NOTIFICATION_DURATION_MS;
+            break;
+    }
+    // Use some minor customization to be able to inject ids for testing
+    const messageForId = message
+        .replaceAll(" ", "-")
+        .replace(/[^a-zA-Z0-9-]/gu, "")
+        .toLowerCase();
+    const baseId = `notification-message-${messageForId}-${NotificationType[variantType]}`;
+    const messageSpan = _jsx("span", { id: `${baseId}-span`, children: message });
+    enqueueSnackbar(messageSpan, {
+        anchorOrigin: placement,
+        autoHideDuration: duration,
+        disableWindowBlurListener: true,
+        // @ts-expect-error - Could "declare module" to fix this
+        description,
+        key: baseId,
+        variant: NotificationType[variantType],
+    });
+}

package/dist/components/ErrorPage/ErrorBoundary.d.ts

@@ -0,0 +1,38 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+/**
+ * Interface to define the state for this component
+ */
+interface ErrorBoundaryState {
+    readonly hasError: boolean;
+    readonly error: unknown;
+}
+/**
+ * Interface to define the incoming props for this component
+ */
+interface ErrorBoundaryProps {
+    readonly id: string;
+    readonly children: ReactNode;
+}
+/**
+ * Implements a system-wide error handler for NextJS pages in our app.
+ * Taken from here: https://nextjs.org/docs/advanced-features/error-handling
+ *
+ * Note: as of writing (April 2023) ReactJS does not support error boundaries for functional components (like all of
+ * those in UniLEAF are) so we take the approach of wrapping all components in our app with this class component that
+ * handles the error boundary.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    /**
+     * @public
+     * This is the key override called by ReactJS when an unhandled error is thrown. And this is why you cannot create
+     * error boundaries in functional components -- no way to override this method.
+     */
+    static getDerivedStateFromError(error: unknown): {
+        hasError: boolean;
+        error: unknown;
+    };
+    constructor(props: ErrorBoundaryProps);
+    componentDidCatch(error: unknown, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react").PromiseLikeOfReactNode | import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/ErrorPage/ErrorBoundary.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component } from "react";
+import ErrorPage from "./ErrorPage.js";
+/**
+ * Implements a system-wide error handler for NextJS pages in our app.
+ * Taken from here: https://nextjs.org/docs/advanced-features/error-handling
+ *
+ * Note: as of writing (April 2023) ReactJS does not support error boundaries for functional components (like all of
+ * those in UniLEAF are) so we take the approach of wrapping all components in our app with this class component that
+ * handles the error boundary.
+ */
+export class ErrorBoundary extends Component {
+    /**
+     * @public
+     * This is the key override called by ReactJS when an unhandled error is thrown. And this is why you cannot create
+     * error boundaries in functional components -- no way to override this method.
+     */
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI
+        return { hasError: true, error };
+    }
+    constructor(props) {
+        super(props);
+        // Define a state variable to track whether is an error or not
+        this.state = { hasError: false, error: null };
+    }
+    // No need for "this" here
+    // eslint-disable-next-line @typescript-eslint/class-methods-use-this
+    componentDidCatch(error, errorInfo) {
+        // TODO: Send this to central logging service once it's available
+        console.error({ error, errorInfo });
+    }
+    render() {
+        // Check if the error is thrown
+        if (this.state.hasError) {
+            // Render fallback UI
+            const id = this.props.id;
+            const error = this.state.error;
+            let fileName = "Unknown";
+            let lineNumber = null;
+            let columnNumber = null;
+            let message = "";
+            if (error instanceof Error) {
+                // the error object is an instance of the built-in Error type in JavaScript
+                const customError = error;
+                if (customError.fileName) {
+                    fileName = customError.fileName;
+                }
+                if (customError.lineNumber != null) {
+                    lineNumber = customError.lineNumber;
+                }
+                if (customError.columnNumber != null) {
+                    columnNumber = customError.columnNumber;
+                }
+                message = customError.message;
+            }
+            return (_jsx(ErrorPage, { id: id, errorText: `${message} in ${fileName} line ${lineNumber} column ${columnNumber}` }));
+        }
+        // Return children components in case of no error
+        return this.props.children;
+    }
+}

package/dist/components/ErrorPage/ErrorPage.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+interface ErrorPageProps {
+    id: string;
+    errorText: string;
+}
+/**
+ * This is the page that will be shown to users when the outer error boundary is triggered
+ * @param id HTML id for the <code>div</code> for this page
+ * @param errorText Error text to be displayed
+ */
+export default function ErrorPage({ id, errorText }: ErrorPageProps): ReactElement;
+export {};