@stack-spot/portal-components 1.2.0 → 1.3.1-rc

package/src/components/LazyMarkdown/BlockquoteMd.tsx

@@ -0,0 +1,94 @@
+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
+
+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>
+  )
+}
+
+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]': '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,154 @@
+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 { 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 }) => getColor(theme as any, '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 }) => getColor(theme as any, 'light.400')};
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-thumb:hover {
+      background: ${({ theme }) => getColor(theme as any, '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: #fff;
+  }
+
+  .hljs-string {
+    color: ${({ theme }) => getColor(theme as any, 'teal.300')};
+  }
+  .hljs-tag {
+    color: ${({ theme }) => getColor(theme as any, 'teal')};
+  }
+  .hljs-attr {
+    color: #fff;
+  }
+  .hljs-number {
+    color: #fff;
+  }
+  .hljs-property {
+    color: #fff;
+  }
+  .hljs-keyword {
+    color: #75dcff;
+  }
+  .comment {
+    color: #8e8e93;
+  }
+  .hljs-expression {
+    color: #f57f17;
+  }
+
+  .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,
+}
+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,107 @@
+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 from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
+import { BlockquoteMd } from './BlockquoteMd'
+import { CodeViewer } from './CodeViewer'
+import { Video } from './Video'
+
+interface MarkdownProps {
+  children: string,
+}
+
+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',
+  },
+}
+
+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>,
+})
+
+const Markdown = ({ children }: MarkdownProps) => (
+  <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} components={component()}>
+    {children}
+  </ReactMarkdown>
+)
+
+// eslint-disable-next-line import/no-default-export
+export default Markdown

package/src/components/LazyMarkdown/MarkdownButton.tsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@citric/ui'
+import { ReactNode } from 'react'
+
+interface MarkdownButtonProps {
+  onClick?: () => void,
+  children: ReactNode,
+}
+
+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,6 @@
+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,18 @@
+import { Skeleton } from '@citric/ui'
+import { Suspense, lazy } from 'react'
+import { MarkdownButton } from './MarkdownButton'
+
+const Markdown = lazy(() => import('./Markdown'))
+
+interface Props {
+  children: string,
+  language?: string,
+}
+
+const LazyMarkdown = ({ children }: Props) => (
+  <Suspense fallback={<Skeleton />}>
+    <Markdown>{children}</Markdown>
+  </Suspense>
+)
+
+export { LazyMarkdown, MarkdownButton }

package/src/components/Notifications/NotificationComponent.tsx

