@nethru/ui 1.0.81 → 2.0.0

package/base/datagrid/DataGrid.js

@@ -0,0 +1,57 @@
+import { forwardRef, useCallback } from "react";
+import { DataGridPro as MuiDataGridPro, GridToolbarQuickFilter, koKR } from "@mui/x-data-grid-pro";
+import { Box, Stack } from "@mui/material";
+import Footer from "./Footer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DataGrid = /*#__PURE__*/forwardRef(({
+  toolbarLeadingSlot,
+  hideToolbar = false,
+  ...props
+}, ref) => {
+  const getRowHeight = useCallback(() => 'auto', []);
+  return /*#__PURE__*/_jsx(MuiDataGridPro, {
+    ref: ref,
+    autoHeight: true,
+    getRowHeight: getRowHeight,
+    disableColumnMenu: true,
+    disableColumnReorder: true,
+    disableRowSelectionOnClick: true,
+    pagination: true,
+    pageSizeOptions: [10, 25, 50, 100],
+    initialState: {
+      pagination: {
+        paginationModel: {
+          pageSize: 10,
+          page: 0
+        }
+      }
+    },
+    localeText: {
+      ...koKR.components.MuiDataGrid.defaultProps.localeText,
+      noRowsLabel: '항목이 없습니다.',
+      ...props.localText
+    },
+    slots: {
+      toolbar: hideToolbar ? null : Toolbar,
+      footer: Footer,
+      ...props.slots
+    },
+    ...props
+  });
+  function Toolbar() {
+    return /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      mb: 1.5,
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: toolbarLeadingSlot
+      }), /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(GridToolbarQuickFilter, {
+          variant: "outlined"
+        })
+      })]
+    });
+  }
+});
+export default DataGrid;

package/base/datagrid/Footer.js

@@ -0,0 +1,51 @@
+import { forwardRef, useCallback, useMemo } from "react";
+import { Box, Stack } from "@mui/material";
+import { GridFooter, GridPagination } from "@mui/x-data-grid-pro";
+import Pagination from "./Pagination";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Footer = /*#__PURE__*/forwardRef((props, ref) => {
+  const nullFunction = useCallback(() => null, []);
+  const footerStyles = useMemo(() => ({
+    '.MuiDataGrid-selectedRowCount': {},
+    '.MuiTablePagination-root': {
+      display: 'none'
+    }
+  }), []);
+  const rowsPerPageNone = useMemo(() => ({
+    '.MuiTablePagination-selectLabel + .MuiTablePagination-input': {
+      display: 'none'
+    }
+  }), []);
+  const rowsPerPageStyles = useMemo(() => ({
+    '.MuiTablePagination-selectLabel + .MuiTablePagination-input': {
+      marginLeft: 0,
+      marginRight: 0
+    }
+  }), []);
+  return /*#__PURE__*/_jsxs(Stack, {
+    ref: ref,
+    direction: "row",
+    children: [/*#__PURE__*/_jsx(GridFooter, {
+      sx: footerStyles,
+      ...props
+    }), /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      flexGrow: 1,
+      justifyContent: "center",
+      children: /*#__PURE__*/_jsx(GridPagination, {
+        labelDisplayedRows: nullFunction,
+        labelRowsPerPage: null,
+        ActionsComponent: Pagination,
+        sx: rowsPerPageNone,
+        ...props
+      })
+    }), /*#__PURE__*/_jsx(GridPagination, {
+      labelDisplayedRows: () => null,
+      ActionsComponent: () => null,
+      sx: rowsPerPageStyles,
+      ...props
+    })]
+  });
+});
+export default Footer;

package/base/datagrid/Pagination.js

@@ -0,0 +1,24 @@
+import { forwardRef } from "react";
+import MuiPagination from "@mui/material/Pagination";
+import { gridPageCountSelector, useGridApiContext, useGridSelector } from "@mui/x-data-grid-pro";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Pagination = /*#__PURE__*/forwardRef(({
+  page,
+  onPageChange,
+  className
+}, ref) => {
+  const apiRef = useGridApiContext();
+  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
+  return /*#__PURE__*/_jsx(MuiPagination, {
+    ref: ref,
+    color: "primary",
+    size: "small",
+    className: className,
+    count: pageCount,
+    page: page + 1,
+    onChange: (event, newPage) => {
+      onPageChange(event, newPage - 1);
+    }
+  });
+});
+export default Pagination;

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