@stack-spot/portal-components 2.27.1 → 2.27.2

package/src/components/notification/NotificationList.tsx

@@ -1,178 +1,179 @@
-import { Box, Flex } from '@citric/core'
-import { listToClass } from '@stack-spot/portal-theme'
-import { Month } from '@stack-spot/portal-translate'
-import { last } from 'lodash'
-import { useMemo } from 'react'
-import { styled } from 'styled-components'
-import { InfiniteScroll } from '../InfiniteScroll'
-import { TimelineSection } from '../TimelineSection'
-import { NotificationItem } from './NotificationItem'
-import { NotificationPlaceholder } from './NotificationPlaceholder'
-import { GetTenantNotificationsResponse, InfiniteScrollConfig } from './types'
-
-export interface NotificationListProps {
-  /**
-   * Function to call when the message is marked as read (committed).
-   * @param id the id of the notification where the read status changed.
-   */
-  onCommit: (id: string) => void,
-  /**
-   * Optional. Function called when the button to perform the notification action is clicked. This function will be run in addition to
-   * the notification action.
-   * @param id the id of the notification where the button was clicked
-   */
-  onClickAction?: (id: string) => void,
- /**
-   * Optional. Function called when the button read more in notification is clicked.
-   */
-  onClickViewNotification?: () => void,
-  /**
-   * If you need this notification list to be have an infinite scroll behavior, set this option.
-   */
-  infiniteScroll?: InfiniteScrollConfig,
-  /**
-   * The notifications themselves.
-   */
-  items: GetTenantNotificationsResponse[],
-  /**
-   * A compact notification list don't show date headers (as a timeline) or descriptions of notifications.
-   */
-  compact?: boolean,
-  /**
-   * Whether or not the content is loading. If this is true, the content becomes transparent and the cursor turns into the progress cursor.
-   */
-  loading?: boolean,
-  /**
-   * If true, when the list is empty, the placeholder will say "nothing found" instead of "no notifications".
-   */
-  showEmptySearch?: boolean,
-  style?: React.CSSProperties,
-  className?: string,
-}
-
-interface NotificationGroup {
-  month: Month,
-  day: number,
-  year: number,
-  items: GetTenantNotificationsResponse[],
-}
-
-const StyledBox = styled(Box)`
-  width: 100%;
-  position: relative;
-  transition: opacity 0.3s;
-
-  > div:first-child{
-    width: 100%;
-  }
-
-  &.loading {
-    opacity: 0.6;
-    .loading-mask {
-      pointer-events: auto;
-    }
-  }
-
-  .loading-mask {
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    cursor: progress;
-  }
-
-  .placeholder.compact {
-    & > div {
-      padding-block: 0;
-      gap: 15px;
-      & > div {
-        text-align: center;
-        h4 {
-          margin-bottom: 10px;
-        }
-        p {
-          margin: 0;
-        }
-      }
-    }
-  }
-`
-
-// this assumes the data from the backend is ordered by date (trigger_at)
-function groupNotificationsByDate(notifications: GetTenantNotificationsResponse[]): NotificationGroup[] {
-  const groups: NotificationGroup[] = []
-  for (const n of notifications) {
-    let currentGroup = last(groups)
-    const date = new Date(n.trigger_at)
-    const year = date.getFullYear()
-    const month = date.getMonth() as Month
-    const day = date.getDate()
-    if (!currentGroup || currentGroup.day !== day || currentGroup.month !== month || currentGroup.year !== year) {
-      currentGroup = { year, month, day, items: [] }
-      groups.push(currentGroup)
-    }
-    currentGroup.items.push(n)
-  }
-  return groups
-}
-
-export const NotificationList = (
-  { items, compact = false, onCommit, onClickAction, onClickViewNotification,
-    infiniteScroll, loading, showEmptySearch, style, className }: NotificationListProps,
-) => {
-  const groups: NotificationGroup[] = useMemo(
-    () => compact ? [{ day: 0, month: 0, year: 0, items }] : groupNotificationsByDate(items),
-    [compact, items],
-  )
-
-  const renderNotifications = (notifications: GetTenantNotificationsResponse[], key?: string) => (
-    <Flex sx={{ gap: '4px' }} flexDirection="column" key={key}>
-      {notifications?.map((item) => (
-        <NotificationItem
-          key={item.id}
-          id={key ? '' : `notification-item-${item.id}`}
-          notification={item}
-          isSummary={compact}
-          onClickViewNotification={onClickViewNotification}
-          onCommit={() => onCommit(item.id)}
-          onClickAction={() => onClickAction?.(item.id)}
-        />
-      ))}
-    </Flex>
-  )
-
-  return infiniteScroll?.scrollableTarget !== null && (
-    <StyledBox style={style} className={listToClass([className, loading && 'loading'])}>
-      {items.length ? (
-        <InfiniteScroll
-          dataLength={items.length || 0}
-          next={infiniteScroll?.loadMore ?? (() => { })}
-          hasMore={infiniteScroll?.hasMore ?? false}
-          // @ts-ignore: the library is wrongly typed and abandoned, meaning, it will never be fixed. The source code clearly accepts
-          // HTMLElements as scrollable targets:
-          // https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/src/index.tsx#L168 
-          scrollableTarget={infiniteScroll?.scrollableTarget}
-        >
-          <Flex sx={{ gap: '24px' }} flexDirection="column">
-            {groups.map((group) => compact
-              ? renderNotifications(group.items, 'compact')
-              : (
-                <TimelineSection key={`${group.day}-${group.month}-${group.year}`} month={group.month} day={group.day}>
-                  {renderNotifications(group.items)}
-                </TimelineSection>
-              ),
-            )}
-          </Flex>
-        </InfiniteScroll>
-      ) : <NotificationPlaceholder
-        isSearch={showEmptySearch}
-        className={listToClass(['placeholder', compact && 'compact'])}
-        titleAs="p"
-      />}
-      <div className="loading-mask"></div>
-    </StyledBox>
-  )
-}
+import { Box, Flex } from '@citric/core'
+import { listToClass } from '@stack-spot/portal-theme'
+import { Month } from '@stack-spot/portal-translate'
+import { last } from 'lodash'
+import { useMemo } from 'react'
+import { styled } from 'styled-components'
+import { InfiniteScroll } from '../InfiniteScroll'
+import { TimelineSection } from '../TimelineSection'
+import { NotificationItem } from './NotificationItem'
+import { NotificationPlaceholder } from './NotificationPlaceholder'
+import { GetTenantNotificationsResponse, InfiniteScrollConfig } from './types'
+
+export interface NotificationListProps {
+  /**
+   * Function to call when the message is marked as read (committed).
+   * @param id the id of the notification where the read status changed.
+   */
+  onCommit: (id: string) => void,
+  /**
+   * Optional. Function called when the button to perform the notification action is clicked. This function will be run in addition to
+   * the notification action.
+   * @param id the id of the notification where the button was clicked
+   */
+  onClickAction?: (id: string) => void,
+ /**
+   * Optional. Function called when the button read more in notification is clicked.
+   */
+  onClickViewNotification?: () => void,
+  /**
+   * If you need this notification list to be have an infinite scroll behavior, set this option.
+   */
+  infiniteScroll?: InfiniteScrollConfig,
+  /**
+   * The notifications themselves.
+   */
+  items: GetTenantNotificationsResponse[],
+  /**
+   * A compact notification list don't show date headers (as a timeline) or descriptions of notifications.
+   */
+  compact?: boolean,
+  /**
+   * Whether or not the content is loading. If this is true, the content becomes transparent and the cursor turns into the progress cursor.
+   */
+  loading?: boolean,
+  /**
+   * If true, when the list is empty, the placeholder will say "nothing found" instead of "no notifications".
+   */
+  showEmptySearch?: boolean,
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+interface NotificationGroup {
+  month: Month,
+  day: number,
+  year: number,
+  items: GetTenantNotificationsResponse[],
+}
+
+const StyledBox = styled(Box)`
+  width: 100%;
+  position: relative;
+  transition: opacity 0.3s;
+
+  > div:first-child{
+    width: 100%;
+  }
+
+  &.loading {
+    opacity: 0.6;
+    .loading-mask {
+      pointer-events: auto;
+    }
+  }
+
+  .loading-mask {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    cursor: progress;
+  }
+
+  .placeholder.compact {
+    & > div {
+      padding-block: 0;
+      gap: 16px;
+      & > div {
+        text-align: center;
+        h4 {
+          margin-bottom: 10px;
+        }
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+`
+
+// this assumes the data from the backend is ordered by date (trigger_at)
+function groupNotificationsByDate(notifications: GetTenantNotificationsResponse[]): NotificationGroup[] {
+  const groups: NotificationGroup[] = []
+  for (const n of notifications) {
+    let currentGroup = last(groups)
+    const date = new Date(n.trigger_at)
+    const year = date.getFullYear()
+    const month = date.getMonth() as Month
+    const day = date.getDate()
+    if (!currentGroup || currentGroup.day !== day || currentGroup.month !== month || currentGroup.year !== year) {
+      currentGroup = { year, month, day, items: [] }
+      groups.push(currentGroup)
+    }
+    currentGroup.items.push(n)
+  }
+  return groups
+}
+
+export const NotificationList = (
+  { items, compact = false, onCommit, onClickAction, onClickViewNotification,
+    infiniteScroll, loading, showEmptySearch, style, className }: NotificationListProps,
+) => {
+  const groups: NotificationGroup[] = useMemo(
+    () => compact ? [{ day: 0, month: 0, year: 0, items }] : groupNotificationsByDate(items),
+    [compact, items],
+  )
+
+  const renderNotifications = (notifications: GetTenantNotificationsResponse[], key?: string) => (
+    <Flex sx={{ gap: '4px' }} flexDirection="column" key={key}>
+      {notifications?.map((item) => (
+        <NotificationItem
+          key={item.id}
+          id={key ? '' : `notification-item-${item.id}`}
+          notification={item}
+          isSummary={compact}
+          onClickViewNotification={onClickViewNotification}
+          onCommit={() => onCommit(item.id)}
+          onClickAction={() => onClickAction?.(item.id)}
+        />
+      ))}
+    </Flex>
+  )
+
+  return infiniteScroll?.scrollableTarget !== null && (
+    <StyledBox style={style} className={listToClass([className, loading && 'loading'])}>
+      {items.length ? (
+        <InfiniteScroll
+          dataLength={items.length || 0}
+          next={infiniteScroll?.loadMore ?? (() => { })}
+          hasMore={infiniteScroll?.hasMore ?? false}
+          // @ts-ignore: the library is wrongly typed and abandoned, meaning, it will never be fixed. The source code clearly accepts
+          // HTMLElements as scrollable targets:
+          // https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/src/index.tsx#L168 
+          scrollableTarget={infiniteScroll?.scrollableTarget}
+        >
+          <Flex sx={{ gap: '24px' }} flexDirection="column">
+            {groups.map((group) => compact
+              ? renderNotifications(group.items, 'compact')
+              : (
+                <TimelineSection key={`${group.day}-${group.month}-${group.year}`} month={group.month} day={group.day}>
+                  {renderNotifications(group.items)}
+                </TimelineSection>
+              ),
+            )}
+          </Flex>
+        </InfiniteScroll>
+      ) : <NotificationPlaceholder
+        isSearch={showEmptySearch}
+        className={listToClass(['placeholder', compact && 'compact'])}
+        titleAs="p"
+        sx={{ minHeight: '350px' }}
+      />}
+      <div className="loading-mask"></div>
+    </StyledBox>
+  )
+}

package/src/components/notification/NotificationPlaceholder.tsx

@@ -1,43 +1,44 @@
-import { AsProp } from '@citric/core/dist/forward-ref-as'
-import { SxProperties } from '@citric/core/dist/sx'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { PlaceholderCallToAction } from '../Placeholder'
-
-interface Props {
-  isSearch?: boolean,
-  style?: React.CSSProperties,
-  className?: string,
-  sx?: SxProperties,
-  sxCard?: SxProperties,
-  titleAs?: AsProp,
-}
-
-export const NotificationPlaceholder = ({ isSearch, sx, sxCard, className, style, titleAs }: Props) => {
-  const t = useTranslate(dictionary)
-
-  return <PlaceholderCallToAction
-    title={isSearch ? t.placeholderSearchTitle : t.placeholderTitle}
-    description={isSearch ? t.placeholderSearchDescription : t.placeholderDescription}
-    fullWidth
-    sx={sx}
-    sxCard={sxCard}
-    className={className}
-    style={style}
-    titleAs={titleAs}
-  />
-}
-
-const dictionary = {
-  en: {
-    placeholderTitle: 'You don’t have any notifications yet.',
-    placeholderDescription: 'Relevant updates will show up here as soon as they’re available.',
-    placeholderSearchTitle: 'No notifications match your filters',
-    placeholderSearchDescription: 'Try changing the filters to see more results.',
-  },
-  pt: {
-    placeholderTitle: 'Você ainda não tem notificações.',
-    placeholderDescription: 'Quando houver alguma atualização relevante, ela será exibida aqui.',
-    placeholderSearchTitle: 'Nenhuma notificação corresponde aos filtros',
-    placeholderSearchDescription: 'Experimente mudar os filtros para encontrar mais notificações.',
-  },
-} satisfies Dictionary
+import { AsProp } from '@citric/core/dist/forward-ref-as'
+import { SxProperties } from '@citric/core/dist/sx'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { PlaceholderCallToAction } from '../Placeholder'
+
+interface Props {
+  isSearch?: boolean,
+  style?: React.CSSProperties,
+  className?: string,
+  sx?: SxProperties,
+  sxCard?: SxProperties,
+  titleAs?: AsProp,
+}
+
+export const NotificationPlaceholder = ({ isSearch, sx, sxCard, className, style, titleAs }: Props) => {
+  const t = useTranslate(dictionary)
+
+  return <PlaceholderCallToAction
+    title={isSearch ? t.placeholderSearchTitle : t.placeholderTitle}
+    description={isSearch ? t.placeholderSearchDescription : t.placeholderDescription}
+    fullWidth
+    sx={sx}
+    sxCard={sxCard}
+    className={className}
+    style={style}
+    titleAs={titleAs}
+    placeholderImageConfig={{ width: '200', height: '150' }}
+  />
+}
+
+const dictionary = {
+  en: {
+    placeholderTitle: 'You don’t have any notifications yet.',
+    placeholderDescription: 'Relevant updates will show up here as soon as they’re available.',
+    placeholderSearchTitle: 'No notifications match your filters',
+    placeholderSearchDescription: 'Try changing the filters to see more results.',
+  },
+  pt: {
+    placeholderTitle: 'Você ainda não tem notificações.',
+    placeholderDescription: 'Quando houver alguma atualização relevante, ela será exibida aqui.',
+    placeholderSearchTitle: 'Nenhuma notificação corresponde aos filtros',
+    placeholderSearchDescription: 'Experimente mudar os filtros para encontrar mais notificações.',
+  },
+} satisfies Dictionary

package/src/components/notification/types.ts

@@ -1,72 +1,72 @@
-export type NotificationType = 'LOW' | 'MEDIUM' | 'HIGH'
-
-export type NotificationContext = 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI'
-
-//The following three notification types comes from the api swagger
-
-export type NotificationContentResponse = {
-  title: string,
-  description: string,
-};
-
-export type GetTenantNotificationsResponse = {
-  id: string,
-  content: {
-    [key: string]: NotificationContentResponse,
-  },
-  broadcast_level: 'ACCOUNT' | 'INDIVIDUAL' | 'PLATFORM' | 'RESOURCE',
-  context: 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI',
-  target?: string,
-  criticality: 'LOW' | 'MEDIUM' | 'HIGH',
-  call_to_action: string,
-  persistent: boolean,
-  committed: boolean,
-  last_until?: string,
-  trigger_at: string,
-  created_at?: string,
-  isBanner?: boolean,
-}
-
-export type ResponseModelGetTenantNotificationsResponse = {
-  items: GetTenantNotificationsResponse[],
-  total: number,
-}
-
-export type NotificationTypeFilters = NotificationType | UnreadType
-
-export interface NotificationFilters { 
-  filterBy?: 'criticality' | 'context',
-  filterValue?: string,
-  sort?: string,
-  direction?: string,
-  page?: any,
-  size?: string,
-}
-
-export interface NotificationCommitted {
-  id: string,
-  committed: boolean,
-}
-
-// fixme: please, do not ignore lint rules. They exist for a reason. Next major: transform this enum into a disjoint string type.
-// eslint-disable-next-line no-restricted-syntax
-export enum UnreadType {
-  Unread = 'unread',
-}
-
-export interface InfiniteScrollConfig {
-  /**
-   * Function to load more items into the list. Called when the scroll is almost reaching its end.
-   */
-  loadMore: () => void,
-  /**
-   * Set this to false to prevent the scroll from loading more items when it reaches the end.
-   */
-  hasMore: boolean,
-  /**
-   * Defines which scroll will be used as the target of the infinite scroll.
-   * 
-   * If null, nothing renders, it waits until it has a value.
-   */
-  scrollableTarget?: string | HTMLElement | null,
-}
+export type NotificationType = 'LOW' | 'MEDIUM' | 'HIGH'
+
+export type NotificationContext = 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI'
+
+//The following three notification types comes from the api swagger
+
+export type NotificationContentResponse = {
+  title: string,
+  description: string,
+};
+
+export type GetTenantNotificationsResponse = {
+  id: string,
+  content: {
+    [key: string]: NotificationContentResponse,
+  },
+  broadcast_level: 'ACCOUNT' | 'INDIVIDUAL' | 'PLATFORM' | 'RESOURCE',
+  context: 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI',
+  target?: string,
+  criticality: 'LOW' | 'MEDIUM' | 'HIGH',
+  call_to_action: string,
+  persistent: boolean,
+  committed: boolean,
+  last_until?: string,
+  trigger_at: string,
+  created_at?: string,
+  isBanner?: boolean,
+}
+
+export type ResponseModelGetTenantNotificationsResponse = {
+  items: GetTenantNotificationsResponse[],
+  total: number,
+}
+
+export type NotificationTypeFilters = NotificationType | UnreadType
+
+export interface NotificationFilters { 
+  filterBy?: 'criticality' | 'context',
+  filterValue?: string,
+  sort?: string,
+  direction?: string,
+  page?: any,
+  size?: string,
+}
+
+export interface NotificationCommitted {
+  id: string,
+  committed: boolean,
+}
+
+// fixme: please, do not ignore lint rules. They exist for a reason. Next major: transform this enum into a disjoint string type.
+// eslint-disable-next-line no-restricted-syntax
+export enum UnreadType {
+  Unread = 'unread',
+}
+
+export interface InfiniteScrollConfig {
+  /**
+   * Function to load more items into the list. Called when the scroll is almost reaching its end.
+   */
+  loadMore: () => void,
+  /**
+   * Set this to false to prevent the scroll from loading more items when it reaches the end.
+   */
+  hasMore: boolean,
+  /**
+   * Defines which scroll will be used as the target of the infinite scroll.
+   * 
+   * If null, nothing renders, it waits until it has a value.
+   */
+  scrollableTarget?: string | HTMLElement | null,
+}