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

package/src/components/LazyMarkdown/BlockquoteMd.tsx

@@ -0,0 +1,107 @@
+import { Blockquote, Box, Flex, IconBox, Text } from '@citric/core'
+import { OneOfColorSchemes } from '@citric/core/dist/theme-types'
+import * as icons from '@citric/icons'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { createElement } from 'react'
+
+type IconName = keyof typeof icons
+
+/**
+ * BlockquoteMd component that renders a styled blockquote with an icon and text based on the provided props.
+ *
+ * @param {Object} props - The props for the BlockquoteMd component.
+ * @param {any} props.props - The properties passed to the component.
+ * @returns {JSX.Element} The BlockquoteMd component.
+ */
+export const BlockquoteMd = ({ props }: { props: any }) => {
+  const t = useTranslate(dictionary)
+  const arrayNode = props.node
+  const blockItem = arrayNode?.children[1]?.children[0]?.value
+  const blockStyle = blockquoteAlertStyle(blockItem)
+
+  if (blockStyle) {
+    const childrenBlock = arrayNode?.children[3]?.children[1].children[0].value
+    return (
+      <Flex sx={{ borderRadius: 'sm', bg: 'light.500', my: 3 }}>
+        <Blockquote colorScheme={blockStyle.color}>
+          <Box>
+            <Flex>
+              <IconBox appearance="square" colorIcon={`${blockStyle.color}.400`} sx={{ mr: 4 }}>
+                {createElement(icons[blockStyle.icon])}
+              </IconBox>
+              <Text sx={{ color: `${blockStyle.color}.400` }} weight="medium">
+                {t[blockItem as keyof typeof t]}
+              </Text>
+            </Flex>
+            <Box my={3}>
+              <Text>{childrenBlock}</Text>
+            </Box>
+          </Box>
+        </Blockquote>
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex sx={{ borderRadius: 'sm', bg: 'light.500', my: 3 }}>
+      <Blockquote>
+        <Text {...props} />
+      </Blockquote>
+    </Flex>
+  )
+}
+
+/**
+ * Get the style for the blockquote based on the block rule.
+ *
+ * @param {string} blockRule - The block rule to determine the style.
+ * @returns {{ color: OneOfColorSchemes, icon: IconName }} The style object containing color and icon.
+ */
+function blockquoteAlertStyle(blockRule: string) {
+  const style: Record<string, { color: OneOfColorSchemes, icon: IconName }> = {
+    '[!NOTE]': {
+      color: 'inverse',
+      icon: 'Document',
+    },
+    '[!INFO]': {
+      color: 'secondary',
+      icon: 'InfoCircle',
+    },
+    '[!IMPORTANT]': {
+      color: 'tertiary',
+      icon: 'MobileComments',
+    },
+    '[!TIP]': {
+      color: 'success',
+      icon: 'Star',
+    },
+    '[!WARNING]': {
+      color: 'warning',
+      icon: 'ExclamationTriangle',
+    },
+    '[!DANGER]': {
+      color: 'danger',
+      icon: 'Bug',
+    },
+  }
+  return style[blockRule]
+}
+
+const dictionary = {
+  en: {
+    '[!NOTE]': 'Note',
+    '[!INFO]': 'Info',
+    '[!IMPORTANT]': 'Important',
+    '[!TIP]': 'Tip',
+    '[!WARNING]xw': 'Warning',
+    '[!DANGER]': 'Danger',
+  },
+  pt: {
+    '[!NOTE]': 'Nota',
+    '[!INFO]': 'Informação',
+    '[!IMPORTANT]': 'Importante',
+    '[!TIP]': 'Dica',
+    '[!WARNING]': 'Atenção',
+    '[!DANGER]': 'Risco',
+  },
+} satisfies Dictionary

package/src/components/LazyMarkdown/CodeViewer.tsx

@@ -0,0 +1,161 @@
+import { Box, Flex, Text } from '@citric/core'
+import { getColor, getRadius } from '@citric/core/dist/utils/theme'
+import { Copy, Refresh } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import styled from 'styled-components'
+
+const style = {
+  scrollable: {
+    minHeight: '64px',
+    maxHeight: '232px',
+    overflow: 'auto',
+    '&::-webkit-scrollbar': {
+      width: '4px',
+      height: '4px',
+    },
+    '&::-webkit-scrollbar-track': {
+      background: 'light.400',
+      borderRadius: '2px',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      background: 'light.700',
+      borderRadius: '2px',
+    },
+  },
+}
+
+const Wrapper = styled(Box)`
+  background-color: ${theme.color.gray[900]};
+  border-radius: ${({ theme }) => getRadius(theme as any, 'xs')};
+  position: relative;
+  padding: 8px;
+  overflow: hidden;
+
+  > .scrollable-container {
+    min-height: 64px;
+    max-height: 232px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: ${theme.color.light[400]};
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-thumb:hover {
+      background: ${theme.color.light[700]};
+      border-radius: 2px;
+    }
+  }
+
+  pre {
+    background-color: transparent;
+    font-family: 'Roboto Mono';
+    font-size: 14.4px;
+    padding: 0;
+    margin-top: 0;
+    overflow: unset;
+    text-shadow: none;
+    color: ${theme.color.gray[50]};
+  }
+
+  .hljs-string {
+    color: ${theme.color.teal[300]};
+  }
+  .hljs-tag {
+    color: ${({ theme }) => getColor(theme as any, 'teal')};
+  }
+  .hljs-attr {
+    color: ${theme.color.gray[50]};
+  }
+  .hljs-number {
+    color: ${theme.color.gray[300]};
+  }
+  .hljs-property {
+    color: ${theme.color.gray[50]};
+  }
+  .hljs-keyword {
+    color: ${theme.color.blue[200]};
+  }
+  .comment {
+    color: ${theme.color.gray[400]};
+  }
+  .hljs-expression {
+    color: ${theme.color.orange[400]};
+  }
+
+  .button-group {
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    display: flex;
+
+    button {
+      margin-left: 6px;
+      &:focus {
+        background-color: ${({ theme }) => getColor(theme as any, 'light.300')};
+      }
+    }
+  }
+`
+
+interface Props {
+  language: string,
+  data: string,
+  onClickRefresh?: () => void,
+  height?: string,
+  scrollable?: boolean,
+  copyButton?: boolean,
+}
+
+/**
+ * CodeViewer component that displays code with syntax highlighting based on application theme and optional copy and refresh buttons.
+ *
+* @param options the props for rendering the component: {@link Props}. 
+ */
+export const CodeViewer = ({ language, data, onClickRefresh, scrollable = true, copyButton }: Props) => {
+  const t = useTranslate(codeViewerLocale)
+
+  return (
+    <Wrapper>
+      {data ? (
+        <>
+          <Flex style={scrollable ? style.scrollable : undefined}>
+            <SyntaxHighlighter language={language} showLineNumbers useInlineStyles={false}>
+              {String(data).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          </Flex>
+          <div className="button-group">
+            {onClickRefresh && (
+              <IconButton onClick={onClickRefresh}>
+                <Refresh />
+              </IconButton>
+            )}
+
+            {copyButton ? (
+              <IconButton onClick={() => navigator.clipboard.writeText(data)}>
+                <Copy />
+              </IconButton>
+            ) : null}
+          </div>
+        </>
+      ) : (
+        <Text appearance="body2">{t.noData}</Text>
+      )}
+    </Wrapper>
+  )
+}
+
+export const codeViewerLocale = {
+  en: {
+    noData: 'No data available.',
+  },
+  pt: {
+    noData: 'Sem dados disponíveis.',
+  },
+}

package/src/components/LazyMarkdown/Markdown.tsx

@@ -0,0 +1,122 @@
+import { Box, Image, Link, Text } from '@citric/core'
+import { SxProp } from '@citric/core/dist/component-style'
+import { Table, Tbody, Td, Th, Thead, Tr } from '@citric/ui'
+import ReactMarkdown, { Components } from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkBreaks from 'remark-breaks'
+import remarkGfm from 'remark-gfm'
+import { BlockquoteMd } from './BlockquoteMd'
+import { CodeViewer } from './CodeViewer'
+import { Video } from './Video'
+
+interface MarkdownProps {
+  /**
+   * The markdown content to be rendered.
+   */
+  children: string,
+  /**
+   * The markdown components to be rendered.
+   */
+  components?: Components,
+}
+
+const styles: Record<string, SxProp | Record<string, SxProp>> = {
+  title: {
+    mb: 3,
+  },
+  boxContainer: {
+    position: 'relative',
+    bg: 'light.300',
+    borderRadius: 'sm',
+    mb: 10,
+  },
+  table: {
+    borderRadius: 'xs',
+  },
+  customScroll: {
+    height: '232px',
+    overflow: 'auto',
+    '&::-webkit-scrollbar': {
+      width: '2px',
+    },
+    '&::-webkit-scrollbar-track': {
+      background: 'light.400',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      background: 'primary.500',
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      background: 'primary.500',
+    },
+  },
+  refreshButton: {
+    position: 'absolute',
+    top: '8px',
+    right: '48px',
+  },
+  copyButton: {
+    position: 'absolute',
+    top: '8px',
+    right: '16px',
+  },
+  code: {
+    bg: 'blue.900',
+    color: 'blue.100',
+    px: 1,
+    py: 1,
+    borderRadius: 'xs',
+  },
+}
+
+/**
+ * Custom components for rendering markdown elements.
+ */
+const component = () => ({
+  p: (props: any) => <Text appearance="body2" {...props} />,
+  strong: (props: any) => <Text weight="bold" colorScheme="light.700" as="strong" {...props} />,
+  h1: (props: any) => <Text as="h1" appearance="h2" gutterBottom {...props} sx={styles.title} />,
+  h2: (props: any) => <Text as="h2" appearance="h3" gutterBottom {...props} sx={styles.title} />,
+  h3: (props: any) => <Text as="h3" appearance="h4" gutterBottom {...props} sx={styles.title} />,
+  h4: (props: any) => <Text as="h4" appearance="h5" gutterBottom {...props} sx={styles.title} />,
+  a: (props: any) => <Link colorScheme="primary" {...props} target="_blank" />,
+  table: (props: any) => <Table appearance="striped" {...props} sx={styles.table} />,
+  thead: (props: any) => <Thead {...props} />,
+  tbody: (props: any) => <Tbody {...props} />,
+  tr: (props: any) => <Tr {...props} />,
+  td: (props: any) => <Td {...props} />,
+  th: (props: any) => <Th {...props} />,
+  li: (props: any) => <Text as="li" appearance="body2" colorScheme="light.700" {...props} />,
+  br: (props: any) => <Box my={5} {...props} />,
+  blockquote: (props: any) => <BlockquoteMd {...{ props }} />,
+  video: (props: any) => <Video {...props} />,
+  img: (props: any) => <Image {...props} />,
+  pre(props: any) {
+    const propComp = props.children.props
+    const match = /language-(\w+)/.exec(propComp.className || '')
+    const inferredLanguage = match && match.length > 1 ? match[1] : undefined
+
+    return (
+      <Box sx={{ ...styles.boxContainer }}>
+        <CodeViewer language={inferredLanguage} {...propComp} data={propComp.children} />
+      </Box>
+    )
+  },
+  code: ({ ...props }: any) =>
+    <Text as="code" sx={styles.code} {...props}>
+      {props.children}
+    </Text>,
+})
+
+/**
+ * Renders a component that provides markdown content visualization using citric components.
+ * 
+ * @param options the props for rendering the component: {@link MarkdownProps}. 
+ */
+const Markdown = ({ children, components }: MarkdownProps) => (
+  <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm, remarkBreaks]} components={{ ...component(), ...components }}>
+    {children}
+  </ReactMarkdown>
+)
+
+// eslint-disable-next-line import/no-default-export
+export default Markdown

