@stack-spot/portal-components 0.0.17 → 1.0.0-dev.1768482754546

package/src/components/FadingOverflow.tsx

@@ -0,0 +1,265 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
+
+type Side = 'top' | 'right' | 'left' | 'bottom'
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
+
+interface Props extends WithStyle {
+  /**
+   * How to scroll the content.
+   * - none: overflow is hidden. No scrolling.
+   * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+   * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+   * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+   * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+   * There are no scrollbars in this scenario.
+   * @default 'none'
+   */
+  scroll?: ScrollType,
+  /**
+   * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+   * @default false
+   */
+  enableHorizontalScrollWithVerticalWheel?: boolean,
+  /**
+   * Which sides to fade when the content overflows.
+   * 
+   * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+   * believed combining linear gradients would work, but it doesn't.
+   */
+  sides?: Side[],
+  children?: React.ReactNode,
+}
+
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
+const MIN_CHECK_INTERVAL_MS = 20
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4
+// Fade masks
+const masks = {
+  right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+  vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+}
+
+const OverflowBox = styled.div`
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
+`
+
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ * 
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export const FadingOverflow = (
+  { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
+) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const scrollIntervalId = useRef<number>()
+  // Add a margin to compensate for rounding inaccuracies
+  const SCROLL_MARGIN = 2
+
+  useEffect(() => {
+    if (!ref.current) return
+    const element = ref.current
+    const fadeTop = !sides || sides.includes('top')
+    const fadeRight = !sides || sides.includes('right')
+    const fadeBottom = !sides || sides.includes('bottom')
+    const fadeLeft = !sides || sides.includes('left')
+    const overflow = scroll === 'none' ? 'clip' : 'auto'
+    element.style.overflowX = (fadeLeft || fadeRight) ? overflow : ''
+    element.style.overflowY = (fadeTop || fadeBottom) ? overflow : ''
+    if (scroll === 'arrows' || scroll === 'wheel') element.classList.add('hidden-scroll-bars')
+
+    function stopScrolling() {
+      clearInterval(scrollIntervalId.current)
+    }
+
+    function checkOverflow() {
+      // masking (fading)
+      const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth)
+      const overflowsLeft = element.scrollLeft > 0
+      const overflowsBottom = element.clientHeight < element.scrollHeight
+        && element.scrollTop < (element.scrollHeight - element.clientHeight - SCROLL_MARGIN)
+      const overflowsTop = element.scrollTop > 0
+      const masksToApply: string[] = []
+      if (overflowsLeft && fadeLeft && overflowsRight && fadeRight) masksToApply.push(masks.horizontal)
+      else {
+        if (overflowsRight && fadeRight) masksToApply.push(masks.right)
+        if (overflowsLeft && fadeLeft) masksToApply.push(masks.left)
+      }
+      if (overflowsTop && fadeTop && overflowsBottom && fadeBottom) masksToApply.push(masks.vertical)
+      else {
+        if (overflowsTop && fadeTop) masksToApply.push(masks.top)
+        if (overflowsBottom && fadeBottom) masksToApply.push(masks.bottom)
+      }
+      element.style.maskImage = masksToApply.join(', ')
+
+      // arrow buttons
+      if (scroll !== 'arrows') return
+
+      function startScrolling(side: Side) {
+        stopScrolling()
+        const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft'
+        const multiplier = side === 'bottom' || side === 'right' ? 1 : -1
+        scrollIntervalId.current = window.setInterval(() => {
+          element[direction] += SCROLL_PX * multiplier
+        }, SCROLL_INTERVAL_MS)
+      }
+  
+      const startScrollingBySide = {
+        left: () => startScrolling('left'),
+        right: () => startScrolling('right'),
+        top: () => startScrolling('top'),
+        bottom: () => startScrolling('bottom'),
+      }
+
+      const scrollToMaxBySide = {
+        left: () => element.scrollLeft = 0,
+        right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
+        top: () => element.scrollTop = 0,
+        bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
+      }
+  
+      function enableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (button?.classList.contains('visible')) return
+        button?.classList.add('visible')
+        button?.addEventListener('mouseenter', startScrollingBySide[side])
+        button?.addEventListener('mouseleave', stopScrolling)
+        button?.addEventListener('click', scrollToMaxBySide[side])
+      }
+  
+      function disableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (!button?.classList.contains('visible')) return
+        button?.classList.remove('visible')
+        stopScrolling()
+        button?.removeEventListener('mouseenter', startScrollingBySide[side])
+        button?.removeEventListener('mouseleave', stopScrolling)
+        button?.removeEventListener('click', scrollToMaxBySide[side])
+      }
+      
+      if (overflowsRight && fadeRight) enableArrowButton('right')
+      else disableArrowButton('right')
+      if (overflowsLeft && fadeLeft) enableArrowButton('left')
+      else disableArrowButton('left')
+      if (overflowsTop && fadeTop) enableArrowButton('top')
+      else disableArrowButton('top')
+      if (overflowsBottom && fadeBottom) enableArrowButton('bottom')
+      else disableArrowButton('bottom')
+    }
+
+    const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS)
+    const resizeObserver = new ResizeObserver(debouncedCheck)
+    resizeObserver.observe(element)
+    element.addEventListener('scroll', debouncedCheck)
+
+    return () => {
+      stopScrolling()
+      resizeObserver.disconnect()
+      element.removeEventListener('scroll', debouncedCheck)
+    }
+  }, [sides, ref.current, scroll])
+
+  useEffect(() => {
+    if (!enableHorizontalScrollWithVerticalWheel || !ref.current) return
+    const element = ref.current
+
+    function scrollWithWheel(event: WheelEvent) {
+      if (event.deltaY) {
+        element.scrollLeft += event.deltaY
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    element.addEventListener('wheel', scrollWithWheel)
+    return () => element.removeEventListener('wheel', scrollWithWheel)
+  }, [ref.current, enableHorizontalScrollWithVerticalWheel])
+
+  return scroll === 'arrows' ? (
+    <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
+      <div className="content" ref={ref}>{children}</div>
+      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
+      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
+      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
+      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+    </OverflowBox>
+  ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
+}

package/src/components/FileTreeView/More.tsx

@@ -0,0 +1,114 @@
+import { Box, IconBox, Text } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import * as icons from '@citric/icons'
+import { EllipsisVertical } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { createElement, useState } from 'react'
+
+export type IconName = keyof typeof icons
+
+export type MenuOption = {
+/**
+ * The text that will be displayed for the option.
+ */
+label: string,
+/**
+ * The icon that will be displayed alongside the text.
+ */
+icon: IconName,
+/**
+ * The function that will be executed when the option is clicked.
+ */
+onClick: VoidFunction,
+}
+
+interface Props {
+  loading?: boolean,
+  menu: MenuOption[],
+}
+
+const styles = {
+  MoreWrapper: {
+    position: 'relative',
+    'button': {
+      width: '2rem',
+      height: '2rem',
+    },
+    '.drop': {
+      zIndex: 1,
+      position: 'absolute',
+      listStyle: 'none',
+      display: 'flex',
+      margin: '0',
+      padding: '0.25rem',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      gap: '0.5rem',
+      borderRadius: '0.25rem',
+      border: `0.063rem solid ${theme.color.light[400]}`,
+      backgroundColor: `${theme.color.light[500]}`,
+      boxShadow: `0 0 0 0.125rem ${theme.color.gray[600]}`,
+      right: '2px',
+      width: 'max-content',
+      'ul': {
+        padding: 0,
+        margin: 0,
+      },
+      '.item-list-float': {
+        minWidth: '230px',
+        listStyleType: 'none',
+        padding: '8px',
+        paddingRight: '12px',
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: `${theme.color.light[600]}`,
+        },
+      },
+    },
+  },
+}
+
+export function More({ loading, menu }: Props) {
+
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <Box sx={styles.MoreWrapper as SxProperties}>
+      <IconButton
+        color="light"
+        size="sm"
+        appearance="circle"
+        aria-label="More options"
+        disabled={loading}
+        onClick={() => setOpened((old) => !old)}
+        onBlur={() => setTimeout(() => setOpened(false), 200)}
+      >
+        <IconBox size="xs">
+          <EllipsisVertical />
+        </IconBox>
+      </IconButton>
+      {
+        opened && (
+          <div className="drop">
+            <ul className="drop-wrapper">
+              {
+                menu.map((menuItem, key) => (
+                  <li role="button" className="item-list-float" key={key} onClick={menuItem.onClick}>
+                    <IconBox size="sm">
+                      {createElement(icons[menuItem.icon])}
+                    </IconBox>
+                    <Text appearance="body2">{menuItem.label}</Text>
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+        )
+      }
+    </Box>
+  )
+}

package/src/components/FileTreeView/index.tsx

@@ -0,0 +1,186 @@
+
+import { Box, IconBox, Text } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { ChevronRight, Code, Folder } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { useState } from 'react'
+import { useAnchorTag } from '../../context/anchor'
+import { MenuOption, More } from './More'
+
+const styles = {
+  FileTreeViewWrapper: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    margin: '16px',
+  },
+  AccordionItemWrapper: {
+    width: '100%',
+    'ul': {
+      listStyleType: 'none',
+      margin: 0,
+      padding: 0,
+      flexDirection: 'column',
+      marginLeft: '20px',
+      justifyContent: 'center',
+    },
+    'li': {
+      display: 'flex',
+      listStyleType: 'none',
+      margin: '2px 0',
+      padding: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '4px',
+    },
+
+    '.accordion-node-group': {
+      justifyContent: 'space-between',
+      width: '100%',
+      '&:hover': {
+        backgroundColor: `${theme.color.light[500]}`,
+        borderRadius: '4px',
+      },
+
+      'a': {
+        display: 'flex',
+        alignItems: 'center',
+        textDecoration: 'underline',
+        'label':{
+          '&:hover': {
+            cursor: 'pointer',
+          },
+        },
+      },
+    },
+
+    '.accordion-node': {
+      cursor: 'pointer',
+      flexDirection: 'row',
+      display: 'flex',
+      gap: '4px',
+      alignItems: 'center',
+      background: 'transparent',
+      color: 'inherit',
+      border: 'none',
+      '.icon': {
+        transition: 'transform ease-in-out 0.3s',
+      },
+      '.open':{
+        transform: 'rotate(90deg)',
+      },
+    },
+
+    'actions': {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '4px',
+      alignItems: 'center',
+    },
+  },
+} 
+
+
+export interface FileDir {
+  /**
+   * The name of the directory or file. 
+   * */ 
+  name: string,
+  /**
+   * dirs - An array containing the directories present in the file tree.
+   */
+  dirs: FileDir[],
+  /**
+   * isFile - A flag indicating whether the item is a file (`true`) or a directory (`false`).
+   */
+  isFile?: boolean,
+  /**
+   * itemLink - The URL or path link associated with the item in the file tree.
+   */
+  itemLink: string,
+  /**
+   * The menu options that will be rendered at the end of the line for this item. 
+   */
+  menuOptions?: MenuOption[],
+}
+
+interface Props {
+  /**
+   * Represents the hierarchical structure of directories and files, providing the component with an organized view of the file system. 
+   */
+  fileTree: FileDir,
+}
+
+export const FileTreeView = ({ fileTree }: Props) => {
+
+  const AccordionItem = ({ name, isFile, dirs, defaultOpened = false, menuOptions, itemLink }: FileDir 
+    & { defaultOpened?: boolean }) => {
+    
+    const Link = useAnchorTag()
+    const [opened, setOpened] = useState<boolean>(defaultOpened)
+
+    const onExpand = () => {
+      setOpened(old => !old)
+    }
+
+    const FolderItem = () => (
+      <li className="accordion-node-group">
+        <button className="accordion-node" onClick={onExpand}>
+          <IconBox className={`icon ${opened ? 'open' : ''}`} >
+            <ChevronRight  /> 
+          </IconBox>
+          <IconBox>
+            <Folder />
+          </IconBox>
+          <Text>{name !== '' ? name : '/'}</Text>
+        </button>
+        { menuOptions && 
+          <div className="actions">
+            <More menu={menuOptions} />
+          </div>
+        }
+      </li>
+    )
+
+    const FileItem = () => (
+      <li className="accordion-node-group">
+        <Link href={itemLink}>
+          <IconBox>
+            <Code />
+          </IconBox>
+          <Text as="label">{name}</Text>
+        </Link>
+        { menuOptions && 
+          <div className="actions">
+            <More menu={menuOptions} />
+          </div>
+        }
+      </li >
+    )
+
+    return (
+      <Box sx={styles.AccordionItemWrapper}>
+        {
+          isFile ? <FileItem /> : <FolderItem />
+        }
+        <ul className="accordion-children">
+          {opened && !isFile && dirs && dirs.length > 0 && (
+            <>
+              {dirs?.map((subDir, index) => (
+                <li key={index}>{
+                  <AccordionItem {...subDir} />
+                }</li>
+              ))}
+            </>
+          )}
+        </ul>
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={styles.FileTreeViewWrapper as SxProperties}>
+      <AccordionItem {...fileTree} defaultOpened={true} />
+    </Box>
+  )
+}

package/src/components/InfiniteScroll.tsx

@@ -0,0 +1,24 @@
+import { Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import ReactInfiniteScroll, { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component'
+
+/**
+ * Renders a component that provides infinite scroll. 
+ * 
+ * The component wraps around the ReactInfiniteScroll component.
+ * It provides a loading indicator using citric loading circular and custom styles.
+ *
+ * By default, it adds the scrollable target as page and overflow hidden.
+ */
+export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, 'loader'>) => (
+  <ReactInfiniteScroll
+    loader={<Flex alignItems="center" justifyContent="center" p={4} flex={1} data-test-hint="loading">
+      <LoadingCircular />
+    </Flex>}
+    scrollableTarget={scrollableTarget || 'page'}
+    style={{ overflow: 'hidden', ...style }}
+    {...props}
+  >
+    {children}
+  </ReactInfiniteScroll>
+)

package/src/components/InfoMaintenanceBanner.tsx

@@ -0,0 +1,25 @@
+import { Text } from '@citric/core'
+import { interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useDateFormatter } from '../hooks/date'
+
+interface InfoMaintenanceBannerProps {
+  date: Date,
+  initialHour: string,
+  endHour: string,
+}
+
+export const InfoMaintenanceBanner = ({ date, initialHour, endHour }: InfoMaintenanceBannerProps) => {
+  const t = useTranslate(dictionary)
+  const { formatSimpleDate } = useDateFormatter()
+  const dateToString = formatSimpleDate(date)
+  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.',
+  },
+}