@stack-spot/portal-components 2.26.0 → 2.27.1

package/src/components/AsyncContent.tsx

@@ -1,78 +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
-}
+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,91 +1,91 @@
-
-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>
-
-        {showCloseButton && <Button
-          appearance={'text'}
-          onClick={handleClose}
-          sx={{
-            p: 0,
-            ml: 2,
-          }}
-        >
-          <IconBox
-            size="lg"
-            colorIcon="light.500"
-          >
-            <TimesCircleFill />
-          </IconBox>
-        </Button>}
-      </Alert>
-    </Flex>
-  )
-}
+
+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>
+
+        {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

@@ -1,76 +1,76 @@
-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'
-
-export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
-
-interface BreadcrumbItem {
-  /**
-   * A unique id for this link of the breadcrumb. If not provided, the label will be used.
-   */
-  key?: string,
-  /**
-   * Label for this route in the breadcrumb.
-   */
-  label: string,
-  /**
-   * If this route is accessible, the link to it.
-   */
-  href?: string,
-}
-
-interface Props {
-  /**
-   * The items to show.
-   */
-  items: BreadcrumbItem[],
-  /**
-   * When true, a loading feedback (skeleton) will show instead of the list.
-   */
-  isLoading?: boolean,
-  /**
-   * If set to true, after mounted, as soon as loading is false, the page title will be prepended with `$name - `, where `$name` is the
-   * label of the last item in `items`.
-   * 
-   * When unmounted, the title will go back to the previous value.
-   * 
-   * @default false
-   */
-  shouldUpdatePageTitle?: boolean,
-  /**
-   * 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.
-   */
-  currentPageKey?: string,
-}
-
-interface ItemProps extends Pick<Props, 'currentPageKey'> {
-  item: BreadcrumbItem,
-}
-
-const BreadcrumbItem = ({ item: { label, href, key }, currentPageKey }: ItemProps) => {
-  const text = <Text appearance="breadcrumb">{label}</Text>
-  const Link = useAnchorTag()
-  const shouldBeLink = href && currentPageKey != key
-  return <li>{shouldBeLink ? <Link href={href}>{text}</Link> : text}</li>
-}
-
-/**
- * Builds a breadcrumb navigator based on the items passed in the properties.
- * 
- * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
- */
-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
-    if (shouldUpdatePageTitle && title && !isLoading) return titleEffect(title)
-  }, [items, isLoading])
-  return <Box>{isLoading ? <Skeleton height="21px" /> : <ul>{listItems}</ul>}</Box>
-}
+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'
+
+export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
+
+interface BreadcrumbItem {
+  /**
+   * A unique id for this link of the breadcrumb. If not provided, the label will be used.
+   */
+  key?: string,
+  /**
+   * Label for this route in the breadcrumb.
+   */
+  label: string,
+  /**
+   * If this route is accessible, the link to it.
+   */
+  href?: string,
+}
+
+interface Props {
+  /**
+   * The items to show.
+   */
+  items: BreadcrumbItem[],
+  /**
+   * When true, a loading feedback (skeleton) will show instead of the list.
+   */
+  isLoading?: boolean,
+  /**
+   * If set to true, after mounted, as soon as loading is false, the page title will be prepended with `$name - `, where `$name` is the
+   * label of the last item in `items`.
+   * 
+   * When unmounted, the title will go back to the previous value.
+   * 
+   * @default false
+   */
+  shouldUpdatePageTitle?: boolean,
+  /**
+   * 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.
+   */
+  currentPageKey?: string,
+}
+
+interface ItemProps extends Pick<Props, 'currentPageKey'> {
+  item: BreadcrumbItem,
+}
+
+const BreadcrumbItem = ({ item: { label, href, key }, currentPageKey }: ItemProps) => {
+  const text = <Text appearance="breadcrumb">{label}</Text>
+  const Link = useAnchorTag()
+  const shouldBeLink = href && currentPageKey != key
+  return <li>{shouldBeLink ? <Link href={href}>{text}</Link> : text}</li>
+}
+
+/**
+ * Builds a breadcrumb navigator based on the items passed in the properties.
+ * 
+ * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
+ */
+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
+    if (shouldUpdatePageTitle && title && !isLoading) return titleEffect(title)
+  }, [items, isLoading])
+  return <Box>{isLoading ? <Skeleton height="21px" /> : <ul>{listItems}</ul>}</Box>
+}

package/src/components/Breadcrumb/styled.ts

@@ -1,37 +1,37 @@
-import { getFontAppearance } from '@citric/core/dist/utils/theme'
-import { theme } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
-
-// 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 {
-    display: flex;
-    flex-direction: row;
-  }
-
-  li {
-    display: flex;
-    flex-direction: row;
-
-    &:before {
-      content: '/';
-      font: ${({ theme }) => getFontAppearance(theme as any, 'breadcrumb') as any};
-      margin: 0 10px;
-      color: ${theme.color.light['700']};
-    }
-
-    &:first-child:before {
-      content: none;
-    }
-  }
-
-  a {
-    color: ${theme.color.light['700']};
-    &:hover {
-      text-decoration: underline;
-      color: ${theme.color.light.contrastText};
-    }
-  }
-`
+import { getFontAppearance } from '@citric/core/dist/utils/theme'
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+// 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 {
+    display: flex;
+    flex-direction: row;
+  }
+
+  li {
+    display: flex;
+    flex-direction: row;
+
+    &:before {
+      content: '/';
+      font: ${({ theme }) => getFontAppearance(theme as any, 'breadcrumb') as any};
+      margin: 0 10px;
+      color: ${theme.color.light['700']};
+    }
+
+    &:first-child:before {
+      content: none;
+    }
+  }
+
+  a {
+    color: ${theme.color.light['700']};
+    &:hover {
+      text-decoration: underline;
+      color: ${theme.color.light.contrastText};
+    }
+  }
+`

package/src/components/ButtonLoading.tsx

@@ -1,29 +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>
-)
+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>
+)