@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/commons/components/notification/FeedModels.ts

@@ -1,163 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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}
-          />
-        </>
-      )
-    );
-  }
-);

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

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

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

@@ -1,87 +0,0 @@
-import { FeedbackOutlined } from '@mui/icons-material';
-import { Drawer, useMediaQuery, useTheme } from '@mui/material';
-import { type ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
-import { type FeedItem } 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, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-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 const NotificationContainer: FC<NotificationProps> = 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<number>(initialPageSize);
-
-  const handleLoading = useCallback(() => {
-    setPageSize(v => v + loadingPageDelta);
-  }, [loadingPageDelta]);
-
-  return inDrawer ? (
-    <Drawer
-      anchor="right"
-      open={drawer}
-      onClick={() => (drawer ? onDrawerClose() : onDrawerOpen())}
-      PaperProps={{ style: { width: upSM ? '80%' : '100%', maxWidth: maxDrawerWidth } }}
-    >
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-          overflowX: 'hidden',
-          pageBreakBefore: 'avoid',
-          pageBreakInside: 'avoid',
-          padding: theme.spacing(2.5),
-          paddingTop: 0
-        }}
-      >
-        <NotificationHeader icon={<FeedbackOutlined />} title={t('notification.title')}>
-          <NotificationCloseButton {...props} />
-        </NotificationHeader>
-        <NotificationItems
-          status={status}
-          notifications={notifications}
-          pageSize={pageSize}
-          handleLoading={handleLoading}
-          ItemComponent={ItemComponent}
-        />
-      </div>
-    </Drawer>
-  ) : (
-    <NotificationItems
-      notifications={notifications}
-      pageSize={pageSize}
-      handleLoading={handleLoading}
-      ItemComponent={ItemComponent}
-      status={status}
-    />
-  );
-});

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

@@ -1,48 +0,0 @@
-import { NotificationSkeleton } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationSkeleton';
-import { memo, useEffect, useRef, useState, type FC, type RefObject } from 'react';
-
-function useOnScreen(ref: RefObject<Element>, 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: FC<{ endOfPage?: boolean; onLoading?: () => void }> = memo(
-  ({ endOfPage = true, onLoading = () => null }) => {
-    const ref = useRef();
-    const onScreen = useOnScreen(ref);
-
-    useEffect(() => {
-      if (onScreen) {
-        onLoading();
-      }
-    }, [onLoading, onScreen]);
-
-    return endOfPage ? null : (
-      <div ref={ref} style={{ display: 'flex', justifyContent: 'center' }}>
-        <NotificationSkeleton />
-      </div>
-    );
-  }
-);

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

@@ -1,24 +0,0 @@
-import { ErrorOutline } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
-import { memo, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export const NotificationError: FC = memo(() => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  return (
-    <Grid
-      container
-      sx={{ padding: 1, minHeight: theme.spacing(20) }}
-      alignContent="center"
-      justifyContent="center"
-      alignItems="center"
-      gap={1}
-    >
-      <ErrorOutline color="error" sx={{ fontSize: 40 }} />
-      <Typography color="error" variant="h6">
-        {t('details.notification.error')}
-      </Typography>
-    </Grid>
-  );
-});

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

@@ -1,41 +0,0 @@
-import { Divider, Icon, Typography, useTheme } from '@mui/material';
-import React, { memo, type FC } from 'react';
-
-type NotificationHeaderProps = {
-  title: string;
-  icon: React.ReactElement;
-  children: React.ReactNode;
-};
-export const NotificationHeader: FC<NotificationHeaderProps> = memo(({ title = '', icon = null, children = null }) => {
-  const theme = useTheme();
-  return (
-    <>
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingTop: theme.spacing(2)
-        }}
-      >
-        <Icon
-          fontSize="medium"
-          sx={{
-            color: 'inherit',
-            backgroundColor: 'inherit',
-            marginLeft: theme.spacing(1.5),
-            marginRight: theme.spacing(1.5)
-          }}
-        >
-          {icon}
-        </Icon>
-        <Typography variant="h6" fontSize="large" fontWeight="bolder" flex={1}>
-          {title}
-        </Typography>
-        {children}
-      </div>
-      <Divider orientation="horizontal" flexItem style={{ width: '100%', marginTop: theme.spacing(0.5) }} />
-    </>
-  );
-});

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

