@stack-spot/portal-components 0.0.18 → 1.0.0-dev.1770393008395

package/src/components/AnimatedHeight.tsx

@@ -0,0 +1,174 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { useManualRender } from '../hooks/manual-render'
+
+interface Props {
+  /**
+   * A header with fixed height.
+   */
+  header?: React.ReactElement,
+  /**
+   * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
+   * previous height to the next.
+   */
+  children: React.ReactElement,
+  /**
+   * A footer with fixed height.
+   */
+  footer?: React.ReactElement,
+  /**
+   * Whether or not this panel is visible. Changing this value, animates the panel's height.
+   * @default true
+   */
+  visible?: boolean,
+  /**
+   * The duration of the animations in milliseconds.
+   * @default 300
+   */
+  duration?: number,
+  /**
+   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+   * styles to it, but if you need to, use this property.
+   */
+  outerStyle?: React.CSSProperties,
+  /**
+   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+   * classes to it, but if you need to, use this property.
+   */
+  outerClassName?: string,
+  /**
+   * The style to apply to the whole panel.
+   * 
+   * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
+   */
+  style?: React.CSSProperties,
+  /**
+   * The class to apply to the whole panel.
+   * 
+   * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
+   */
+  className?: string,
+}
+
+interface Heights {
+  header: number,
+  content: number,
+  footer: number,
+  extra: number,
+}
+
+type ComponentStatus = 'initial' | 'hidden' | 'visible'
+
+const Box = styled.div<{ $animationMs: number }>`
+  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
+  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.initial {
+    opacity: 0;
+    pointer-events: none;
+    overflow: inherit;
+    transition: none;
+
+    &.content {
+      overflow: inherit;
+      transition: none;
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+  }
+`
+
+function getActualContent(wrapper: HTMLElement) {
+  const firstChild = wrapper.firstChild
+  if (!firstChild || !('tagName' in firstChild)) throw new Error('AnimatedHeight could not find any content to animate')
+  return firstChild as HTMLElement
+}
+
+function onChangeHeight(element: HTMLElement, callback: (height: number) => void) {
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0]
+    const newHeight = entry.borderBoxSize[0].blockSize
+    callback(newHeight)
+  })
+  resizeObserver.observe(element)
+  return () => resizeObserver.disconnect()
+}
+
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ * 
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ * 
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export const AnimatedHeight = (
+  { children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle } : Props,
+) => {
+  const { repaint } = useManualRender()
+  const boxRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const footerRef = useRef<HTMLDivElement>(null)
+  const heights = useRef<Heights>({ content: 0, footer: 0, header: 0, extra: 0 })
+  const status = useRef<ComponentStatus>('initial')
+
+  const updateHeight = useCallback(() => {
+    if (boxRef.current) {
+      boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`
+    }
+    if (contentRef.current) contentRef.current.style.height = `${heights.current.content}px`
+  }, [])
+
+  useLayoutEffect(() => {
+    let unsubscribe: (() => void) | undefined
+    if (headerRef.current) heights.current.header = headerRef.current.getBoundingClientRect().height
+    if (contentRef.current) {
+      heights.current.content = contentRef.current.getBoundingClientRect().height
+      unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
+        heights.current.content = height
+        if (status.current === 'visible' && boxRef.current) updateHeight()
+      })
+    }
+    if (footerRef.current) heights.current.footer = footerRef.current.getBoundingClientRect().height
+    if (wrapperRef.current) heights.current.extra = wrapperRef.current.getBoundingClientRect().height
+      - heights.current.header
+      - heights.current.footer
+      - heights.current.content
+    status.current = visible ? 'visible' : 'hidden'
+    repaint()
+    return unsubscribe
+  }, [])
+
+  useEffect(() => {
+    if (status.current === 'initial') return
+    status.current = visible ? 'visible' : 'hidden'
+    if (visible) updateHeight()
+    else if (boxRef.current) boxRef.current.style.height = '0'
+  }, [visible])
+
+  return (
+    <Box
+      ref={boxRef}
+      $animationMs={duration}
+      className={listToClass([outerClassName, status.current === 'initial' && 'initial'])}
+      style={outerStyle}
+    >
+      <div ref={wrapperRef} className={listToClass(['wrapper', className])} style={style}>
+        {header && <div ref={headerRef}>{header}</div>}
+        <div ref={contentRef} className="content">{children}</div>
+        {footer && <div ref={footerRef}>{footer}</div>}
+      </div>
+    </Box>
+  )
+}

package/src/components/AsyncContent.tsx

@@ -0,0 +1,78 @@
+import { Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
+
+export interface ErrorProps {
+  /**
+   * The error component to be rendered in case of error. It should receive error props
+   */
+  errorComponent:  React.FC<{ error: any }>,
+  /**
+   * The function to report the error.
+   */
+  reportError: (error: any) => void,
+}
+
+interface Props {
+  /**
+   * Whether or not to show the loading feedback.
+   */
+  loading: boolean,
+  /**
+   * A javascript error. Used to show error feedbacks.
+   */
+  error?: any,
+  /**
+   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+   * Can be either a React Ref Object or a query selector.
+   */
+  autofocus?: string | MutableRefObject<HTMLElement>,
+  /**
+   * The content to show if it's not loading or has errors.
+   */
+  children: React.ReactNode,
+  /**
+   * The error details component.
+  */
+  errorDetails: ErrorProps,
+}
+
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
+export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }: Props) => {
+  const ErrorComponent = errorDetails.errorComponent
+
+  useEffect(() => {
+    if (error) {
+      errorDetails.reportError(error)
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }, [error])
+
+  useLayoutEffect(() => {
+    if (!loading && !error) {
+      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
+    }
+  }, [loading, error])
+
+  if (loading) {
+    return (
+      <Flex alignItems="center" justifyContent="center" flex={1} style={{ padding: '80px' }} data-test-hint="loading">
+        <LoadingCircular />
+      </Flex>
+    )
+  }
+
+  if (error) {
+    return <ErrorComponent error={error} />
+  }
+
+  return children
+}

package/src/components/BannerWarning.tsx

@@ -1,21 +1,91 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { ExclamationTriangle } from '@citric/icons'
+
+import { Button, Flex, IconBox, SxProp, Text } from '@citric/core'
+import { ExclamationTriangle, TimesCircleFill } from '@citric/icons'
 import { Alert } from '@citric/ui'
+import { useState } from 'react'
+import { getCookie, setCookie } from '../utils/cookie'
+
+/**
+ * A styled and dismissible alert box for showing important warnings for the user.
+ *
+ * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
+ * @param props an object containing the content (children) to show inside the alert box.
+ */
+export const BannerWarning = ({ children, showCloseButton = true }:
+  { children: React.ReactNode, sx?: SxProp, showCloseButton?: boolean }) => {
+  const bannerKey = 'bannerClosed'
+
+  const [isVisible, setIsVisible] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const isBannerClosed = getCookie(bannerKey) === 'true'
+      return !isBannerClosed
+    }
+    return false
+  })
+
+  const handleClose = () => {
+    setCookie(bannerKey, 'true')
+    setIsVisible(false)
+  }
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Flex sx={{ zIndex: '1', w: '12', mb: 7 }}>
+      <Alert
+        colorScheme="warning"
+        sx={{
+          position: 'relative',
+          px: 3,
+          py: 1,
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between',
+          height: 'auto',
+          padding: `${showCloseButton ? '0.5rem' : '1rem'}`,
+        }}
+      >
+        <Flex
+          sx={{
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+          }}
+        >
+          <IconBox
+            size="sm"
+            colorIcon="light.500"
+          >
+            <ExclamationTriangle />
+          </IconBox>
+          <Text
+            sx={{
+              ml: 5,
+            }}
+            appearance="body2"
+            colorScheme="warning.contrastText"
+          >
+            {children}
+          </Text>
+        </Flex>
 
-export const BannerWarning = ({ children }: { children: React.ReactNode }) => (
-  <Flex sx={{ position: 'fixed', top: 0, zIndex: '999', w: 12, left: 0 }}>
-    <Alert colorScheme="warning" sx={{ p: 2, w: 12, justifyContent: 'center', height: ['60px', '100px'] }}>
-      <IconBox size="md" colorIcon="light.500" sx={{ display: ['block', 'none'] }}>
-        <ExclamationTriangle />
-      </IconBox>
-      <Flex sx={{ py: [5, 3] }}>
-        <Text sx={{ fontSize: ['16px', '14px'], whiteSpace: 'pre-line' }} colorScheme="warning.contrastText">
-          {children}
-        </Text>
-      </Flex>
-      <IconBox size="md" colorIcon="light.500" sx={{ display: ['block', 'none'] }}>
-        <ExclamationTriangle />
-      </IconBox>
-    </Alert>
-  </Flex>
-)
+        {showCloseButton && <Button
+          appearance={'text'}
+          onClick={handleClose}
+          sx={{
+            p: 0,
+            ml: 2,
+          }}
+        >
+          <IconBox
+            size="lg"
+            colorIcon="light.500"
+          >
+            <TimesCircleFill />
+          </IconBox>
+        </Button>}
+      </Alert>
+    </Flex>
+  )
+}

package/src/components/Breadcrumb/index.tsx

@@ -2,6 +2,7 @@ import { Text } from '@citric/core'
 import { Skeleton } from '@citric/ui'
 import { last } from 'lodash'
 import { useEffect, useMemo } from 'react'
+import { useAnchorTag } from '../../context/anchor'
 import { titleEffect } from '../../hooks/title'
 import { Box } from './styled'
 
@@ -20,10 +21,6 @@ interface BreadcrumbItem {
    * If this route is accessible, the link to it.
    */
   href?: string,
-  /**
-   * Anchor from Citron to be used
-   */
-  anchorTag?: AnchorComponent,
 }
 
 interface Props {
@@ -45,16 +42,20 @@ interface Props {
    */
   shouldUpdatePageTitle?: boolean,
   /**
-   * Anchor from Citron to be used
+   * Key of the current page. If an item has this key, it won't be rendered as a link and will be marked as active.
    */
-  anchorTag?: AnchorComponent,
+  currentPageKey?: string,
+}
+
+interface ItemProps extends Pick<Props, 'currentPageKey'> {
+  item: BreadcrumbItem,
 }
 
-const BreadcrumbItem = ({ label, href, anchorTag }: BreadcrumbItem) => {
+const BreadcrumbItem = ({ item: { label, href, key }, currentPageKey }: ItemProps) => {
   const text = <Text appearance="breadcrumb">{label}</Text>
-  const anchor: AnchorComponent = props => <a {...props} href={href}>{text}</a>
-  const LinkAnchor = anchorTag ?? anchor
-  return href ? <LinkAnchor href={href}>{text}</LinkAnchor> : text
+  const Link = useAnchorTag()
+  const shouldBeLink = href && currentPageKey != key
+  return <li>{shouldBeLink ? <Link href={href}>{text}</Link> : text}</li>
 }
 
 /**
@@ -62,9 +63,10 @@ const BreadcrumbItem = ({ label, href, anchorTag }: BreadcrumbItem) => {
  * 
  * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
  */
-export const BreadcrumbList = ({ items, isLoading, shouldUpdatePageTitle, anchorTag }: Props) => {
-  const listItems = useMemo(() => items.map(item =>
-    <li key={item.key || item.label}><BreadcrumbItem anchorTag={anchorTag}  {...item} /></li>), [items, anchorTag],
+export const BreadcrumbList = ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }: Props) => {  
+  const listItems = useMemo(
+    () => items.map(item => <BreadcrumbItem key={item.key || item.label} item={item} currentPageKey={currentPageKey} />),
+    [items],
   )
   useEffect(() => {
     const title = last(items)?.label

package/src/components/Breadcrumb/styled.ts

@@ -2,7 +2,8 @@ import { getFontAppearance } from '@citric/core/dist/utils/theme'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
-export const Box = styled.nav`
+// the type below should be inferred, but a bug in TS+PNPM prevents it: https://github.com/microsoft/TypeScript/issues/42873
+export const Box: React.FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> = styled.nav`
   margin-bottom: 24px;
   
   ul {

package/src/components/ButtonLoading.tsx

@@ -0,0 +1,29 @@
+import { Button, Text } from '@citric/core'
+import { ButtonProps } from '@citric/core/dist/Button'
+import { LoadingCircular } from '@citric/ui'
+import { ReactNode } from 'react'
+
+interface Props extends ButtonProps {
+  isLoading?: boolean,
+  loadingSize?: 'sm' | 'md' | 'lg',
+  children: ReactNode,
+  onClick?: () => void,
+}
+
+export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }: Props) => (
+  <Button
+    type="submit"
+    {...props}
+    disabled={isLoading || disabled}
+    sx={{ ...sx, position: 'relative' }}
+  >
+    <Text as="span" sx={{ visibility: isLoading ? 'hidden' : 'visible' }}>
+      {children}
+    </Text>
+    <LoadingCircular
+      colorScheme={props.colorScheme}
+      size={loadingSize}
+      sx={{ visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' }}
+    />
+  </Button>
+)

package/src/components/ChatBot.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, IconBox, Styles } from '@citric/core'
 import { QuestionAnswer, Times } from '@citric/icons'
-import { addOrRemoveServiceNowLauncher, getServiceNowLauncher } from '../hooks/service-now'
+import { CHAT_BUTTON_ID, CHAT_BUTTON_WRAPPER_ID, getServiceNowLauncher, hideChatWindow, showChatWindow } from '../hooks/service-now'
 
 const styles: Styles = {
   content: {
@@ -44,24 +44,29 @@ const styles: Styles = {
   },
 }
 
+/**
+ * A button for opening or closing the service-now chat window.
+ * 
+ * This is a circular orange button with a chat icon if the chat window is closed or a close icon if the chat window is open.
+ */
 export const ChatBot = () => {
   const handleOpenChatBot = () => {
     const chatIframe = getServiceNowLauncher()
     if (chatIframe) {
-      const isShow = chatIframe.classList.contains('show')
-      if (isShow) {
-        addOrRemoveServiceNowLauncher('remove')
+      const isVisible = chatIframe.classList.contains('show')
+      if (isVisible) {
+        hideChatWindow()
       } else {
-        addOrRemoveServiceNowLauncher('add')
+        showChatWindow()
       }
     }
   }
 
   return (
-    <Flex id="service-now-content" sx={styles.content}>
+    <Flex id={CHAT_BUTTON_WRAPPER_ID} sx={styles.content}>
       <Button
         onClick={handleOpenChatBot}
-        id="service-now-button"
+        id={CHAT_BUTTON_ID}
         sx={styles.button}
       >
         <IconBox

package/src/components/ContentValidateFilter.tsx

@@ -0,0 +1,15 @@
+import { PlaceholderResourceEmptySearch } from './Placeholder'
+
+export const ContentValidateFilter = ({
+  searchText,
+  listLength,
+  children,
+}: {
+  searchText?: string,
+  listLength: number,
+  children: React.ReactNode,
+}) => {
+  if (!listLength && searchText) return <PlaceholderResourceEmptySearch />
+  return <>{children}</>
+}
+