@stack-spot/portal-layout 0.0.64 → 1.0.0-dev.1768482785050

package/src/WelcomeTour.tsx

@@ -0,0 +1,8 @@
+import { WelcomeTour as WelcomeTourComponent, useTour } from './components/tour'
+
+export const WelcomeTour = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { currentStep, addStep, finishStep, ...tourConfig } = useTour()
+
+  return <WelcomeTourComponent {...tourConfig} />
+}

package/src/components/Backdrop.tsx

@@ -0,0 +1,116 @@
+import { delay } from '@stack-spot/portal-components'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { getLayoutElements } from '../elements'
+import { overlay } from '../LayoutOverlayManager'
+import { CustomModalSize, RightPanelSize } from '../types'
+import { valueOfLayoutVar } from '../utils'
+
+export interface BackdropProps {
+  children: React.ReactNode,
+  visible: boolean,
+  /**
+   * A function to run when the backdrop is closed. Since the backdrop is a controlled element, this should be used to set the state
+   * of `visible` to false.
+   */
+  onClose: () => void,
+  style?: React.CSSProperties,
+  /**
+   * Makes this backdrop act as a modal or a right panel.
+   * - `actAs = 'modal'` adds the className 'modal-box' to the backdrop, making it behave like a modal with medium size.
+   * - `actAs = 'right-panel'` adds the className 'right-panel-box' to the backdrop, making it behave like a right-panel with medium size.
+   * - `actAs = { type: T, size: S }` adds the className 'modal-box' or 'right-panel-box' to the backdrop, depending on the value of `T`.
+   * The size will depend on the value of `S`.
+   */
+  actAs?: 'modal' | 'right-panel' | { type: 'modal', size: CustomModalSize } | { type: 'right-panel', size: RightPanelSize },
+  /**
+   * A persistent backdrop is always rendered, despite the value of `visible`. It still appears or disappears according to `visible`, but
+   * it never leaves the DOM.
+   * 
+   * This can help preserving complex animations.
+   * 
+   * Attention: if you have many complex backdrops with persistent = true, it may affect performance. 
+   * 
+   * @default false
+   */
+  persistent?: boolean,
+  /**
+   * This doesn't change the animation of the backdrop! Use this property if `persistent` is false and the backdrop's content is animated
+   * in a different time than `--modal-animation-duration` (layout css variable).
+   * 
+   * This lets you preserve the animations on your content when `persistent` is false.
+   */
+  animationMS?: number,
+  className?: string,
+}
+
+/**
+ * The backdrop is a component for creating a Modal content. This can have any shape or form, it's free to accept any kind of content, and,
+ * by default, it has no animations attached to it (with the exception of the backdrop's animation, which is a fade-in-out).
+ * 
+ * In general, to create modal and side-panels, you should use `overlay.showModal`, `overlay.showCustomModal`, `overlay.showRightPanel` and
+ * `overlay.showCustomRightPanel`.
+ * 
+ * Use this when:
+ * 1. Your content is neither a modal, nor a right panel, but it needs a backdrop. Meaning, it can't be animated like a modal, but still
+ * needs to show a backdrop.
+ * 2. Your content is a modal or a right panel, but it needs to update according to an external state. The ideal scenario is to have the
+ * modal content completely independent of the external state, but sometimes, we do need to interact with an external state and calling
+ * `overlay.show*` multiple times is not ideal.
+ * 
+ * Attention: if you open a modal/right panel through this component, you should not use the methods `overlay.close*` or `overlay.is*Open`
+ * to manage it.
+ * 
+ * @example
+ * Check the example below for rendering a medium-sized modal. Equivalent to `overlay.showModal`. Remember that calling `overlay.showModal`
+ * is always preferable. Use this only if you fall into the second case explained above.
+ * ```
+ * <Backdrop visible={isOpen} onClose={() => setOpen(false)} actAs="modal">
+ *   <OverlayContent type="modal" onClose={() => setOpen(false)} title="Title">
+ *     <p>Hello World!</p>
+ *   </OverlayContent>
+ * </Backdrop>
+ * ```
+ * @param props the component props {@link BackdropProps}.
+ */
+export const Backdrop = ({ children, visible = false, onClose, className, actAs, persistent, animationMS = 0, style }: BackdropProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [shouldRender, setShouldRender] = useState(!!persistent)
+  const renderDelay = useMemo(() => Math.max(parseFloat(valueOfLayoutVar('--modal-animation-duration')), animationMS) * 1000, [])
+  const backdropType = typeof actAs === 'string' ? actAs : actAs?.type
+  const backdropSize = typeof actAs === 'string' ? 'medium' : actAs?.size
+  const classes = listToClass([
+    className,
+    backdropType === 'modal' && 'modal-box',
+    backdropType === 'right-panel' && 'right-panel-box',
+    backdropSize,
+  ])
+
+  useEffect(() => {
+    (async () => {
+      if (visible) {
+        setShouldRender(true)
+        // arbitrary delay to make sure the content is rendered before actually showing it.
+        await delay(10)
+        overlay.showBackdrop(ref.current)
+      }
+      else {
+        overlay.closeBackdrop(ref.current)
+        await delay(renderDelay)
+        setShouldRender(false)
+      }
+    })()
+  }, [visible])
+
+  const backdropContent = (
+    <div ref={ref} data-custom-backdrop-visibility={visible} className={classes} style={style}>
+      {children}
+      {/* This button allows the OverlayManager to programmatically close any custom backdrop by calling their respective onClose prop. */}
+      <button data-custom-backdrop-close onClick={onClose} style={{ display: 'none' }}>Close</button>
+    </div>
+  )
+  
+  const backdrop = getLayoutElements().backdrop
+  return backdrop && (shouldRender || persistent) ? createPortal(backdropContent, backdrop) : null
+}

