@nethru/ui 1.0.82 → 2.0.0

package/base/AddableFormList.js

@@ -0,0 +1,56 @@
+import React, { forwardRef } from "react";
+import { IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from '@mui/icons-material/Remove';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const AddableFormList = /*#__PURE__*/forwardRef(({
+  forms = [],
+  renderForm,
+  onAdd,
+  onRemove,
+  readOnly,
+  gap = 2,
+  margins = [5, 5],
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Stack, {
+    ref: ref,
+    gap: gap,
+    ...props,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [forms.map((form, index) => /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "start",
+        gap: gap,
+        children: [renderForm(form, index), !readOnly && /*#__PURE__*/_jsxs(Stack, {
+          direction: "row",
+          alignItems: "start",
+          gap: 1,
+          marginTop: `${margins[index > 0 ? 1 : 0]}px`,
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            title: "\uC0AD\uC81C",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "crud",
+              onClick: _ => onRemove(index),
+              disabled: forms.length === 1,
+              children: /*#__PURE__*/_jsx(RemoveIcon, {})
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: "\uCD94\uAC00",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "crud",
+              onClick: _ => onAdd(index),
+              children: /*#__PURE__*/_jsx(AddIcon, {})
+            })
+          })]
+        })]
+      }, form.id)), forms.length === 0 && /*#__PURE__*/_jsx(Typography, {
+        variant: "bodySmRegular",
+        children: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
+      })]
+    })
+  });
+});
+export default AddableFormList;

package/base/Alert.js

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+import { Box } from "@mui/material";
+import MuiAlert from "@mui/material/Alert";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Alert = /*#__PURE__*/forwardRef(({
+  subcontent,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsxs(MuiAlert, {
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsx(Box, {
+      whiteSpace: "pre",
+      children: unescape(children)
+    }), subcontent && /*#__PURE__*/_jsx(Box, {
+      className: "MuiAlert-subcontent",
+      whiteSpace: "pre",
+      children: unescape(subcontent)
+    })]
+  });
+});
+function unescape(content) {
+  return typeof content === 'string' ? content.replace(/(\\n)/g, '\n') : content;
+}
+export default Alert;

package/base/Checkbox.js

@@ -0,0 +1,20 @@
+import { FormControlLabel } from "@mui/material";
+import MuiCheckbox from "@mui/material/Checkbox";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Checkbox = /*#__PURE__*/forwardRef(({
+  label,
+  formControlLabelProps,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(FormControlLabel, {
+    ref: ref,
+    label: label,
+    control: /*#__PURE__*/_jsx(MuiCheckbox, {
+      ...props,
+      color: "info"
+    }),
+    ...formControlLabelProps
+  });
+});
+export default Checkbox;

package/base/CircularProgressButton.js

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { Box, Button, CircularProgress } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CircularProgressButton = /*#__PURE__*/forwardRef(({
+  loading = false,
+  children,
+  progressProps = {},
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    sx: {
+      position: 'relative',
+      width: 'fit-content'
+    },
+    children: [/*#__PURE__*/_jsx(Button, {
+      disabled: loading || props.disabled,
+      ...props,
+      children: children
+    }), loading && /*#__PURE__*/_jsx(CircularProgress, {
+      color: props.color,
+      size: props.size === 'small' ? 16 : 24,
+      thickness: 6,
+      sx: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        marginTop: `${props.size === 'small' ? -8 : -12}px`,
+        marginLeft: '-12px'
+      },
+      ...progressProps
+    })]
+  });
+});
+export default CircularProgressButton;

package/base/ColumnedSection.js

@@ -0,0 +1,44 @@
+import { forwardRef, useMemo } from "react";
+import { Box, Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ColumnedSection = /*#__PURE__*/forwardRef(({
+  columns,
+  labels = [],
+  contents = [],
+  spacing = 5,
+  breakpoints,
+  ...props
+}, ref) => {
+  const arrangedBreakpoints = useMemo(() => {
+    if (breakpoints) return breakpoints;
+    const point = Math.floor(12 / columns);
+    if (columns <= 3) {
+      return {
+        xs: 12,
+        sm: point
+      };
+    }
+    return {
+      xs: 12,
+      sm: point * 2,
+      md: point
+    };
+  }, [columns, breakpoints]);
+  return /*#__PURE__*/_jsx(Grid, {
+    ref: ref,
+    container: true,
+    spacing: spacing,
+    alignItems: "stretch",
+    ...props,
+    children: contents.map((content, index) => /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      ...arrangedBreakpoints,
+      children: [labels[index], /*#__PURE__*/_jsx(Box, {
+        className: "MuiGrid-box",
+        children: content
+      })]
+    }, index))
+  });
+});
+export default ColumnedSection;

