@nethru/ui 1.0.82 → 2.0.1

package/dist/Frame.js

@@ -1,47 +0,0 @@
-import { Box } from '@mui/material';
-import { SidebarContextProvider } from './sidebar/SidebarContext';
-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,
-  sideBar,
-  children,
-  footer,
-  menu,
-  menuIcons = {},
-  mainRef,
-  onScroll
-}) {
-  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: sideBar
-      }), /*#__PURE__*/_jsxs(Box, {
-        ref: mainRef,
-        component: "section",
-        sx: contentStyles,
-        onScroll: onScroll,
-        children: [/*#__PURE__*/_jsx("main", {
-          children: children
-        }), footer]
-      })]
-    })]
-  });
-}

package/dist/MainHeader.js

@@ -1,59 +0,0 @@
-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 = '취소',
-  confirmButtonDisabled = false,
-  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",
-            type: "submit",
-            onClick: onConfirmClick,
-            disabled: confirmButtonDisabled,
-            sx: {
-              width: 120
-            },
-            children: confirmButtonText
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "outlined",
-            onClick: onCancelClick,
-            children: cancelButtonText
-          })]
-        })]
-      })]
-    })
-  });
-}

package/dist/PropertyTable.js

@@ -1,141 +0,0 @@
-import { forwardRef, useMemo, useState } from "react";
-import { Box, Typography } from "@mui/material";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "./Select";
-import { DataGridPro, useGridApiContext } from "@mui/x-data-grid-pro";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const PropertyTable = /*#__PURE__*/forwardRef(({
-  columns,
-  rows,
-  onUpdate,
-  readOnly,
-  error = false,
-  helperText,
-  sx,
-  outerSx,
-  ...props
-}, ref) => {
-  const styles = useMemo(() => {
-    const result = {
-      '&.MuiDataGrid-root': {
-        borderBottom: error ? '2px solid #d32f2f' : 'none'
-      },
-      '.MuiDataGrid-columnHeaders': {
-        backgroundColor: '#f8f9fa'
-      },
-      '.MuiDataGrid-columnSeparator': {
-        // visibility: 'hidden !important'
-      },
-      '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus': {
-        outline: 'none !important'
-      },
-      '.MuiDataGrid-cell.fixed': {
-        fontWeight: 'bold'
-      },
-      '.MuiDataGrid-cell.dimmed': {
-        color: '#666'
-      },
-      '& .Mui-error': {
-        backgroundColor: 'rgb(126,10,15, 0.1)',
-        color: '#750f0f'
-      }
-    };
-    if (readOnly) {
-      result['&.MuiDataGrid-root .MuiDataGrid-cell:focus'] = {
-        outline: 'none !important'
-      };
-    }
-    return result;
-  }, [readOnly, error]);
-  const helperTextStyles = useMemo(() => {
-    return {
-      color: error ? '#d32f2f' : '#555',
-      fontSize: 12,
-      ml: '14px',
-      mt: '3px'
-    };
-  }, [error]);
-  const arrangedColumns = useMemo(() => {
-    return columns.map(column => {
-      const newColumn = {
-        ...column
-      };
-      if (readOnly) newColumn.editable = false;
-      if (column.dimmed) newColumn.cellClassName = 'dimmed';else if (column.fixed) {
-        newColumn.cellClassName = params => {
-          return !params.row.deletable ? 'fixed' : '';
-        };
-      }
-      if (column.type === 'singleSelect' && column.valueOptions) {
-        newColumn.renderEditCell = params => /*#__PURE__*/_jsx(SingleSelect, {
-          options: column.valueOptions,
-          ...params
-        });
-      }
-      return newColumn;
-    });
-  }, [columns, readOnly]);
-  const [updatedRows, setUpdatedRows] = useState(rows);
-  const processRowUpdate = row => {
-    const newRows = updatedRows.filter(r => r.id !== row.id);
-    newRows.push(row);
-    setUpdatedRows(newRows);
-    if (onUpdate) onUpdate(row, newRows);
-    return row;
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    ref: ref,
-    sx: outerSx,
-    children: [/*#__PURE__*/_jsx(DataGridPro, {
-      columns: arrangedColumns,
-      rows: rows,
-      columnHeaderHeight: 35,
-      rowHeight: 30,
-      isCellEditable: params => {
-        return params.row.deletable || !params.colDef.fixed;
-      },
-      processRowUpdate: processRowUpdate,
-      onProcessRowUpdateError: error => console.log(error),
-      disableColumnMenu: true,
-      disableRowSelectionOnClick: readOnly,
-      hideFooter: true,
-      sx: {
-        ...styles,
-        ...sx
-      },
-      ...props
-    }), helperText && /*#__PURE__*/_jsx(Typography, {
-      sx: helperTextStyles,
-      children: helperText
-    })]
-  });
-});
-const SingleSelect = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    id,
-    value,
-    field,
-    options
-  } = props;
-  const apiRef = useGridApiContext();
-  const handleChange = (event, data) => {
-    apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: data.props.value
-    });
-  };
-  return /*#__PURE__*/_jsx(Select, {
-    fontSize: 14,
-    ref: ref,
-    value: value,
-    onChange: handleChange,
-    fullWidth: true,
-    children: options.map(option => /*#__PURE__*/_jsx(MenuItem, {
-      value: option.value,
-      children: option.label
-    }, option.value))
-  });
-});
-export default PropertyTable;

