@nethru/ui 1.0.82 → 2.0.0

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

@@ -0,0 +1,63 @@
+.container {
+    display: flex;
+    position: relative;
+    background-color: var(--frame-background-color);
+    transition: width .2s;
+}
+.container.opened {
+    width: calc(var(--primary-menu-width) + var(--secondary-menu-width));
+}
+.container.closed {
+    width: calc(var(--primary-menu-width) + var(--secondary-menu-collapsed-width));
+}
+
+
+.secondary {
+    position: fixed;
+    left: var(--primary-menu-width);
+    height: 100%;
+    z-index: var(--secondary-menu-zindex);
+    white-space: nowrap;
+    overflow-x: hidden;
+    border-radius: 8px 0px 0px 0px;
+    box-shadow: -10px 1px 8px -10px #65656533, 0px -10px 8px -10px #65656533;
+    background-color: #fff;
+    border-right: 1px solid #e0e0e0;
+    padding: 8px 16px;
+}
+.secondary.opened {
+    width: var(--secondary-menu-width);
+}
+.secondary.opened:hover {
+    /*background-color: red;*/
+}
+.secondary.closed {
+    width: var(--secondary-menu-collapsed-width);
+    overflow: hidden;
+}
+
+.toggler {
+    position: fixed;
+    top: calc(var(--gnb-height) + 28px);
+    width: 32px;
+    height: 32px;
+    background-color: var(--gnb-background-color);
+    border: 1px solid #b9b9b9;
+    border-radius: 50%;
+    box-shadow: 0px 3px 4px -1px #65656514, 0px 5px 10px 0px #65656529;
+    z-index: var(--secondary-menu-toggler-zindex);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity .2s;
+}
+.toggler.opened {
+    left: calc(var(--primary-menu-width) + var(--secondary-menu-width) - 16px);
+}
+.toggler.closed {
+    opacity: 1;
+    left: calc(var(--primary-menu-width) + var(--secondary-menu-collapsed-width) - 16px);
+}
+
+.secondary:hover + .toggler, .toggler:hover {
+    opacity: 1;
+}

package/base/index.js

@@ -0,0 +1,33 @@
+import * as colors from './colors';
+import borderRadius from './styles/borderRadius';
+import shadow from './styles/shadow';
+import globalStyles from './styles/globalStyles';
+import createTheme from './styles/createTheme';
+export { colors };
+export { borderRadius, shadow, globalStyles, createTheme };
+export { default as AddableFormList } from "./AddableFormList";
+export { default as AlertDialog } from "./dialog/AlertDialog";
+export { default as AppBar } from "./frame/AppBar";
+export { default as Brand } from "./frame/Brand";
+export { default as CircularProgressButton } from "./CircularProgressButton";
+export { default as Checkbox } from "./Checkbox";
+export { default as ColumnedSection } from "./ColumnedSection";
+export { default as ConfirmDialog } from "./dialog/ConfirmDialog";
+export { default as DataGrid } from "./datagrid/DataGrid";
+export { default as Dialog } from "./dialog/Dialog";
+export { default as DropdownButton } from "./DropdownButton";
+export { default as Editor } from "./editor/Editor";
+export { default as Frame } from "./frame/Frame";
+export { default as MainHeader } from "./MainHeader";
+export { default as MenuItem } from "./MenuItem";
+export { default as PropertyTable } from "./PropertyTable";
+export { default as SearchableSelect } from "./SearchableSelect";
+export { default as SearchTextField } from "./SearchTextField";
+export { default as Sidebar } from "./frame/sidebar/Sidebar";
+export { default as Select } from "./Select";
+export { default as Slider } from "./Slider";
+export { default as Snackbar } from "./Snackbar";
+export { default as Switch } from "./Switch";
+export * from './frame/sidebar/SidebarContext';
+export { default as Error } from "./error/Error";
+export { default as HttpError } from "./error/HttpError";

package/{dist → base}/samples/menu.sample.json

@@ -11,7 +11,7 @@
           {
             "id": "011",
             "name": "대시보드",
-            "href": "/report/dashboard",
+            "href": "/monitor/dashboard",
             "submenu": []
           }
         ]
@@ -115,7 +115,7 @@
           {
             "id": "221",
             "name": "관리",
-            "href": "/task/collect",
+            "href": "/task/collect/setting",
             "container": false,
             "submenu": []
           },

package/base/styles/borderRadius.js

@@ -0,0 +1,7 @@
+const borderRadius = {
+  1: 4,
+  2: 6,
+  3: 8,
+  circle: '50%'
+};
+export default borderRadius;

package/base/styles/createTheme.js