package/src/components/Contact/show-contact-modal.tsx

@@ -0,0 +1,71 @@
+import { Box, Button, Flex, IconBox, Text } from '@citric/core'
+import { ExternalLink } from '@citric/icons'
+import { Card } from '@citric/ui'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ReactElement } from 'react'
+import { overlay } from '../../LayoutOverlayManager'
+
+interface CardItemProps {
+  title: string,
+  description: string,
+  buttonText: string,
+  onClick?: () => void,
+  url?: string,
+  icon: ReactElement,
+  hasMargin?: boolean,
+}
+
+const CardItem = ({ title, description, hasMargin = false, buttonText, url, icon, onClick }: CardItemProps) => {
+  const Link = useAnchorTag()
+  return <Card sx={{ p: '7', bg: 'light.500', w: '100%' }}>
+    <Flex flexDirection="column">
+      <Text appearance="h5" mb="3">{title}</Text>
+      <Text appearance="microtext1" colorScheme="light.700" mb="8">{description}</Text>
+      <Box mt={hasMargin ? 5: 0}>
+        <Link onClick={onClick} href={url} target="_blank">
+          <Button size="md" colorScheme="inverse">
+            {buttonText}
+            <IconBox sx={{ ml: 2 }} colorIcon="inverse.contrastText">
+              {icon}
+            </IconBox>
+          </Button>
+        </Link>
+      </Box>
+    </Flex>
+  </Card>
+}
+
+const ContactUsComponent = ({ serviceNowUrl }: {serviceNowUrl:string}) => {
+  const t = useTranslate(dictionary)
+
+  return <Flex sx={{ gap: '8px' }} w={12} mb={10} flexWrap="nowrap">
+    <CardItem title={t.support} description={t.supportDescription} buttonText={t.supportButton} url={serviceNowUrl}
+      icon={<ExternalLink />} />
+  </Flex>
+}
+
+
+export const showContactUsModal = ({ title, serviceNowUrl }:{ serviceNowUrl:string, title: string }) => {
+  overlay.showModal({
+    title,
+    children: <ContactUsComponent serviceNowUrl={serviceNowUrl} />,
+    size: 'small',
+  })
+}
+
+const dictionary = {
+  en: {
+    contactUs: 'Contact us',
+    support: 'Support and feedback',
+    supportDescription: 'Need help or have a feedback? Connect with our Support team',
+    supportButton: 'Get in touch',
+  },
+  pt: {
+    contactUs: 'Fale conosco',
+    support: 'Suporte e feedback',
+    supportDescription: 'Precisa de ajuda ou tem algum feedback? Fale com o nosso time de Suporte',
+    supportButton: 'Entre em contato',
+  },
+} satisfies Dictionary
+

package/src/components/Dialog.tsx

