@nethru/ui 1.0.82 → 2.0.1

package/base/dialog/AlertDialog.js

@@ -0,0 +1,21 @@
+import { Button } from "@mui/material";
+import { forwardRef } from "react";
+import SimpleDialog from "./SimpleDialog";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AlertDialog = /*#__PURE__*/forwardRef(({
+  onClose,
+  closeText = '확인',
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(SimpleDialog, {
+    ref: ref,
+    onClose: onClose,
+    ...props,
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      onClick: onClose,
+      children: closeText
+    })
+  });
+});
+export default AlertDialog;

package/base/dialog/ConfirmDialog.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { Button } from "@mui/material";
+import SimpleDialog from "./SimpleDialog";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ConfirmDialog = /*#__PURE__*/forwardRef(({
+  onConfirm,
+  onCancel,
+  confirmText = '예',
+  cancelText = '아니오',
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsxs(SimpleDialog, {
+    ref: ref,
+    onClose: onCancel,
+    ...props,
+    children: [/*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      onClick: onConfirm,
+      autoFocus: true,
+      children: confirmText
+    }), /*#__PURE__*/_jsx(Button, {
+      variant: "outlined",
+      onClick: onCancel,
+      children: cancelText
+    })]
+  });
+});
+export default ConfirmDialog;

package/base/dialog/Dialog.js

@@ -0,0 +1,56 @@
+import { forwardRef, useMemo } from "react";
+import { DialogTitle, IconButton, Slide, Zoom } from "@mui/material";
+import MuiDialog from "@mui/material/Dialog";
+import CloseIcon from '@mui/icons-material/Close';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ZoomTransition = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/_jsx(Zoom, {
+    ref: ref,
+    ...props
+  });
+});
+const SlideTransition = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/_jsx(Slide, {
+    direction: "down",
+    ref: ref,
+    ...props
+  });
+});
+const Dialog = /*#__PURE__*/forwardRef(({
+  title,
+  showCloseIcon,
+  center = true,
+  children,
+  sx,
+  ...props
+}, ref) => {
+  const styles = useMemo(() => ({
+    '& .MuiDialog-container': {
+      alignItems: center ? 'center' : 'flex-start'
+    }
+  }), [center]);
+  const iconButtonStyles = useMemo(() => ({
+    position: 'absolute',
+    right: 20,
+    top: 24,
+    color: theme => theme.palette.grey[700]
+  }), []);
+  return /*#__PURE__*/_jsxs(MuiDialog, {
+    ref: ref,
+    TransitionComponent: center ? ZoomTransition : SlideTransition,
+    sx: {
+      ...styles,
+      sx
+    },
+    ...props,
+    children: [title && /*#__PURE__*/_jsx(DialogTitle, {
+      children: title
+    }), showCloseIcon && /*#__PURE__*/_jsx(IconButton, {
+      onClick: props.onClose,
+      sx: iconButtonStyles,
+      children: /*#__PURE__*/_jsx(CloseIcon, {})
+    }), children]
+  });
+});
+export default Dialog;

package/base/dialog/SimpleDialog.js

