@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/commons/components/leftnav/LeftNavDrawer.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from '@mui/icons-material';
+import { Box, ClickAwayListener, Divider, Drawer, List, ListItemButton, ListItemIcon, ListItemText, Toolbar, Tooltip, styled, useMediaQuery, useTheme } from '@mui/material';
+import { useAppConfigs, useAppLayout, useAppLeftNav } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import LeftNavGroup from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavGroup';
+import LeftNavItem from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavItem';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppName from '../topnav/AppName';
+const StyledDrawer = styled(Drawer, { shouldForwardProp: prop => prop !== 'open' && prop !== 'width' })(({ theme, open, width }) => ({
+    width,
+    flexShrink: 0,
+    heigth: '100%',
+    whiteSpace: 'nowrap',
+    '@media print': {
+        display: 'none !important'
+    },
+    transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+    }),
+    ...(!open && {
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+        }),
+        overflowX: 'hidden',
+        width: 0,
+        [theme.breakpoints.up('sm')]: {
+            width: theme.spacing(7)
+        },
+        [theme.breakpoints.only('xs')]: {
+            border: 'none'
+        }
+    }),
+    '& .MuiDrawer-paper': {
+        width,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen
+        }),
+        ...(!open && {
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen
+            }),
+            overflowX: 'hidden',
+            width: 0,
+            [theme.breakpoints.up('sm')]: {
+                width: theme.spacing(7)
+            },
+            [theme.breakpoints.only('xs')]: {
+                border: 'none'
+            }
+        })
+    }
+}));
+const LeftNavDrawer = () => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { preferences } = useAppConfigs();
+    const layout = useAppLayout();
+    const leftnav = useAppLeftNav();
+    const isSmDown = useMediaQuery(theme.breakpoints.down('sm'));
+    const isTopLayout = layout.current === 'top';
+    const onCloseDrawerIfOpen = useCallback(() => {
+        if (isSmDown && leftnav.open) {
+            leftnav.setOpen(false);
+        }
+    }, [isSmDown, leftnav]);
+    const header = (_jsxs("div", { children: [_jsx(Toolbar, { sx: {
+                    [theme.breakpoints.up('xs')]: {
+                        padding: 0
+                    }
+                }, children: _jsx(AppName, {}) }), !isTopLayout && _jsx(Divider, {})] }));
+    const hide = (_jsx(List, { disablePadding: true, children: _jsxs(ListItemButton, { onClick: leftnav.toggle, children: [_jsx(ListItemIcon, { children: leftnav.open ? _jsx(ChevronLeftIcon, {}) : _jsx(ChevronRightIcon, {}) }), _jsx(ListItemText, { primary: t('drawer.collapse') })] }, "chevron") }));
+    return (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onCloseDrawerIfOpen, children: _jsxs(StyledDrawer, { PaperProps: { elevation: 1 }, variant: "permanent", style: { height: '100%' }, width: preferences.leftnav.width, open: leftnav.open, children: [leftnav.open ? (header) : (_jsx(Tooltip, { title: preferences.appName, "aria-label": preferences.appName, placement: "right", children: header })), _jsx(List, { disablePadding: true, children: leftnav.elements.map((e, i) => {
+                        if (e.type === 'item') {
+                            const item = e.element;
+                            return _jsx(LeftNavItem, { item: item, onClick: isSmDown && onCloseDrawerIfOpen }, item.id);
+                        }
+                        if (e.type === 'group') {
+                            const item = e.element;
+                            return _jsx(LeftNavGroup, { group: item, onItemClick: isSmDown && onCloseDrawerIfOpen }, item.id);
+                        }
+                        if (e.type === 'divider') {
+                            return _jsx(Divider, {}, `divider-${i}`);
+                        }
+                        return null;
+                    }) }), leftnav.elements?.length > 0 && _jsx(Divider, {}), leftnav.open ? (hide) : (_jsx(Tooltip, { title: t('drawer.expand'), "aria-label": t('drawer.expand'), placement: "right", children: hide })), _jsx(Box, { sx: {
+                        height: '100%',
+                        width: '100%',
+                        '&:hover': {
+                            cursor: 'pointer'
+                        }
+                    }, onClick: leftnav.toggle })] }) }));
+};
+export default memo(LeftNavDrawer);