package/src/components/LazyMarkdown/MarkdownButton.tsx

@@ -0,0 +1,24 @@
+import { IconButton } from '@citric/ui'
+import { ReactNode } from 'react'
+
+interface MarkdownButtonProps {
+  /**
+   * Optional click handler for the button.
+   */
+  onClick?: () => void,
+  /**
+   * The content to be displayed inside the button.
+   */
+  children: ReactNode,
+}
+
+/**
+ * Renders a component that provides an IconButton with custom styles and content.
+ *
+ * @param options the props for rendering the component: {@link MarkdownButtonProps}. 
+ */
+export const MarkdownButton = ({ ...props }: MarkdownButtonProps) => (
+  <IconButton sx={{ position: 'absolute', top: '16px', right: '16px' }} onClick={props.onClick}>
+    {props.children}
+  </IconButton>
+)

package/src/components/LazyMarkdown/Video.tsx

@@ -0,0 +1,13 @@
+/**
+ * Video component that renders an iframe with the given source URL.
+ *
+ * @param {Object} props - The props for the Video component.
+ * @param {string} props.children - The URL to be used as the source of the iframe.
+ * @returns {JSX.Element} The rendered iframe element.
+ */
+export const Video = ({ children }: { children: string }) => (
+  <iframe
+    src={children}
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  />
+)

