@nethru/ui 1.0.0

package/dist/samples/menu.sample.json

@@ -0,0 +1,303 @@
+[
+  {
+    "id": "0",
+    "name": "모니터링",
+    "href": "/monitor",
+    "sections": [
+      {
+        "id": "01",
+        "name": "",
+        "menu": [
+          {
+            "id": "011",
+            "name": "대시보드",
+            "href": "/report/dashboard",
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "02",
+        "name": "태스크",
+        "menu": [
+          {
+            "id": "021",
+            "name": "수집",
+            "href": "/report/collect",
+            "submenu": []
+          },
+          {
+            "id": "022",
+            "name": "변환",
+            "href": "/report/convert",
+            "submenu": []
+          },
+          {
+            "id": "023",
+            "name": "전송",
+            "href": "/report/transport",
+            "submenu": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "1",
+    "name": "태깅",
+    "href": "/tagging",
+    "sections": [
+      {
+        "id": "10",
+        "name": "",
+        "menu": [
+          {
+            "id": "101",
+            "name": "태그",
+            "href": "/tagging/tag",
+            "submenu": []
+          },
+          {
+            "id": "102",
+            "name": "트리거",
+            "href": "/tagging/trigger",
+            "submenu": []
+          },
+          {
+            "id": "103",
+            "name": "변수",
+            "href": "/tagging/variable",
+            "submenu": []
+          },
+          {
+            "id": "104",
+            "name": "변수 그룹",
+            "href": "/tagging/vgroup",
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "11",
+        "name": "",
+        "menu": [
+          {
+            "id": "111",
+            "name": "디버그 뷰",
+            "href": "/tagging/debugview",
+            "submenu": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "2",
+    "name": "태스크",
+    "href": "/task",
+    "sections": [
+      {
+        "id": "21",
+        "name": "",
+        "menu": [
+          {
+            "id": "211",
+            "name": "모니터링",
+            "href": "/task/monitor",
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "22",
+        "name": "수집",
+        "menu": [
+          {
+            "id": "221",
+            "name": "관리",
+            "href": "/task/collect",
+            "container": false,
+            "submenu": []
+          },
+          {
+            "id": "222",
+            "name": "수집 결과",
+            "href": "/task/collect/result",
+            "submenu": []
+          },
+          {
+            "id": "223",
+            "name": "실행 로그",
+            "href": "/task/collect/console",
+            "container": false,
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "23",
+        "name": "변환",
+        "menu": [
+          {
+            "id": "231",
+            "name": "관리",
+            "href": "/task/convert/list",
+            "submenu": []
+          },
+          {
+            "id": "232",
+            "name": "변환 결과",
+            "href": "/task/convert/result",
+            "submenu": []
+          },
+          {
+            "id": "234",
+            "name": "실행 로그",
+            "href": "/task/convert/console",
+            "container": false,
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "24",
+        "name": "전송",
+        "menu": [
+          {
+            "id": "241",
+            "name": "관리",
+            "href": "/task/transport/list",
+            "submenu": []
+          },
+          {
+            "id": "242",
+            "name": "전송 결과",
+            "href": "/task/transport/result",
+            "submenu": []
+          },
+          {
+            "id": "243",
+            "name": "실행 로그",
+            "href": "/task/transport/console",
+            "container": false,
+            "submenu": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "3",
+    "name": "카프카",
+    "href": "/kafka",
+    "sections": [
+      {
+        "id": "31",
+        "name": "모니터링",
+        "menu": [
+          {
+            "id": "311",
+            "name": "시스템",
+            "href": "/kafka/monitor/system",
+            "submenu": []
+          },
+          {
+            "id": "312",
+            "name": "처리 및 지연",
+            "href": "/kafka/monitor/lag",
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "32",
+        "name": "브로커",
+        "menu": [
+          {
+            "id": "321",
+            "name": "관리",
+            "href": "/kafka/broker/edit",
+            "container": false,
+            "submenu": []
+          },
+          {
+            "id": "322",
+            "name": "실행 로그",
+            "href": "/kafka/broker/console",
+            "container": false,
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "33",
+        "name": "커넥트",
+        "menu": [
+          {
+            "id": "331",
+            "name": "관리",
+            "href": "/kafka/connect/edit",
+            "submenu": []
+          },
+          {
+            "id": "332",
+            "name": "실행 로그",
+            "href": "/kafka/connect/console",
+            "container": false,
+            "submenu": []
+          }
+        ]
+      },
+      {
+        "id": "34",
+        "name": "토픽",
+        "menu": [
+          {
+            "id": "341",
+            "name": "관리",
+            "href": "/kafka/topic",
+            "submenu": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "4",
+    "name": "관리",
+    "href": "/settings",
+    "last": true,
+    "sections": [
+      {
+        "id": "41",
+        "name": "",
+        "menu": [
+          {
+            "id": "411",
+            "name": "에이전트 관리",
+            "href": "/settings/agent",
+            "submenu": []
+          },
+          {
+            "id": "412",
+            "name": "컨테이너 관리",
+            "href": "/settings/container",
+            "submenu": []
+          },
+          {
+            "id": "413",
+            "name": "실행 로그 설정",
+            "href": "/settings/consolelog",
+            "submenu": []
+          },
+          {
+            "id": "414",
+            "name": "회원 관리",
+            "href": "/settings/account",
+            "submenu": []
+          }
+        ]
+      }
+    ]
+  }
+]

package/dist/sidebar/MenuToggler.js

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import styles from './css/sidebar.module.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function MenuToggler({
+  closed,
+  onClick
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    className: `${styles.toggler} ${closed ? styles.closed : styles.opened}`,
+    children: /*#__PURE__*/_jsxs(Box, {
+      onClick: onClick,
+      children: [!closed && /*#__PURE__*/_jsx(NavigateBeforeIcon, {}), closed && /*#__PURE__*/_jsx(NavigateNextIcon, {})]
+    })
+  });
+}

package/dist/sidebar/MenuTree.js

@@ -0,0 +1,95 @@
+import { useNavigate } from "react-router-dom";
+import { getMenuTreeStates, useSidebarContext } from "./SidebarContext";
+import { TreeItem, TreeView } from "@mui/x-tree-view";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import { jsx as _jsx } from "react/jsx-runtime";
+const HAS_CHILDREN = "has-children";
+export default function MenuTree({
+  id,
+  data
+}) {
+  const styles = {
+    paddingRight: '18px',
+    '.MuiTreeItem-content': {
+      padding: '7px 8px'
+    },
+    '.MuiTreeItem-content.Mui-selected': {
+      backgroundColor: 'rgba(25, 118, 210, 0.2)'
+    },
+    '.MuiTreeItem-content .MuiTreeItem-label': {
+      fontSize: '0.9rem'
+    },
+    'li.has-children > .MuiTreeItem-content': {
+      backgroundColor: 'transparent'
+    }
+  };
+  const naviate = useNavigate();
+  const {
+    states,
+    dispatch
+  } = useSidebarContext();
+  const {
+    expanded
+  } = getMenuTreeStates(states, id);
+  const handleSelect = (event, ids) => {
+    dispatch({
+      type: "treeItemSelected",
+      id,
+      ids,
+      hasChildren: hasChildren(event.target)
+    });
+    const node = getNode(ids);
+    if (node && node.href) naviate(node.href);
+  };
+  const handleToggle = (event, ids) => {
+    dispatch({
+      type: "treeItemExpanded",
+      id,
+      ids
+    });
+  };
+  return /*#__PURE__*/_jsx(TreeView, {
+    defaultCollapseIcon: /*#__PURE__*/_jsx(ArrowDropDownIcon, {}),
+    defaultExpandIcon: /*#__PURE__*/_jsx(ArrowRightIcon, {}),
+    sx: styles,
+    selected: states.activeSecondaryItem || '',
+    expanded: expanded,
+    onNodeSelect: handleSelect,
+    onNodeToggle: handleToggle,
+    children: render(data)
+  });
+  function render(nodes) {
+    return nodes ? nodes.map(node => /*#__PURE__*/_jsx(TreeItem, {
+      nodeId: node.id,
+      label: node.name,
+      className: node.submenu.length > 0 ? HAS_CHILDREN : "",
+      children: render(node.submenu)
+    }, node.id)) : null;
+  }
+  function hasChildren(element) {
+    const target = findTreeItemRoot(element);
+    return target ? hasClass(target, HAS_CHILDREN) : false;
+  }
+  function findTreeItemRoot(element) {
+    while (element) {
+      if (hasClass(element, "MuiTreeItem-root")) break;
+      element = element.parentElement;
+    }
+    return element;
+  }
+  function hasClass(element, className) {
+    return [...element.classList].includes(className);
+  }
+  function getNode(id, nodes) {
+    nodes = nodes || data;
+    for (let node of nodes) {
+      if (node.id === id) return node;
+      if (node.submenu.length > 0) {
+        const child = getNode(id, node.submenu);
+        if (child) return child;
+      }
+    }
+    return null;
+  }
+}

package/dist/sidebar/MenuTreeGroup.js

@@ -0,0 +1,65 @@
+import { getMenuGroupStates, useSidebarContext } from './SidebarContext';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { variables } from '../variables';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function MenuTreeGroup({
+  id,
+  title,
+  children
+}) {
+  const styles = {
+    backgroundColor: variables.bodyBackgroundColor,
+    boxShadow: 'none',
+    '&:before': {
+      display: 'none'
+    },
+    '&.Mui-expanded': {
+      margin: 0
+    },
+    '.MuiSvgIcon-root': {
+      width: '0.9em',
+      height: '0.9em'
+    },
+    '.MuiAccordionSummary-root.Mui-expanded': {
+      minHeight: '48px'
+    },
+    '.MuiAccordionSummary-content.Mui-expanded': {
+      margin: 0
+    },
+    '.MuiAccordionDetails-root': {
+      padding: '0 16px 0 8px'
+    }
+  };
+  const {
+    states,
+    dispatch
+  } = useSidebarContext();
+  const expanded = getMenuGroupStates(states, id);
+  const handleChange = (event, expanded) => {
+    dispatch({
+      type: "menuGroupExpanded",
+      id,
+      expanded
+    });
+  };
+  return /*#__PURE__*/_jsxs(Accordion, {
+    expanded: expanded,
+    onChange: handleChange,
+    square: true,
+    sx: styles,
+    children: [/*#__PURE__*/_jsx(AccordionSummary, {
+      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(AccordionDetails, {
+      children: children
+    })]
+  });
+}

package/dist/sidebar/PrimaryMenu.js

@@ -0,0 +1,47 @@
+import { Link } from 'react-router-dom';
+import { Box, Stack } from '@mui/material';
+import { useSidebarContext } from "./SidebarContext";
+import styles from './css/primary.module.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PrimaryMenu({
+  items
+}) {
+  const {
+    states,
+    icons
+  } = useSidebarContext();
+  return /*#__PURE__*/_jsx(Stack, {
+    className: styles.container,
+    children: items.map(item => /*#__PURE__*/_jsx(MenuItem, {
+      icon: icons[item.href],
+      active: item.id === states.activePrimaryItem,
+      last: item.last,
+      ...item
+    }, item.href))
+  });
+}
+function MenuItem({
+  name,
+  icon,
+  href,
+  active,
+  last
+}) {
+  return /*#__PURE__*/_jsx(Link, {
+    to: href,
+    className: last ? 'mt-auto' : '',
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: `${styles['nav-item']} ${active && styles.active}`,
+      children: [active && /*#__PURE__*/_jsx(Box, {
+        className: styles.highlight
+      }), /*#__PURE__*/_jsx(Box, {
+        className: styles.icon,
+        children: icon
+      }), /*#__PURE__*/_jsx(Box, {
+        className: styles.text,
+        children: name
+      })]
+    })
+  });
+}

package/dist/sidebar/SecondaryMenu.js

@@ -0,0 +1,36 @@
+import { Divider, Stack } from '@mui/material';
+import MenuTreeGroup from './MenuTreeGroup';
+import MenuTree from './MenuTree';
+import styles from './css/sidebar.module.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SecondaryMenu({
+  sections,
+  closed
+}) {
+  return /*#__PURE__*/_jsx(Stack, {
+    className: `${styles.secondary} ${closed ? styles.closed : styles.opened}`,
+    children: sections.map((section, index) => {
+      let jsx = [];
+      jsx.push(index > 0 ? /*#__PURE__*/_jsx(Divider, {
+        sx: {
+          ml: 2,
+          mr: 2
+        }
+      }, `${section.id}_${index}`) : null);
+      jsx.push(section.name ? /*#__PURE__*/_jsx(MenuTreeGroup, {
+        id: section.id,
+        title: section.name,
+        children: /*#__PURE__*/_jsx(MenuTree, {
+          id: section.id,
+          data: section.menu
+        })
+      }, section.id) : /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(MenuTree, {
+          id: section.id,
+          data: section.menu
+        })
+      }, section.id));
+      return jsx;
+    })
+  });
+}

package/dist/sidebar/Sidebar.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { useSidebarContext } from "./SidebarContext";
+import { Stack } from "@mui/material";
+import PrimaryMenu from "./PrimaryMenu";
+import SecondaryMenu from "./SecondaryMenu";
+import MenuToggler from "./MenuToggler";
+import styles from './css/sidebar.module.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Sidebar() {
+  const [sections, setSections] = useState();
+  const {
+    menu,
+    states,
+    dispatch
+  } = useSidebarContext();
+  const {
+    menuClosed: closed
+  } = states;
+  const location = useLocation();
+  useEffect(() => {
+    dispatch({
+      type: 'updateActiveItems',
+      href: location.pathname,
+      menu
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menu, location.pathname]);
+  useEffect(() => {
+    const activeItem = menu.find(item => item.id === states.activePrimaryItem);
+    setSections(activeItem ? activeItem.sections : []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [states]);
+  return /*#__PURE__*/_jsxs(Stack, {
+    className: `${styles.container} ${closed || isEmpty(sections) ? styles.closed : styles.opened}`,
+    children: [/*#__PURE__*/_jsx(PrimaryMenu, {
+      items: menu
+    }), /*#__PURE__*/_jsx(SecondaryMenu, {
+      sections: sections ? sections : [],
+      closed: !isEmpty(sections) ? closed : true
+    }), !isEmpty(sections) && /*#__PURE__*/_jsx(MenuToggler, {
+      closed: closed,
+      onClick: () => dispatch({
+        type: "secondaryMenuToggled"
+      })
+    })]
+  });
+}
+function isEmpty(list) {
+  return list && list.length === 0;
+}