package/commons/components/leftnav/LeftNavGroup.d.ts

@@ -0,0 +1,7 @@
+import type { AppLeftNavGroup } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+interface LeftNavGroupProps {
+    group: AppLeftNavGroup;
+    onItemClick: () => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ group, onItemClick }: LeftNavGroupProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/leftnav/LeftNavGroup.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Popover, Tooltip, useTheme } from '@mui/material';
+import { useAppConfigs, useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import LeftNavItem from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavItem';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const GroupListItem = memo(({ group, leftNavOpen, collapseOpen, popoverOpen, onClick }) => {
+    const { t } = useTranslation();
+    const title = group.i18nKey ? t(group.i18nKey) : group.title;
+    const theme = useTheme();
+    return (_jsx(Tooltip, { title: !leftNavOpen ? title : '', "aria-label": title, placement: "right", children: _jsxs(ListItemButton, { onClick: onClick, selected: popoverOpen, children: [!leftNavOpen && (_jsx(ChevronRight, { sx: {
+                        position: 'absolute',
+                        right: 0,
+                        width: 16,
+                        height: 16,
+                        transform: popoverOpen && 'rotate(180deg)',
+                        transition: theme.transitions.create('transform', {
+                            easing: theme.transitions.easing.sharp,
+                            duration: popoverOpen
+                                ? theme.transitions.duration.leavingScreen
+                                : theme.transitions.duration.enteringScreen
+                        })
+                    }, fontSize: "inherit" })), _jsx(ListItemIcon, { children: group.icon }), _jsx(ListItemText, { primary: title }), collapseOpen ? _jsx(ExpandLess, { color: "action" }) : _jsx(ExpandMore, { color: "action" })] }, group.id) }));
+});
+const LeftNavGroup = ({ group, onItemClick }) => {
+    const user = useAppUser();
+    const leftnav = useAppLeftNav();
+    const { preferences } = useAppConfigs();
+    const [popoverTarget, setPopoverTarget] = useState();
+    const [collapseOpen, setCollapseOpen] = useState(false);
+    const groupHasIcons = group.items.some(i => !!i.icon);
+    const handleClick = useCallback((event) => {
+        if (leftnav.open) {
+            setCollapseOpen(!collapseOpen);
+        }
+        else {
+            setPopoverTarget(event ? event.currentTarget : undefined);
+        }
+    }, [leftnav.open, collapseOpen]);
+    const onClosePopover = useCallback(() => setPopoverTarget(undefined), []);
+    useEffect(() => {
+        if (!leftnav.open && collapseOpen) {
+            setCollapseOpen(false);
+        }
+    }, [leftnav.open, collapseOpen]);
+    return user.validateProps(group.userPropValidators) ? (_jsxs("div", { children: [_jsx(GroupListItem, { group: group, leftNavOpen: leftnav.open, collapseOpen: collapseOpen, onClick: handleClick, popoverOpen: !!popoverTarget }), _jsx(Collapse, { in: collapseOpen, timeout: "auto", unmountOnExit: true, children: _jsx(List, { component: "div", disablePadding: true, children: group.items.map(i => (_jsx(LeftNavItem, { context: "group", item: i, hideIcon: preferences.leftnav.hideNestedIcons, onClick: onItemClick }, i.id))) }) }), _jsx(Popover, { open: !!popoverTarget, onClose: onClosePopover, onClick: onClosePopover, anchorEl: popoverTarget, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                }, children: _jsx(List, { disablePadding: true, children: group.items.map(i => (_jsx(LeftNavItem, { popover: true, context: "group", item: i, hideIcon: preferences.leftnav.hideNestedIcons || !groupHasIcons, onClick: onItemClick }, i.id))) }) })] })) : null;
+};
+export default memo(LeftNavGroup);

package/commons/components/leftnav/LeftNavItem.d.ts