package/dist/SearchTextField.js

@@ -1,24 +0,0 @@
-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({
-  InputProps,
-  ...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"
-        })
-      }),
-      ...InputProps
-    },
-    ...props
-  });
-}

package/dist/SearchableSelect.js

@@ -1,41 +0,0 @@
-import { Autocomplete, Box, Divider, Typography } from "@mui/material";
-import { TextField } from "@nethru/ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function SearchableSelect({
-  label,
-  options,
-  textFieldProps,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(Autocomplete, {
-    autoHighlight: true,
-    disableClearable: true,
-    options: options,
-    renderInput: params => /*#__PURE__*/_jsx(TextField, {
-      variant: "standard",
-      label: label,
-      ...params,
-      ...textFieldProps
-    }),
-    renderOption: (props, option) => /*#__PURE__*/_jsx(_Fragment, {
-      children: option.type === 'divider' ? /*#__PURE__*/_jsx(Divider, {
-        ...props,
-        sx: {
-          mb: 0.5
-        }
-      }) : /*#__PURE__*/_jsx(Box, {
-        component: "li",
-        ...props,
-        children: option.label
-      })
-    }),
-    getOptionDisabled: option => option.type === 'divider',
-    isOptionEqualToValue: (option, value) => option.id === value.id,
-    noOptionsText: /*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle2",
-      children: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C"
-    }),
-    ...props
-  });
-}

package/dist/Select.js

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

package/dist/Snackbar.js

@@ -1,51 +0,0 @@
-import { Alert, Box, 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,
-  sx,
-  ...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,
-      sx: {
-        ...sx,
-        ...styles
-      },
-      ...props,
-      children: /*#__PURE__*/_jsx(Alert, {
-        severity: severity,
-        children: /*#__PURE__*/_jsx(Box, {
-          whiteSpace: "pre",
-          children: content
-        })
-      })
-    }), children && /*#__PURE__*/_jsx(MuiSnackbar, {
-      ...props,
-      children: children
-    })]
-  });
-}
-function transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    ...props,
-    direction: "down"
-  });
-}

package/dist/Switch.js

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

package/dist/index.js