@@ -0,0 +1,90 @@
+import { createTheme as createMuiTheme } from "@mui/material";
+import typography from "./typography";
+import palette from "./palette";
+import * as cssBaseline from "./mui/cssBaseline";
+import * as buttonBase from "./mui/buttonBase";
+import * as icon from "./mui/icon";
+import * as button from "./mui/button";
+import * as toggleButton from "./mui/toggleButton";
+import * as iconButton from "./mui/iconButton";
+import * as checkbox from "./mui/checkbox";
+import * as switcher from "./mui/switch";
+import * as select from "./mui/select";
+import * as autocomplete from "./mui/autocomplete";
+import * as textField from "./mui/textField";
+import * as formControl from "./mui/formControl";
+import * as outlinedInput from "./mui/outlinedInput";
+import * as formHelperText from "./mui/formHelperText";
+import * as inputLabel from "./mui/inputLabel";
+import * as popover from "./mui/popover";
+import * as paper from "./mui/paper";
+import * as list from "./mui/list";
+import * as menuItem from "./mui/menuItem";
+import * as formControlLabel from "./mui/formControlLabel";
+import * as chip from "./mui/chip";
+import * as slider from "./mui/slider";
+import * as tabs from "./mui/tabs";
+import * as tab from "./mui/tab";
+import * as dataGrid from "./mui/dataGrid";
+import * as tablePagination from "./mui/tablePagination";
+import * as paginationItem from "./mui/paginationItem";
+import * as tooltip from "./mui/tooltip";
+import * as snackbar from "./mui/snackbar";
+import * as alert from "./mui/alert";
+import * as dialog from "./mui/dialog";
+import * as dialogTitle from "./mui/dialogTitle";
+import * as dialogActions from "./mui/dialogActions";
+import * as dialogContent from "./mui/dialogContent";
+import * as grid from "./mui/grid";
+import * as appBar from "./mui/appBar";
+import * as avatar from "./mui/avatar";
+export default function createTheme() {
+  let theme = createMuiTheme({
+    typography: typography,
+    palette: palette,
+    spacing: 4
+  });
+  theme = createMuiTheme(theme, {
+    components: {
+      MuiCssBaseline: cssBaseline.styles,
+      MuiButtonBase: buttonBase.styles,
+      MuiButton: button.styles,
+      MuiToggleButton: toggleButton.styles,
+      MuiIconButton: iconButton.styles,
+      MuiIcon: icon.styles,
+      MuiSvgIcon: icon.styles,
+      MuiCheckbox: checkbox.styles,
+      MuiSwitch: switcher.styles,
+      MuiSelect: select.styles,
+      MuiAutocomplete: autocomplete.styles,
+      MuiTextField: textField.styles,
+      MuiFormControl: formControl.styles,
+      MuiFormControlLabel: formControlLabel.styles,
+      MuiInputLabel: inputLabel.styles,
+      MuiOutlinedInput: outlinedInput.styles,
+      MuiFormHelperText: formHelperText.styles,
+      MuiPopover: popover.styles,
+      MuiPaper: paper.styles,
+      MuiList: list.styles,
+      MuiMenuItem: menuItem.styles,
+      MuiChip: chip.styles,
+      MuiSlider: slider.styles,
+      MuiTabs: tabs.styles,
+      MuiTab: tab.styles,
+      MuiDataGrid: dataGrid.styles,
+      MuiTablePagination: tablePagination.styles,
+      MuiPaginationItem: paginationItem.styles,
+      MuiTooltip: tooltip.styles,
+      MuiSnackbar: snackbar.styles,
+      MuiAlert: alert.styles,
+      MuiDialog: dialog.styles,
+      MuiDialogTitle: dialogTitle.styles,
+      MuiDialogActions: dialogActions.styles,
+      MuiDialogContent: dialogContent.styles,
+      MuiGrid: grid.styles,
+      MuiAppBar: appBar.styles,
+      MuiAvatar: avatar.styles
+    }
+  });
+  return theme;
+}

package/base/styles/globalStyles.js