@@ -0,0 +1,10 @@
+import type { AppLeftNavItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+type LeftNavItemProps = {
+    item: AppLeftNavItem;
+    popover?: boolean;
+    context?: 'item' | 'group';
+    hideIcon?: boolean;
+    onClick: () => void;
+};
+declare const _default: import("react").MemoExoticComponent<({ item, context, popover, hideIcon, onClick }: LeftNavItemProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/leftnav/LeftNavItem.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Tooltip, useTheme } from '@mui/material';
+import { useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const LeftNavItemInner = ({ item, context, popover, hideIcon, label, leftnavOpen }) => {
+    const theme = useTheme();
+    const nested = item.nested !== undefined ? item.nested : context === 'group';
+    const showIcon = useMemo(() => item.icon && !hideIcon, [item, hideIcon]);
+    const spacer = useMemo(() => {
+        const showSpacer = !popover && leftnavOpen && nested;
+        return showSpacer && _jsx(Box, { id: "spacer", sx: { marginLeft: theme.spacing(showIcon ? 2 : 7) } });
+    }, [nested, showIcon, theme, leftnavOpen, popover]);
+    const itemIcon = useMemo(() => {
+        const showNested = !popover && context === 'group' && nested;
+        return (showIcon && (_jsx(ListItemIcon, { id: "icon", sx: { minWidth: showNested || popover ? 40 : undefined }, children: item.icon })));
+    }, [nested, showIcon, item.icon, context, popover]);
+    return (_jsxs(_Fragment, { children: [spacer, itemIcon, _jsx(ListItemText, { primary: label })] }));
+};
+const LeftNavItem = ({ item, context = 'item', popover = false, hideIcon = false, onClick }) => {
+    const { t } = useTranslation();
+    const user = useAppUser();
+    const leftnav = useAppLeftNav();
+    const { text, i18nKey, nested, route, render, userPropValidators } = item;
+    const label = i18nKey ? t(i18nKey) : text;
+    return user.validateProps(userPropValidators) ? (render ? (_jsx(ListItem, { disablePadding: true, children: render(leftnav.open) })) : (_jsx(Tooltip, { title: !leftnav.open && !nested ? label : '', "aria-label": label, placement: "right", children: _jsx(ListItemButton, { component: route ? Link : null, to: route, onClick: onClick ? onClick : null, children: _jsx(LeftNavItemInner, { hideIcon: hideIcon, context: context, popover: popover, item: item, label: label, leftnavOpen: leftnav.open }) }, text) }))) : null;
+};
+export default memo(LeftNavItem);

package/commons/components/notification/FeedModels.d.ts

@@ -0,0 +1,64 @@
+export type SystemMessage = {
+    user: string;
+    title: string;
+    severity: 'success' | 'info' | 'warning' | 'error';
+    message: string;
+};
+export type FeedItem = {
+    id: string;
+    url?: string;
+    external_url?: string;
+    title?: string;
+    content_html?: string;
+    content_text?: string;
+    content_md?: string;
+    summary?: string;
+    image?: string;
+    banner_image?: string;
+    date_published?: Date;
+    date_modified?: Date;
+    authors?: Array<FeedAuthor>;
+    tags?: Array<'new' | 'current' | 'dev' | 'service' | 'blog'>;
+    language?: string;
+    attachments?: Array<FeedAttachment>;
+    _isNew: boolean;
+};
+export type FeedAuthor = {
+    name?: string;
+    url?: string;
+    avatar?: string;
+};
+export type FeedAttachment = {
+    url: string;
+    mime_type: string;
+    title?: string;
+    size_in_bytes?: number;
+    duration_in_seconds?: number;
+};
+export type Feed = {
+    version: string;
+    title: string;
+    home_page_url?: string;
+    feed_url?: string;
+    description?: string;
+    user_comment?: string;
+    next_url?: string;
+    icon?: string;
+    favicon?: string;
+    authors?: Array<FeedAuthor>;
+    language?: string;
+    expired?: boolean;
+    hubs?: Array<{
+        type: string;
+        url: string;
+    }>;
+    items: Array<FeedItem>;
+};
+export declare const DEFAULT_FEED: Feed;
+export declare const DEFAULT_FEED_ITEM: FeedItem;
+export declare const DEFAULT_FEED_ATTACHMENT: FeedAttachment;
+export declare const DEFAULT_FEED_AUTHOR: any;
+export declare function parseFeedAttachments(attachments: any): FeedAttachment[];
+export declare function parseFeedAuthors(authors: any): FeedAuthor[];
+export declare function parseFeedItems(items: any): FeedItem[];
+export declare function parseFeed(feed: any): Feed;

package/commons/components/notification/FeedModels.js

@@ -0,0 +1,94 @@
+export const DEFAULT_FEED = {
+    version: null,
+    title: null,
+    home_page_url: null,
+    feed_url: null,
+    description: null,
+    user_comment: null,
+    next_url: null,
+    icon: null,
+    favicon: null,
+    authors: [],
+    language: null,
+    expired: false,
+    hubs: [],
+    items: []
+};
+export const DEFAULT_FEED_ITEM = {
+    id: null,
+    url: null,
+    external_url: null,
+    title: null,
+    content_html: null,
+    content_text: null,
+    summary: null,
+    image: null,
+    banner_image: null,
+    date_published: new Date(0),
+    date_modified: new Date(0),
+    authors: [],
+    tags: [],
+    language: null,
+    attachments: [],
+    _isNew: false
+};
+export const DEFAULT_FEED_ATTACHMENT = {
+    url: null,
+    mime_type: null,
+    title: null,
+    size_in_bytes: 0,
+    duration_in_seconds: 0
+};
+export const DEFAULT_FEED_AUTHOR = {
+    name: null,
+    url: null,
+    avatar: null
+};
+function decodeHTML(html) {
+    if (!html || typeof html !== 'string')
+        return '';
+    var txt = document.createElement('textarea');
+    txt.innerHTML = html;
+    return txt.value;
+}
+export function parseFeedAttachments(attachments) {
+    return attachments && Array.isArray(attachments)
+        ? attachments
+            .map(attachment => attachment && typeof attachment === 'object' ? { ...DEFAULT_FEED_ATTACHMENT, ...attachment } : null)
+            .filter(attachment => attachment)
+        : [];
+}
+export function parseFeedAuthors(authors) {
+    return authors && Array.isArray(authors)
+        ? authors
+            .map(author => (author && typeof author === 'object' ? { ...DEFAULT_FEED_AUTHOR, ...author } : null))
+            .filter(author => author)
+        : [];
+}
+export function parseFeedItems(items) {
+    return items && Array.isArray(items)
+        ? items
+            .map(item => item && typeof item === 'object'
+            ? {
+                ...DEFAULT_FEED_ITEM,
+                ...item,
+                date_published: new Date(item.date_published),
+                date_modified: new Date(item.date_modified),
+                authors: parseFeedAuthors(item?.authors),
+                attachments: parseFeedAttachments(item?.attachments),
+                content_html: decodeHTML(item?.content_html)
+            }
+            : null)
+            .filter(item => item)
+        : [];
+}
+export function parseFeed(feed) {
+    return feed && typeof feed === 'object'
+        ? {
+            ...DEFAULT_FEED,
+            ...feed,
+            items: parseFeedItems(feed?.items),
+            authors: parseFeedAuthors(feed?.authors)
+        }
+        : null;
+}

package/commons/components/notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+type Props = {
+    urls: string[];
+    notificationItem?: FC;
+    inDrawer?: boolean;
+    openIfNew?: boolean;
+    maxDrawerWidth?: string;
+};
+export declare const Notification: FC<Props>;
+export {};

package/commons/components/notification/Notification.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseFeed } from '@cccsaurora/howler-ui/commons/components/notification';
+import { NotificationContainer } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationContainer';
+import { NotificationTopNavButton } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationTopNavButton';
+import { NotificationItem } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItem';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+export const Notification = memo(({ urls = null, notificationItem = NotificationItem, inDrawer = true, openIfNew = false, maxDrawerWidth = '500px' }) => {
+    const [drawer, setDrawer] = useState(false);
+    const [feeds, setFeeds] = useState(null);
+    const [notifications, setNotifications] = useState(null);
+    const [status, setStatus] = useState('loading');
+    const lastTimeOpen = useRef(new Date(0));
+    const storageKey = 'notification.lastTimeOpen';
+    const onDrawerOpen = useCallback(() => {
+        setDrawer(true);
+        lastTimeOpen.current = new Date();
+    }, []);
+    const onDrawerClose = useCallback(() => {
+        setDrawer(false);
+        localStorage.setItem(storageKey, JSON.stringify(lastTimeOpen.current.valueOf()));
+        setNotifications(v => v.map((n) => ({ ...n, _isNew: n.date_published.valueOf() > lastTimeOpen.current.valueOf() })));
+    }, [storageKey]);
+    const loadLastTimeOpen = useCallback(() => {
+        const data = localStorage.getItem(storageKey);
+        if (!data)
+            return;
+        const value = JSON.parse(data);
+        if (typeof value !== 'number')
+            return;
+        lastTimeOpen.current = new Date(value);
+    }, [storageKey]);
+    const fetchFeed = useCallback((url = '') => new Promise(async (resolve) => {
+        const response = (await fetch(url, { method: 'GET' }).catch(err => 
+        // eslint-disable-next-line no-console
+        console.error(`Notification Area: error caused by URL "${err}`)));
+        if (!response || response.status >= 400) {
+            resolve({});
+            return;
+        }
+        const textResponse = await response.text();
+        try {
+            const jsonFeed = JSON.parse(textResponse);
+            resolve(parseFeed(jsonFeed));
+        }
+        catch {
+            resolve({});
+        }
+        return;
+    }), []);
+    const fetchFeeds = useCallback((_urls = []) => new Promise(async (resolve) => {
+        if (!_urls || _urls.length === 0) {
+            resolve([]);
+            return [];
+        }
+        const _feeds = await Promise.all(_urls.map(url => fetchFeed(url)));
+        resolve(_feeds.filter(f => f.items));
+    }), [fetchFeed]);
+    useEffect(() => {
+        loadLastTimeOpen();
+        if (!urls || !Array.isArray(urls) || urls.length === 0)
+            return;
+        fetchFeeds(urls).then(_feeds => {
+            _feeds = _feeds.map(f => ({ ...f, items: f?.items?.map(i => ({ ...i, external_url: f.feed_url })) }));
+            setFeeds(Object.fromEntries(_feeds.map(f => [f?.feed_url, { ...f, items: [] }])));
+            const _notifs = _feeds
+                .flatMap(f => f?.items)
+                .filter(n => n.date_published > new Date(new Date().setFullYear(new Date().getFullYear() - 1)))
+                .sort((a, b) => b.date_published.valueOf() - a.date_published.valueOf())
+                .map(n => ({ ...n, _isNew: n.date_published.valueOf() > lastTimeOpen.current.valueOf() }));
+            setNotifications(_notifs);
+            if (openIfNew && _notifs?.some(n => n._isNew)) {
+                onDrawerOpen();
+            }
+        });
+    }, [fetchFeeds, loadLastTimeOpen, onDrawerOpen, openIfNew, urls]);
+    useEffect(() => {
+        if (feeds === undefined) {
+            setStatus('error');
+        }
+        else if (feeds && notifications) {
+            if (notifications.length === 0) {
+                setStatus('error');
+            }
+            else {
+                setStatus('ready');
+            }
+        }
+        else {
+            setStatus('loading');
+        }
+        return () => setStatus('loading');
+    }, [feeds, notifications]);
+    return (urls &&
+        urls.length !== 0 && (_jsxs(_Fragment, { children: [inDrawer && (_jsx(NotificationTopNavButton, { drawer: drawer, newItems: notifications?.filter(n => n._isNew).length, onDrawerOpen: onDrawerOpen, onDrawerClose: onDrawerClose })), _jsx(NotificationContainer, { status: status, notifications: notifications, drawer: drawer, onDrawerOpen: onDrawerOpen, onDrawerClose: onDrawerClose, ItemComponent: notificationItem, inDrawer: inDrawer, maxDrawerWidth: maxDrawerWidth })] })));
+});