@@ -0,0 +1,33 @@
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Dialog from "./Dialog";
+import Alert from "../Alert";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SimpleDialog = /*#__PURE__*/forwardRef(({
+  severity,
+  content,
+  subcontent,
+  children,
+  open,
+  onClose,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsxs(Dialog, {
+    ref: ref,
+    open: open,
+    onClose: onClose,
+    ...props,
+    children: [/*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsx(Alert, {
+        severity: severity,
+        subcontent: subcontent,
+        children: content
+      })
+    }), /*#__PURE__*/_jsx(DialogActions, {
+      children: children
+    })]
+  });
+});
+export default SimpleDialog;

package/{dist → base}/error/Error.js

@@ -1,7 +1,6 @@
 import { Box, Button, Paper, Stack, Typography } from "@mui/material";
 import CampaignIcon from '@mui/icons-material/Campaign';
 import { useNavigate } from "react-router-dom";
-import { variables } from "../variables";
 import { useCallback } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,7 +21,7 @@ export default function Error({
     justifyContent: "center",
     alignItems: "center",
     sx: {
-      backgroundColor: variables.bodyBackgroundColor
+      backgroundColor: 'red'
     },
     children: [/*#__PURE__*/_jsxs(Paper, {
       variant: "outlined",

package/base/frame/AppBar.js

@@ -0,0 +1,54 @@
+import React, { forwardRef, useMemo } from "react";
+import { Box, Stack, Toolbar } from "@mui/material";
+import MuiAppBar from "@mui/material/AppBar";
+import { useSidebarContext } from "./sidebar/SidebarContext";
+import { appbarBackground } from "../assets/images";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AppBar = /*#__PURE__*/forwardRef(({
+  mode,
+  appsSlot,
+  brandSlot,
+  avatarSlot,
+  children,
+  ...props
+}, ref) => {
+  const {
+    states
+  } = useSidebarContext();
+  const styles = useMemo(() => ({
+    position: 'absolute',
+    right: 0,
+    top: 'calc(var(--gnb-height) - 10px)',
+    width: `calc(100% - var(--primary-menu-width) - ${states.menuClosed ? 'var(--secondary-menu-collapsed-width) - 3px' : 'var(--secondary-menu-width)'} )`,
+    height: 10,
+    backgroundImage: appbarBackground,
+    backgroundRepeat: 'repeat-x',
+    backgroundPositionY: 'bottom'
+  }), [states.menuClosed]);
+  return /*#__PURE__*/_jsxs(MuiAppBar, {
+    ref: ref,
+    className: mode === 'preview' ? 'MuiAppBar-preview' : '',
+    ...props,
+    children: [/*#__PURE__*/_jsx(Toolbar, {
+      children: /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexGrow: 1,
+        gap: 5.5,
+        children: [appsSlot, brandSlot, /*#__PURE__*/_jsxs(Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexGrow: 1,
+          gap: 6,
+          children: [children, !children && /*#__PURE__*/_jsx(Box, {}), avatarSlot]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: styles
+    })]
+  });
+});
+export default AppBar;

package/base/frame/Brand.js

@@ -0,0 +1,36 @@
+import React, { forwardRef, useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Brand = /*#__PURE__*/forwardRef(({
+  title,
+  logoUri,
+  onLogoClick,
+  ...props
+}, ref) => {
+  const logoStyles = useMemo(() => ({
+    cursor: onLogoClick ? 'pointer' : 'default'
+  }), [onLogoClick]);
+  const titleStyles = useMemo(() => ({
+    cursor: 'default'
+  }), []);
+  return /*#__PURE__*/_jsxs(Stack, {
+    gap: 1.5,
+    direction: "row",
+    alignItems: "center",
+    ...props,
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "img",
+      src: logoUri,
+      onClick: onLogoClick,
+      sx: logoStyles,
+      alt: "logo"
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "logo",
+      noWrap: true,
+      sx: titleStyles,
+      children: title
+    })]
+  });
+});
+export default Brand;

package/base/frame/Frame.js

@@ -0,0 +1,49 @@
+import { forwardRef, useMemo } from "react";
+import { Box } from '@mui/material';
+import { SidebarContextProvider } from '../frame/sidebar/SidebarContext';
+import { blueGrey } from "../colors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Frame = /*#__PURE__*/forwardRef(({
+  appBar,
+  sideBar,
+  menu,
+  menuIcons = {},
+  children,
+  footer,
+  mainRef,
+  onScroll
+}, ref) => {
+  const containerStyles = useMemo(() => ({
+    display: 'flex',
+    flexGrow: 1,
+    overflow: 'auto',
+    marginTop: 'var(--gnb-height)'
+  }), []);
+  const contentStyles = useMemo(() => ({
+    flexGrow: 1,
+    overflow: 'auto',
+    padding: '24px 28px',
+    backgroundColor: blueGrey.contentBg
+  }), []);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(SidebarContextProvider, {
+      menu: menu,
+      icons: menuIcons,
+      children: [appBar, /*#__PURE__*/_jsxs(Box, {
+        sx: containerStyles,
+        children: [sideBar, /*#__PURE__*/_jsxs(Box, {
+          ref: mainRef,
+          component: "section",
+          sx: contentStyles,
+          onScroll: onScroll,
+          children: [/*#__PURE__*/_jsx("main", {
+            children: children
+          }), footer]
+        })]
+      })]
+    })
+  });
+});
+export default Frame;

package/{dist → base/frame}/sidebar/MenuToggler.js

@@ -1,7 +1,6 @@
 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 { CollapseIcon, ExpandIcon } from "../../assets/icons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function MenuToggler({
@@ -11,8 +10,20 @@ export default function MenuToggler({
   return /*#__PURE__*/_jsx(Box, {
     className: `${styles.toggler} ${closed ? styles.closed : styles.opened}`,
     children: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
       onClick: onClick,
-      children: [!closed && /*#__PURE__*/_jsx(NavigateBeforeIcon, {}), closed && /*#__PURE__*/_jsx(NavigateNextIcon, {})]
+      children: [!closed && /*#__PURE__*/_jsx(CollapseIcon, {
+        sx: {
+          fontSize: 24
+        }
+      }), closed && /*#__PURE__*/_jsx(ExpandIcon, {
+        sx: {
+          fontSize: 24
+        }
+      })]
     })
   });
 }

