@nethru/ui 1.0.81 → 2.0.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;
+}

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