@stack-spot/portal-layout 2.0.0 → 2.1.0

package/src/components/NotificationCenter/dictionary.ts

@@ -0,0 +1,44 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    notifications: 'Notifications',
+    'ALL.ariaLabel': 'Show all notifications',
+    'UNREAD.ariaLabel': 'Show unread notifications',
+    'HIGH.ariaLabel': 'Show critical notifications',
+    'MEDIUM.ariaLabel': 'Show notifications with medium criticality',
+    'LOW.ariaLabel': 'Show notifications with low criticality',
+    'ALL.label': 'All',
+    'UNREAD.label': 'Unread',
+    'HIGH.label': 'High',
+    'MEDIUM.label': 'Medium',
+    'LOW.label': 'Low',
+    seeAll: 'See all notifications',
+    openNotifications: 'View notifications',
+    hasUnread: 'Has Unread notifications',
+    close: 'Close',
+    loadingNotifications: "Loading notifications. You'll be able to click this button and see them in a few seconds.",
+    tour: 'Now we have Notifications, this will help you stay informed of the latest updates about your Workspaces, Studios, and the Stackspot platform.',
+  },
+  pt: {
+    notifications: 'Notificações',
+    'ALL.ariaLabel': 'Mostrar todas as notificações',
+    'UNREAD.ariaLabel': 'Mostrar notificações não lidas',
+    'HIGH.ariaLabel': 'Mostrar notificações críticas',
+    'MEDIUM.ariaLabel': 'Mostrar notificações com criticidade média',
+    'LOW.ariaLabel': 'Mostrar notificações com criticidade baixa',
+    'ALL.label': 'Todas',
+    'UNREAD.label': 'Não lidas',
+    'HIGH.label': 'Alto',
+    'MEDIUM.label': 'Médio',
+    'LOW.label': 'Baixo',
+    seeAll: 'Ver todas as notificações',
+    openNotifications: 'Visualizar notificações',
+    hasUnread: 'Existem notificações não lidas',
+    close: 'Fechar',
+    loadingNotifications: 'Carregando notificações. Você poderá clicar neste botão e vê-las em alguns segundos.',
+    tour: 'Agora temos Notificações, isso irá ajudá-lo a se manter informado sobre as últimas atualizações sobre seus Workspaces, estúdios e a plataforma Stackspot.',
+  },
+} satisfies Dictionary
+
+export const useNotificationsDictionary = () => useTranslate(dictionary)

package/src/components/NotificationCenter/index.tsx

@@ -0,0 +1,61 @@
+import { IconBox } from '@citric/core'
+import { Bell } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { useEffectOnce } from '@stack-spot/portal-components'
+import { useNotificationController, useNotificationList, useUnreadNotifications } from '@stack-spot/portal-components/Notifications'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useState } from 'react'
+import { useNotificationsDictionary } from './dictionary'
+import { NotificationPanel } from './NotificationPanel'
+import { NotificationBox } from './styled'
+import { useNotificationsTourStep } from './tour'
+import { getFiltersFromName, getNameFromFilters } from './utils'
+
+const MAX_ITEMS = 10
+
+export const NotificationCenter = () => {
+  const [open, setOpen] = useState(false)
+  const t = useNotificationsDictionary()
+  const { applyFilters, filters, items, status, error } = useNotificationList({ size: MAX_ITEMS })
+  const hasUnreadNotification = useUnreadNotifications()
+  const controller = useNotificationController()
+  useNotificationsTourStep()
+
+  useEffectOnce(() => {
+    controller.checkUnread()
+  })
+
+  useEffect(() => {
+    if (open && (hasUnreadNotification || getNameFromFilters(filters) !== 'ALL')) {
+      applyFilters(getFiltersFromName('ALL'))
+    }
+  }, [open])
+
+  return (
+    <NotificationBox>
+      <IconButton
+        aria-label={status === 'startup' ? t.loadingNotifications : t.openNotifications}
+        onClick={status === 'startup' ? undefined : () => setOpen(true)}
+        className={listToClass([
+          'notification-button',
+          status === 'startup' && 'loading',
+          status !== 'startup' && hasUnreadNotification && 'unread',
+        ])}
+        aria-expanded={open}
+      >
+        <IconBox size="md" className="notificationsTour" >
+          <Bell />
+        </IconBox>
+      </IconButton>
+      <NotificationPanel
+        filter={getNameFromFilters(filters)}
+        loading={status === 'loading'}
+        error={error}
+        items={items}
+        visible={open}
+        onClose={() => setOpen(false)}
+        onFilter={filter => applyFilters({ ...getFiltersFromName(filter), size: MAX_ITEMS })}
+      />
+    </NotificationBox>
+  )
+}

package/src/components/NotificationCenter/styled.ts