package/{dist → base/frame}/sidebar/PrimaryMenu.js

@@ -1,11 +1,11 @@
-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
+  items,
+  onClick
 }) {
   const {
     states,
@@ -13,10 +13,11 @@ export default function PrimaryMenu({
   } = useSidebarContext();
   return /*#__PURE__*/_jsx(Stack, {
     className: styles.container,
+    gap: 4,
     children: items.map(item => /*#__PURE__*/_jsx(MenuItem, {
       icon: icons[item.href],
       active: item.id === states.activePrimaryItem,
-      last: item.last,
+      onClick: _ => onClick(item),
       ...item
     }, item.href))
   });
@@ -24,24 +25,18 @@ export default function PrimaryMenu({
 function MenuItem({
   name,
   icon,
-  href,
   active,
-  last
+  onClick
 }) {
-  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
-      })]
-    })
+  return /*#__PURE__*/_jsxs(Box, {
+    className: `${styles['nav-item']} ${active && styles.active}`,
+    onClick: onClick,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: styles.icon,
+      children: icon instanceof Array ? icon[active ? 1 : 0] : icon
+    }), /*#__PURE__*/_jsx(Box, {
+      className: styles.text,
+      children: name
+    })]
   });
 }

package/base/frame/sidebar/SecondaryMenu.js

@@ -0,0 +1,41 @@
+import { MenuList, Stack } from '@mui/material';
+import styles from './css/sidebar.module.css';
+import MenuItem from "../../MenuItem";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SecondaryMenu({
+  sections,
+  closed,
+  onClick
+}) {
+  const {
+    states
+  } = useSidebarContext();
+  return /*#__PURE__*/_jsx(Stack, {
+    className: `${styles.secondary} ${closed ? styles.closed : styles.opened}`,
+    children: /*#__PURE__*/_jsx(MenuList, {
+      sx: {
+        visibility: closed ? 'hidden' : 'visible'
+      },
+      children: sections.map((section, index) => {
+        let jsx = [];
+        if (section.name) jsx.push( /*#__PURE__*/_jsx(MenuItem, {
+          variant: "menusection",
+          children: section.name
+        }, section.id));
+        section.menu.forEach(item => {
+          jsx.push( /*#__PURE__*/_jsx(MenuItem, {
+            variant: "menuitem",
+            selected: item.id === states.activeSecondaryItem,
+            onClick: _ => onClick(item),
+            children: item.name
+          }, item.id));
+        });
+        jsx.push( /*#__PURE__*/_jsx(MenuItem, {
+          variant: "spacer"
+        }, `${index}-${section.menu?.length}`));
+        return jsx;
+      })
+    })
+  });
+}

package/{dist → base/frame}/sidebar/Sidebar.js

