@nethru/ui 1.0.0

package/README.md

@@ -0,0 +1,28 @@
+# <center>Nethru UI</center>
+* * *
+Nethru UI is a wrapper library of [MUI](https://mui.com) components that features our implementation of Google's Material Design system.
+
+
+### Installation
+* * *
+Install the package in your project directory with:
+```
+npm install @nethru/ui
+```    
+   
+   
+
+### Documentation
+* * *
+Visit https://nethru.atlassian.net/wiki/spaces/combuff/overview to view the full documentation.
+
+
+### Examples
+* * *
+Visit https://nethru.atlassian.net/wiki/spaces/combuff/overview to view several examples.
+
+
+### Changelog
+* * *
+The [changelog](https://nethru.atlassian.net/wiki/spaces/combuff/overview) is regularly updated to reflect what's changed in each new release.
+

package/dist/Accordion.js

@@ -0,0 +1,41 @@
+import MuiAccordion from "@mui/material/Accordion";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  border: '1px solid #eaeaea',
+  boxShadow: 'none',
+  '.MuiAccordionDetails-root': {
+    pt: 0,
+    pl: 8,
+    pr: 8
+  },
+  '.MuiFormLabel-root.MuiInputLabel-root': {
+    fontSize: '14px'
+  },
+  '.MuiInputBase-input.MuiInput-input': {
+    color: '#555',
+    fontSize: '15px'
+  },
+  '.MuiTabs-root.MuiTabs-vertical': {
+    mt: 2
+  },
+  '.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
+    fontSize: '14px',
+    minWidth: '32px',
+    maxWidth: '32px'
+  },
+  '.MuiButtonBase-root.MuiToggleButton-root': {
+    pt: '1px',
+    pb: '1px',
+    fontSize: '12px'
+  }
+};
+export default function Accordion({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(MuiAccordion, {
+    sx: styles,
+    ...props,
+    children: children
+  });
+}

package/dist/AccordionDetails.js

@@ -0,0 +1,15 @@
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  mb: 2
+};
+export default function AccordionDetails({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(MuiAccordionDetails, {
+    sx: styles,
+    ...props,
+    children: children
+  });
+}

package/dist/AccordionSummary.js

@@ -0,0 +1,25 @@
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Typography } from "@mui/material";
+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 AccordionSummary({
+  title,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
+      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+      ...props,
+      children: /*#__PURE__*/_jsx(Typography, {
+        children: title
+      })
+    }), !title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
+      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+      ...props,
+      children: children
+    })]
+  });
+}

package/dist/AlertDialog.js

@@ -0,0 +1,48 @@
+import { Button, Stack } from "@mui/material";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import Dialog from "./Dialog";
+import CampaignIcon from "@mui/icons-material/Campaign";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AlertDialog({
+  open,
+  onClose,
+  content,
+  closeText = '확인'
+}) {
+  return /*#__PURE__*/_jsxs(Dialog, {
+    contentFontSize: 15,
+    open: open,
+    onClose: onClose,
+    children: [/*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(CampaignIcon, {
+          sx: {
+            color: '#777',
+            '&': {
+              fontSize: 50
+            }
+          }
+        }), /*#__PURE__*/_jsx(DialogContentText, {
+          children: content
+        })]
+      })
+    }), /*#__PURE__*/_jsx(DialogActions, {
+      sx: {
+        mt: 0,
+        mb: 1,
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        onClick: onClose,
+        children: closeText
+      })
+    })]
+  });
+}

package/dist/AppBar.js