@@ -6,35 +6,77 @@ import { useDictionary } from '../dictionary'
 import { OverlayContent } from './OverlayContent'
 
 interface Validation {
+  /**
+   * The expected value of the field.
+   */
   value: string,
+  /**
+   * A custom label for the input field.
+   */
   label?: string | ReactNode,
+  /**
+   * A placeholder for the input field.
+   */
   placeholder?: string,
 }
 
 export interface DialogOptions {
+  /**
+   * The dialog's title.
+   */
   title: string,
+  /**
+   * The dialog's subtitle.
+   */
   subtitle?: string,
-  message: ReactNode,
+  /**
+   * Function to call when the "go back" button is pressed. If unset, the button is not shown.
+   */
+  onGoBack?: () => void,
+  /**
+   * The dialog's content.
+   */
+  children: ReactNode,
+  /**
+   * A text for the confirm button. If left blank, the confirm button won't render.
+   */
   confirm?: string,
+  /**
+   * A text for the cancel button. If left blank, the cancel button won't render.
+   */
   cancel?: string,
+  /**
+   * A validation input field. If the validation is incorrect, the confirm button is disabled.
+   * If this is a string, the validation input's value must be equal to this string in order to enable the confirm button.
+   * If this is an object, a value, label and placeholder may be specified.
+   * Use false or undefined to not include a validation field.
+   */
   validation?: false | string | Validation,
   /**
+   * If this is a modal or a rightPanel.
    * @default modal
    */
   type?: 'modal' | 'panel',
   /**
-   * @default right if type is "panel", "right" otherwise.
+   * The placement for the confirm/cancel buttons.
+   * @default "left" if type is "panel", "right" otherwise.
    */
-  buttonPlacement?: 'left' | 'center' | 'right',
+  buttonPlacement?: 'left' | 'center' | 'right' | 'corners',
   /**
    * The color of the primary button.
-   * @default primary
+   * @default "primary"
    */
   buttonColor?: ColorSchemeName,
 }
 
-interface Props extends DialogOptions {
-  onConfirm: () => void,
+interface Props extends Omit<DialogOptions, 'message'> {
+  /**
+   * Function to run when the confirm button is clicked.
+   */
+  onConfirm?: () => void,
+  /**
+   * Function to run when the cancel button is clicked.
+   */
   onCancel: () => void,
 }
 
@@ -42,15 +84,22 @@ const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.C
   center: 'center',
   left: 'start',
   right: 'end',
+  corners: 'space-between',
 }
 
