@nethru/ui 1.0.0

package/dist/MainHeader.js

@@ -0,0 +1,56 @@
+import { Button, Stack, 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 MainHeader({
+  title,
+  editable = false,
+  edit = false,
+  onEditClick,
+  onConfirmClick,
+  onCancelClick,
+  editButtonText = '편집',
+  confirmButtonText = '저장',
+  cancelButtonText = '취소',
+  rightSlot
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      sx: {
+        mb: 2.5
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        children: title
+      }), rightSlot && /*#__PURE__*/_jsx(_Fragment, {
+        children: rightSlot
+      }), !rightSlot && editable && /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        justifyContent: "flex-end",
+        children: [!edit && /*#__PURE__*/_jsx(_Fragment, {
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            onClick: onEditClick,
+            children: editButtonText
+          })
+        }), edit && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            sx: {
+              width: 120
+            },
+            onClick: onConfirmClick,
+            children: confirmButtonText
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "outlined",
+            onClick: onCancelClick,
+            children: cancelButtonText
+          })]
+        })]
+      })]
+    })
+  });
+}

package/dist/SearchTextField.js

@@ -0,0 +1,22 @@
+import { InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import TextField from "@mui/material/TextField";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SearchTextField({
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TextField, {
+    variant: "standard",
+    placeholder: "\uAC80\uC0C9",
+    size: "small",
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(SearchIcon, {
+          fontSize: "small"
+        })
+      })
+    },
+    ...props
+  });
+}

package/dist/Section.js

@@ -0,0 +1,17 @@
+import { Paper } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Section({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Paper, {
+    variant: "outlined",
+    square: false,
+    sx: {
+      padding: 3,
+      marginTop: '20px'
+    },
+    ...props,
+    children: children
+  });
+}

package/dist/Select.js

@@ -0,0 +1,40 @@
+import MuiSelect from "@mui/material/Select";
+import { FormControl, InputLabel } from "@mui/material";
+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 Select({
+  variant,
+  label,
+  fontSize,
+  fullWidth = false,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      variant: variant,
+      fullWidth: fullWidth,
+      sx: {
+        '.MuiSelect-select.MuiInputBase-input': {
+          fontSize: fontSize ? fontSize : 15
+        }
+      },
+      children: [/*#__PURE__*/_jsx(InputLabel, {
+        children: label
+      }), /*#__PURE__*/_jsx(MuiSelect, {
+        MenuProps: {
+          PaperProps: {
+            sx: {
+              '& .MuiMenuItem-root': {
+                fontSize: fontSize ? fontSize : 15
+              }
+            }
+          }
+        },
+        ...props,
+        children: children
+      })]
+    })
+  });
+}

package/dist/Slider.js

@@ -0,0 +1,31 @@
+import MuiSlider from "@mui/material/Slider";
+import { useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Slider({
+  value,
+  defaultValue,
+  marks,
+  ...props
+}) {
+  const autoMarks = useMemo(() => {
+    let values = value || defaultValue;
+    if (values === undefined) return {};
+    if (values instanceof Array == false) values = [values];
+    return values.map(v => {
+      return {
+        value: v,
+        label: `${v}`
+      };
+    });
+  }, [value, defaultValue]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(MuiSlider, {
+      value: value,
+      defaultValue: defaultValue,
+      valueLabelDisplay: "off",
+      marks: marks ? marks : autoMarks,
+      ...props
+    })
+  });
+}

package/dist/Snackbar.js

@@ -0,0 +1,44 @@
+import { Alert, Slide } from "@mui/material";
+import MuiSnackbar from "@mui/material/Snackbar";
+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 Snackbar({
+  content,
+  severity = 'info',
+  maxWidth = '25%',
+  autoHideDuration = 3000,
+  anchorOrigin = {
+    vertical: 'top',
+    horizontal: 'right'
+  },
+  children,
+  ...props
+}) {
+  const styles = {
+    maxWidth: maxWidth,
+    boxShadow: '0 0.3rem 0.3rem rgba(0, 0, 0, 0.03)'
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!children && /*#__PURE__*/_jsx(MuiSnackbar, {
+      autoHideDuration: autoHideDuration,
+      anchorOrigin: anchorOrigin,
+      TransitionComponent: transition,
+      style: styles,
+      ...props,
+      children: /*#__PURE__*/_jsx(Alert, {
+        severity: severity,
+        children: content
+      })
+    }), children && /*#__PURE__*/_jsx(MuiSnackbar, {
+      ...props,
+      children: children
+    })]
+  });
+}
+function transition(props) {
+  return /*#__PURE__*/_jsx(Slide, {
+    ...props,
+    direction: "down"
+  });
+}

package/dist/StatusChip.js

