@nethru/ui 1.0.81 → 2.0.0

package/dist/samples/global.sample.css

@@ -1,59 +0,0 @@
-/* variable */
-:root {
-    --body-background-color: #f8f9fa;
-    --gnb-height: 64px;
-    --primary-menu-width: 56px;
-    --secondary-menu-width: 256px;
-}
-
-
-/* global */
-html, body {
-    margin: 0;
-    height: 100%;
-}
-
-#root {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-
-/* margin */
-.ml-auto {
-    margin-left: auto;
-}
-.mr-auto {
-    margin-right: auto;
-}
-.mt-auto {
-    margin-top: auto;
-}
-.mt-bottom {
-    margin-bottom: auto;
-}
-
-
-/* Highchart */
-.highcharts-tooltip-box {
-    fill-opacity: 0;
-}
-
-.highcharts-tooltip > span {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    padding: 8px;
-}
-
-
-/* CodeMirror */
-.cm-theme-light {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    font-size: 14px;
-}
-
-.cm-editor, .cm-editor.cm-focused {
-    outline: 1px solid #eaeaea;
-}

package/dist/sidebar/MenuTree.js

@@ -1,95 +0,0 @@
-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 navigate = 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) navigate(node.href instanceof Array ? node.href[0] : 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

@@ -1,65 +0,0 @@
-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/SecondaryMenu.js

@@ -1,36 +0,0 @@
-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/SidebarContext.js

@@ -1,122 +0,0 @@
-import { createContext, useContext, useReducer } from "react";
-import { produce } from "immer";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SidebarContext = /*#__PURE__*/createContext();
-export function SidebarContextProvider({
-  menu,
-  icons,
-  children
-}) {
-  const [states, dispatch] = useReducer(reducer, initialStates);
-  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
-    value: {
-      menu,
-      icons,
-      states,
-      dispatch
-    },
-    children: children
-  });
-}
-export function useSidebarContext() {
-  return useContext(SidebarContext);
-}
-export function getMenuGroupStates(states, id) {
-  return states.menuGroupsExpanded[id] !== undefined ? states.menuGroupsExpanded[id] : true;
-}
-export function getMenuTreeStates(states, id) {
-  return states.menuTrees[id] || emptyState();
-}
-function reducer(states, action) {
-  const {
-    id,
-    type
-  } = action;
-  switch (type) {
-    case 'secondaryMenuToggled':
-      return produce(states, draft => {
-        draft.menuClosed = !states.menuClosed;
-      });
-    case 'menuGroupExpanded':
-      return produce(states, draft => {
-        draft.menuGroupsExpanded[id] = action.expanded;
-      });
-    case 'treeItemSelected':
-      return produce(states, draft => {
-        for (const key in draft.menuTrees) {
-          draft.menuTrees[key].selected = [];
-        }
-        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
-        draft.menuTrees[id].selected = action.ids;
-      });
-    case 'treeItemExpanded':
-      return produce(states, draft => {
-        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
-        draft.menuTrees[id].expanded = [...action.ids];
-      });
-    case 'updateActiveItems':
-      return produce(states, draft => {
-        updateActiveItems(draft, action.menu, action.href);
-      });
-    default:
-      throw new Error(`Undefined Sidebar Action Type: ${JSON.stringify(action)}`);
-  }
-}
-function emptyState() {
-  return {
-    selected: [],
-    expanded: []
-  };
-}
-const initialStates = {
-  activePrimaryItem: undefined,
-  activeSecondaryItem: undefined,
-  menuClosed: false,
-  menuGroupsExpanded: {},
-  menuTrees: {}
-};
-function updateActiveItems(draft, menu, href) {
-  draft.activePrimaryItem = undefined;
-  draft.activeSecondaryItem = undefined;
-  for (let item of menu) {
-    if (item.href === href) {
-      draft.activePrimaryItem = item.id;
-      return;
-    }
-    if (updateActiveSection(item.sections)) {
-      draft.activePrimaryItem = item.id;
-      return;
-    }
-  }
-  function updateActiveSection(sections) {
-    if (!sections) return;
-    for (let section of sections) {
-      if (startsWith(section.href)) {
-        draft.activeSecondaryItem = section.id;
-        return true;
-      }
-      if (updateActiveSubmenuItems(section.id, section.menu)) {
-        draft.menuGroupsExpanded[section.id] = true;
-        return true;
-      }
-    }
-  }
-  function updateActiveSubmenuItems(id, submenu) {
-    if (!submenu) return;
-    for (let item of submenu) {
-      if (startsWith(item.href)) {
-        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
-        draft.activeSecondaryItem = item.id;
-        return true;
-      }
-      if (updateActiveSubmenuItems(id, item.submenu)) {
-        draft.menuTrees[id].expanded.push(item.id);
-        return true;
-      }
-    }
-  }
-  function startsWith(hrefs) {
-    const menuHrefs = hrefs instanceof Array ? hrefs : [hrefs];
-    return menuHrefs.some(menuHref => href.startsWith(menuHref));
-  }
-}