@@ -0,0 +1,47 @@
+import typography from "./typography";
+import { blueGrey } from "../colors";
+const globalStyles = {
+  ':root': {
+    '--body-background-color': blueGrey.contentBg,
+    '--frame-background-color': blueGrey.frameBg,
+    '--gnb-background-color': blueGrey.gnbBg,
+    '--gnb-height': '64px',
+    '--gnb-zindex': 1100,
+    '--primary-menu-width': '72px',
+    '--secondary-menu-width': '180px',
+    '--secondary-menu-collapsed-width': '30px',
+    '--secondary-menu-zindex': 1101,
+    '--secondary-menu-toggler-zindex': 1102
+  },
+  'html, body': {
+    margin: 0,
+    height: '100%'
+  },
+  body: {
+    fontFamily: typography.fontFamily,
+    backgroundColor: blueGrey.contentBg
+  },
+  code: {
+    fontFamily: typography.fontFamily
+  },
+  '.cm-theme-light': {
+    fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+    fontSize: '14px'
+  },
+  '.cm-editor, .cm-editor.cm-focused': {
+    outline: '1px solid #eaeaea'
+  },
+  '.cm-editor .cm-content.cm-lineWrapping': {
+    wordBreak: 'break-all'
+  },
+  '.highcharts-tooltip-box': {
+    fillOpacity: 0
+  },
+  '.highcharts-tooltip > span': {
+    background: '#fff',
+    border: '1px solid #ccc',
+    borderRadius: '3px',
+    padding: '8px'
+  }
+};
+export default globalStyles;

package/base/styles/mui/alert.js

@@ -0,0 +1,40 @@
+import typography from "../typography";
+import { blue, green, red, yellow } from "../../colors";
+export const styles = {
+  defaultProps: {
+    severity: 'info'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState
+    }) => ({
+      fontFamily: typography.fontFamily,
+      ...typography.bodyLgSemibold,
+      lineHeight: 1.2,
+      // ...typography.bodyXlSemibold,
+      padding: '0px 16px 0px 8px',
+      boxShadow: 'none',
+      backgroundColor: backgroundColor(ownerState),
+      '.MuiAlert-icon': {
+        marginRight: 8
+      },
+      '.MuiAlert-subcontent': {
+        ...typography.bodySmMedium,
+        marginTop: 4
+      }
+    })
+  }
+};
+function backgroundColor(ownerState) {
+  switch (ownerState.severity) {
+    case 'success':
+      return green[50];
+    case 'warning':
+      return yellow[50];
+    case 'error':
+      return red[50];
+    case 'info':
+    default:
+      return blue[50];
+  }
+}

package/base/styles/mui/appBar.js

@@ -0,0 +1,17 @@
+import typography from "../typography";
+import { blueGrey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      backgroundColor: blueGrey.frameBg,
+      boxShadow: 'none',
+      '&.MuiAppBar-preview': {
+        backgroundColor: '#d5f5f8'
+      },
+      '.MuiToolbar-root': {
+        paddingLeft: 18
+      }
+    }
+  }
+};

package/base/styles/mui/autocomplete.js

@@ -0,0 +1,46 @@
+import { grey, red } from "../../colors";
+import typography from "../typography";
+import borderRadius from "../borderRadius";
+export const styles = {
+  styleOverrides: {
+    root: {
+      '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+        borderColor: red[500]
+      },
+      '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
+        borderColor: red[500]
+      },
+      '&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderColor: red[500]
+      }
+    },
+    groupLabel: {
+      ...typography.bodySmSemibold,
+      color: grey[900]
+    },
+    option: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      color: grey[800]
+    },
+    noOptions: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmRegular
+    },
+    clearIndicator: {
+      '&:hover': {
+        background: 'none'
+      }
+    },
+    popupIndicator: {
+      '&:hover': {
+        background: 'none'
+      }
+    },
+    paper: {
+      border: `1px solid ${grey[300]}`,
+      borderRadius: borderRadius[3],
+      marginTop: 3
+    }
+  }
+};

package/base/styles/mui/avatar.js

@@ -0,0 +1,14 @@
+import typography from "../typography";
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmMedium,
+      color: '#fff',
+      backgroundColor: grey[900],
+      width: 24,
+      height: 24
+    }
+  }
+};

package/base/styles/mui/button.js