package/commons/components/notification/elements/NotificationCloseButton.d.ts

@@ -0,0 +1,3 @@
+import { type NotificationProps } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationContainer';
+import { type FC } from 'react';
+export declare const NotificationCloseButton: FC<NotificationProps>;

package/commons/components/notification/elements/NotificationCloseButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseOutlined } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationContainer';
+import { memo } from 'react';
+export const NotificationCloseButton = memo(({ drawer = false, onDrawerOpen = () => null, onDrawerClose = () => null }) => (_jsx("div", { children: _jsx(IconButton, { onClick: () => (drawer ? onDrawerClose() : onDrawerOpen()), size: "large", children: _jsx(CloseOutlined, { fontSize: "medium" }) }) })));

package/commons/components/notification/elements/NotificationContainer.d.ts

@@ -0,0 +1,16 @@
+import { type ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { type FC } from 'react';
+export type NotificationProps = {
+    notifications: FeedItem[];
+    ItemComponent: FC<ItemComponentProps>;
+    drawer?: boolean;
+    initialPageSize?: number;
+    loadingPageDelta?: number;
+    onDrawerOpen?: () => void;
+    onDrawerClose?: () => void;
+    inDrawer?: boolean;
+    status: string;
+    maxDrawerWidth: string;
+};
+export declare const NotificationContainer: FC<NotificationProps>;

package/commons/components/notification/elements/NotificationContainer.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeedbackOutlined } from '@mui/icons-material';
+import { Drawer, useMediaQuery, useTheme } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
+import {} from '@cccsaurora/howler-ui/commons/components/notification';
+import { NotificationCloseButton } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationCloseButton';
+import { NotificationHeader } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationHeader';
+import { NotificationItems } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationItems';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+export const NotificationContainer = memo(props => {
+    const { notifications = [], drawer = true, onDrawerOpen = () => null, onDrawerClose = () => null, initialPageSize = 10, loadingPageDelta = 2, ItemComponent = null, inDrawer = true, status = 'loading', maxDrawerWidth = '500px' } = props;
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const upSM = useMediaQuery(theme.breakpoints.up('sm'));
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const handleLoading = useCallback(() => {
+        setPageSize(v => v + loadingPageDelta);
+    }, [loadingPageDelta]);
+    return inDrawer ? (_jsx(Drawer, { anchor: "right", open: drawer, onClick: () => (drawer ? onDrawerClose() : onDrawerOpen()), PaperProps: { style: { width: upSM ? '80%' : '100%', maxWidth: maxDrawerWidth } }, children: _jsxs("div", { style: {
+                height: '100%',
+                width: '100%',
+                overflowX: 'hidden',
+                pageBreakBefore: 'avoid',
+                pageBreakInside: 'avoid',
+                padding: theme.spacing(2.5),
+                paddingTop: 0
+            }, children: [_jsx(NotificationHeader, { icon: _jsx(FeedbackOutlined, {}), title: t('notification.title'), children: _jsx(NotificationCloseButton, { ...props }) }), _jsx(NotificationItems, { status: status, notifications: notifications, pageSize: pageSize, handleLoading: handleLoading, ItemComponent: ItemComponent })] }) })) : (_jsx(NotificationItems, { notifications: notifications, pageSize: pageSize, handleLoading: handleLoading, ItemComponent: ItemComponent, status: status }));
+});