@@ -1,44 +0,0 @@
-import * as colors from './colors';
-export { colors };
-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 AppendableFormList } from "./AppendableFormList";
-export { default as AvatarDropdown } from "./AvatarDropdown";
-export { default as Button } from "./Button";
-export { default as Checkbox } from "./Checkbox";
-export { default as CircularProgress } from "./CircularProgress";
-export { default as ColumnedSection } from "./ColumnedSection";
-export { default as ConfirmDialog } from "./ConfirmDialog";
-export { default as DataGrid } from "./DataGrid";
-export { default as Dialog } from "./Dialog";
-export { default as DropdownButton } from "./DropdownButton";
-export { default as Editor } from "./editor/Editor";
-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 PropertyTable } from "./PropertyTable";
-export { default as ReferenceChipList } from "./ReferenceChipList";
-export { default as SearchableSelect } from "./SearchableSelect";
-export { default as SearchTextField } from "./SearchTextField";
-export { default as Section } from "./Section";
-export { default as Select } from "./Select";
-export { default as ShadowedSection } from "./ShadowedSection";
-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 TabbedSection } from "./TabbedSection";
-export { default as Tabs } from "./Tabs";
-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

@@ -1,59 +0,0 @@
-/* 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;
-}
-
-
-/* CodeMirror */
-.cm-theme-light {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    font-size: 14px;
-}
-
-.cm-editor, .cm-editor.cm-focused {
-    outline: 1px solid #eaeaea;
-}

package/dist/sidebar/MenuTree.js

@@ -1,95 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { getMenuTreeStates, useSidebarContext } from "./SidebarContext";
-import { TreeItem, TreeView } from "@mui/x-tree-view";
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import { jsx as _jsx } from "react/jsx-runtime";
-const HAS_CHILDREN = "has-children";
-export default function MenuTree({
-  id,
-  data
-}) {
-  const styles = {
-    paddingRight: '18px',
-    '.MuiTreeItem-content': {
-      padding: '7px 8px'
-    },
-    '.MuiTreeItem-content.Mui-selected': {
-      backgroundColor: 'rgba(25, 118, 210, 0.2)'
-    },
-    '.MuiTreeItem-content .MuiTreeItem-label': {
-      fontSize: '0.9rem'
-    },
-    'li.has-children > .MuiTreeItem-content': {
-      backgroundColor: 'transparent'
-    }
-  };
-  const navigate = useNavigate();
-  const {
-    states,
-    dispatch
-  } = useSidebarContext();
-  const {
-    expanded
-  } = getMenuTreeStates(states, id);
-  const handleSelect = (event, ids) => {
-    dispatch({
-      type: "treeItemSelected",
-      id,
-      ids,
-      hasChildren: hasChildren(event.target)
-    });
-    const node = getNode(ids);
-    if (node && node.href) navigate(node.href instanceof Array ? node.href[0] : node.href);
-  };
-  const handleToggle = (event, ids) => {
-    dispatch({
-      type: "treeItemExpanded",
-      id,
-      ids
-    });
-  };
-  return /*#__PURE__*/_jsx(TreeView, {
-    defaultCollapseIcon: /*#__PURE__*/_jsx(ArrowDropDownIcon, {}),
-    defaultExpandIcon: /*#__PURE__*/_jsx(ArrowRightIcon, {}),
-    sx: styles,
-    selected: states.activeSecondaryItem || '',
-    expanded: expanded,
-    onNodeSelect: handleSelect,
-    onNodeToggle: handleToggle,
-    children: render(data)
-  });
-  function render(nodes) {
-    return nodes ? nodes.map(node => /*#__PURE__*/_jsx(TreeItem, {
-      nodeId: node.id,
-      label: node.name,
-      className: node.submenu.length > 0 ? HAS_CHILDREN : "",
-      children: render(node.submenu)
-    }, node.id)) : null;
-  }
-  function hasChildren(element) {
-    const target = findTreeItemRoot(element);
-    return target ? hasClass(target, HAS_CHILDREN) : false;
-  }
-  function findTreeItemRoot(element) {
-    while (element) {
-      if (hasClass(element, "MuiTreeItem-root")) break;
-      element = element.parentElement;
-    }
-    return element;
-  }
-  function hasClass(element, className) {
-    return [...element.classList].includes(className);
-  }
-  function getNode(id, nodes) {
-    nodes = nodes || data;
-    for (let node of nodes) {
-      if (node.id === id) return node;
-      if (node.submenu.length > 0) {
-        const child = getNode(id, node.submenu);
-        if (child) return child;
-      }
-    }
-    return null;
-  }
-}