@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/InfoMaintenanceBanner.tsx

@@ -1,29 +1,29 @@
-import { Text } from '@citric/core'
-import { interpolate, useLanguage, useTranslate } from '@stack-spot/portal-translate'
-import { format } from 'date-fns'
-import { enUS, ptBR } from 'date-fns/locale'
-
-interface InfoMaintenanceBannerProps {
-  date: Date,
-  initialHour: string,
-  endHour: string,
-}
-
-export const InfoMaintenanceBanner = ({ date, initialHour, endHour }: InfoMaintenanceBannerProps) => {
-  const t = useTranslate(dictionary)
-  const language = useLanguage()
-  const locale = language === 'pt' ? ptBR : enUS
-  const dateToString = language === 'en' ?
-    format(date, "MMMM do',' yyyy", { locale }) :
-    format(date, "dd 'de' MMMM 'de' yyyy", { locale })
-  return <Text>{interpolate(t.info, dateToString, initialHour, endHour)}</Text>
-}
-
-const dictionary = {
-  en: {
-    info: 'We would like to inform you that StackSpot will undergo maintenance on $0, from $1 (GMT-3) to $2. During this period, this web portal will be temporarily unavailable.',
-  },
-  pt: {
-    info: 'Gostaríamos de informar que a StackSpot passará por manutenção no dia $0, das $1 (GMT-3) às $2. Durante este período, este portal web estará temporariamente indisponível.',
-  },
-}
+import { Text } from '@citric/core'
+import { interpolate, useLanguage, useTranslate } from '@stack-spot/portal-translate'
+import { format } from 'date-fns'
+import { enUS, ptBR } from 'date-fns/locale'
+
+interface InfoMaintenanceBannerProps {
+  date: Date,
+  initialHour: string,
+  endHour: string,
+}
+
+export const InfoMaintenanceBanner = ({ date, initialHour, endHour }: InfoMaintenanceBannerProps) => {
+  const t = useTranslate(dictionary)
+  const language = useLanguage()
+  const locale = language === 'pt' ? ptBR : enUS
+  const dateToString = language === 'en' ?
+    format(date, "MMMM do',' yyyy", { locale }) :
+    format(date, "dd 'de' MMMM 'de' yyyy", { locale })
+  return <Text>{interpolate(t.info, dateToString, initialHour, endHour)}</Text>
+}
+
+const dictionary = {
+  en: {
+    info: 'We would like to inform you that StackSpot will undergo maintenance on $0, from $1 (GMT-3) to $2. During this period, this web portal will be temporarily unavailable.',
+  },
+  pt: {
+    info: 'Gostaríamos de informar que a StackSpot passará por manutenção no dia $0, das $1 (GMT-3) às $2. Durante este período, este portal web estará temporariamente indisponível.',
+  },
+}

package/src/components/LazyMarkdown/BlockquoteMd.tsx

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

@@ -1,161 +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.',
-  },
-}
+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.',
+  },
+}