@@ -0,0 +1,19 @@
+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({
+  label,
+  status,
+  onClick,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Chip, {
+    label: label,
+    variant: status === 'normal' ? 'filled' : 'outlined',
+    color: status === 'normal' ? 'success' : 'default',
+    deleteIcon: status === 'normal' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(ErrorIcon, {}),
+    onDelete: _ => onClick && onClick(status),
+    ...props
+  });
+}

package/dist/Switch.js

@@ -0,0 +1,32 @@
+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,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [label && /*#__PURE__*/_jsx(Stack, {
+      direction: "row",
+      alignItems: "center",
+      sx: {
+        '.MuiFormControlLabel-label': {
+          color: '#666',
+          fontSize: 11
+        }
+      },
+      children: /*#__PURE__*/_jsx(FormControlLabel, {
+        control: /*#__PURE__*/_jsx(MuiSwitch, {
+          color: "primary",
+          ...props
+        }),
+        label: label,
+        labelPlacement: "top"
+      })
+    }), !label && /*#__PURE__*/_jsx(MuiSwitch, {
+      ...props
+    })]
+  });
+}

package/dist/TextField.js

@@ -0,0 +1,23 @@
+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 TextField2({
+  width,
+  fontSize,
+  textAlign,
+  ...props
+}) {
+  const styles = {
+    fontSize: fontSize ? fontSize : 16,
+    textAlign: textAlign ? textAlign : 'left',
+    width
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(MuiTextField, {
+      inputProps: {
+        style: styles
+      },
+      ...props
+    })
+  });
+}

package/dist/error/Error.js

@@ -0,0 +1,63 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Error({
+  title,
+  body,
+  buttonText = '홈으로 가기',
+  buttonHref = '/',
+  footer
+}) {
+  const navigate = useNavigate();
+  return /*#__PURE__*/_jsxs(Stack, {
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    sx: {
+      backgroundColor: variables.bodyBackgroundColor
+    },
+    children: [/*#__PURE__*/_jsxs(Paper, {
+      variant: "outlined",
+      square: false,
+      sx: {
+        padding: 3,
+        width: 568,
+        height: 280
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        align: "center",
+        children: /*#__PURE__*/_jsx(CampaignIcon, {
+          sx: {
+            color: '#777',
+            '&': {
+              fontSize: 50
+            }
+          }
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h1",
+        fontSize: 30,
+        sx: {
+          mt: 3,
+          mb: 3
+        },
+        children: title
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        fontSize: 15,
+        children: body
+      }), /*#__PURE__*/_jsx(Box, {
+        align: "center",
+        mt: 6,
+        children: /*#__PURE__*/_jsx(Button, {
+          size: "large",
+          onClick: _ => navigate(buttonHref),
+          children: buttonText
+        })
+      })]
+    }), footer]
+  });
+}

package/dist/error/HttpError.js

@@ -0,0 +1,33 @@
+import Error from "./Error";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function HttpError({
+  code,
+  footer,
+  ...props
+}) {
+  let title, body;
+  switch (code) {
+    case '401':
+      title = '요청을 완료할 수 없습니다.';
+      body = '유효한 계정 정보가 존재하지 않아 요청을 완료할 수 없습니다. 로그아웃 되었는지 확인후 다시 로그인 해주시기 바랍니다.';
+      break;
+    case '403':
+      title = '요청을 완료할 수 없습니다.';
+      body = '유효한 계정 정보가 존재하지 않거나 권한이 없어 요청을 완료할 수 없습니다. 로그아웃 되었는지 확인후 다시 로그인 하거나 필요한 권한을 시스템 관리자에게 요청하시기 바랍니다.';
+      break;
+    case '404':
+      title = '요청한 페이지를 찾을 수 없습니다.';
+      body = '방문하려는 페이지의 주소가 잘못 입력되었거나 페이지의 주소가 변경 또는 삭제되어 요청하신 페이지를 찾을 수 없습니다. 입력하신 주소가 정확한지 다시 한번 확인해 주시기 바랍니다.';
+      break;
+    default:
+      title = '요청을 처리할 수 없습니다.';
+      body = '시스템에 문제가 있어 요청을 처리할 수 없습니다. 잠시후 다시 시도해보시기 바랍니다.';
+      break;
+  }
+  return /*#__PURE__*/_jsx(Error, {
+    title: title,
+    body: body,
+    footer: footer,
+    ...props
+  });
+}

package/dist/index.js

@@ -0,0 +1,29 @@
+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 Checkbox } from "./Checkbox";
+export { default as ConfirmDialog } from "./ConfirmDialog";
+export { default as DataGrid } from "./DataGrid";
+export { default as Dialog } from "./Dialog";
+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 SearchTextField } from "./SearchTextField";
+export { default as Section } from "./Section";
+export { default as Select } from "./Select";
+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 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

@@ -0,0 +1,48 @@
+/* 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;
+}