@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/components/LazyMarkdown/Markdown.tsx

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

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

@@ -1,13 +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"
-  />
-)
+/**
+ * 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

@@ -1,21 +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 }
-
+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

@@ -1,118 +1,123 @@
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-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 { GenericPlaceholder } from '../svg'
-
-interface Props {
-  title?: string,
-  description?: string,
-  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,
-}
-
-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,
-}: PropsCallToAction) => {
-  if (!show) {
-    return null
-  }
-
-  return (
-    <Card sx={{ w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }} style={style} className={className}>
-      <CardContent
-        as={Flex}
-        py={15}
-        sx={{ display: 'grid', gridTemplateColumns: '0.6fr 1fr', alignItems: 'center', gap: '92px', ...sx }}
-      >
-        <Box sx={{ justifySelf: 'end' }}>{img ?? <GenericPlaceholder />}</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
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+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 { GenericPlaceholder } from '../svg'
+
+interface Props {
+  title?: string,
+  description?: string,
+  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,
+  },
+}
+
+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}
+        py={15}
+        sx={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: '92px', ...sx }}
+      >
+        <Box sx={{ justifySelf: 'end' }}>{img ?? <GenericPlaceholder {...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