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

package/src/components/Toaster.tsx

@@ -1,16 +1,95 @@
+import { Flex, Text } from '@citric/core'
 import { TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
-import { CloseButtonProps, ToastContainer } from 'react-toastify'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { useMemo } from 'react'
+import type { CloseButton as DefaultCloseButton } from 'react-toastify'
+import { ToastContainer, toast } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import { useDictionary } from '../dictionary'
 
+type CloseButtonProps = Parameters<typeof DefaultCloseButton>[0]
+
+export const TOASTER_CLOSE_BTN_CLASS = 'btn-close'
+
 const CloseButton = ({ closeToast }: CloseButtonProps) => {
   const t = useDictionary()
   return (
-    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
+    <IconButton appearance="circle" color="light" size="xs" className={TOASTER_CLOSE_BTN_CLASS} onClick={closeToast} title={t.dismiss}>
       <TimesMini />
     </IconButton>
   )
 }
 
-export const Toaster = () => <ToastContainer closeButton={CloseButton} />
+/**
+ * Uses react-toastify to render a Toaster based on the Citric DS.
+ */
+export const Toaster = () => <ToastContainer closeButton={CloseButton} className="container-toaster"/>
+
+export interface ToasterAction {
+  /**
+   * The button's label.
+   */
+  label: string,
+  /**
+   * A function to run once the button is clicked.
+   */
+  onClick?: (event: React.MouseEvent) => void,
+  /**
+   * If this is set, instead of a button, an anchor is rendered with this href.
+   */
+  href?: string,
+  /**
+   * Whether or not to close the toaster once the button is clicked.
+   * @default true
+   */
+  closeOnClick?: boolean,
+}
+
+interface ToasterContentProps {
+  id: number | string,
+  actions?: ToasterAction[],
+  onClick?: (event: React.MouseEvent) => void,
+  title?: string,
+  message: React.ReactNode,
+}
+
+const actionStyle: React.CSSProperties = {
+  background: 'transparent',
+  border: 'none',
+  padding: 0,
+  color: 'inherit',
+  font: 'inherit',
+  fontWeight: 500,
+  cursor: 'pointer',
+}
+
+/**
+ * Renders a toaster with the default layout for toasters.
+ */
+export const ToasterContent = ({ id, message, actions, onClick, title }: ToasterContentProps) => {
+  const Link = useAnchorTag()
+  const buttons = useMemo(() => actions?.map(
+    ({ label, href, onClick, closeOnClick = true }) => (
+      <Text
+        key={label}
+        as={href ? Link : 'button'}
+        href={href}
+        style={actionStyle}
+        onClick={(event: React.MouseEvent) => {
+          onClick?.(event)
+          if (closeOnClick) toast.dismiss(id)
+        }}
+      >
+        {label}
+      </Text>
+    ),
+  ), [actions])
+  return (
+    <div onClick={onClick}>
+      <h2>{title}</h2>
+      {typeof message === 'string' ? <p>{message}</p> : message}
+      {buttons?.length ? <Flex style={{ gap: '12px', marginTop: '12px' }}>{buttons}</Flex> : null}
+    </div>
+  )
+}

package/src/components/TypeForm/hook.tsx

@@ -0,0 +1,13 @@
+import { useEffectOnce } from '@stack-spot/portal-components'
+import { loadTypeFormScript } from './utils'
+
+export function useTypeFormEffect() {
+
+  const handleInit = async () => {
+    await loadTypeFormScript()
+  }
+
+  useEffectOnce(() => {
+    handleInit()
+  })
+}

package/src/components/TypeForm/index.tsx

@@ -0,0 +1,50 @@
+import { Box, Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { useEffect, useMemo, useState } from 'react'
+
+export interface TypeFormProps {
+  dataTfLive: string,
+  hiddenProps?: Record<string, string | number>,
+}
+
+export const TypeForm = ({
+  dataTfLive,
+  hiddenProps,
+}: TypeFormProps) => {
+
+
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    (window as any).tf?.load()
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 2000)
+  }, [])
+
+  const hiddenPropsString = useMemo(() => {
+    if (hiddenProps) {
+      return Object.entries(hiddenProps)
+        .map(([key, value]) => `${key}=${value}`)
+        .join(',')
+    }
+  }, [hiddenProps])
+
+  const typeform = useMemo(() => <Box>
+    <div
+      data-tf-live={dataTfLive}
+      data-tf-hidden={hiddenPropsString}
+    />
+  </Box>, [dataTfLive, hiddenPropsString])
+
+  return (
+    <Box sx={{ minWidth: '650px', minHeight: '500px' }}>
+      {isLoading && <Flex alignItems="center" justifyContent="center" w="12" sx={{ height: '100%' }}>
+        <LoadingCircular />
+      </Flex>}
+      <Box sx={{ opacity: isLoading ? '0' : 1 }}>
+        {typeform}
+      </Box>
+    </Box>
+  )
+}