package/commons/components/notification/elements/NotificationEndOfPage.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+export declare const NotificationEndOfPage: FC<{
+    endOfPage?: boolean;
+    onLoading?: () => void;
+}>;

package/commons/components/notification/elements/NotificationEndOfPage.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NotificationSkeleton } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationSkeleton';
+import { memo, useEffect, useRef, useState } from 'react';
+function useOnScreen(ref, rootMargin = '0px') {
+    // State and setter for storing whether element is visible
+    const [isIntersecting, setIntersecting] = useState(false);
+    useEffect(() => {
+        const observerRef = ref.current;
+        const observer = new IntersectionObserver(([entry]) => {
+            // Update our state when observer callback fires
+            setIntersecting(entry.isIntersecting);
+        }, {
+            rootMargin
+        });
+        if (observerRef) {
+            observer.observe(observerRef);
+        }
+        return () => {
+            if (observerRef) {
+                observer.unobserve(observerRef);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+    return isIntersecting;
+}
+export const NotificationEndOfPage = memo(({ endOfPage = true, onLoading = () => null }) => {
+    const ref = useRef();
+    const onScreen = useOnScreen(ref);
+    useEffect(() => {
+        if (onScreen) {
+            onLoading();
+        }
+    }, [onLoading, onScreen]);
+    return endOfPage ? null : (_jsx("div", { ref: ref, style: { display: 'flex', justifyContent: 'center' }, children: _jsx(NotificationSkeleton, {}) }));
+});

package/commons/components/notification/elements/NotificationError.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const NotificationError: FC;

package/commons/components/notification/elements/NotificationError.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorOutline } from '@mui/icons-material';
+import { Grid, Typography, useTheme } from '@mui/material';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+export const NotificationError = memo(() => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    return (_jsxs(Grid, { container: true, sx: { padding: 1, minHeight: theme.spacing(20) }, alignContent: "center", justifyContent: "center", alignItems: "center", gap: 1, children: [_jsx(ErrorOutline, { color: "error", sx: { fontSize: 40 } }), _jsx(Typography, { color: "error", variant: "h6", children: t('details.notification.error') })] }));
+});

package/commons/components/notification/elements/NotificationHeader.d.ts

@@ -0,0 +1,8 @@
+import React, { type FC } from 'react';
+type NotificationHeaderProps = {
+    title: string;
+    icon: React.ReactElement;
+    children: React.ReactNode;
+};
+export declare const NotificationHeader: FC<NotificationHeaderProps>;
+export {};

package/commons/components/notification/elements/NotificationHeader.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Divider, Icon, Typography, useTheme } from '@mui/material';
+import React, { memo } from 'react';
+export const NotificationHeader = memo(({ title = '', icon = null, children = null }) => {
+    const theme = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingTop: theme.spacing(2)
+                }, children: [_jsx(Icon, { fontSize: "medium", sx: {
+                            color: 'inherit',
+                            backgroundColor: 'inherit',
+                            marginLeft: theme.spacing(1.5),
+                            marginRight: theme.spacing(1.5)
+                        }, children: icon }), _jsx(Typography, { variant: "h6", fontSize: "large", fontWeight: "bolder", flex: 1, children: title }), children] }), _jsx(Divider, { orientation: "horizontal", flexItem: true, style: { width: '100%', marginTop: theme.spacing(0.5) } })] }));
+});