package/dist/sidebar/css/primary.module.css

@@ -1,80 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    width: var(--primary-menu-width);
-    height: 100%;
-    border-right: 1px solid #dee2e6;
-    z-index: 30;
-    transition-property: width background-color;
-    transition-duration: .2s;
-}
-.container:hover {
-    width: 240px;
-    background-color: #fff;
-    box-shadow: 1px 1px 12px #dadce0;
-}
-.container a {
-    text-decoration: none;
-    cursor: pointer;
-}
-.container a:first-child {
-    padding-top: 10px;
-}
-.container a:last-child {
-    padding-bottom: 10px;
-}
-
-.nav-item {
-    position: relative;
-    display: flex;
-    height: 48px;
-    align-items: center;
-    color: #495057;
-}
-.nav-item:hover {
-    /*border-radius: 0 48px 48px 0;*/
-    background-color: #e9ecef;
-}
-.nav-item.active {
-    /*color: #fff;*/
-    /*border-left: 5px solid #0d6efd;*/
-}
-.container:hover .nav-item.active {
-    /*border-radius: 0 48px 48px 0;*/
-    /*background-color: #0d6efd !important;*/
-}
-
-.highlight {
-    position: absolute;
-    left: 0px;
-    width: 5px;
-    height: 36px;
-    z-index: 100;
-    /*border-radius: 50%;*/
-    background-color: #0d6efd;
-    transition-property: height;
-    transition-duration: .2s;
-}
-.container:hover .highlight {
-    height: 48px;
-    /*display: none;*/
-}
-
-.icon {
-    margin: 4px 15px 0px 16px;
-}
-.icon > svg {
-    width: 24px;
-    height: 24px;
-}
-
-.text {
-    font-size: .9rem;
-    display: none;
-    white-space: nowrap;
-    overflow-x: hidden;
-}
-.container:hover .text {
-    display: block;
-}

package/dist/sidebar/css/sidebar.module.css

@@ -1,50 +0,0 @@
-.container {
-    display: flex;
-    position: relative;
-    background-color: var(--body-background-color);
-    transition: width .2s;
-}
-.container.opened {
-    width: calc(var(--primary-menu-width) + var(--secondary-menu-width));
-}
-.container.closed {
-    width: var(--primary-menu-width);
-}
-
-
-.secondary {
-    position: absolute;
-    left: var(--primary-menu-width);
-    height: 100%;
-    z-index: 0;
-    white-space: nowrap;
-    overflow-x: hidden;
-}
-.secondary.opened {
-    width: var(--secondary-menu-width);
-}
-.secondary.closed {
-    width: 0px;
-    overflow: hidden;
-}
-
-.toggler {
-    position: absolute;
-    bottom: 12px;
-    width: 24px;
-    height: 32px;
-    padding-top: 2px;
-    z-index: 15;
-    cursor: pointer;
-    transition: left .2s;
-}
-.toggler.opened {
-    left: 264px;
-}
-.toggler.closed {
-    left: var(--primary-menu-width);
-    background-color: #f1f3f4;
-    border: unset;
-    border-radius: 0 50% 50% 0/0 50% 50% 0;
-    box-shadow: 1px 1px 1px 1px #e8eaed;
-}

package/dist/variables.js

@@ -1,6 +0,0 @@
-export const variables = {
-  bodyBackgroundColor: '#f8f9fa',
-  gnbHeight: 64,
-  primaryMenuWidth: 56,
-  secondaryMenuWidth: 256
-};