package/src/components/TypeForm/show-typeform-modal.tsx

@@ -0,0 +1,10 @@
+import { overlay } from '../../LayoutOverlayManager'
+import { TypeForm, TypeFormProps } from '.'
+
+export const showTypeFormModal = ({ title, ...props }: TypeFormProps & { title: string }) => {
+  overlay.showModal({
+    title: title,
+    children: <TypeForm {...props} />,
+    size: 'large',
+  })
+}

package/src/components/TypeForm/utils.ts

@@ -0,0 +1,8 @@
+export const loadTypeFormScript = () => new Promise<void>((resolve, reject) => {
+  const script = document.createElement('script')
+  script.setAttribute('src', '//embed.typeform.com/next/embed.js')
+  script.setAttribute('async', 'true')
+  script.onload = () => resolve()
+  script.onerror = (error) => reject(error)
+  document.body.appendChild(script)
+})

package/src/components/UserMenu.tsx

@@ -1,15 +1,29 @@
 import { Flex, IconBox, LinkBox, Text } from '@citric/core'
 import { ChevronDown } from '@citric/icons'
 import { Avatar } from '@citric/ui'
+import { SelectionList, SelectionListProps } from '@stack-spot/portal-components/SelectionList'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { styled } from 'styled-components'
-import { SelectionList, SelectionListProps } from './SelectionList'
+import { userMenuManager } from './user-menu-manager'
 
 interface Props {
+  /**
+   * The user name.
+   */
   userName: string,
+  /**
+   * The user image to show in the user menu.
+   */
+  userImage?: string,
+  /**
+   * The user email.
+   */
   email?: string,
+  /**
+   * The menu options.
+   */
   options?: SelectionListProps['items'],
 }
 
@@ -57,18 +71,23 @@ const UserMenuBox = styled.div`
   }
 `
 
-const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
+const UserMenuHeader = ({ userName, email, userImage }: Omit<Props, 'options'>) => (
   <div className="user-menu-header">
-    <Avatar size="xs">{userName}</Avatar>
+    <Avatar size="xs">{userImage ? (<img src={userImage} />) : userName}</Avatar>
     <Text appearance="body1" className="username">{userName}</Text>
     {email && <Text appearance="microtext1" className="email" colorScheme="light.700">{email}</Text>}
   </div>
 )
 
