@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/components/notification/NotificationItem.tsx

@@ -1,336 +1,345 @@
-import { Box, Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
-import { Envelope, EnvelopeOpen, ExternalLink } from '@citric/icons'
-import { IconButton, Tooltip } from '@citric/ui'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { differenceInDays, parseISO } from 'date-fns'
-import { useAnchorTag } from '../../context/anchor'
-import { useGetNotificationTitleAndDescription } from '../../context/notification/hooks'
-import { useDateFormatter } from '../../hooks/date'
-import { LazyMarkdown } from '../LazyMarkdown'
-import { GetTenantNotificationsResponse } from './types'
-
-const styles = {
-  item: (color: string, isRead: boolean) => ({
-    borderLeft: `2px solid ${color}`,
-    opacity: isRead ? 0.5 : 1,
-  }),
-} satisfies Record<string, (...args: any) => SxProp>
-
-const statusToColor: Record<string, OneOfColorSchemesWithVariants> = {
-  LOW: 'success.500',
-  MEDIUM: 'warning.500',
-  HIGH: 'danger.500',
-}
-
-interface Props {
-  notification: GetTenantNotificationsResponse,
-  isSummary: boolean,
-  // @deprecated this property currently does nothing. Remove in next major.
-  id?: string,
-  onClickViewNotification?: () => void,
-}
-
-const style: Styles = {
-  notificationDescription: {
-    display: '-webkit-box',
-    WebkitBoxOrient: 'vertical',
-    overflow: 'hidden',
-    WebkitLineClamp: '2',
-    lineHeight: '1.5',
-    maxHeight: '3em',
-    maxWidth: '340px',
-  },
-  notificationTooltip: {
-    overflowWrap: 'break-word',
-  },
-}
-
-/**
- * NotificationHeader component that renders the header of a notification.
- *
- * @param props the component's props.
- */
-const NotificationHeader = ({ title, isSummary }: { title: string, isSummary: boolean }) => (
-  <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
-    <Text appearance={isSummary ? 'body2' : 'body1'} weight="medium" nowrapEllipsis mr={5}>
-      {title}
-    </Text>
-  </Flex>
-)
-
-/**
- * Get the number of days ago from the given date string.
- *
- * @param {string} dateString - The date string to calculate the days ago.
- * @returns {number} The number of days ago.
- */
-const getDaysAgo = (dateString: string): number => {
-  const givenDate = parseISO(dateString)
-  const today = new Date()
-  return differenceInDays(today, givenDate)
-}
-
-/**
- * NotificationContent component that renders the content of a notification.
- *
- * @param props the component's props {@link Props}.
- */
-const NotificationContent = ({ notification, isSummary, onClickViewNotification }: Props) => {
-  const { formatDate } = useDateFormatter()
-  const Link = useAnchorTag()
-
-  const t = useTranslate(dictionary)
-  const { description } = useGetNotificationTitleAndDescription(notification)
-  const daysAgo = getDaysAgo(notification.trigger_at)
-
-  const components = () => ({
-    ul: (props: any) => (
-      <Text
-        as="ul"
-        appearance="body2"
-        colorScheme="light.700"
-        sx={{ listStyleType: 'disc', marginLeft: '2rem', marginBottom: '1em' }}
-        {...props}
-      />
-    ),
-    li: (props: any) => (
-      <Text
-        as="li"
-        appearance="body2"
-        colorScheme="light.700"
-        sx={{ marginBottom: '0.5em' }}
-        {...props}
-      />
-    ),
-    p: (props: any) => (
-      <Text
-        as="p"
-        appearance="body2"
-        sx={{ marginBottom: '1em' }}
-        {...props}
-      />
-    ),
-  })
-
-  const navigateToNotificationPosition = (ev: React.MouseEvent<HTMLElement>, anchorText: string) => {
-    ev.preventDefault()
-
-    const checkElement = setInterval(() => {
-      const target = document.getElementById(anchorText)
-      if (target) {
-        target.scrollIntoView({ behavior: 'smooth', block: 'start' })
-        clearInterval(checkElement)
-      }
-    }, 100)
-  }
-
-  return (
-    <>
-      {!isSummary && <Flex mt={4} mb={3} flexDirection="column">
-        <LazyMarkdown components={components()}>{description}</LazyMarkdown>
-      </Flex>}
-      {isSummary && (
-        <Text appearance="body2" mb={3} sx={style.notificationDescription}>
-          {handleTextMark(description)}
-        </Text> 
-      )}
-      <Flex justifyContent="space-between">
-        <Flex>
-          <Text appearance="microtext1" colorScheme="light.700">
-            {t[notification.context]}
-          </Text>
-          <Text appearance="microtext1" colorScheme="light.700" mx="2">
-          •
-          </Text>
-          {!isSummary && <>
-            <Text appearance="microtext1" colorScheme="light.700">
-              {formatDate(notification.trigger_at)}
-            </Text>
-            <Text appearance="microtext1" colorScheme="light.700" mx="2">
-            •
-            </Text>
-          </>}
-          <Text appearance="microtext1" colorScheme="light.700">
-            {daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today}
-          </Text>
-        </Flex>
-        {isSummary && description.length > 120 && (
-          <Link
-            href="/notifications"
-            onClick={(ev: React.MouseEvent<HTMLElement>) => {
-              onClickViewNotification?.()
-              navigateToNotificationPosition(ev, `notification-item-${notification.id}`)}}>
-            <Text appearance="microtext1" colorScheme="light.700">{t.readMore}</Text>
-          </Link>
-        )}
-      </Flex>
-    </>
-  )
-}
-
-interface NotificationFooterProps {
-  /**
-   * The URL to open when the action button is clicked.
-   */
-  actionURL: string,
-  /**
-   * Function to call when the user clicks the action button.
-   */
-  onClickAction: () => void,
-  /**
-   * Notification title
-   */
-  title?: string,
-}
-
-/**
- * NotificationFooter component that renders the footer of a notification.
- *
- * @param props the component's props {@link NotificationFooterProps}.
- */
-const NotificationFooter = ({ actionURL, onClickAction, title }: NotificationFooterProps) => {
-  const t = useTranslate(dictionary)
-  const Link = useAnchorTag()
-
-  return (
-    <Flex mt="5">
-      <Button
-        size="sm"
-        colorScheme="inverse"
-        appearance="text"
-        onClick={onClickAction}
-        as={Link}
-        href={actionURL}
-        aria-label={t.viewNotification.replace('%s', title || t.view)}
-        target="_blank"
-      >
-        <Text sx={{ mr: 2, textDecoration: 'underline' }}>
-          {t.view}
-        </Text>
-        <IconBox size="xs">
-          <ExternalLink />
-        </IconBox>
-      </Button>
-    </Flex>
-  )
-}
-
-interface DeprecatedNotificationItemProps extends Props {
-  /**
-   * @deprecated use `onCommit` and `onClickAction` instead.
-   * 
-   * Function to call when the user marks a notification as read or unread. This can happen either through the mail icon or when the user
-   * clicks the action button of a notification. Type will be "icon" on the first case or "callToAction" on the former.
-   * 
-   * Tip: clicking the action button (callToAction) should only change the read status if the message is unread. This is not treated by this
-   * component, be sure to handle it on your side.
-   * 
-   * Deprecation warning: since the deprecation, the parameter `read` is always true.
-   */
-  onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void | Promise<void>,
-}
-
-interface NewNotificationItemProps extends Props {
-  /**
-   * Function to call when the user marks a notification as read (committed).
-   */
-  onCommit: () => void,
-  /**
-   * Whenever the user clicks the action button of a notification, the notification is marked as read (committed) and the browser is
-   * redirected to the page that corresponds to the action.
-   * 
-   * If you need additional behavior, use this parameter, which is a function to call whenever the button is clicked.
-   */
-  onClickAction?: () => void,
-  /**
-   * Function to call when the user clicks in read more button.
-   */
-  onClickViewNotification?: () => void,
-}
-
-type NotificationItemProps = DeprecatedNotificationItemProps | NewNotificationItemProps
-
-/**
- * NotificationItem component that renders a notification item.
- *
- * @param props the component's props {@link NotificationItemProps}.
- */
-export const NotificationItem = ({ notification, isSummary, ...props }: NotificationItemProps) => {
-  const t = useTranslate(dictionary)
-  const { title } = useGetNotificationTitleAndDescription(notification)
-
-  function commit() {
-    if ('onCommit' in props) props.onCommit()
-    else props.onClickMarkReadUnread(true, 'icon')
-  }
-
-  function clickAction() {
-    if ('onCommit' in props) {
-      if (!notification.committed) props.onCommit()
-      props.onClickAction?.()
-    }
-    else props.onClickMarkReadUnread(true, 'callToAction')
-  }
-
-  return (
-    <Box sx={{ position: 'relative' }} id={props.id}>
-      <Flex bg="light.400" p="3 3 3 5" r="xs"
-        flexWrap="nowrap"
-        flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
-        <NotificationHeader title={title} isSummary={isSummary} />
-        <NotificationContent notification={notification} isSummary={isSummary} onClickViewNotification={props.onClickViewNotification} />
-        {notification.call_to_action && <NotificationFooter
-          actionURL={notification.call_to_action}
-          onClickAction={clickAction}
-          title={title}
-        />}
-      </Flex>
-      <Box sx={{ position: 'absolute', top: '8px', right: '8px' }}>
-        <Tooltip text={notification.committed ? t.committed : t.uncommitted} position="left">
-          {notification.committed
-            ? <IconBox role="img" aria-label={t.committed} size="xs" style={{ margin: '4px', opacity: 0.5 }}><EnvelopeOpen /></IconBox>
-            : (
-              <IconButton aria-label={t.uncommitted} onClick={commit}>
-                <IconBox size="xs"><Envelope /></IconBox>
-              </IconButton>
-            )
-          }
-        </Tooltip>
-      </Box>
-    </Box>
-  )
-}
-
-function handleTextMark(text: string) {
-  // eslint-disable-next-line no-useless-escape
-  return text.replace(/[^\p{L}\p{N}\s\p{Emoji_Presentation}:!'()"\/_-]/gu, '')
-}
-
-const dictionary = {
-  en: {
-    ACCOUNT: 'Account',
-    WORKSPACE: 'Workspace',
-    STUDIO: 'Studio',
-    AI: 'AI',
-    daysAgo: 'days ago',
-    today: 'today',
-    committed: 'This notification has been read.',
-    uncommitted: 'This notification has not been read yet. Click to mark as read.',
-    view: 'View',
-    viewNotification: 'View notification %s',
-    readMore: 'Read more',
-  },
-  pt: {
-    ACCOUNT: 'Conta',
-    WORKSPACE: 'Workspace',
-    STUDIO: 'Estúdio',
-    AI: 'AI',
-    daysAgo: 'dias atrás',
-    today: 'hoje',
-    committed: 'Esta notificação já foi lida.',
-    uncommitted: 'Esta notificação ainda não foi lida. Clique para marcar como lida.',
-    view: 'Visualizar',
-    viewNotification: 'Visualizar notificação %s',
-    readMore: 'Ler mais',
-  },
-} satisfies Dictionary
+import { Box, Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
+import { Envelope, EnvelopeOpen, ExternalLink } from '@citric/icons'
+import { IconButton, Tooltip } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { differenceInDays, parseISO } from 'date-fns'
+import styled from 'styled-components'
+import { useAnchorTag } from '../../context/anchor'
+import { useGetNotificationTitleAndDescription } from '../../context/notification/hooks'
+import { useDateFormatter } from '../../hooks/date'
+import { LazyMarkdown } from '../LazyMarkdown'
+import { GetTenantNotificationsResponse } from './types'
+
+const styles = {
+  item: (color: string, isRead: boolean) => ({
+    borderLeft: `2px solid ${color}`,
+    opacity: isRead ? 0.5 : 1,
+  }),
+} satisfies Record<string, (...args: any) => SxProp>
+
+const statusToColor: Record<string, OneOfColorSchemesWithVariants> = {
+  LOW: 'success.500',
+  MEDIUM: 'warning.500',
+  HIGH: 'danger.500',
+}
+
+interface Props {
+  notification: GetTenantNotificationsResponse,
+  isSummary: boolean,
+  // @deprecated this property currently does nothing. Remove in next major.
+  id?: string,
+  onClickViewNotification?: () => void,
+}
+
+const style: Styles = {
+  notificationDescription: {
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    WebkitLineClamp: '2',
+    lineHeight: '1.5',
+    maxHeight: '3em',
+    maxWidth: '340px',
+  },
+  notificationTooltip: {
+    overflowWrap: 'break-word',
+  },
+}
+
+/**
+ * NotificationHeader component that renders the header of a notification.
+ *
+ * @param props the component's props.
+ */
+const NotificationHeader = ({ title, isSummary }: { title: string, isSummary: boolean }) => (
+  <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
+    <Text appearance={isSummary ? 'body2' : 'body1'} weight="medium" nowrapEllipsis mr={5}>
+      {title}
+    </Text>
+  </Flex>
+)
+
+/**
+ * Get the number of days ago from the given date string.
+ *
+ * @param {string} dateString - The date string to calculate the days ago.
+ * @returns {number} The number of days ago.
+ */
+const getDaysAgo = (dateString: string): number => {
+  const givenDate = parseISO(dateString)
+  const today = new Date()
+  return differenceInDays(today, givenDate)
+}
+
+/**
+ * NotificationContent component that renders the content of a notification.
+ *
+ * @param props the component's props {@link Props}.
+ */
+const NotificationContent = ({ notification, isSummary, onClickViewNotification }: Props) => {
+  const { formatDate } = useDateFormatter()
+  const Link = useAnchorTag()
+
+  const t = useTranslate(dictionary)
+  const { description } = useGetNotificationTitleAndDescription(notification)
+  const daysAgo = getDaysAgo(notification.trigger_at)
+
+  const components = () => ({
+    ul: (props: any) => (
+      <Text
+        as="ul"
+        appearance="body2"
+        colorScheme="light.700"
+        sx={{ listStyleType: 'disc', marginLeft: '2rem', marginBottom: '1em' }}
+        {...props}
+      />
+    ),
+    li: (props: any) => (
+      <Text
+        as="li"
+        appearance="body2"
+        colorScheme="light.700"
+        sx={{ marginBottom: '0.5em' }}
+        {...props}
+      />
+    ),
+    p: (props: any) => (
+      <Text
+        as="p"
+        appearance="body2"
+        sx={{ marginBottom: '1em' }}
+        {...props}
+      />
+    ),
+  })
+
+  const navigateToNotificationPosition = (ev: React.MouseEvent<HTMLElement>, anchorText: string) => {
+    ev.preventDefault()
+
+    const checkElement = setInterval(() => {
+      const target = document.getElementById(anchorText)
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        clearInterval(checkElement)
+      }
+    }, 100)
+  }
+
+  return (
+    <>
+      {!isSummary && <Flex mt={4} mb={3} flexDirection="column">
+        <LazyMarkdown components={components()}>{description}</LazyMarkdown>
+      </Flex>}
+      {isSummary && (
+        <Text appearance="body2" mb={3} sx={style.notificationDescription}>
+          {handleTextMark(description)}
+        </Text>
+      )}
+      <Flex justifyContent="space-between">
+        <Flex>
+          <Text appearance="microtext1" colorScheme="light.700">
+            {t[notification.context]}
+          </Text>
+          <Text appearance="microtext1" colorScheme="light.700" mx="2">
+            •
+          </Text>
+          {!isSummary && <>
+            <Text appearance="microtext1" colorScheme="light.700">
+              {formatDate(notification.trigger_at)}
+            </Text>
+            <Text appearance="microtext1" colorScheme="light.700" mx="2">
+              •
+            </Text>
+          </>}
+          <Text appearance="microtext1" colorScheme="light.700">
+            {daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today}
+          </Text>
+        </Flex>
+        {isSummary && description.length > 120 && (
+          <Link
+            href="/notifications"
+            onClick={(ev: React.MouseEvent<HTMLElement>) => {
+              onClickViewNotification?.()
+              navigateToNotificationPosition(ev, `notification-item-${notification.id}`)
+            }}>
+            <Text appearance="microtext1" colorScheme="light.700">{t.readMore}</Text>
+          </Link>
+        )}
+      </Flex>
+    </>
+  )
+}
+
+interface NotificationFooterProps {
+  /**
+   * The URL to open when the action button is clicked.
+   */
+  actionURL: string,
+  /**
+   * Function to call when the user clicks the action button.
+   */
+  onClickAction: () => void,
+  /**
+   * Notification title
+   */
+  title?: string,
+}
+
+/**
+ * NotificationFooter component that renders the footer of a notification.
+ *
+ * @param props the component's props {@link NotificationFooterProps}.
+ */
+const NotificationFooter = ({ actionURL, onClickAction, title }: NotificationFooterProps) => {
+  const t = useTranslate(dictionary)
+  const Link = useAnchorTag()
+
+  return (
+    <Flex mt="5">
+      <Button
+        size="sm"
+        colorScheme="inverse"
+        appearance="text"
+        onClick={onClickAction}
+        as={Link}
+        href={actionURL}
+        aria-label={t.viewNotification.replace('%s', title || t.moreDetails)}
+        target="_blank"
+      >
+        <Text sx={{ mr: 2, textDecoration: 'underline' }}>
+          {t.moreDetails}
+        </Text>
+        <IconBox size="xs">
+          <ExternalLink />
+        </IconBox>
+      </Button>
+    </Flex>
+  )
+}
+
+interface DeprecatedNotificationItemProps extends Props {
+  /**
+   * @deprecated use `onCommit` and `onClickAction` instead.
+   * 
+   * Function to call when the user marks a notification as read or unread. This can happen either through the mail icon or when the user
+   * clicks the action button of a notification. Type will be "icon" on the first case or "callToAction" on the former.
+   * 
+   * Tip: clicking the action button (callToAction) should only change the read status if the message is unread. This is not treated by this
+   * component, be sure to handle it on your side.
+   * 
+   * Deprecation warning: since the deprecation, the parameter `read` is always true.
+   */
+  onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void | Promise<void>,
+}
+
+interface NewNotificationItemProps extends Props {
+  /**
+   * Function to call when the user marks a notification as read (committed).
+   */
+  onCommit: () => void,
+  /**
+   * Whenever the user clicks the action button of a notification, the notification is marked as read (committed) and the browser is
+   * redirected to the page that corresponds to the action.
+   * 
+   * If you need additional behavior, use this parameter, which is a function to call whenever the button is clicked.
+   */
+  onClickAction?: () => void,
+  /**
+   * Function to call when the user clicks in read more button.
+   */
+  onClickViewNotification?: () => void,
+}
+
+type NotificationItemProps = DeprecatedNotificationItemProps | NewNotificationItemProps
+
+const StyledBox = styled(Box)<{$isSummary?: boolean}>`
+  .notification-item {
+    padding: ${({ $isSummary }) => $isSummary ? '8px 8px 8px 16px' : '16px'};
+  }
+`
+
+/**
+ * NotificationItem component that renders a notification item.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
+export const NotificationItem = ({ notification, isSummary, ...props }: NotificationItemProps) => {
+  const t = useTranslate(dictionary)
+  const { title } = useGetNotificationTitleAndDescription(notification)
+
+  function commit() {
+    if ('onCommit' in props) props.onCommit()
+    else props.onClickMarkReadUnread(true, 'icon')
+  }
+
+  function clickAction() {
+    if ('onCommit' in props) {
+      if (!notification.committed) props.onCommit()
+      props.onClickAction?.()
+    }
+    else props.onClickMarkReadUnread(true, 'callToAction')
+  }
+
+  return (
+    <StyledBox sx={{ position: 'relative' }} id={props.id} $isSummary={isSummary}>
+      <Flex bg="light.400" r="xs"
+        flexWrap="nowrap"
+        className="notification-item"
+        flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
+        <NotificationHeader title={title} isSummary={isSummary} />
+        <NotificationContent notification={notification} isSummary={isSummary} onClickViewNotification={props.onClickViewNotification} />
+        {notification.call_to_action && <NotificationFooter
+          actionURL={notification.call_to_action}
+          onClickAction={clickAction}
+          title={title}
+        />}
+      </Flex>
+      <Box sx={{ position: 'absolute', top: '8px', right: '8px' }}>
+        <Tooltip text={notification.committed ? t.committed : t.uncommitted} position="left">
+          {notification.committed
+            ? <IconBox role="img" aria-label={t.committed} size="xs" style={{ margin: '4px', opacity: 0.5 }}><EnvelopeOpen /></IconBox>
+            : (
+              <IconButton aria-label={t.uncommitted} onClick={commit}>
+                <IconBox size="xs"><Envelope /></IconBox>
+              </IconButton>
+            )
+          }
+        </Tooltip>
+      </Box>
+    </StyledBox>
+  )
+}
+
+function handleTextMark(text: string) {
+  // eslint-disable-next-line no-useless-escape
+  return text.replace(/[^\p{L}\p{N}\s\p{Emoji_Presentation}:!'()"\/_-]/gu, '')
+}
+
+const dictionary = {
+  en: {
+    ACCOUNT: 'Account',
+    WORKSPACE: 'Workspace',
+    STUDIO: 'Studio',
+    AI: 'AI',
+    daysAgo: 'days ago',
+    today: 'today',
+    committed: 'This notification has been read.',
+    uncommitted: 'This notification has not been read yet. Click to mark as read.',
+    moreDetails: 'More details',
+    viewNotification: 'View notification %s',
+    readMore: 'Read more',
+  },
+  pt: {
+    ACCOUNT: 'Conta',
+    WORKSPACE: 'Workspace',
+    STUDIO: 'Estúdio',
+    AI: 'AI',
+    daysAgo: 'dias atrás',
+    today: 'hoje',
+    committed: 'Esta notificação já foi lida.',
+    uncommitted: 'Esta notificação ainda não foi lida. Clique para marcar como lida.',
+    moreDetails: 'Acessar detalhes',
+    viewNotification: 'Visualizar notificação %s',
+    readMore: 'Ler mais',
+  },
+} satisfies Dictionary