@@ -0,0 +1,264 @@
+import { Box, Button, Flex, IconBox, Text } from '@citric/core'
+import { Bell, TimesMini } from '@citric/icons'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ReactElement, useState } from 'react'
+import styled from 'styled-components'
+import { AsyncContent, ErrorProps } from '../AsyncContent'
+import { InfiniteScroll } from '../InfiniteScroll'
+import { ScrollView } from '../ScrollView'
+import { StatusCircle } from '../StatusCircle'
+import { NotificationItem } from './NotificationItem'
+import { NotificationType, NotificationTypeFilters, StackspotNotification, UnreadType } from './types'
+
+interface Props {
+  hasUnreadNotification?: boolean,
+}
+
+const ANIMATION_DURATION_MS = 300
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
+
+const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
+  max-height: 0;
+  z-index: 1;
+  visibility: hidden;
+  position: absolute;
+  top: calc(var(--header-height) - 2px);
+  right: -270%;
+  width: 400px;
+
+  &.visible {
+    min-height: 802px;
+    visibility: visible;
+    transition: ${MAX_HEIGHT_TRANSITION};
+  }
+
+  .content {
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[400]};
+    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+    background-color: ${theme.color.light[300]};
+    overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+    overflow-x: hidden;
+    transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent;
+    bottom: 100%;
+    left: 74%;
+    margin-left: -5px;
+    transform: rotate(180deg);
+    border-top-color: ${theme.color.light[400]};
+  }
+`
+
+const StyledBox = styled(Box)`
+  width: 100%;
+  > div:first-child{
+    width: 100%;
+  }
+`
+
+interface NotificationsFilterProps {
+  type?: NotificationTypeFilters,
+  onChangeFilterType: (type?: NotificationTypeFilters) => void,
+}
+
+interface NotificationFilterButtonProps extends NotificationsFilterProps {
+  ariaLabel: string,
+  label: string,
+  enumType: NotificationTypeFilters,
+}
+
+const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
+  const { type, onChangeFilterType, ariaLabel, label, enumType } = props
+  return (<Button
+    appearance="text"
+    role="button"
+    aria-label={ariaLabel}
+    aria-pressed={type === enumType}
+    onClick={() => onChangeFilterType(enumType)}
+    sx={{ borderColor: type === enumType ? 'primary' : 'transparent' }}
+  >
+    <Text colorScheme="inverse" appearance="microtext1">
+      {label}
+    </Text>
+  </Button>
+  )
+}
+
+const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterProps) => {
+  const t = useTranslate(dictionary)
+
+  return (<Flex alignItems="center" sx={{ gap: '4px' }} my="5">
+    <Button
+      aria-pressed={!type}
+      appearance="text"
+      role="button"
+      aria-label={t.filterAll}
+      onClick={() => onChangeFilterType()}
+      sx={{ borderColor: !type ? 'primary' : 'transparent' }}
+    >
+      <Text colorScheme="inverse" appearance="microtext1">
+        {t.all}
+      </Text>
+    </Button>
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterUnread} label={t.unread} enumType={UnreadType.Unread}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterHigh} label={t.high} enumType={NotificationType.High}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterMedium} label={t.medium} enumType={NotificationType.Medium}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterLow} label={t.low} enumType={NotificationType.Low}
+    />
+  </Flex>)
+}
+
+interface Props {
+  onMarkAsRead: (notificationId: string, type: 'callToAction' | 'icon') => void, 
+  notifications?: StackspotNotification[],
+  isLoading: boolean, 
+  error?: any, 
+  onClickViewNotifications: () => void,
+  onClickViewAll: () => void,
+  errorDetails: ErrorProps,
+  fetchNextPage: () => void,
+  hasNextPage: boolean,
+  type?: NotificationTypeFilters,
+  onUpdateType: (updatedType?: NotificationTypeFilters) => void,
+  placeholderComponent: ReactElement,
+  isSummary: boolean,
+}
+
+export const NotificationComponent = ({ 
+  hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, 
+  type, onUpdateType,
+  onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage,
+  placeholderComponent, isSummary=false,
+}: Props) => {
+  const t = useTranslate(dictionary)
+  const [visible, setVisible] = useState(false)
+
+  const updateType = (updatedType?: NotificationTypeFilters) =>{
+    onUpdateType(updatedType)
+  }
+
+  return (<Flex sx={{ position: 'relative' }}>
+    <IconBox size="md" sx={{ cursor: 'pointer' }}
+      onClick={() => {
+        onClickViewNotifications()
+        setVisible(true)
+      }} className="notificationsTour">
+      <Bell />
+    </IconBox>
+    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }}>
+      <StatusCircle status={'danger'} />
+    </Box>}
+
+    <NotificationsComponent
+      className={listToClass(['selection-list', visible ? 'visible' : undefined])}
+      $scroll={true}
+      aria-hidden={!visible}
+    >
+      <Flex className="content" p={5} flexDirection="column" justifyContent="space-between">
+        <Flex>
+          <Flex justifyContent="space-between" w="100%" >
+            <Text appearance="h4">
+              {t.notifications}
+            </Text>
+            <IconBox appearance="circle" onClick={() => setVisible(false)}
+              sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }}>
+              <TimesMini />
+            </IconBox>
+          </Flex>
+
+          <NotificationsFilter type={type} onChangeFilterType={updateType} />
+
+          <AsyncContent error={error} errorDetails={errorDetails} loading={isLoading}>
+            {notifications?.length ? <StyledBox>
+              <InfiniteScroll
+                dataLength={notifications?.length || 0}
+                next={fetchNextPage}
+                hasMore={hasNextPage}
+              >
+                <ScrollView direction="vertical" style={{ maxHeight: '630px' }}>
+                  <Flex sx={{ gap: '4px' }} mr="3">
+                    {notifications?.map((item) => (
+                      <NotificationItem key={item.id} notification={item} 
+                        isSummary={isSummary} onClickMarkRead={(type) => onMarkAsRead(item.id, type)} />
+                    ))}
+                  </Flex>
+                </ScrollView>
+              </InfiniteScroll> 
+            </StyledBox>
+              : 
+              <>
+                {placeholderComponent}
+              </>
+            }
+          </AsyncContent>
+        </Flex>
+
+        <Flex w="100%" pt={3}>
+          <Button 
+            size="sm"
+            sx={{ width: '100%' }} colorScheme="inverse" appearance="text"
+            onClick={() => {
+              setVisible(false)
+              onClickViewAll()
+            }}> 
+            <Text appearance="microtext1">
+              {t.seeAll}
+            </Text>
+          </Button>
+        </Flex>
+      </Flex>
+        
+      
+    </NotificationsComponent>
+  </Flex>)
+}
+
+const dictionary = {
+  en: {
+    notifications: 'Notifications',
+    all: 'All',
+    filterAll: 'Filter all notifications',
+    filterUnread: 'Filter unread notifications',
+    filterHigh: 'Filter high notifications',
+    filterMedium: 'Filter medium notifications',
+    filterLow: 'Filter low notifications',
+    unread: 'Unread',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    seeAll: 'See all notifications',
+  },
+  pt: {
+    notifications: 'Notificações',
+    all: 'Todos',
+    filterAll: 'Filtrar todas as notificações ',
+    filterUnread: 'Filtrar notificações não lidas',
+    filterHigh: 'Filtrar notificações criticidade alta',
+    filterMedium: 'Filtrar notificações criticidade média',
+    filterLow: 'Filtrar notificações criticidade baixa',
+    unread: 'Não lidas',
+    high: 'Alto',
+    medium: 'Médio',
+    low: 'Baixo',
+    seeAll: 'Ver todas as notificações',
+  },
+} satisfies Dictionary