@@ -0,0 +1,75 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+import { Backdrop } from '../Backdrop'
+
+export const NotificationBox = styled.div`
+  .notification-button {
+    border: none;
+    background: transparent;
+    margin: 0 40px;
+    position: relative;
+
+    &.loading {
+      cursor: progress;
+      opacity: 0.5;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: ${theme.color.danger['500']};
+      transform: scale(0);
+      transition: transform ease-in 0.3s;
+    }
+
+    &.unread:before {
+      transform: scale(1);
+    }
+  }
+`
+
+export const StyledBackdrop = styled(Backdrop)`
+  position: absolute;
+  top: calc(var(--header-height) + 10px);
+  right: 60px;
+  box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+
+  .notification-panel {
+    width: 368px;
+    padding: 16px;
+    border-radius: 4px;
+    background-color: ${theme.color.light[300]};
+    border: 1px solid ${theme.color.light[400]};
+  }
+
+  .filter-list {
+    list-style: none;
+    margin: 16px 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .filter-btn {
+      &:focus {
+        border-color: transparent;
+      }
+      &[aria-pressed="true"] {
+        border-color: ${theme.color.primary[500]};
+      }
+    }
+  }
+
+  .see-all {
+    margin-top: 8px;
+    width: 100%;
+  }
+
+  .error-feedback {
+    flex-direction: column;
+  }
+`

package/src/components/NotificationCenter/tour.tsx

@@ -0,0 +1,19 @@
+import { Box, Text } from '@citric/core'
+import { useTour } from '../tour'
+import { useNotificationsDictionary } from './dictionary'
+
+export const useNotificationsTourStep = () => {
+  const t = useNotificationsDictionary()
+  const { addStep } = useTour()
+
+  addStep({
+    content: <Box px={5} py={3}>
+      <Text appearance="microtext1" colorScheme="inverse.contrastText">
+        {t.tour}
+      </Text>
+    </Box>,
+    selector: '.notificationsTour',
+    title: t.notifications,
+    position: 'bottom',
+  } as any)
+}

package/src/components/NotificationCenter/types.ts

@@ -0,0 +1,24 @@
+import { NotificationListProps } from '@stack-spot/portal-components/Notifications'
+
+export type NotificationFilter = 'ALL' | 'UNREAD' | 'HIGH' | 'MEDIUM' | 'LOW'
+
+export interface NotificationPanelProps extends Omit<NotificationListProps, 'compact' | 'onCommit'> {
+  filter: NotificationFilter,
+  loading: boolean,
+  error: any,
+  onFilter: (filter: NotificationFilter) => Promise<void>,
+  visible: boolean,
+  onClose: () => void,
+}
+
+export interface NotificationPanelHeaderProps {
+  filter: NotificationFilter,
+  onChangeFilter: (value: NotificationFilter) => Promise<void>,
+  onClose: () => void,
+}
+
+export interface FilterButtonProps {
+  value: NotificationFilter,
+  current: NotificationFilter,
+  onChangeFilter: (value: NotificationFilter) => void,
+}

package/src/components/NotificationCenter/utils.ts

@@ -0,0 +1,20 @@
+import { LoadNotificationsFilters } from '@stack-spot/portal-components/Notifications'
+import { NotificationFilter } from './types'
+
+const empty: LoadNotificationsFilters = { committed: undefined, context: undefined, criticality: undefined, search: undefined }
+
+export function getFiltersFromName(filterName: NotificationFilter): LoadNotificationsFilters {
+  switch (filterName) {
+    case 'ALL': return empty
+    case 'HIGH': return { ...empty, criticality: 'HIGH' }
+    case 'LOW': return { ...empty, criticality: 'LOW' }
+    case 'MEDIUM': return { ...empty, criticality: 'MEDIUM' }
+    case 'UNREAD': return { ...empty, committed: false }
+  }
+}
+
+export function getNameFromFilters(filters: LoadNotificationsFilters): NotificationFilter {
+  if (filters.committed === false) return 'UNREAD'
+  if (filters.criticality) return filters.criticality
+  return 'ALL'
+}

package/src/index.ts

@@ -1,15 +1,15 @@
-export { Layout, RawLayout } from './Layout'
-export { overlay } from './LayoutOverlayManager'
 export { Dialog } from './components/Dialog'
 export { Header, HeaderProps } from './components/Header'
-export { OverlayContent } from './components/OverlayContent'
-export { PortalSwitcher } from './components/PortalSwitcher'
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
 export { MenuSections } from './components/menu/MenuSections'
 export * from './components/menu/types'
+export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent'
+export { PortalSwitcher } from './components/PortalSwitcher'
 export * from './components/tour'
 export * from './components/types'
 export * from './elements'
 export * from './errors'
+export { Layout, RawLayout } from './Layout'
+export { overlay } from './LayoutOverlayManager'
 export * from './utils'
 

package/src/layout.css

@@ -27,7 +27,7 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  background: var(--light-400);
+  background: var(--light-300);
   font: var(--font);
   color: var(--light-contrastText);
 }