-export const UserMenu = ({ userName, email, options }: Props) => {
+/**
+ * Renders the user menu.
+ * @param props the component's props {@link Props}.
+ */
+export const UserMenu = ({ userName, email, options, userImage }: Props) => {
   const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
 
+  useEffect(() => userMenuManager.subscribe(setVisible), [])
   return (
     <UserMenuBox>
       <LinkBox
@@ -79,7 +98,12 @@ export const UserMenu = ({ userName, email, options }: Props) => {
         aria-label={interpolate(t.accountMenu, [userName])}
       >
         <Flex alignItems="center">
-          <Avatar size="xs" aria-label={interpolate(t.accountMenu, [userName])}>{userName}</Avatar>
+          <Avatar size="xs"
+            aria-label={
+              interpolate(t.accountMenu, [userName])}>
+            {userImage ? (
+              <img src={userImage} />
+            ) : userName}</Avatar>
           <IconBox colorIcon="inverse.500" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
             <ChevronDown />
           </IconBox>
@@ -90,10 +114,10 @@ export const UserMenu = ({ userName, email, options }: Props) => {
         ? <SelectionList
           id={USER_MENU_ID}
           visible={visible}
-          before={<UserMenuHeader userName={userName} email={email} />}
+          before={<UserMenuHeader userName={userName} email={email} userImage={userImage} />}
           items={options!}
           onHide={() => setVisible(false)}
-          maxHeight="600px"
+          maxHeight="calc(100vh - 70px)"
         />
         : null
       }

package/src/components/error/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
+import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/error'
 import { Component } from 'react'
-import { ErrorFeedback } from './ErrorFeedback'
-import { ErrorDescription, ErrorManager } from './ErrorManager'
+import { ErrorManager } from './ErrorManager'
 
 interface State extends ErrorDescription {
   hasError: boolean,
@@ -10,6 +10,15 @@ interface Props {
   children: React.ReactNode,
 }
 
+/**
+ * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
+ * 
+ * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
+ * 
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props)

package/src/components/error/ErrorManager.ts

@@ -1,31 +1,47 @@
-export interface ErrorDescription {
-  code?: number,
-  message?: string,
-  debug?: boolean,
-}
+import { ErrorDescription } from '@stack-spot/portal-components/error'
 
 export type DescriptionFn = (error: any) => ErrorDescription
 export type ErrorHandler = (error: any) => void
 
+/**
+ * Setup how the Error Boundaries deal with errors.
+ */
 export class ErrorManager {
   private static descriptionFunction: DescriptionFn = error => ({
     message: error.message || `${error}`,
   })
   private static errorHandler: ErrorHandler | undefined
 
+  /**
+   * Sets a custom logic for generating error messages and codes. Also setups the environment (debug or not).
+   * @param fn a function that, given an error, generates its description.
+   */
   static setDescriptionFunction(fn: DescriptionFn) {
     this.descriptionFunction = fn
   }
 
+  /**
+   * Sets a custom error handler, i.e. a function to run every time an error is catch by an ErrorBoundary.
+   * @param fn a function that receives the error.
+   */
   static setErrorHandler(handler: ErrorHandler) {
     this.errorHandler = handler
   }
 
+  /**
+   * Uses the error descriptor to describe an error.
+   * @param error the error
+   * @returns the error description
+   */
   static describe(error: any) {
     return this.descriptionFunction(error)
   }
 
+  /**
+   * Runs the error handler, if any has been setup.
+   * @param error the error
+   */
   static runErrorHandler(error: any) {
-    return this.errorHandler?.(error)
+    this.errorHandler?.(error)
   }
 }

package/src/components/error/SilentErrorBoundary.tsx

@@ -1,16 +1,26 @@
+import { ErrorDescription } from '@stack-spot/portal-components/error'
 import { theme } from '@stack-spot/portal-theme'
 import { Component } from 'react'
-import { ErrorDescription, ErrorManager } from './ErrorManager'
+import { ErrorManager } from './ErrorManager'
 
 interface State extends ErrorDescription {
   hasError: boolean,
-  message?: string,
 }
 
 interface Props {
   children: React.ReactNode,
 }
 
+/**
+ * An Error Boundary that doesn't render anything if any of its children throws. If the environment is not production, a small error icon
+ * is rendered instead of nothing.
+ * 
+ * To customize how the error is logged, setup an error descriptor for the ErrorManager class. If you're using the component `Layout` or
+ * `RawLayout`, you can use the property `errorDescriptor`.
+ * 
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
 export class SilentErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props)