@nethru/ui 1.0.81 → 2.0.0

package/dist/ColumnedSection.js

@@ -1,64 +0,0 @@
-import { List, Stack } from "@mui/material";
-import ListItem from "./ListItem";
-import ListItemGrid from "./ListItemGrid";
-import { useMemo } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function ColumnedSection({
-  columns,
-  labels = [],
-  contents = [],
-  horizontalGap = 1,
-  verticalGap = 0.5,
-  sx
-}) {
-  const width = useMemo(() => {
-    return `${100 / columns}%`;
-  }, [columns]);
-  const styles = useMemo(() => {
-    return {
-      width: width,
-      bgcolor: '#f8f9fa',
-      p: '10px 20px',
-      borderRadius: '7px'
-    };
-  }, [width]);
-  return /*#__PURE__*/_jsx(List, {
-    children: /*#__PURE__*/_jsxs(ListItem, {
-      grid: true,
-      children: [labels.length > 0 && /*#__PURE__*/_jsx(ListItemGrid, {
-        xs: 12,
-        children: /*#__PURE__*/_jsx(Stack, {
-          direction: "row",
-          gap: horizontalGap,
-          children: labels.map((label, index) => /*#__PURE__*/_jsx(Stack, {
-            gap: verticalGap,
-            sx: {
-              width: width
-            },
-            children: /*#__PURE__*/_jsx(Stack, {
-              direction: "row",
-              alignItems: "baseline",
-              spacing: 1,
-              children: label
-            })
-          }, index))
-        })
-      }), /*#__PURE__*/_jsx(ListItemGrid, {
-        xs: 12,
-        children: /*#__PURE__*/_jsx(Stack, {
-          direction: "row",
-          gap: horizontalGap,
-          children: contents.map((content, index) => /*#__PURE__*/_jsx(Stack, {
-            gap: verticalGap,
-            sx: {
-              ...styles,
-              ...sx
-            },
-            children: content
-          }, index))
-        })
-      })]
-    })
-  });
-}

package/dist/ConfirmDialog.js