@@ -0,0 +1,64 @@
+import { Box, Divider, Stack, Toolbar, Typography } from "@mui/material";
+import MuiAppBar from "@mui/material/AppBar";
+import { grey } from "@mui/material/colors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AppBar({
+  title,
+  logoUri,
+  onLogoClick,
+  children
+}) {
+  const appbarStyles = {
+    boxShadow: 'none',
+    borderBottom: `1px solid ${grey[300]}`,
+    '@media (min-width: 600px)': {
+      '.MuiToolbar-root': {
+        paddingLeft: '16px',
+        paddingRight: '16px'
+      }
+    }
+  };
+  const logoStyles = {
+    width: 37,
+    height: 32,
+    cursor: onLogoClick ? 'pointer' : 'default'
+  };
+  const dividerStyles = {
+    borderColor: grey[200],
+    mt: 2,
+    mb: 2,
+    ml: 2,
+    mr: 1
+  };
+  return /*#__PURE__*/_jsx(MuiAppBar, {
+    color: "transparent",
+    sx: appbarStyles,
+    children: /*#__PURE__*/_jsxs(Toolbar, {
+      children: [/*#__PURE__*/_jsxs(Stack, {
+        spacing: 1,
+        direction: "row",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: "img",
+          src: logoUri,
+          alt: "logo",
+          onClick: onLogoClick,
+          sx: logoStyles
+        }), /*#__PURE__*/_jsx(Typography, {
+          noWrap: true,
+          sx: {
+            color: 'text.secondary',
+            cursor: 'default'
+          },
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx(Divider, {
+        orientation: "vertical",
+        variant: "middle",
+        sx: dividerStyles,
+        flexItem: true
+      }), children]
+    })
+  });
+}

package/dist/Checkbox.js

@@ -0,0 +1,17 @@
+import MuiCheckbox from "@mui/material/Checkbox";
+import { FormControlLabel } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Checkbox({
+  label,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(FormControlLabel, {
+    label: label,
+    control: /*#__PURE__*/_jsx(MuiCheckbox, {
+      ...props
+    }),
+    sx: {
+      mr: 5
+    }
+  });
+}

package/dist/ConfirmDialog.js

@@ -0,0 +1,54 @@
+import { Button, Stack } from "@mui/material";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import Dialog from "./Dialog";
+import CampaignIcon from "@mui/icons-material/Campaign";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ConfirmDialog({
+  open,
+  onConfirm,
+  onCancel,
+  content,
+  confirmText = '예',
+  cancelText = '아니오'
+}) {
+  return /*#__PURE__*/_jsxs(Dialog, {
+    contentFontSize: 15,
+    open: open,
+    onClose: onCancel,
+    children: [/*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(CampaignIcon, {
+          sx: {
+            color: '#777',
+            '&': {
+              fontSize: 50
+            }
+          }
+        }), /*#__PURE__*/_jsx(DialogContentText, {
+          children: content
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      sx: {
+        mt: 0,
+        mb: 1
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        onClick: onConfirm,
+        autoFocus: true,
+        children: confirmText
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        onClick: onCancel,
+        children: cancelText
+      })]
+    })]
+  });
+}

package/dist/DataGrid.js

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { DataGrid as MuiDataGrid, GridCell, GridToolbarQuickFilter, koKR } from "@mui/x-data-grid";
+import { Box, Stack } from "@mui/material";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  borderLeft: '0px',
+  borderRight: '0px',
+  '&.MuiDataGrid-root': {
+    borderTop: 'none',
+    borderBottom: 'none'
+  },
+  '.MuiDataGrid-columnSeparator': {
+    visibility: 'hidden !important'
+  },
+  '.MuiDataGrid-columnHeaders': {
+    //borderBottom: 'none !important'
+  },
+  '.MuiDataGrid-columnHeader.borderTop': {
+    borderTop: '1px solid rgba(224, 224, 224, 1)'
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus': {
+    outline: 'none !important'
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within, &.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important'
+  },
+  '.MuiDataGrid-row.odd': {
+    backgroundColor: 'rgba(0, 0, 0, 0.01)'
+  },
+  '.MuiDataGrid-row.odd:hover': {
+    backgroundColor: 'rgba(0, 0, 0, 0.04)'
+  },
+  '.MuiDataGrid-cell:hover': {
+    backgroundColor: 'rgba(0, 0, 0, 0.01)'
+  },
+  '.MuiDataGrid-row .MuiDataGrid-cell.actions > *, .MuiDataGrid-row .MuiDataGrid-cell .actions > *': {
+    visibility: 'hidden'
+  },
+  '.MuiDataGrid-row:hover .MuiDataGrid-cell.actions > *, .MuiDataGrid-row:hover .MuiDataGrid-cell .actions > *': {
+    visibility: 'visible'
+  },
+  '.MuiDataGrid-cell .aggr strong': {
+    fontSize: '15px'
+  },
+  '.MuiDataGrid-cell .aggr small': {
+    fontSize: '12px'
+  }
+};
+export default function DataGrid({
+  columns,
+  rows,
+  customToolbar = /*#__PURE__*/_jsx(_Fragment, {}),
+  customGridCellMap = {},
+  slots = {},
+  hideToolbar = false,
+  ...props
+}) {
+  const getTogglableColumns = columns => columns.filter(column => column.field !== 'id').map(column => column.field);
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState({
+    id: false
+  });
+  const CustomToolbar = function () {
+    return /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: customToolbar
+      }), /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(GridToolbarQuickFilter, {})
+      })]
+    });
+  };
+  const CustomGridCell = function (params) {
+    let children;
+    const func = customGridCellMap[params.column.field];
+    if (func) children = func(params);
+    if (!children) children = /*#__PURE__*/_jsx(Box, {
+      sx: {
+        mt: 2,
+        mb: 2
+      },
+      children: params.value
+    });
+    return /*#__PURE__*/_jsx(GridCell, {
+      ...params,
+      children: children
+    });
+  };
+  return /*#__PURE__*/_jsx(MuiDataGrid, {
+    autoHeight: true,
+    columns: columns,
+    rows: rows,
+    disableColumnMenu: true,
+    disableRowSelectionOnClick: true,
+    getRowClassName: params => params.indexRelativeToCurrentPage % 2 === 0 ? '' : 'odd',
+    columnVisibilityModel: columnVisibilityModel,
+    onColumnVisibilityModelChange: model => setColumnVisibilityModel(model),
+    getRowHeight: () => 'auto',
+    localeText: {
+      ...koKR.components.MuiDataGrid.defaultProps.localeText,
+      noRowsLabel: '항목이 없습니다.'
+    },
+    slots: {
+      toolbar: hideToolbar ? null : CustomToolbar,
+      cell: CustomGridCell,
+      ...slots
+    },
+    slotProps: {
+      columnsPanel: {
+        getTogglableColumns
+      },
+      toolbar: {
+        showQuickFilter: true
+      }
+    },
+    initialState: {
+      filter: {
+        filterModel: {
+          items: [],
+          quickFilterExcludeHiddenColumns: true
+        }
+      }
+    },
+    sx: styles,
+    ...props
+  });
+}