@@ -1,14 +1,14 @@
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
-import { useSidebarContext } from "./SidebarContext";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Stack } from "@mui/material";
+import { useSidebarContext } from "./SidebarContext";
 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 Sidebar = /*#__PURE__*/forwardRef((props, ref) => {
   const [sections, setSections] = useState();
   const {
     menu,
@@ -19,6 +19,15 @@ export default function Sidebar() {
     menuClosed: closed
   } = states;
   const location = useLocation();
+  const navigate = useNavigate();
+  const handleClick = useCallback(item => {
+    navigate(item.href);
+  }, [navigate]);
+  const handleToggle = useCallback(_ => {
+    dispatch({
+      type: 'secondaryMenuToggled'
+    });
+  }, [dispatch]);
   useEffect(() => {
     dispatch({
       type: 'updateActiveItems',
@@ -33,20 +42,22 @@ export default function Sidebar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [states]);
   return /*#__PURE__*/_jsxs(Stack, {
+    ref: ref,
     className: `${styles.container} ${closed || isEmpty(sections) ? styles.closed : styles.opened}`,
     children: [/*#__PURE__*/_jsx(PrimaryMenu, {
-      items: menu
+      items: menu,
+      onClick: handleClick
     }), /*#__PURE__*/_jsx(SecondaryMenu, {
       sections: sections ? sections : [],
-      closed: !isEmpty(sections) ? closed : true
+      closed: !isEmpty(sections) ? closed : true,
+      onClick: handleClick
     }), !isEmpty(sections) && /*#__PURE__*/_jsx(MenuToggler, {
       closed: closed,
-      onClick: () => dispatch({
-        type: "secondaryMenuToggled"
-      })
+      onClick: handleToggle
     })]
   });
-}
+});
+export default Sidebar;
 function isEmpty(list) {
   return list && list.length === 0;
 }

package/base/frame/sidebar/SidebarContext.js

@@ -0,0 +1,74 @@
+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);
+}
+function reducer(states, action) {
+  const {
+    type
+  } = action;
+  switch (type) {
+    case 'secondaryMenuToggled':
+      return produce(states, draft => {
+        draft.menuClosed = !states.menuClosed;
+      });
+    case 'updateActiveItems':
+      return produce(states, draft => {
+        updateActiveItems(draft, action.menu, action.href);
+      });
+    default:
+      throw new Error(`Undefined Sidebar Action Type: ${JSON.stringify(action)}`);
+  }
+}
+const initialStates = {
+  activePrimaryItem: undefined,
+  activeSecondaryItem: undefined,
+  menuClosed: false
+};
+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 (updateActiveMenuItem(item.sections)) {
+      draft.activePrimaryItem = item.id;
+      return;
+    }
+  }
+  function updateActiveMenuItem(sections) {
+    if (!sections) return;
+    for (let section of sections) {
+      for (let item of section.menu) {
+        if (startsWith(item.href)) {
+          draft.activeSecondaryItem = item.id;
+          return true;
+        }
+      }
+    }
+  }
+  function startsWith(hrefs) {
+    const menuHrefs = hrefs instanceof Array ? hrefs : [hrefs];
+    return menuHrefs.some(menuHref => href.startsWith(menuHref));
+  }
+}

package/base/frame/sidebar/css/primary.module.css

@@ -0,0 +1,69 @@
+.container {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: calc(var(--primary-menu-width) + 10px);
+    padding-right: 10px;
+    height: 100%;
+    background-color: var(--frame-background-color);
+}
+.container a {
+    text-decoration: none;
+    cursor: pointer;
+}
+.container a:first-child {
+    padding-top: 10px;
+}
+.container a:last-child {
+    padding-bottom: 10px;
+}
+
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    height: 50px;
+    align-items: center;
+    color: #656565;
+    cursor: pointer;
+}
+.nav-item .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+}
+.nav-item:hover .icon {
+    background-color: rgba(51,51,51,0.05);
+}
+.nav-item.active .icon {
+    color: #333;
+    background-color: rgba(51,51,51,0.1);
+}
+.nav-item.active .text {
+    font-weight: 600;
+}
+.container:hover .nav-item.active {
+    /*border-radius: 0 48px 48px 0;*/
+    /*background-color: #0d6efd !important;*/
+}
+
+
+.icon {
+    margin: 4px 15px 0px 16px;
+}
+.icon > svg {
+    width: 24px;
+    height: 24px;
+}
+
+.text {
+    color: #333;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.4;
+    letter-spacing: 0;
+    white-space: nowrap;
+    overflow-x: hidden;
+}