@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/FileTreeView/More.tsx

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

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

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