package/src/components/LazyMarkdown/index.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@citric/ui'
+import { Suspense, lazy } from 'react'
+import { Components } from 'react-markdown'
+import { MarkdownButton } from './MarkdownButton'
+
+const Markdown = lazy(() => import('./Markdown'))
+
+interface Props {
+  children: string,
+  language?: string,
+  components?: Components,
+}
+
+const LazyMarkdown = ({ children, components }: Props) => (
+  <Suspense fallback={<Skeleton />}>
+    <Markdown components={components}>{children}</Markdown>
+  </Suspense>
+)
+
+export { LazyMarkdown, MarkdownButton }
+

package/src/components/Placeholder.tsx

@@ -0,0 +1,123 @@
+import { Box, Flex, Text } from '@citric/core'
+import { AsProp } from '@citric/core/dist/forward-ref-as'
+import { SxProperties } from '@citric/core/dist/sx'
+import { Card, CardContent } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { GenericPlaceholder, GenericPlaceholderCentered } from '../svg'
+
+interface Props {
+  title?: string | React.ReactElement,
+  description?: string | React.ReactElement,
+  img?: React.ReactElement,
+  button?: React.ReactElement | null,
+  show?: boolean,
+  fullWidth?: boolean,
+  sx?: SxProperties,
+  sxCard?: SxProperties,
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+interface PropsCallToAction extends Props {
+  subDescription?: string,
+  titleAs?: AsProp,
+  placeholderImageConfig?: { 
+    width?: string, 
+    height?: string,
+    style?: React.CSSProperties,
+  },
+}
+
+export const Placeholder = ({ title, description, button, img, fullWidth, show = true, sx, style, className }: Props) => {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <Card sx={{ ...(fullWidth ? { w: '100%' } : {}) }} style={style} className={className}>
+      <Flex alignItems="center" justifyContent="center" py={15} sx={{ gap: '20px', ...sx }}>
+        <Box sx={{ justifySelf: 'end' }}>{img ?? <GenericPlaceholder />}</Box>
+        <Box>
+          {title && <Text as="label" appearance="h4" mb="3" pt={5}>
+            {title}
+          </Text>}
+
+          <Text mb="3" appearance="body2" colorScheme="light.700">
+            {description}
+          </Text>
+
+          {button}
+        </Box>
+      </Flex>
+    </Card>
+  )
+}
+
+export const PlaceholderCallToAction = ({
+  title,
+  description,
+  subDescription,
+  img,
+  button,
+  fullWidth,
+  show = true,
+  sx,
+  sxCard,
+  style,
+  className,
+  titleAs,
+  placeholderImageConfig,
+}: PropsCallToAction) => {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <Card sx={{ w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }} style={style} className={className}>
+      <CardContent
+        as={Flex}
+        sx={{ justifyContent: 'center', alignItems: 'center', gap: '16px', ...sx }}
+      >
+        <Box>{img ?? <GenericPlaceholderCentered {...placeholderImageConfig} />}</Box>
+
+        <Box>
+          {title && <Text as={titleAs} appearance="h4" mb="3" aria-live="assertive">
+            {title}
+          </Text>}
+
+          <Text mb="3" appearance="body2" colorScheme="light.700">
+            {description}
+          </Text>
+
+          <Text mb="3" appearance="body2" colorScheme="light.700">
+            {subDescription}
+          </Text>
+
+          {button}
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+
+export const PlaceholderResourceEmptySearch = ({ title, description }: Pick<Props, 'title' | 'description'>) => {
+  const t = useTranslate(dictionary)
+
+  return (
+    <PlaceholderCallToAction fullWidth={true}
+      title={title || t.title} description={description || t.description}
+    />
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Sorry, your search did not match any results.',
+    description: 'Please, refine your search and try again.',
+  },
+  pt: {
+    title: 'Desculpe, sua busca não encontrou nenhum resultado.',
+    description: 'Por favor, refine sua busca e tente novamente.',
+  },
+} satisfies Dictionary

package/src/components/ScrollView.tsx

@@ -0,0 +1,57 @@
+import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants } from '@citric/core'
+import { getColor } from '@citric/core/dist/utils/theme'
+import { styled } from 'styled-components'
+
+type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
+
+interface Props {
+  /**
+   * By default, the ScrollView scrolls in both directions
+   */
+  direction?: 'horizontal' | 'vertical' | 'both',
+  /**
+   * The color of the track in the scroll bar (background)
+   * light.400 by default
+   */
+  trackColor?: Color,
+  /**
+   * The color of the thumb in the scroll bar (foreground)
+   * light.700 by default
+   */
+  thumbColor?: Color,
+  /**
+   * `auto` to show the scroll-bar only when the content overflows. `scroll` to always show it.
+   * `auto` by default
+   */
+  scrollType?: 'auto' | 'scroll',
+}
+
+function getDirectionStyle({ direction = 'both', scrollType = 'auto' }: Props) {
+  const x = direction === 'both' || direction === 'horizontal' ? `overflow-x: ${scrollType};` : ''
+  const y = direction === 'both' || direction === 'vertical' ? `overflow-x: ${scrollType};` : ''
+  return `${x}${y}`
+}
+
+/**
+ * Renders a component that provides scrolling. 
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
+export const ScrollView = styled.div<Props>`
+  ${getDirectionStyle}
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: ${({ theme, trackColor = 'light.400' }) => getColor(theme, trackColor)};
+    border-radius: 2px;
+    left: 40px;
+  }
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme, thumbColor = 'light.700' }) => getColor(theme, thumbColor)};
+    border-radius: 2px;
+  }
+`

package/src/components/Select/BadgeItem.tsx

@@ -0,0 +1,58 @@
+import { SxProperties } from '@citric/core/dist/sx'
+import { TimesMini } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { MouseEvent } from 'react'
+import { components, GroupBase, MultiValueProps } from 'react-select'
+import { CreatableSelectOptionType } from './types'
+
+export const BadgeItem = (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => {
+  const t = useTranslate(dictionary)
+
+  const handleClick = <T extends HTMLElement>(event: MouseEvent<T>) => {
+    props.removeProps.onClick?.(event as unknown as MouseEvent<HTMLDivElement>)
+  }
+
+  return (
+    <components.MultiValue {...props}>
+      <Badge
+        appearance="square"
+        className="badge"
+        palette="cyan"
+        sx={{ mb: 2, 
+          '.badge-citric-container:not(:has(> button:first-child))': {
+            marginRight: 0,
+          },
+        } as SxProperties}
+        afterElement={
+          <components.MultiValueRemove {...props}>
+            <IconButton
+              type="button"
+              aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
+              colorIcon="cyan.800"
+              appearance="square"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleClick(e)
+              }}
+            >
+              <TimesMini />
+            </IconButton>
+          </components.MultiValueRemove>
+        }
+      >
+        {props.children}
+      </Badge>
+    </components.MultiValue>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelRemoveItemButton: 'Remove item $0',
+  },
+  pt: {
+    ariaLabelRemoveItemButton: 'Remover item $0',
+  },
+} satisfies Dictionary
+