package/dist/Dialog.js

@@ -0,0 +1,26 @@
+import { Zoom } from "@mui/material";
+import MuiDialog from "@mui/material/Dialog";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
+  return /*#__PURE__*/_jsx(Zoom, {
+    ref: ref,
+    ...props
+  });
+});
+export default function Dialog({
+  contentFontSize = 16,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(MuiDialog, {
+    TransitionComponent: Transition,
+    sx: {
+      '.MuiTypography-root.MuiDialogContentText-root': {
+        fontSize: contentFontSize
+      }
+    },
+    ...props,
+    children: children
+  });
+}

package/dist/FormLabel.js

@@ -0,0 +1,18 @@
+import React from "react";
+import MuiFormLabel from "@mui/material/FormLabel";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FormLabel({
+  value = false,
+  children,
+  ...props
+}) {
+  const styles = {
+    color: value ? 'rgba(0, 0, 0, 0.87)' : 'rgba(0, 0, 0, 0.6)',
+    fontSize: value ? 16 : 14
+  };
+  return /*#__PURE__*/_jsx(MuiFormLabel, {
+    sx: styles,
+    ...props,
+    children: children
+  });
+}

package/dist/Frame.js

@@ -0,0 +1,43 @@
+import { Outlet } from 'react-router-dom';
+import { Box } from '@mui/material';
+import { SidebarContextProvider } from './sidebar/SidebarContext';
+import Sidebar from "./sidebar/Sidebar";
+import { variables } from './variables';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Frame({
+  appBar,
+  footer,
+  menu,
+  menuIcons = {}
+}) {
+  const containerStyles = {
+    display: 'flex',
+    flexGrow: 1,
+    overflow: 'auto',
+    marginTop: `${variables.gnbHeight}px`,
+    backgroundColor: variables.bodyBackgroundColor
+  };
+  const contentStyles = {
+    flexGrow: 1,
+    overflow: 'auto',
+    padding: '20px 40px'
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [appBar, /*#__PURE__*/_jsxs(Box, {
+      sx: containerStyles,
+      children: [/*#__PURE__*/_jsx(SidebarContextProvider, {
+        menu: menu,
+        icons: menuIcons,
+        children: /*#__PURE__*/_jsx(Sidebar, {})
+      }), /*#__PURE__*/_jsxs(Box, {
+        component: "section",
+        sx: contentStyles,
+        children: [/*#__PURE__*/_jsx("main", {
+          children: /*#__PURE__*/_jsx(Outlet, {})
+        }), footer]
+      })]
+    })]
+  });
+}