@@ -0,0 +1,276 @@
+import { blue, grey, orange, red } from "../../colors";
+import typography from "../typography";
+import borderRadius from "../borderRadius";
+export const primary = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'contained' && {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: '#242424'
+      },
+      ':active': {
+        color: grey[300],
+        backgroundColor: '#141414'
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'outlined' && {
+      color: grey[900],
+      backgroundColor: '#fff',
+      borderColor: grey[700],
+      ':hover, &.Mui-focusVisible': {
+        color: grey[900],
+        backgroundColor: grey[10]
+      },
+      ':active': {
+        color: grey[900],
+        backgroundColor: grey[20]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'text' && {
+      color: grey[900],
+      backgroundColor: '#fff',
+      ':hover, &.Mui-focusVisible': {
+        color: grey[900],
+        backgroundColor: grey[100]
+      },
+      ':active': {
+        color: grey[900],
+        backgroundColor: grey[200]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const info = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'contained' && {
+      color: theme.palette.info.contrastText,
+      backgroundColor: theme.palette.info.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.info.contrastText,
+        backgroundColor: blue[600]
+      },
+      ':active': {
+        color: theme.palette.info.contrastText,
+        backgroundColor: blue[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'outlined' && {
+      color: blue[500],
+      backgroundColor: '#fff',
+      borderColor: blue[500],
+      ':hover, &.Mui-focusVisible': {
+        color: blue[500],
+        backgroundColor: blue[50]
+      },
+      ':active': {
+        color: blue[500],
+        backgroundColor: blue[100]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'text' && {
+      color: blue[500],
+      backgroundColor: '#fff',
+      ':hover, &.Mui-focusVisible': {
+        color: blue[500],
+        backgroundColor: blue[50]
+      },
+      ':active': {
+        color: blue[500],
+        backgroundColor: blue[100]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const warning = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'warning' && ownerState.variant === 'contained' && {
+      color: theme.palette.warning.contrastText,
+      backgroundColor: theme.palette.warning.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.warning.contrastText,
+        backgroundColor: orange[600]
+      },
+      ':active': {
+        color: theme.palette.warning.contrastText,
+        backgroundColor: orange[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  }
+};
+export const error = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'contained' && {
+      color: theme.palette.error.contrastText,
+      backgroundColor: theme.palette.error.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.error.contrastText,
+        backgroundColor: red[600]
+      },
+      ':active': {
+        color: theme.palette.error.contrastText,
+        backgroundColor: red[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'outlined' && {
+      color: red[700],
+      backgroundColor: '#fff',
+      borderColor: red[600],
+      ':hover, &.Mui-focusVisible': {
+        color: red[700],
+        backgroundColor: red[50] //'#fef2f4',
+      },
+
+      ':active': {
+        color: red[700],
+        backgroundColor: red[100] //'#fcdee5',
+      },
+
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'text' && {
+      color: red[700],
+      backgroundColor: '#fff',
+      ':hover, &.Mui-focusVisible': {
+        color: red[700],
+        backgroundColor: red[50] //'#fef2f4',
+      },
+
+      ':active': {
+        color: red[700],
+        backgroundColor: red[100] //'#fcdee5',
+      },
+
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const crud = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'crud' && ownerState.variant === 'contained' && {
+      color: theme.palette.crud.contrastText,
+      backgroundColor: theme.palette.crud.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.crud.contrastText,
+        backgroundColor: blue[100]
+      },
+      ':active': {
+        color: theme.palette.crud.contrastText,
+        backgroundColor: blue[200]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: grey[150]
+      }
+    };
+  }
+};
+export const styles = {
+  defaultProps: {
+    variant: 'contained'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      ...primary.contained(ownerState, theme),
+      ...primary.outlined(ownerState, theme),
+      ...primary.text(ownerState, theme),
+      ...info.contained(ownerState, theme),
+      ...info.outlined(ownerState, theme),
+      ...info.text(ownerState, theme),
+      ...warning.contained(ownerState, theme),
+      ...error.contained(ownerState, theme),
+      ...error.outlined(ownerState, theme),
+      ...error.text(ownerState, theme),
+      ...crud.contained(ownerState, theme),
+      fontFamily: typography.fontFamily,
+      borderRadius: borderRadius[2],
+      boxShadow: 'none!important'
+    }),
+    sizeMedium: ({
+      ownerState,
+      theme
+    }) => ({
+      minWidth: 60,
+      height: ownerState.color === 'crud' ? 26 : 36,
+      padding: ownerState.color === 'crud' ? '0px 2px' : '8px 12px',
+      fontSize: typography.bodyMdSemibold.fontSize,
+      fontWeight: typography.bodyMdSemibold.fontWeight
+    }),
+    sizeSmall: {
+      minWidth: '50px',
+      height: '26px',
+      padding: '8px 8px',
+      fontSize: typography.bodySmSemibold.fontSize,
+      fontWeight: typography.bodySmSemibold.fontWeight
+    },
+    startIcon: ({
+      ownerState,
+      theme
+    }) => ({
+      marginRight: theme.spacing(ownerState.color === 'crud' ? 0.5 : 1)
+    }),
+    endIcon: ({
+      ownerState,
+      theme
+    }) => ({
+      marginLeft: theme.spacing(ownerState.color === 'crud' ? 0.5 : 1)
+    })
+  }
+};

package/base/styles/mui/buttonBase.js

@@ -0,0 +1,10 @@
+export const styles = {
+  defaultProps: {
+    disableRipple: true
+  },
+  styleOverrides: {
+    root: {
+      whiteSpace: 'nowrap'
+    }
+  }
+};