@@ -1,65 +0,0 @@
-import { Box, 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, {
-    fullWidth: true,
-    contentFontSize: 15,
-    open: open,
-    onClose: onCancel,
-    children: [/*#__PURE__*/_jsx(DialogContent, {
-      sx: {
-        pt: 4
-      },
-      children: /*#__PURE__*/_jsxs(Stack, {
-        direction: "row",
-        alignItems: "center",
-        gap: 2,
-        children: [/*#__PURE__*/_jsx(CampaignIcon, {
-          sx: {
-            color: '#777',
-            '&': {
-              fontSize: 50
-            }
-          }
-        }), /*#__PURE__*/_jsx(DialogContentText, {
-          component: "div",
-          children: /*#__PURE__*/_jsx(Box, {
-            component: "div",
-            sx: {
-              whiteSpace: 'pre-wrap'
-            },
-            children: content.replace(/(\\n)/g, '\n')
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(DialogActions, {
-      sx: {
-        mr: 1.5,
-        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

@@ -1,150 +0,0 @@
-import { useState } from "react";
-import { DataGridPro as MuiDataGridPro, GRID_CHECKBOX_SELECTION_COL_DEF, GridCell, GridToolbarQuickFilter, koKR } from "@mui/x-data-grid-pro";
-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 = {},
-  slotProps,
-  initialState,
-  hideToolbar = false,
-  localText,
-  sx,
-  ...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) {
-    if (props && props.checkboxSelection && params.column.field === GRID_CHECKBOX_SELECTION_COL_DEF.field) return /*#__PURE__*/_jsx(GridCell, {
-      ...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.formattedValue
-    });
-    return /*#__PURE__*/_jsx(GridCell, {
-      ...params,
-      children: children
-    });
-  };
-  return /*#__PURE__*/_jsx(MuiDataGridPro, {
-    columns: columns,
-    rows: rows,
-    autoHeight: true,
-    pagination: true,
-    disableColumnMenu: true,
-    disableColumnReorder: 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: '항목이 없습니다.',
-      ...localText
-    },
-    slots: {
-      toolbar: hideToolbar ? null : CustomToolbar,
-      cell: customGridCellMap ? CustomGridCell : undefined,
-      ...slots
-    },
-    slotProps: {
-      columnsPanel: {
-        getTogglableColumns
-      },
-      toolbar: {
-        showQuickFilter: true
-      },
-      ...slotProps
-    },
-    initialState: {
-      filter: {
-        filterModel: {
-          items: [],
-          quickFilterExcludeHiddenColumns: true
-        }
-      },
-      pagination: {
-        paginationModel: {
-          pageSize: 25,
-          page: 0
-        }
-      },
-      ...initialState
-    },
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}

package/dist/Dialog.js

@@ -1,42 +0,0 @@
-import { Slide, Zoom } from "@mui/material";
-import MuiDialog from "@mui/material/Dialog";
-import { forwardRef } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ZoomTransition = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/_jsx(Zoom, {
-    ref: ref,
-    ...props
-  });
-});
-const SlideTransition = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "down",
-    ref: ref,
-    ...props
-  });
-});
-export default function Dialog({
-  center = true,
-  contentFontSize = 16,
-  children,
-  sx,
-  ...props
-}) {
-  const styles = {
-    '& .MuiDialog-container': {
-      alignItems: center ? 'center' : 'flex-start'
-    },
-    '.MuiTypography-root.MuiDialogContentText-root': {
-      fontSize: contentFontSize
-    }
-  };
-  return /*#__PURE__*/_jsx(MuiDialog, {
-    TransitionComponent: center ? ZoomTransition : SlideTransition,
-    sx: {
-      ...styles,
-      ...sx
-    },
-    ...props,
-    children: children
-  });
-}

package/dist/DropdownButton.js

@@ -1,59 +0,0 @@
-import * as React from "react";
-import { Divider, Menu, MenuItem } from "@mui/material";
-import Button from "./Button";
-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 DropdownButton({
-  label,
-  icon,
-  iconPlacement = 'start',
-  iconSize = '20px',
-  iconProps = {},
-  options = [],
-  onClick,
-  onSelect,
-  menuProps = {},
-  ...props
-}) {
-  const [anchor, setAnchor] = React.useState(null);
-  const handleClick = event => {
-    setAnchor(event.currentTarget);
-    if (onClick) onClick(event);
-  };
-  const handleSelect = id => {
-    setAnchor(null);
-    if (onSelect) onSelect(id);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Button, {
-      label: label,
-      icon: icon,
-      iconPlacement: iconPlacement,
-      iconSize: iconSize,
-      iconProps: iconProps,
-      onClick: handleClick,
-      ...props
-    }), options.length > 0 && /*#__PURE__*/_jsx(Menu, {
-      anchorEl: anchor,
-      open: Boolean(anchor),
-      onClose: _ => setAnchor(null),
-      sx: {
-        ...styles,
-        ...menuProps.sx
-      },
-      ...menuProps,
-      children: options.map(option => {
-        return option.type === 'divider' ? /*#__PURE__*/_jsx(Divider, {}) : /*#__PURE__*/_jsx(MenuItem, {
-          onClick: _ => handleSelect(option.id),
-          children: option.label
-        }, option.id);
-      })
-    })]
-  });
-}
-const styles = {
-  '.MuiButtonBase-root.MuiMenuItem-root': {
-    fontSize: 14
-  }
-};

package/dist/FormLabel.js

@@ -1,23 +0,0 @@
-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,
-  sx,
-  ...props
-}) {
-  const styles = {
-    color: value ? 'rgba(0, 0, 0, 0.87)' : 'rgba(0, 0, 0, 0.6)',
-    fontSize: value ? 16 : 14,
-    fontWeight: value ? 600 : 400
-  };
-  return /*#__PURE__*/_jsx(MuiFormLabel, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

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/GroupSelect.js

@@ -1,67 +0,0 @@
-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 = {
-    '.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: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}

package/dist/ListItem.js

@@ -1,21 +0,0 @@
-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,
-  verticalAlign = 'flex-start',
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(MuiListItem, {
-    ...props,
-    children: [grid && /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      columnSpacing: spacing,
-      alignItems: verticalAlign,
-      children: children
-    }), !grid && children]
-  });
-}

package/dist/ListItemDivider.js

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

package/dist/ListItemGrid.js

@@ -1,12 +0,0 @@
-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

@@ -1,44 +0,0 @@
-import { useState } from "react";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import MuiListItemText from "@mui/material/ListItemText";
-import HelpIcon from "@mui/icons-material/Help";
-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: typeof primary === 'string' ? /*#__PURE__*/_jsx(Typography, {
-      fontSize: 17,
-      fontWeight: 600,
-      children: primary
-    }) : /*#__PURE__*/_jsx(Box, {
-      children: primary
-    }),
-    secondary: /*#__PURE__*/_jsxs(Stack, {
-      direction: "row",
-      spacing: 0.5,
-      children: [/*#__PURE__*/_jsx(Box, {
-        color: "rgba(0, 0, 0, 0.6)",
-        fontSize: 14,
-        children: secondary
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: tooltip,
-        children: /*#__PURE__*/_jsx(HelpIcon, {
-          sx: {
-            fontSize: 18,
-            visibility: tooltip && hover ? 'visible' : 'hidden'
-          }
-        })
-      })]
-    }),
-    disableTypography: true,
-    onMouseEnter: _ => setHover(true),
-    onMouseLeave: _ => setHover(false),
-    ...props
-  });
-}

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
-          })]
-        })]
-      })]
-    })
-  });
-}