+/**
+ * A dialog, i.e. A UI with title, subtitle, close button, content and a set of buttons: cancel and confirm. May be placed under a Modal or
+ * RightPanel.
+ * @param props the React props of the component {@link Props}.
+ */
 export const Dialog = ({
-  message,
+  children,
   title,
   subtitle,
   cancel,
   confirm,
   validation,
+  onGoBack,
   onConfirm,
   onCancel,
   type = 'modal',
@@ -81,9 +130,9 @@ export const Dialog = ({
   }
 
   return (
-    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type}>
+    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type} onGoBack={onGoBack}>
       <Flex flexDirection="column" flex={1}>
-        {message}
+        {children}
         {renderValidation()}
       </Flex>
       {(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>

package/src/components/Header.tsx

@@ -1,23 +1,70 @@
 import { Flex } from '@citric/core'
+import { SelectionListProps } from '@stack-spot/portal-components/SelectionList'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { Logo } from '@stack-spot/portal-components/svg'
 import { ReactNode } from 'react'
-import { useAnchorTag } from '../layout-context'
-import { Logo } from '../svg/Logo'
+import { NotificationCenter } from './NotificationCenter'
 import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
-import { SelectionListProps } from './SelectionList'
 import { UserMenu } from './UserMenu'
 
 export interface HeaderProps {
+  /**
+   * The logo to show in the header, if the portal switch feature is disabled.
+   */
   logo?: ReactNode,
+  /**
+   * The url the logo links to, if the portal switch feature is disabled.
+   */
   logoHref?: string,
+  /**
+   * The username to show in the user menu.
+   */
   userName?: string,
+  /**
+   * The user image to show in the user menu.
+   */
+  userImage?: string,
+  /**
+   * The email to show in the user menu.
+   */
   email?: string,
+  /**
+   * A portal switch config. If not specified, disables the portal switch feature.
+   */
   portalSwitch?: PortalSwitcherProps['portals'],
+  /**
+   * The options to show in the user menu.
+   */
   options?: SelectionListProps['items'],
+  /**
+   * A custom React Node to show at the center of the header. This is a good place for a search field, for instance.
+   */
   center?: ReactNode,
+  /**
+   * A custom React Node to show at the right (end) of the header.
+   */
   right?: ReactNode,
+  /**
+   * Whether or not to show the notification center.
+   */
+  showNotificationCenter?: boolean,
 }
 
-export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch }: HeaderProps) => {
+/**
+ * The page header.
+ * @param props the React props for the header {@link HeaderProps}.
+ */
+export const Header = ({
+  logo,
+  logoHref,
+  center,
+  right,
+  userName,
+  email,
+  options,
+  portalSwitch,
+  showNotificationCenter,
+  userImage }: HeaderProps) => {
   const Link = useAnchorTag()
 
   return (
@@ -28,7 +75,8 @@ export const Header = ({ logo, logoHref, center, right, userName, email, options
       }
       <Flex flex={1}>{center}</Flex>
       {right}
-      {userName && <UserMenu userName={userName} email={email} options={options} />}
+      {showNotificationCenter && <NotificationCenter />}
+      {userName && <UserMenu userName={userName} email={email} options={options} userImage={userImage} />}
     </>
   )
 }

package/src/components/NotificationCenter/NotificationPanel.tsx

@@ -0,0 +1,40 @@
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ErrorFeedback } from '@stack-spot/portal-components/error'
+import { NotificationList, useNotificationController } from '@stack-spot/portal-components/Notifications'
+import { ScrollView } from '@stack-spot/portal-components/ScrollView'
+import { NotificationPanelHeader } from './NotificationPanelHeader'
+import { NotificationPanelFooter } from './NotificationsPanelFooter'
+import { StyledBackdrop } from './styled'
+import { NotificationPanelProps } from './types'
+
+export const NotificationPanel = ({ filter, onFilter, loading, error, visible, onClose, ...props }: NotificationPanelProps) => {
+  const controller = useNotificationController()
+  return (
+    <StyledBackdrop visible={visible} onClose={onClose} persistent>
+      <AnimatedHeight
+        className="notification-panel"
+        visible={visible}
+        header={<NotificationPanelHeader filter={filter} onChangeFilter={onFilter} onClose={onClose} />}
+        footer={<NotificationPanelFooter onClose={onClose} />}
+      >
+        <ScrollView direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>
+          {error ? <ErrorFeedback code={error.code} direction="column" /> : <NotificationList
+            {...props}
+            compact
+            loading={loading}
+            onCommit={id => controller.markAsCommitted(id)}
+            onUncommit={id => controller.markAsUncommitted(id)}
+            onClickViewNotification={() => {
+              onClose()
+              controller.config.onClickViewNotification?.()
+            }}
+            onClickAction={(id) => {
+              onClose()
+              controller.config.onClickAction?.(id)
+            }}
+          />}
+        </ScrollView>
+      </AnimatedHeight>
+    </StyledBackdrop>
+  )
+}

package/src/components/NotificationCenter/NotificationPanelHeader.tsx

@@ -0,0 +1,53 @@
+import { Button, Flex, IconBox, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { CLOSE_OVERLAY_ID } from '../OverlayContent'
+import { useNotificationsDictionary } from './dictionary'
+import { FilterButtonProps, NotificationPanelHeaderProps } from './types'
+
+const FilterButton = ({ current, onChangeFilter, value }: FilterButtonProps) => {
+  const t = useNotificationsDictionary()
+  const active = current === value
+
+  return (
+    <Button
+      appearance="text"
+      role="button"
+      aria-label={t[`${value}.ariaLabel`]}
+      aria-pressed={active}
+      onClick={() => onChangeFilter(value)}
+      className="filter-btn"
+    >
+      <Flex flexDirection="row" style={{ gap: '8px' }} alignItems="center">
+        <Text colorScheme="inverse" appearance="microtext1">
+          {t[`${value}.label`]}
+        </Text>
+      </Flex>
+    </Button>
+  )
+}
+
+export const NotificationPanelHeader = ({ filter, onChangeFilter, onClose }: NotificationPanelHeaderProps) => {
+  const t = useNotificationsDictionary()
+  return (
+    <Flex flexDirection="column">
+      <Flex justifyContent="space-between">
+        <Text appearance="h4" as="h2">
+          {t.notifications}
+        </Text>
+        <IconButton id={CLOSE_OVERLAY_ID} aria-label={t.close} onClick={onClose} sx={{ borderRadius: '50%' }}>
+          <IconBox size="xs">
+            <TimesMini />
+          </IconBox>
+        </IconButton>
+      </Flex>
+      <ul className="filter-list">
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="ALL" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="UNREAD" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="HIGH" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="MEDIUM" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="LOW" /></li>
+      </ul>
+    </Flex>
+  )
+}

package/src/components/NotificationCenter/NotificationsPanelFooter.tsx

@@ -0,0 +1,25 @@
+import { Button, Text } from '@citric/core'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { useNotificationController } from '@stack-spot/portal-components/Notifications'
+import { useNotificationsDictionary } from './dictionary'
+
+export const NotificationPanelFooter = ({ onClose }: { onClose: () => void }) => {
+  const t = useNotificationsDictionary()
+  const controller = useNotificationController()
+  const Link = useAnchorTag()
+  return (
+    <Button
+      as={Link}
+      onClick={onClose}
+      size="sm"
+      colorScheme="inverse"
+      appearance="text"
+      className="see-all"
+      href={controller.config.notificationsPath}
+    >
+      <Text appearance="microtext1">
+        {t.viewAll}
+      </Text>
+    </Button>
+  )
+}

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',
+    viewAll: 'View 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',
+    viewAll: '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,58 @@
+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 { 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()
+
+  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',
+        ])}
+      >
+        <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>
+  )
+}