@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.265

package/commons/components/leftnav/LeftNavDrawer.tsx

@@ -0,0 +1,172 @@
+/* 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 type { AppLeftNavGroup, AppLeftNavItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+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' })<{
+  open: boolean;
+  width: number;
+}>(({ 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 = (
+    <div>
+      <Toolbar
+        sx={{
+          [theme.breakpoints.up('xs')]: {
+            padding: 0
+          }
+        }}
+      >
+        <AppName />
+      </Toolbar>
+      {!isTopLayout && <Divider />}
+    </div>
+  );
+
+  const hide = (
+    <List disablePadding>
+      <ListItemButton key="chevron" onClick={leftnav.toggle}>
+        <ListItemIcon>{leftnav.open ? <ChevronLeftIcon /> : <ChevronRightIcon />}</ListItemIcon>
+        <ListItemText primary={t('drawer.collapse')} />
+      </ListItemButton>
+    </List>
+  );
+
+  return (
+    <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={onCloseDrawerIfOpen}>
+      <StyledDrawer
+        PaperProps={{ elevation: 1 }}
+        variant="permanent"
+        style={{ height: '100%' }}
+        width={preferences.leftnav.width}
+        open={leftnav.open}
+      >
+        {leftnav.open ? (
+          header
+        ) : (
+          <Tooltip title={preferences.appName} aria-label={preferences.appName} placement="right">
+            {header}
+          </Tooltip>
+        )}
+        <List disablePadding>
+          {leftnav.elements.map((e, i) => {
+            if (e.type === 'item') {
+              const item = e.element as AppLeftNavItem;
+              return <LeftNavItem key={item.id} item={item} onClick={isSmDown && onCloseDrawerIfOpen} />;
+            }
+            if (e.type === 'group') {
+              const item = e.element as AppLeftNavGroup;
+              return <LeftNavGroup key={item.id} group={item} onItemClick={isSmDown && onCloseDrawerIfOpen} />;
+            }
+            if (e.type === 'divider') {
+              return <Divider key={`divider-${i}`} />;
+            }
+            return null;
+          })}
+        </List>
+        {leftnav.elements?.length > 0 && <Divider />}
+        {leftnav.open ? (
+          hide
+        ) : (
+          <Tooltip title={t('drawer.expand')} aria-label={t('drawer.expand')} placement="right">
+            {hide}
+          </Tooltip>
+        )}
+        <Box
+          sx={{
+            height: '100%',
+            width: '100%',
+            '&:hover': {
+              cursor: 'pointer'
+            }
+          }}
+          onClick={leftnav.toggle}
+        />
+      </StyledDrawer>
+    </ClickAwayListener>
+  );
+};
+
+export default memo(LeftNavDrawer);

package/commons/components/leftnav/LeftNavGroup.tsx

@@ -0,0 +1,144 @@
+import { ChevronRight, ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Popover, Tooltip, useTheme } from '@mui/material';
+import type { AppLeftNavGroup } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+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';
+
+interface LeftNavGroupProps {
+  group: AppLeftNavGroup;
+  onItemClick: () => void;
+}
+
+const GroupListItem = memo(
+  ({
+    group,
+    leftNavOpen,
+    collapseOpen,
+    popoverOpen,
+    onClick
+  }: {
+    group: AppLeftNavGroup;
+    leftNavOpen: boolean;
+    collapseOpen: boolean;
+    popoverOpen;
+    onClick: (event: React.MouseEvent) => void;
+  }) => {
+    const { t } = useTranslation();
+    const title = group.i18nKey ? t(group.i18nKey) : group.title;
+    const theme = useTheme();
+
+    return (
+      <Tooltip title={!leftNavOpen ? title : ''} aria-label={title} placement="right">
+        <ListItemButton key={group.id} onClick={onClick} selected={popoverOpen}>
+          {!leftNavOpen && (
+            <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"
+            />
+          )}
+
+          <ListItemIcon>{group.icon}</ListItemIcon>
+          <ListItemText primary={title} />
+          {collapseOpen ? <ExpandLess color="action" /> : <ExpandMore color="action" />}
+        </ListItemButton>
+      </Tooltip>
+    );
+  }
+);
+
+const LeftNavGroup = ({ group, onItemClick }: LeftNavGroupProps) => {
+  const user = useAppUser();
+  const leftnav = useAppLeftNav();
+  const { preferences } = useAppConfigs();
+  const [popoverTarget, setPopoverTarget] = useState<(EventTarget & Element) | undefined>();
+  const [collapseOpen, setCollapseOpen] = useState(false);
+
+  const groupHasIcons = group.items.some(i => !!i.icon);
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      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) ? (
+    <div>
+      <GroupListItem
+        group={group}
+        leftNavOpen={leftnav.open}
+        collapseOpen={collapseOpen}
+        onClick={handleClick}
+        popoverOpen={!!popoverTarget}
+      />
+      <Collapse in={collapseOpen} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {group.items.map(i => (
+            <LeftNavItem
+              key={i.id}
+              context="group"
+              item={i}
+              hideIcon={preferences.leftnav.hideNestedIcons}
+              onClick={onItemClick}
+            />
+          ))}
+        </List>
+      </Collapse>
+      <Popover
+        open={!!popoverTarget}
+        onClose={onClosePopover}
+        onClick={onClosePopover}
+        anchorEl={popoverTarget}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left'
+        }}
+      >
+        <List disablePadding>
+          {group.items.map(i => (
+            <LeftNavItem
+              popover
+              context="group"
+              key={i.id}
+              item={i}
+              hideIcon={preferences.leftnav.hideNestedIcons || !groupHasIcons}
+              onClick={onItemClick}
+            />
+          ))}
+        </List>
+      </Popover>
+    </div>
+  ) : null;
+};
+
+export default memo(LeftNavGroup);

package/commons/components/leftnav/LeftNavItem.tsx

@@ -0,0 +1,73 @@
+import { Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Tooltip, useTheme } from '@mui/material';
+import type { AppLeftNavItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+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';
+
+type LeftNavItemProps = {
+  item: AppLeftNavItem;
+  popover?: boolean;
+  context?: 'item' | 'group';
+  hideIcon?: boolean;
+  onClick: () => void;
+};
+
+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 && <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 && (
+        <ListItemIcon id="icon" sx={{ minWidth: showNested || popover ? 40 : undefined }}>
+          {item.icon}
+        </ListItemIcon>
+      )
+    );
+  }, [nested, showIcon, item.icon, context, popover]);
+
+  return (
+    <>
+      {spacer}
+      {itemIcon}
+      <ListItemText primary={label} />
+    </>
+  );
+};
+
+const LeftNavItem = ({ item, context = 'item', popover = false, hideIcon = false, onClick }: LeftNavItemProps) => {
+  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 ? (
+      <ListItem disablePadding>{render(leftnav.open)}</ListItem>
+    ) : (
+      <Tooltip title={!leftnav.open && !nested ? label : ''} aria-label={label} placement="right">
+        <ListItemButton component={route ? Link : null} to={route} key={text} onClick={onClick ? onClick : null}>
+          <LeftNavItemInner
+            hideIcon={hideIcon}
+            context={context}
+            popover={popover}
+            item={item}
+            label={label}
+            leftnavOpen={leftnav.open}
+          />
+        </ListItemButton>
+      </Tooltip>
+    )
+  ) : null;
+};
+
+export default memo(LeftNavItem);

package/commons/components/notification/FeedModels.ts

@@ -0,0 +1,163 @@
+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 const DEFAULT_FEED: 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: FeedItem = {
+  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: FeedAttachment = {
+  url: null,
+  mime_type: null,
+  title: null,
+  size_in_bytes: 0,
+  duration_in_seconds: 0
+};
+
+export const DEFAULT_FEED_AUTHOR: any = {
+  name: null,
+  url: null,
+  avatar: null
+};
+
+function decodeHTML(html: string) {
+  if (!html || typeof html !== 'string') return '';
+  var txt = document.createElement('textarea');
+  txt.innerHTML = html;
+  return txt.value;
+}
+
+export function parseFeedAttachments(attachments: any): FeedAttachment[] {
+  return attachments && Array.isArray(attachments)
+    ? attachments
+        .map(attachment =>
+          attachment && typeof attachment === 'object' ? { ...DEFAULT_FEED_ATTACHMENT, ...attachment } : null
+        )
+        .filter(attachment => attachment)
+    : [];
+}
+
+export function parseFeedAuthors(authors: any): FeedAuthor[] {
+  return authors && Array.isArray(authors)
+    ? authors
+        .map(author => (author && typeof author === 'object' ? { ...DEFAULT_FEED_AUTHOR, ...author } : null))
+        .filter(author => author)
+    : [];
+}
+
+export function parseFeedItems(items: any): FeedItem[] {
+  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: any): Feed {
+  return feed && typeof feed === 'object'
+    ? {
+        ...DEFAULT_FEED,
+        ...feed,
+        items: parseFeedItems(feed?.items),
+        authors: parseFeedAuthors(feed?.authors)
+      }
+    : null;
+}

package/commons/components/notification/Notification.tsx

@@ -0,0 +1,152 @@
+import { parseFeed, type Feed, type FeedItem } 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, type FC } from 'react';
+
+type Props = {
+  urls: string[];
+  notificationItem?: FC;
+  inDrawer?: boolean;
+  openIfNew?: boolean;
+  maxDrawerWidth?: string;
+};
+
+export const Notification: FC<Props> = memo(
+  ({
+    urls = null,
+    notificationItem = NotificationItem,
+    inDrawer = true,
+    openIfNew = false,
+    maxDrawerWidth = '500px'
+  }) => {
+    const [drawer, setDrawer] = useState<boolean>(false);
+    const [feeds, setFeeds] = useState<{ [k: string]: Feed }>(null);
+    const [notifications, setNotifications] = useState<FeedItem[]>(null);
+    const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading');
+
+    const lastTimeOpen = useRef<Date>(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: FeedItem) => ({ ...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: string = ''): Promise<any> =>
+        new Promise(async resolve => {
+          const response: Response = (await fetch(url, { method: 'GET' }).catch(err =>
+            // eslint-disable-next-line no-console
+            console.error(`Notification Area: error caused by URL "${err}`)
+          )) as Response;
+
+          if (!response || response.status >= 400) {
+            resolve({});
+            return;
+          }
+
+          const textResponse: string = await response.text();
+          try {
+            const jsonFeed = JSON.parse(textResponse);
+            resolve(parseFeed(jsonFeed));
+          } catch {
+            resolve({});
+          }
+          return;
+        }),
+      []
+    );
+
+    const fetchFeeds = useCallback(
+      (_urls: string[] = []): Promise<Feed[]> =>
+        new Promise(async resolve => {
+          if (!_urls || _urls.length === 0) {
+            resolve([]);
+            return [];
+          }
+          const _feeds: Feed[] = 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 && (
+        <>
+          {inDrawer && (
+            <NotificationTopNavButton
+              drawer={drawer}
+              newItems={notifications?.filter(n => n._isNew).length}
+              onDrawerOpen={onDrawerOpen}
+              onDrawerClose={onDrawerClose}
+            />
+          )}
+          <NotificationContainer
+            status={status}
+            notifications={notifications}
+            drawer={drawer}
+            onDrawerOpen={onDrawerOpen}
+            onDrawerClose={onDrawerClose}
+            ItemComponent={notificationItem}
+            inDrawer={inDrawer}
+            maxDrawerWidth={maxDrawerWidth}
+          />
+        </>
+      )
+    );
+  }
+);