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

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

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

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

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

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

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

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

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

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

package/commons/components/notification/elements/item/NotificationItem.tsx

@@ -0,0 +1,44 @@
+import { useTheme } from '@mui/material';
+import { memo, type FC } from 'react';
+
+import { NotificationItemAuthor } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemAuthor';
+import { NotificationItemContent } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemContent';
+import { NotificationItemDate } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemDate';
+import { NotificationItemImage } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemImage';
+import { NotificationItemTag } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemTag';
+import { NotificationItemTitle } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemTitle';
+import type { FeedItem } from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
+
+export const NotificationItem: FC<{ item?: FeedItem }> = memo(({ item = null }) => {
+  const theme = useTheme();
+
+  return !item ? null : (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      }}
+    >
+      <NotificationItemDate {...item} />
+      <NotificationItemTitle {...item} />
+      <NotificationItemContent {...item} />
+      <NotificationItemImage {...item} />
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginTop: theme.spacing(1)
+        }}
+      >
+        {item?.tags && item?.tags.map(tag => <NotificationItemTag key={`${tag}`} tag={tag} />)}
+        <div style={{ flex: 1 }} />
+        {item?.authors &&
+          item?.authors.map(author => <NotificationItemAuthor key={`${author?.name}`} author={author} />)}
+      </div>
+    </div>
+  );
+});

package/commons/components/notification/elements/item/NotificationItemAuthor.tsx

@@ -0,0 +1,72 @@
+import { Link, Typography, useTheme } from '@mui/material';
+import type { FeedAuthor } from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
+
+import { memo, useMemo, type FC } from 'react';
+
+export const NotificationItemAuthor: FC<{ author: FeedAuthor }> = memo(({ author = null }) => {
+  const theme = useTheme();
+
+  //Limit github avatar size to 50px
+  const avatar = useMemo<string>(() => {
+    if (author?.avatar.includes('github')) {
+      let url = new URLSearchParams(author?.avatar);
+      url.append('s', '50');
+      return decodeURIComponent(url.toString());
+    } else {
+      return author?.avatar;
+    }
+  }, [author]);
+
+  const NotificationAuthorContent = useMemo(
+    () => (
+      <>
+        {avatar && (
+          <img
+            src={avatar}
+            alt={avatar}
+            style={{
+              maxHeight: '25px',
+              borderRadius: '50%',
+              color: theme.palette.text.secondary,
+              marginRight: theme.spacing(1)
+            }}
+          />
+        )}
+        <Typography
+          variant="caption"
+          color="textSecondary"
+          sx={
+            author?.url &&
+            author?.url !== '' && {
+              color: theme.palette.text.secondary,
+              transition: 'color 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+              '&:hover': {
+                color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : theme.palette.secondary.dark
+              }
+            }
+          }
+        >
+          {author?.name}
+        </Typography>
+      </>
+    ),
+    [author?.name, author?.url, avatar, theme]
+  );
+
+  return author && author?.url && author?.url !== '' ? (
+    <Link
+      key={`${author?.name}`}
+      title={author?.url}
+      href={author?.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ display: 'contents' }}
+    >
+      {NotificationAuthorContent}
+    </Link>
+  ) : (
+    <div key={`${author?.name}`} style={{ display: 'contents' }}>
+      {NotificationAuthorContent}
+    </div>
+  );
+});

package/commons/components/notification/elements/item/NotificationItemContent.tsx

