@nethru/ui 1.0.82 → 2.0.1

package/base/styles/typography.js

@@ -0,0 +1,131 @@
+import { grey } from "../colors";
+const typography = {
+  fontFamily: '"Pretendard Variable", Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+  fontSize: 12,
+  h1: undefined,
+  h2: undefined,
+  h3: undefined,
+  h4: undefined,
+  h5: undefined,
+  h6: undefined,
+  subtitle1: undefined,
+  subtitle2: undefined,
+  body1: undefined,
+  body2: undefined,
+  button: undefined,
+  caption: undefined,
+  overline: undefined,
+  logo: {
+    color: grey[900],
+    fontSize: '18px',
+    fontWeight: 600,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  headline1: {
+    color: grey[900],
+    fontSize: '24px',
+    fontWeight: 700,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  headline2: {
+    color: grey[900],
+    fontSize: '16px',
+    fontWeight: 700,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  bodyXlSemibold: {
+    color: grey[900],
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  bodyXlMedium: {
+    color: grey[900],
+    fontSize: '16px',
+    fontWeight: 500,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  bodyLgSemibold: {
+    color: grey[900],
+    fontSize: '14px',
+    fontWeight: 600,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  bodyLgMedium: {
+    color: grey[900],
+    fontSize: '14px',
+    fontWeight: 500,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  },
+  bodyMdSemibold: {
+    color: grey[900],
+    fontSize: '13px',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodyMdMedium: {
+    color: grey[900],
+    fontSize: '13px',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodySmBold: {
+    color: grey[900],
+    fontSize: '12px',
+    fontWeight: 700,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodySmSemibold: {
+    color: grey[900],
+    fontSize: '12px',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodySmMedium: {
+    color: grey[900],
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodySmRegular: {
+    color: grey[900],
+    fontSize: '12px',
+    fontWeight: 400,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodyXsSemibold: {
+    color: grey[900],
+    fontSize: '10px',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  bodyXsMedium: {
+    color: grey[900],
+    fontSize: '10px',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: 0
+  },
+  code: {
+    color: grey[900],
+    fontSize: '13px',
+    fontWeight: 500,
+    lineHeight: 1.6,
+    letterSpacing: 0
+  }
+};
+export default typography;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.82",
-  "main": "dist/index.js",
+  "version": "2.0.1",
+  "main": "base/index.js",
   "files": [
-    "/dist"
+    "/base"
   ],
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.1",
@@ -30,14 +30,15 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "uuid": "^10.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
+    "publish": "rm -rf base && mkdir base && babel src/lib -d base --copy-files"
   },
   "babel": {
     "presets": [

package/dist/AlertDialog.js

@@ -1,55 +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 AlertDialog({
-  open,
-  onClose,
-  content,
-  closeText = '확인'
-}) {
-  return /*#__PURE__*/_jsxs(Dialog, {
-    contentFontSize: 15,
-    open: open,
-    onClose: onClose,
-    children: [/*#__PURE__*/_jsx(DialogContent, {
-      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__*/_jsx(DialogActions, {
-      sx: {
-        mt: 0,
-        mb: 1,
-        justifyContent: 'center'
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "contained",
-        onClick: onClose,
-        children: closeText
-      })
-    })]
-  });
-}

package/dist/AppBar.js

@@ -1,68 +0,0 @@
-import { Box, Divider, Stack, Toolbar, Typography } from "@mui/material";
-import MuiAppBar from "@mui/material/AppBar";
-import { grey } from "@mui/material/colors";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function AppBar({
-  title,
-  logoUri,
-  onLogoClick,
-  children,
-  sx
-}) {
-  const appbarStyles = {
-    boxShadow: 'none',
-    borderBottom: `1px solid ${grey[300]}`,
-    '@media (min-width: 600px)': {
-      '.MuiToolbar-root': {
-        paddingLeft: '16px',
-        paddingRight: '16px'
-      }
-    }
-  };
-  const logoStyles = {
-    width: 37,
-    height: 32,
-    cursor: onLogoClick ? 'pointer' : 'default'
-  };
-  const dividerStyles = {
-    borderColor: grey[200],
-    mt: 2,
-    mb: 2,
-    ml: 2,
-    mr: 1
-  };
-  return /*#__PURE__*/_jsx(MuiAppBar, {
-    color: "transparent",
-    sx: {
-      ...sx,
-      ...appbarStyles
-    },
-    children: /*#__PURE__*/_jsxs(Toolbar, {
-      children: [/*#__PURE__*/_jsxs(Stack, {
-        spacing: 1,
-        direction: "row",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Box, {
-          component: "img",
-          src: logoUri,
-          alt: "logo",
-          onClick: onLogoClick,
-          sx: logoStyles
-        }), /*#__PURE__*/_jsx(Typography, {
-          noWrap: true,
-          sx: {
-            color: 'text.secondary',
-            cursor: 'default'
-          },
-          children: title
-        })]
-      }), /*#__PURE__*/_jsx(Divider, {
-        orientation: "vertical",
-        variant: "middle",
-        sx: dividerStyles,
-        flexItem: true
-      }), children]
-    })
-  });
-}

package/dist/Checkbox.js

@@ -1,27 +0,0 @@
-import { useMemo } from "react";
-import MuiCheckbox from "@mui/material/Checkbox";
-import { FormControlLabel } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Checkbox({
-  label,
-  size = 'medium',
-  sx,
-  ...props
-}) {
-  const styles = useMemo(() => ({
-    '& .MuiFormControlLabel-label': {
-      fontSize: size === 'small' ? '14px' : '16px'
-    }
-  }), [size]);
-  return /*#__PURE__*/_jsx(FormControlLabel, {
-    label: label,
-    control: /*#__PURE__*/_jsx(MuiCheckbox, {
-      size: size,
-      ...props
-    }),
-    sx: {
-      ...styles,
-      ...sx
-    }
-  });
-}

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