package/commons/components/notification/elements/NotificationItems.d.ts

@@ -0,0 +1,12 @@
+import { type ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { type FC } from 'react';
+type NotificationListsProps = {
+    notifications: FeedItem[];
+    ItemComponent: FC<ItemComponentProps>;
+    pageSize?: number;
+    handleLoading: () => void;
+    status: string;
+};
+export declare const NotificationItems: FC<NotificationListsProps>;
+export {};

package/commons/components/notification/elements/NotificationItems.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Stack, useTheme } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
+import {} from '@cccsaurora/howler-ui/commons/components/notification';
+import { memo } from 'react';
+import { NotificationEndOfPage } from './NotificationEndOfPage';
+import { NotificationError } from './NotificationError';
+import { NotificationSkeleton } from './NotificationSkeleton';
+export const NotificationItems = memo(({ notifications = [], handleLoading = () => null, pageSize = 10, ItemComponent = null, status = 'loading' }) => {
+    const theme = useTheme();
+    return status === 'loading' ? (_jsx(_Fragment, { children: Array.from({ length: 3 }).map((_, i) => (_jsx(NotificationSkeleton, {}, `skeleton-${i}`))) })) : status === 'error' ? (_jsx(NotificationError, {})) : (status === 'ready' && (_jsxs(_Fragment, { children: [_jsx(Stack, { direction: "column", spacing: theme.spacing(1.25), margin: theme.spacing(1.25), divider: _jsx(Divider, { orientation: "horizontal", flexItem: true, style: { width: '100%', alignSelf: 'center' } }), children: notifications.slice(0, pageSize).map(n => (_jsx(ItemComponent, { item: n }, n?.title))) }), _jsx(NotificationEndOfPage, { endOfPage: pageSize >= notifications.length, onLoading: () => handleLoading() })] })));
+});