package/dist/GroupSelect.js

@@ -0,0 +1,65 @@
+import { Autocomplete, TextField } from "@mui/material";
+import Paper from "@mui/material/Paper";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function GroupSelect({
+  id,
+  options,
+  groupKey,
+  value,
+  onSelect,
+  placeholder,
+  disableClearable = false,
+  sx,
+  ...props
+}) {
+  const styles = {
+    ...sx,
+    '.MuiInputLabel-root, .MuiInputBase-input': {
+      fontSize: '0.875rem'
+    }
+  };
+  const paperStyles = {
+    '& .MuiAutocomplete-groupLabel': {
+      fontSize: '0.8rem',
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    '& .MuiAutocomplete-option': {
+      color: '#333',
+      fontSize: '0.875rem',
+      paddingTop: '3px',
+      paddingBottom: '3px'
+    },
+    '& .MuiAutocomplete-noOptions': {
+      fontSize: '0.8rem'
+    }
+  };
+  const handleSelect = (event, value, reason) => {
+    if (reason !== 'selectOption') return;
+    if (onSelect) onSelect(id, value);
+  };
+  function CustomPaper(props) {
+    return /*#__PURE__*/_jsx(Paper, {
+      ...props,
+      sx: paperStyles
+    });
+  }
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    id: id,
+    size: "small",
+    options: options,
+    groupBy: option => option[groupKey],
+    value: value,
+    onChange: handleSelect,
+    blurOnSelect: true,
+    disableClearable: disableClearable,
+    noOptionsText: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
+    PaperComponent: CustomPaper,
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params,
+      label: placeholder
+    }),
+    sx: styles,
+    ...props
+  });
+}

package/dist/ListItem.js

@@ -0,0 +1,19 @@
+import MuiListItem from "@mui/material/ListItem";
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ListItem({
+  grid,
+  spacing = 10,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(MuiListItem, {
+    ...props,
+    children: [grid && /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      columnSpacing: spacing,
+      children: children
+    }), !grid && children]
+  });
+}

package/dist/ListItemDivider.js

@@ -0,0 +1,13 @@
+import { Divider } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ListItemDivider({
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Divider, {
+    sx: {
+      mt: 3,
+      mb: 2
+    },
+    ...props
+  });
+}

package/dist/ListItemGrid.js

@@ -0,0 +1,12 @@
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ListItemGrid({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    ...props,
+    children: children
+  });
+}

package/dist/ListItemText.js

@@ -0,0 +1,35 @@
+import { Box, Stack, Tooltip } from "@mui/material";
+import MuiListItemText from "@mui/material/ListItemText";
+import HelpIcon from "@mui/icons-material/Help";
+import { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ListItemText({
+  primary,
+  secondary,
+  tooltip,
+  ...props
+}) {
+  const [hover, setHover] = useState(false);
+  return /*#__PURE__*/_jsx(MuiListItemText, {
+    primary: primary,
+    secondary: /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      spacing: 0.5,
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: secondary
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: tooltip,
+        children: /*#__PURE__*/_jsx(HelpIcon, {
+          sx: {
+            fontSize: 18,
+            visibility: tooltip && hover ? 'visible' : 'hidden'
+          }
+        })
+      })]
+    }),
+    onMouseEnter: _ => setHover(true),
+    onMouseLeave: _ => setHover(false),
+    ...props
+  });
+}