@stack-spot/portal-components 0.0.17 → 1.0.0-dev.1768482754546

package/src/components/form/Select/utils.tsx

@@ -0,0 +1,28 @@
+import { Text } from '@citric/core'
+import { AccessibleLabel, GenericAccessibleLabel } from './types'
+
+export function parseLabel(label: AccessibleLabel): GenericAccessibleLabel {
+  if (typeof label === 'string') {
+    return {
+      option: <Text>{label}</Text>,
+      text: label,
+      selected: <Text className="clipped-text">{label}</Text>,
+    }
+  }
+  if ('title' in label) {
+    return {
+      option: (
+        <div className="detailed">
+          {label.image && <div className="image">{label.image}</div>}
+          <div className="text-content">
+            <Text className="title">{label.title}</Text>
+            {label.description && <Text className="description" appearance="microtext1">{label.description}</Text>}
+          </div>
+        </div>
+      ),
+      text: `${label.title}: ${label.description}`,
+      selected: <Text className="clipped-text">{label.title}</Text>,
+    }
+  }
+  return label
+}

package/src/components/notification/NotificationComponent.tsx

@@ -0,0 +1,340 @@
+import { Box, Button, Flex, IconBox, Text } from '@citric/core'
+import { Bell, TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ReactElement, useLayoutEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+import { AsyncContent, ErrorProps } from '../AsyncContent'
+import { InfiniteScroll } from '../InfiniteScroll'
+import { ScrollView } from '../ScrollView'
+import { StatusCircle } from '../StatusCircle'
+import { NotificationItem } from './NotificationItem'
+import { GetTenantNotificationsResponse, NotificationTypeFilters, UnreadType } from './types'
+
+interface Props {
+  hasUnreadNotification?: boolean,
+}
+
+const ANIMATION_DURATION_MS = 300
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
+
+const NotificationsComponent = styled.div<{ $scroll?: boolean }>`
+  max-height: 0;
+  z-index: 2;
+  visibility: hidden;
+  position: absolute;
+  top: calc(var(--header-height) + 4px);
+  right: -270%;
+  opacity: 0;
+  width: 400px;
+  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
+
+  &.visible {
+    visibility: visible;
+    min-height: 400px;
+    opacity: 1;
+    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
+  }
+
+  .content {
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[400]};
+    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+    background-color: ${theme.color.light[300]};
+    overflow-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
+    overflow-x: hidden;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 8px 32px;
+    border-style: solid;
+    border-color: transparent;
+    bottom: 100%;
+    left: 74%;
+    margin-left: -5px;
+    transform: rotate(180deg);
+    border-top-color: ${theme.color.light[400]};
+  }
+`
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.color.primary.contrastText};
+  opacity: 0.6;
+  z-index: 1;
+`
+
+const StyledBox = styled(Box)`
+  width: 100%;
+  > div:first-child{
+    width: 100%;
+  }
+`
+
+interface NotificationsFilterProps {
+  type?: NotificationTypeFilters,
+  onChangeFilterType: (type?: NotificationTypeFilters) => void,
+}
+
+interface NotificationFilterButtonProps extends NotificationsFilterProps {
+  ariaLabel: string,
+  label: string,
+  enumType: NotificationTypeFilters,
+}
+
+/**
+ * NotificationFilterButton component that renders a button to be used in quick filters for notifications.
+ *
+ * @param props the component's props {@link NotificationFilterButtonProps}.
+ */
+const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
+  const { type, onChangeFilterType, ariaLabel, label, enumType } = props
+  return (<Button
+    appearance="text"
+    role="button"
+    aria-label={ariaLabel}
+    aria-pressed={type === enumType}
+    onClick={() => onChangeFilterType(enumType)}
+    sx={{ borderColor: type === enumType ? 'primary' : 'transparent' }}
+  >
+    <Text colorScheme="inverse" appearance="microtext1">
+      {label}
+    </Text>
+  </Button>
+  )
+}
+
+/**
+ * NotificationsFilter component that renders the filter options for notifications.
+ *
+ * @param props the component's props {@link NotificationsFilterProps}.
+ */
+const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterProps) => {
+  const t = useTranslate(dictionary)
+
+  return (<Flex alignItems="center" sx={{ gap: '4px' }} my="5">
+    <Button
+      aria-pressed={!type}
+      appearance="text"
+      role="button"
+      aria-label={t.filterAll}
+      onClick={() => onChangeFilterType()}
+      sx={{ borderColor: !type ? 'primary' : 'transparent' }}
+    >
+      <Text colorScheme="inverse" appearance="microtext1">
+        {t.all}
+      </Text>
+    </Button>
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterUnread} label={t.unread} enumType={UnreadType.Unread}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterHigh} label={t.high} enumType={'HIGH'}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterMedium} label={t.medium} enumType={'MEDIUM'}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterLow} label={t.low} enumType={'LOW'}
+    />
+  </Flex>)
+}
+
+interface Props {
+  onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void,
+  notifications?: GetTenantNotificationsResponse[],
+  isLoading: boolean,
+  error?: any,
+  onClickViewNotifications: () => void,
+  onClickViewAll: () => void,
+  errorDetails: ErrorProps,
+  fetchNextPage: () => void,
+  hasNextPage: boolean,
+  type?: NotificationTypeFilters,
+  onUpdateType: (updatedType?: NotificationTypeFilters) => void,
+  placeholderComponent: ReactElement,
+  isSummary: boolean,
+}
+
+// fixme: remove this component in the next major
+/**
+ * NotificationComponent component that renders the notifications panel.
+ * It renders the notification icon and when clicked the notification modal is opened.
+ *
+ * @param props the component's props {@link Props}.
+ * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
+ */
+export const NotificationComponent = ({
+  hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error,
+  type, onUpdateType,
+  onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage,
+  placeholderComponent, isSummary = false,
+}: Props) => {
+  const t = useTranslate(dictionary)
+  const [visible, setVisible] = useState(false)
+  const seeAllButtonRef = useRef<HTMLButtonElement>(null)
+
+  const updateType = (updatedType?: NotificationTypeFilters) => {
+    onUpdateType(updatedType)
+  }
+
+  useLayoutEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const focusedElement = document.activeElement
+        const notificationItems = document.querySelectorAll('[id^="notificationItem-"]')
+        let isFocusedOnNotificationItem = false
+
+        notificationItems.forEach((item) => {
+          if (item.contains(focusedElement)) {
+            isFocusedOnNotificationItem = true
+          }
+        })
+
+        if (isFocusedOnNotificationItem) {
+          seeAllButtonRef?.current?.focus()
+        } else {
+          setVisible(false)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  return (<Flex sx={{ position: 'relative' }}>
+    <IconButton aria-label={t.openNotifications} onClick={() => {
+      onClickViewNotifications()
+      setVisible(!visible)
+    }} sx={{ border: 'none', bg: 'transparent' }} aria-expanded={visible}>
+      <IconBox size="md"
+        className="notificationsTour" >
+        <Bell />
+      </IconBox>
+    </IconButton>
+    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }} aria-label={t.hasUnread}>
+      <StatusCircle status={'danger'} />
+    </Box>}
+
+    {visible && <Overlay onClick={() => setVisible(false)} />}
+
+    <NotificationsComponent
+      className={listToClass(['notification-list', visible ? 'visible' : undefined])}
+      $scroll={true}
+      aria-hidden={!visible}
+    >
+      <Flex className="content" p={5} flexDirection="column" justifyContent="space-between">
+        <Flex w="100%">
+          <Flex justifyContent="space-between" w="100%" >
+            <Text appearance="h4">
+              {t.notifications}
+            </Text>
+            <IconButton onClick={() => setVisible(false)} aria-label={t.close}>
+              <IconBox size="xs">
+                <TimesMini />
+              </IconBox>
+            </IconButton>
+          </Flex>
+
+          <NotificationsFilter type={type} onChangeFilterType={updateType} />
+          <AsyncContent error={error} errorDetails={errorDetails} loading={isLoading}>
+            {notifications?.length ? <StyledBox>
+              <ScrollView id="scrollableNotifications" direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>
+                <InfiniteScroll
+                  dataLength={notifications?.length || 0}
+                  next={fetchNextPage}
+                  hasMore={hasNextPage}
+                  scrollableTarget="scrollableNotifications"
+                >
+                  <Flex sx={{ gap: '4px' }} mr="3" flexDirection="column">
+                    {notifications?.map((item, index) => (
+                      <NotificationItem
+                        key={item.id}
+                        notification={item}
+                        id={`notificationItem-${index}`}
+                        isSummary={isSummary}
+                        onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)}
+                      />
+                    ))}
+                  </Flex>
+                </InfiniteScroll>
+              </ScrollView>
+            </StyledBox>
+              :
+              <>
+                {placeholderComponent}
+              </>
+            }
+          </AsyncContent>
+        </Flex>
+
+        <Flex w="100%" pt={3}>
+          <Button
+            ref={seeAllButtonRef}
+            size="sm"
+            sx={{ width: '100%' }} colorScheme="inverse" appearance="text"
+            onClick={() => {
+              setVisible(false)
+              onClickViewAll()
+            }}>
+            <Text appearance="microtext1">
+              {t.viewAll}
+            </Text>
+          </Button>
+        </Flex>
+      </Flex>
+    </NotificationsComponent>
+  </Flex >)
+}
+
+const dictionary = {
+  en: {
+    notifications: 'Notifications',
+    all: 'All',
+    filterAll: 'Filter all notifications',
+    filterUnread: 'Filter unread notifications',
+    filterHigh: 'Filter high notifications',
+    filterMedium: 'Filter medium notifications',
+    filterLow: 'Filter low notifications',
+    unread: 'Unread',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    viewAll: 'View all notifications',
+    openNotifications: 'View notifications',
+    hasUnread: 'Has Unread notifications',
+    close: 'Close',
+  },
+  pt: {
+    notifications: 'Notificações',
+    all: 'Todos',
+    filterAll: 'Filtrar todas as notificações ',
+    filterUnread: 'Filtrar notificações não lidas',
+    filterHigh: 'Filtrar notificações criticidade alta',
+    filterMedium: 'Filtrar notificações criticidade média',
+    filterLow: 'Filtrar notificações criticidade baixa',
+    unread: 'Não lidas',
+    high: 'Alto',
+    medium: 'Médio',
+    low: 'Baixo',
+    viewAll: 'Ver todas as notificações',
+    openNotifications: 'Visualizar notificações',
+    hasUnread: 'Existem notificações não lidas',
+    close: 'Fechar',
+  },
+} satisfies Dictionary