package/base/DropdownButton.js

@@ -0,0 +1,74 @@
+import { forwardRef, useCallback, useState } from "react";
+import { Box, Button, IconButton, Menu, Popover, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { v4 } from 'uuid';
+import MenuItem from "./MenuItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DropdownButton = /*#__PURE__*/forwardRef(({
+  component = 'button',
+  onClick,
+  onSelect,
+  options = [],
+  popover,
+  children,
+  ...props
+}, ref) => {
+  const [anchor, setAnchor] = useState(null);
+  const [toggle, setToggle] = useState(null);
+  const handleClick = useCallback(event => {
+    setAnchor(event.currentTarget);
+    if (onClick) onClick(event);
+  }, [onClick]);
+  const handleChange = useCallback((event, value) => {
+    setToggle(value);
+    handleClick(event);
+  }, [handleClick]);
+  const handleClose = useCallback(id => {
+    setToggle(null);
+    setAnchor(null);
+  }, []);
+  const handleSelect = useCallback(id => {
+    handleClose();
+    if (onSelect) onSelect(id);
+  }, [onSelect, handleClose]);
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    children: [component === 'button' && /*#__PURE__*/_jsx(Button, {
+      onClick: handleClick,
+      ...props,
+      children: children
+    }), component === 'iconbutton' && /*#__PURE__*/_jsx(IconButton, {
+      onClick: handleClick,
+      ...props,
+      children: children
+    }), component === 'togglebutton' && /*#__PURE__*/_jsx(ToggleButtonGroup, {
+      exclusive: true,
+      value: toggle,
+      onChange: handleChange,
+      children: /*#__PURE__*/_jsx(ToggleButton, {
+        value: "on",
+        ...props,
+        children: children
+      })
+    }), options.length > 0 && /*#__PURE__*/_jsx(Menu, {
+      anchorEl: anchor,
+      open: Boolean(anchor),
+      onClose: handleClose,
+      children: options.map(option => /*#__PURE__*/_jsx(MenuItem, {
+        variant: option.variant,
+        onClick: _ => handleSelect(option.id),
+        children: option.content
+      }, option.id ?? v4()))
+    }), options.length === 0 && /*#__PURE__*/_jsx(Popover, {
+      anchorEl: anchor,
+      open: Boolean(anchor),
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      children: popover
+    })]
+  });
+});
+export default DropdownButton;

package/base/MainHeader.js

@@ -0,0 +1,56 @@
+import { Button, Stack, Typography } from "@mui/material";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MainHeader = /*#__PURE__*/forwardRef(({
+  title,
+  editable = false,
+  edit = false,
+  onEditClick,
+  onConfirmClick,
+  onCancelClick,
+  editButtonText = '편집',
+  confirmButtonText = '저장',
+  cancelButtonText = '취소',
+  confirmButtonDisabled = false,
+  rightSlot,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsxs(Stack, {
+    ref: ref,
+    direction: "row",
+    justifyContent: "space-between",
+    sx: {
+      mb: 2.5
+    },
+    ...props,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "headline1",
+      children: title
+    }), rightSlot && /*#__PURE__*/_jsx(_Fragment, {
+      children: rightSlot
+    }), !rightSlot && editable && /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      spacing: 1,
+      justifyContent: "flex-end",
+      children: [!edit && /*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        onClick: onEditClick,
+        children: editButtonText
+      }), edit && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          onClick: onCancelClick,
+          children: cancelButtonText
+        }), /*#__PURE__*/_jsx(Button, {
+          type: "submit",
+          onClick: onConfirmClick,
+          disabled: confirmButtonDisabled,
+          children: confirmButtonText
+        })]
+      })]
+    })]
+  });
+});
+export default MainHeader;

package/base/MenuItem.js

