@nethru/ui 1.0.82 → 2.0.0

package/dist/StatusChip.js

@@ -1,34 +0,0 @@
-import { Chip } from "@mui/material";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function StatusChip({
-  id,
-  label,
-  status,
-  onOperate,
-  sx,
-  ...props
-}) {
-  const styles = {
-    '&': {
-      bgcolor: status === 'normal' ? '#4caf50' : '#fff'
-    },
-    '.MuiSvgIcon-root.MuiChip-deleteIcon': {
-      cursor: onOperate ? 'pointer' : 'default'
-    }
-  };
-  return /*#__PURE__*/_jsx(Chip, {
-    id: id,
-    label: label,
-    variant: status === 'normal' ? 'filled' : 'outlined',
-    color: status === 'normal' ? 'success' : 'default',
-    deleteIcon: status === 'normal' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(ErrorIcon, {}),
-    onDelete: _ => onOperate && onOperate(id, status),
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}

package/dist/Switch.js

@@ -1,37 +0,0 @@
-import { FormControlLabel, Stack } from "@mui/material";
-import MuiSwitch from "@mui/material/Switch";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Switch({
-  label,
-  labelPlacement = 'top',
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [label && /*#__PURE__*/_jsx(Stack, {
-      direction: "row",
-      alignItems: "center",
-      sx: {
-        '.MuiFormControlLabel-label': {
-          color: '#666',
-          fontSize: 11
-        },
-        '.MuiFormControlLabel-root': {
-          ml: labelPlacement === 'start' ? '0px' : '-10px',
-          mr: 0
-        }
-      },
-      children: /*#__PURE__*/_jsx(FormControlLabel, {
-        control: /*#__PURE__*/_jsx(MuiSwitch, {
-          color: "primary",
-          ...props
-        }),
-        label: label,
-        labelPlacement: labelPlacement
-      })
-    }), !label && /*#__PURE__*/_jsx(MuiSwitch, {
-      ...props
-    })]
-  });
-}

package/dist/TabbedSection.js

@@ -1,37 +0,0 @@
-import { Stack, Tab } from "@mui/material";
-import Tabs from "./Tabs";
-import Section from "./Section";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function TabbedSection({
-  orientation,
-  labels = [],
-  tabProps = {},
-  sectionProps = {},
-  children,
-  ...props
-}) {
-  const styles = {
-    mt: 0,
-    width: orientation === 'vertical' ? '100%' : 'unset'
-  };
-  return /*#__PURE__*/_jsxs(Stack, {
-    direction: orientation === 'vertical' ? 'row' : 'column',
-    children: [/*#__PURE__*/_jsx(Tabs, {
-      orientation: orientation,
-      ...props,
-      children: labels.map((label, index) => /*#__PURE__*/_jsx(Tab, {
-        label: label,
-        wrapped: orientation === 'vertical',
-        ...tabProps
-      }, index))
-    }), /*#__PURE__*/_jsx(Section, {
-      sx: {
-        ...styles,
-        ...sectionProps.sx
-      },
-      ...sectionProps,
-      children: children
-    })]
-  });
-}

package/dist/Tabs.js

@@ -1,38 +0,0 @@
-import React from "react";
-import MuiTabs from "@mui/material/Tabs";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function Tabs({
-  orientation,
-  sx,
-  ...props
-}) {
-  const vertical = orientation === 'vertical';
-  const styles = {
-    ml: vertical ? 0 : 0.5,
-    mr: vertical ? 0 : 0.5,
-    mt: vertical ? 0.5 : 0,
-    mb: vertical ? 0.5 : 0,
-    '& .MuiButtonBase-root.MuiTab-root': {
-      fontSize: '15px'
-    },
-    '&.MuiTabs-root.MuiTabs-vertical': {
-      minWidth: '40px',
-      maxWidth: '40px'
-    },
-    '&.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
-      minWidth: '40px',
-      maxWidth: '40px'
-    }
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MuiTabs, {
-      orientation: orientation,
-      sx: {
-        ...styles,
-        ...sx
-      },
-      ...props
-    })
-  });
-}

package/dist/TextField.js

@@ -1,25 +0,0 @@
-import MuiTextField from "@mui/material/TextField";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function TextField({
-  width,
-  fontSize,
-  textAlign,
-  inputProps,
-  ...props
-}) {
-  const styles = {
-    fontSize: fontSize ? fontSize : 16,
-    textAlign: textAlign ? textAlign : 'left',
-    width
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MuiTextField, {
-      inputProps: {
-        ...inputProps,
-        style: styles
-      },
-      ...props
-    })
-  });
-}

package/dist/index.js

@@ -1,44 +0,0 @@
-import * as colors from './colors';
-export { colors };
-export { default as Accordion } from "./Accordion";
-export { default as AccordionDetails } from "./AccordionDetails";
-export { default as AccordionSummary } from "./AccordionSummary";
-export { default as AlertDialog } from "./AlertDialog";
-export { default as AppBar } from "./AppBar";
-export { default as AppendableFormList } from "./AppendableFormList";
-export { default as AvatarDropdown } from "./AvatarDropdown";
-export { default as Button } from "./Button";
-export { default as Checkbox } from "./Checkbox";
-export { default as CircularProgress } from "./CircularProgress";
-export { default as ColumnedSection } from "./ColumnedSection";
-export { default as ConfirmDialog } from "./ConfirmDialog";
-export { default as DataGrid } from "./DataGrid";
-export { default as Dialog } from "./Dialog";
-export { default as DropdownButton } from "./DropdownButton";
-export { default as Editor } from "./editor/Editor";
-export { default as FormLabel } from "./FormLabel";
-export { default as Frame } from "./Frame";
-export { default as GroupSelect } from "./GroupSelect";
-export { default as ListItem } from "./ListItem";
-export { default as ListItemDivider } from "./ListItemDivider";
-export { default as ListItemGrid } from "./ListItemGrid";
-export { default as ListItemText } from "./ListItemText";
-export { default as MainHeader } from "./MainHeader";
-export { default as PropertyTable } from "./PropertyTable";
-export { default as ReferenceChipList } from "./ReferenceChipList";
-export { default as SearchableSelect } from "./SearchableSelect";
-export { default as SearchTextField } from "./SearchTextField";
-export { default as Section } from "./Section";
-export { default as Select } from "./Select";
-export { default as ShadowedSection } from "./ShadowedSection";
-export { default as Slider } from "./Slider";
-export { default as Snackbar } from "./Snackbar";
-export { default as StatusChip } from "./StatusChip";
-export { default as Switch } from "./Switch";
-export { default as TabbedSection } from "./TabbedSection";
-export { default as Tabs } from "./Tabs";
-export { default as TextField } from "./TextField";
-export { default as Sidebar } from "./sidebar/Sidebar";
-export * from './sidebar/SidebarContext';
-export { default as Error } from "./error/Error";
-export { default as HttpError } from "./error/HttpError";

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;
-}