@stack-spot/portal-components 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.10.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.9.0...portal-components@v2.10.0) (2024-11-21)
+
+
+### Features
+
+* FileTree View component ([#496](https://github.com/stack-spot/portal-commons/issues/496)) ([d66e12d](https://github.com/stack-spot/portal-commons/commit/d66e12dd34e8314f7fb49e3a9cf7b8efc3e93fb2))
+
 ## [2.9.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.8.1...portal-components@v2.9.0) (2024-10-30)
 
 

package/dist/components/FileTreeView/More.d.ts

@@ -0,0 +1,23 @@
+import * as icons from '@citric/icons';
+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[];
+}
+export declare function More({ loading, menu }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=More.d.ts.map

package/dist/components/FileTreeView/More.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"More.d.ts","sourceRoot":"","sources":["../../../src/components/FileTreeView/More.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA;AAMtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAA;AAEzC,MAAM,MAAM,UAAU,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;CACrB,CAAA;AAED,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AA8CD,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,2CAuC5C"}

package/dist/components/FileTreeView/More.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconBox, Text } from '@citric/core';
+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';
+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 }) {
+    const [opened, setOpened] = useState(false);
+    return (_jsxs(Box, { sx: styles.MoreWrapper, children: [_jsx(IconButton, { color: "light", size: "sm", appearance: "circle", "aria-label": "More options", disabled: loading, onClick: () => setOpened((old) => !old), onBlur: () => setTimeout(() => setOpened(false), 200), children: _jsx(IconBox, { size: "xs", children: _jsx(EllipsisVertical, {}) }) }), opened && (_jsx("div", { className: "drop", children: _jsx("ul", { className: "drop-wrapper", children: menu.map((menuItem, key) => (_jsxs("li", { role: "button", className: "item-list-float", onClick: menuItem.onClick, children: [_jsx(IconBox, { size: "sm", children: createElement(icons[menuItem.icon]) }), _jsx(Text, { appearance: "body2", children: menuItem.label })] }, key))) }) }))] }));
+}
+//# sourceMappingURL=More.js.map

package/dist/components/FileTreeView/More.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"More.js","sourceRoot":"","sources":["../../../src/components/FileTreeView/More.tsx"],"names":[],"mappings":"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"}

package/dist/components/FileTreeView/index.d.ts

@@ -0,0 +1,32 @@
+import { MenuOption } from './More.js';
+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 declare const FileTreeView: ({ fileTree }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FileTreeView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileTreeView/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAQ,MAAM,QAAQ,CAAA;AAiEzC,MAAM,WAAW,OAAO;IACtB;;SAEK;IACL,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iBAAkB,KAAK,4CAwE/C,CAAA"}

package/dist/components/FileTreeView/index.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, IconBox, Text } from '@citric/core';
+import { ChevronDown, Code, Folder } from '@citric/icons';
+import { theme } from '@stack-spot/portal-theme';
+import { useState } from 'react';
+import { useAnchorTag } from '../../context/anchor.js';
+import { More } from './More.js';
+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',
+            },
+        },
+        '.accordion-node': {
+            cursor: 'pointer',
+            flexDirection: 'row',
+            display: 'flex',
+            gap: '4px',
+            alignItems: 'center',
+            background: 'transparent',
+            color: 'inherit',
+            border: 'none',
+        },
+        'actions': {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '4px',
+            alignItems: 'center',
+        },
+    },
+};
+export const FileTreeView = ({ fileTree }) => {
+    const AccordionItem = ({ name, isFile, dirs, defaultOpened = false, menuOptions, itemLink }) => {
+        const Link = useAnchorTag();
+        const [opened, setOpened] = useState(defaultOpened);
+        const onExpand = () => {
+            setOpened(old => !old);
+        };
+        const FolderItem = () => (_jsxs("li", { className: "accordion-node-group", children: [_jsxs("button", { className: "accordion-node", onClick: onExpand, children: [_jsx(IconBox, { className: "icon", children: _jsx(ChevronDown, {}) }), _jsx(IconBox, { children: _jsx(Folder, {}) }), _jsx(Text, { children: name !== '' ? name : '/' })] }), menuOptions &&
+                    _jsx("div", { className: "actions", children: _jsx(More, { menu: menuOptions }) })] }));
+        const FileItem = () => (_jsxs("li", { className: "accordion-node-group", children: [_jsxs(Link, { href: itemLink, children: [_jsx(IconBox, { children: _jsx(Code, {}) }), _jsx(Text, { as: "label", children: name })] }), menuOptions &&
+                    _jsx("div", { className: "actions", children: _jsx(More, { menu: menuOptions }) })] }));
+        return (_jsxs(Box, { sx: styles.AccordionItemWrapper, children: [isFile ? _jsx(FileItem, {}) : _jsx(FolderItem, {}), _jsx("ul", { className: "accordion-children", children: opened && !isFile && dirs && dirs.length > 0 && (_jsx(_Fragment, { children: dirs?.map((subDir, index) => (_jsx("li", { children: _jsx(AccordionItem, { ...subDir }) }, index))) })) })] }));
+    };
+    return (_jsx(Box, { sx: styles.FileTreeViewWrapper, children: _jsx(AccordionItem, { ...fileTree, defaultOpened: true }) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/FileTreeView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileTreeView/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,8 @@
     "./AnimatedHeight": "./dist/components/AnimatedHeight.js",
     "./SearchInput": "./dist/components/form/SearchInput.js",
     "./Select": "./dist/components/form/Select/index.js",
-    "./Stepper": "./dist/components/Stepper/index.js"
+    "./Stepper": "./dist/components/Stepper/index.js",
+    "./FileTreeView": "./dist/components/FileTreeView/index.js"
   },
   "scripts": {
     "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",

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,175 @@
+
+import { Box, IconBox, Text } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { ChevronDown, 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',
+      },
+    },
+
+    '.accordion-node': {
+      cursor: 'pointer',
+      flexDirection: 'row',
+      display: 'flex',
+      gap: '4px',
+      alignItems: 'center',
+      background: 'transparent',
+      color: 'inherit',
+      border: 'none',
+    },
+
+    '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">
+            <ChevronDown />
+          </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>
+  )
+}