@@ -0,0 +1,92 @@
+import React, { forwardRef, useMemo } from "react";
+import MuiMenuItem from "@mui/material/MenuItem";
+import { Box, Divider, ListItemIcon, ListItemText } from "@mui/material";
+import { DataStoryIcon, NethruBulletIcon, NethruIcon, SmartCepIcon, SmartExpIcon, SmartOfferIcon, UserFlowIcon, WiseCollectorIcon } from "./assets/icons";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const MenuItem = /*#__PURE__*/forwardRef(({
+  variant,
+  children,
+  ...props
+}, ref) => {
+  const isIndicator = useMemo(() => {
+    return variant === 'placeholder' || variant === 'menusection' || variant === 'spacer';
+  }, [variant]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: variant === 'divider' ? /*#__PURE__*/_jsx(Divider, {
+      ...props
+    }) : /*#__PURE__*/_jsxs(MuiMenuItem, {
+      variant: variant,
+      value: isIndicator ? '' : undefined,
+      disabled: isIndicator,
+      ...props,
+      children: [variant === 'menusection' && /*#__PURE__*/_jsx(NethruBulletIcon, {
+        sx: {
+          fontSize: 12,
+          mr: 0.5
+        }
+      }), children]
+    })
+  });
+});
+export default MenuItem;
+function AppMenuItem({
+  icon,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(Box, {
+        component: icon,
+        sx: {
+          fontSize: 23
+        }
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: children
+    })]
+  });
+}
+export function NethruMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: NethruIcon,
+    children: "Nethru"
+  });
+}
+export function WiseCollectorMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: WiseCollectorIcon,
+    children: "WiseCollector"
+  });
+}
+export function DataStoryMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: DataStoryIcon,
+    children: "DataStory"
+  });
+}
+export function UserFlowMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: UserFlowIcon,
+    children: "UserFlow"
+  });
+}
+export function SmartCepMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: SmartCepIcon,
+    children: "SmartCep"
+  });
+}
+export function SmartOfferMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: SmartOfferIcon,
+    children: "SmartOffer"
+  });
+}
+export function SmartExpMenuItem() {
+  return /*#__PURE__*/_jsx(AppMenuItem, {
+    icon: SmartExpIcon,
+    children: "SmartExp"
+  });
+}

package/base/PropertyTable.js

@@ -0,0 +1,69 @@
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { Box, FormHelperText } from "@mui/material";
+import { DataGridPro, koKR } 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,
+  onUpdate,
+  readOnly,
+  error = false,
+  helperText,
+  outerSx,
+  ...props
+}, ref) => {
+  const getRowHeight = useCallback(() => 'auto', []);
+  const arrangedColumns = useMemo(() => {
+    return columns.map(column => {
+      const newColumn = {
+        ...column
+      };
+      if (readOnly) newColumn.editable = false;
+      if (column.greyed) newColumn.cellClassName = 'MuiTypography-greyed';else if (column.bold) {
+        newColumn.cellClassName = params => {
+          return !params.row.deletable ? 'MuiTypography-bold' : '';
+        };
+      }
+      return newColumn;
+    });
+  }, [columns, readOnly]);
+  const [updatedRows, setUpdatedRows] = useState(props.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: props.rows,
+      autoHeight: true,
+      getRowHeight: getRowHeight,
+      disableColumnMenu: true,
+      disableColumnReorder: true,
+      disableRowSelectionOnClick: readOnly,
+      hideFooter: true,
+      editable: !readOnly,
+      isCellEditable: params => {
+        return !readOnly && (params.row.deletable || !params.colDef.bold);
+      },
+      processRowUpdate: processRowUpdate,
+      onProcessRowUpdateError: error => console.log(error),
+      error: error,
+      localeText: {
+        ...koKR.components.MuiDataGrid.defaultProps.localeText,
+        noRowsLabel: '항목이 없습니다.',
+        ...props.localText
+      },
+      ...props
+    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      error: error,
+      children: helperText
+    })]
+  });
+});
+export default PropertyTable;

package/base/SearchTextField.js

@@ -0,0 +1,44 @@
+import { forwardRef, useMemo } from "react";
+import TextField from "@mui/material/TextField";
+import { IconButton, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from '@mui/icons-material/Clear';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SearchTextField = /*#__PURE__*/forwardRef(({
+  value,
+  onClear,
+  ...props
+}, ref) => {
+  const styles = useMemo(() => ({
+    visibility: value ? "visible" : "hidden",
+    '&:hover': {
+      backgroundColor: 'transparent'
+    }
+  }), [value]);
+  return /*#__PURE__*/_jsx(TextField, {
+    ref: ref,
+    value: value,
+    placeholder: "\uAC80\uC0C9...",
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(SearchIcon, {
+          fontSize: "small"
+        })
+      }),
+      endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+        position: "end",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onClear,
+          sx: styles,
+          children: /*#__PURE__*/_jsx(ClearIcon, {
+            fontSize: "small"
+          })
+        })
+      }),
+      ...props.InputProps
+    },
+    ...props
+  });
+});
+export default SearchTextField;