@@ -1,47 +0,0 @@
-import { Divider, Stack, useTheme } from '@mui/material';
-import { type ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
-import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
-import { memo, type FC } from 'react';
-import { NotificationEndOfPage } from './NotificationEndOfPage';
-import { NotificationError } from './NotificationError';
-import { NotificationSkeleton } from './NotificationSkeleton';
-
-type NotificationListsProps = {
-  notifications: FeedItem[];
-  ItemComponent: FC<ItemComponentProps>;
-  pageSize?: number;
-  handleLoading: () => void;
-  status: string;
-};
-
-export const NotificationItems: FC<NotificationListsProps> = memo(
-  ({ notifications = [], handleLoading = () => null, pageSize = 10, ItemComponent = null, status = 'loading' }) => {
-    const theme = useTheme();
-
-    return status === 'loading' ? (
-      <>
-        {Array.from({ length: 3 }).map((_, i) => (
-          <NotificationSkeleton key={`skeleton-${i}`} />
-        ))}
-      </>
-    ) : status === 'error' ? (
-      <NotificationError />
-    ) : (
-      status === 'ready' && (
-        <>
-          <Stack
-            direction="column"
-            spacing={theme.spacing(1.25)}
-            margin={theme.spacing(1.25)}
-            divider={<Divider orientation="horizontal" flexItem style={{ width: '100%', alignSelf: 'center' }} />}
-          >
-            {notifications.slice(0, pageSize).map(n => (
-              <ItemComponent key={n?.title} item={n} />
-            ))}
-          </Stack>
-          <NotificationEndOfPage endOfPage={pageSize >= notifications.length} onLoading={() => handleLoading()} />
-        </>
-      )
-    );
-  }
-);

package/commons/components/notification/elements/NotificationSkeleton.tsx

@@ -1,59 +0,0 @@
-import { Chip, Skeleton, Typography, useTheme } from '@mui/material';
-import { memo, type FC } from 'react';
-
-export const NotificationSkeleton: FC = memo(() => {
-  const theme = useTheme();
-  return (
-    <div style={{ width: '100%' }}>
-      <Typography variant="caption">
-        <Skeleton width="30%" />
-      </Typography>
-      <Typography variant="h6">
-        <Skeleton width="50%" />
-      </Typography>
-      <div style={{ marginTop: theme.spacing(0.25), marginBottom: theme.spacing(1) }}>
-        <Typography variant="body2">
-          <Skeleton />
-        </Typography>
-        <Typography variant="body2">
-          <Skeleton />
-        </Typography>
-        <Typography variant="body2">
-          <Skeleton />
-        </Typography>
-      </div>
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center'
-        }}
-      >
-        <Chip
-          size="small"
-          variant="outlined"
-          label={<Skeleton width="30px" />}
-          style={{ margin: theme.spacing(0.25) }}
-        />
-        <Chip
-          size="small"
-          variant="outlined"
-          label={<Skeleton width="30px" />}
-          style={{ margin: theme.spacing(0.25) }}
-        />
-        <div style={{ flex: 1 }} />
-
-        <Skeleton variant="circular" width={25} height={25} style={{ margin: theme.spacing(0.25) }} />
-        <Typography variant="caption" style={{ margin: theme.spacing(0.25) }}>
-          <Skeleton width={50} />
-        </Typography>
-
-        <Skeleton variant="circular" width={25} height={25} style={{ margin: theme.spacing(0.25) }} />
-        <Typography variant="caption" style={{ margin: theme.spacing(0.25) }}>
-          <Skeleton width={50} />
-        </Typography>
-      </div>
-    </div>
-  );
-});

package/commons/components/notification/elements/NotificationTopNavButton.tsx

@@ -1,27 +0,0 @@
-import { NotificationsActiveOutlined, NotificationsNoneOutlined } from '@mui/icons-material';
-import { Badge, IconButton, Tooltip } from '@mui/material';
-import { memo, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type TopNavButtonProps = {
-  newItems?: number;
-  drawer?: boolean;
-  onDrawerOpen: () => void;
-  onDrawerClose: () => void;
-};
-
-export const NotificationTopNavButton: FC<TopNavButtonProps> = memo(
-  ({ newItems = 0, drawer = false, onDrawerOpen = () => null, onDrawerClose = () => null }) => {
-    const { t } = useTranslation();
-
-    return (
-      <Tooltip title={t('notification.title')}>
-        <IconButton color="inherit" onClick={() => (drawer ? onDrawerClose() : onDrawerOpen())} size="large">
-          <Badge badgeContent={newItems} color="info" max={99}>
-            {newItems > 0 ? <NotificationsActiveOutlined /> : <NotificationsNoneOutlined />}
-          </Badge>
-        </IconButton>
-      </Tooltip>
-    );
-  }
-);