@@ -0,0 +1,29 @@
+import { Box, Link, Typography } from '@mui/material';
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import DOMPurify from 'dompurify';
+import { memo, type FC } from 'react';
+import Markdown from 'react-markdown';
+
+export const NotificationItemContent: FC<FeedItem> = memo(
+  ({ content_html = null, content_text = null, content_md = null }) =>
+    content_md ? (
+      <Box sx={{ '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }}>
+        <Markdown components={{ a: props => <Link href={props.href}>{props.children}</Link> }}>{content_md}</Markdown>
+      </Box>
+    ) : content_html ? (
+      <Typography
+        sx={{ '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }}
+        dangerouslySetInnerHTML={{
+          __html: DOMPurify.sanitize(content_html, { USE_PROFILES: { html: true } })
+        }}
+      />
+    ) : content_text ? (
+      <Typography
+        sx={{ '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }}
+        variant="body2"
+        color="textPrimary"
+      >
+        {content_text}
+      </Typography>
+    ) : null
+);

package/commons/components/notification/elements/item/NotificationItemDate.tsx

@@ -0,0 +1,14 @@
+import { Typography } from '@mui/material';
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import dayjs from 'dayjs';
+import { memo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const NotificationItemDate: FC<FeedItem> = memo(({ date_published = null }) => {
+  const { i18n } = useTranslation(['notification']);
+  return !date_published ? null : (
+    <Typography lineHeight="revert" display="block" variant="caption" color="textSecondary">
+      <>{dayjs(date_published).locale(i18n.language).fromNow()}</>
+    </Typography>
+  );
+});

package/commons/components/notification/elements/item/NotificationItemImage.tsx

@@ -0,0 +1,19 @@
+import { memo, type FC } from 'react';
+
+export const NotificationItemImage: FC<{ image?: string }> = memo(
+  ({ image = null }) =>
+    image && (
+      <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+        <img
+          src={image}
+          alt={image}
+          style={{
+            maxWidth: '256px',
+            maxHeight: '256px',
+            borderRadius: '5px',
+            marginTop: '8px'
+          }}
+        />
+      </div>
+    )
+);

package/commons/components/notification/elements/item/NotificationItemTag.tsx

@@ -0,0 +1,18 @@
+import { Chip } from '@mui/material';
+import { memo, type FC } from 'react';
+
+const TAG_COLOR = {
+  new: 'info',
+  current: 'success',
+  dev: 'warning',
+  service: 'secondary',
+  blog: 'default'
+};
+
+export const NotificationItemTag: FC<{ tag: string }> = memo(
+  ({ tag = null }) =>
+    tag &&
+    tag in TAG_COLOR && (
+      <Chip label={tag.toLowerCase()} variant="outlined" size="small" color={TAG_COLOR[tag] ?? 'default'} />
+    )
+);

package/commons/components/notification/elements/item/NotificationItemTitle.tsx

@@ -0,0 +1,38 @@
+import { Circle } from '@mui/icons-material';
+import { Link, Stack, Typography, useTheme } from '@mui/material';
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { memo, type FC } from 'react';
+
+export const NotificationItemTitle: FC<FeedItem> = memo(({ title = null, url = null, _isNew = false }) => {
+  const theme = useTheme();
+
+  return !title ? null : !url ? (
+    <Typography variant="h6" sx={{ color: theme.palette.primary.main }}>
+      <Stack direction="row" alignItems="center" gap={1}>
+        {title}
+        {_isNew && <Circle sx={{ width: '15px' }} />}
+      </Stack>
+    </Typography>
+  ) : (
+    <Typography
+      component={Link}
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      underline="none"
+      sx={{
+        color: theme.palette.primary.main,
+        transition: 'color 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+        '&:hover': {
+          color: theme.palette.text.secondary
+        }
+      }}
+      variant="h6"
+    >
+      <Stack direction="row" alignItems="center" gap={1}>
+        {title}
+        {_isNew && <Circle sx={{ width: '15px' }} />}
+      </Stack>
+    </Typography>
+  );
+});

package/commons/components/notification/index.tsx

@@ -0,0 +1,2 @@
+export * from 'commons/components/notification/FeedModels';
+export * from 'commons/components/notification/Notification';

package/commons/components/pages/PageCardCentered.tsx

@@ -0,0 +1,32 @@
+import { Card, styled, useMediaQuery, useTheme } from '@mui/material';
+import { memo } from 'react';
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'absolute',
+  left: '50%', // X
+  top: '50%', // Y
+  transform: 'translate(-50%, -50%)',
+  maxWidth: '22rem',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: '4px',
+  [theme.breakpoints.down('sm')]: {
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    maxWidth: '22rem',
+    padding: '0rem 1rem 3rem'
+  },
+  [theme.breakpoints.up('sm')]: {
+    width: '22rem',
+    padding: '0 2rem 3rem'
+  }
+}));
+
+function PageCardCentered({ children }) {
+  const theme = useTheme();
+  const isXs = useMediaQuery(theme.breakpoints.only('xs'));
+  return <StyledCard elevation={isXs ? 0 : 4}>{children}</StyledCard>;
+}
+
+export default memo(PageCardCentered);