package/base/SearchableSelect.js

@@ -0,0 +1,64 @@
+import { Autocomplete, FormControl, FormHelperText, InputLabel, TextField } from "@mui/material";
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SearchableSelect = /*#__PURE__*/forwardRef(({
+  id,
+  label,
+  placeholder,
+  helperText,
+  value,
+  options,
+  onSelect,
+  idKey = 'id',
+  labelKey = 'label',
+  groupKey,
+  error,
+  formControlProps,
+  textFieldProps,
+  ...props
+}, ref) => {
+  const styles = useMemo(() => ({
+    mt: label ? '17px' : undefined,
+    ...formControlProps?.sx
+  }), [label, formControlProps]);
+  const isOptionEqualToValue = useCallback((a, b) => a[idKey] === b[idKey], [idKey]);
+  const renderInput = useCallback(params => /*#__PURE__*/_jsx(TextField, {
+    ...params,
+    placeholder: placeholder,
+    ...textFieldProps
+  }), [placeholder, textFieldProps]);
+  const handleSelect = useCallback((event, value, reason) => {
+    if (reason !== 'selectOption') return;
+    if (onSelect) onSelect(id, value);
+  }, [id, onSelect]);
+  return /*#__PURE__*/_jsxs(FormControl, {
+    ref: ref,
+    disabled: props.disabled,
+    error: error,
+    sx: styles,
+    ...formControlProps,
+    children: [label && /*#__PURE__*/_jsx(InputLabel, {
+      disabled: props.disabled,
+      children: label
+    }), /*#__PURE__*/_jsx(Autocomplete, {
+      id: id,
+      options: options,
+      getOptionKey: option => option[idKey],
+      getOptionLabel: option => option[labelKey],
+      groupBy: option => option[groupKey],
+      isOptionEqualToValue: isOptionEqualToValue,
+      value: value,
+      onChange: handleSelect,
+      blurOnSelect: true,
+      disableClearable: true,
+      noOptionsText: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
+      renderInput: renderInput,
+      className: error ? 'Mui-error' : '',
+      ...props
+    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+});
+export default SearchableSelect;

package/base/Select.js

@@ -0,0 +1,33 @@
+import { FormControl, FormHelperText, InputLabel } from "@mui/material";
+import MuiSelect from "@mui/material/Select";
+import { forwardRef, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = /*#__PURE__*/forwardRef(({
+  label,
+  helperText,
+  children,
+  formControlProps,
+  ...props
+}, ref) => {
+  const styles = useMemo(() => ({
+    mt: label ? '17px' : undefined,
+    ...formControlProps?.sx
+  }), [label, formControlProps]);
+  return /*#__PURE__*/_jsxs(FormControl, {
+    ref: ref,
+    disabled: props.disabled,
+    error: props.error,
+    sx: styles,
+    ...formControlProps,
+    children: [label && /*#__PURE__*/_jsx(InputLabel, {
+      children: label
+    }), /*#__PURE__*/_jsx(MuiSelect, {
+      ...props,
+      children: children
+    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+});
+export default Select;

package/{dist → base}/Slider.js

@@ -1,13 +1,12 @@
+import { forwardRef, useMemo } from "react";
 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({
+const Slider = /*#__PURE__*/forwardRef(({
   value,
   defaultValue,
   marks,
   ...props
-}) {
+}, ref) => {
   const autoMarks = useMemo(() => {
     let values = value || defaultValue;
     if (values === undefined) return {};
@@ -19,13 +18,13 @@ export default function Slider({
       };
     });
   }, [value, defaultValue]);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MuiSlider, {
-      value: value,
-      defaultValue: defaultValue,
-      valueLabelDisplay: "off",
-      marks: marks ? marks : autoMarks,
-      ...props
-    })
+  return /*#__PURE__*/_jsx(MuiSlider, {
+    ref: ref,
+    value: value,
+    defaultValue: defaultValue,
+    valueLabelDisplay: "off",
+    marks: marks ? marks : autoMarks,
+    ...props
   });
-}
+});
+export default Slider;