@nethru/ui 1.0.81 → 2.0.0

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,20 +1,21 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.81",
-  "main": "dist/index.js",
+  "version": "2.0.0",
+  "main": "base/index.js",
   "files": [
-    "/dist"
+    "/base"
   ],
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.14.18",
-    "@mui/material": "^5.14.18",
-    "@mui/x-data-grid-pro": "^6.19.10",
-    "@mui/x-date-pickers-pro": "^7.2.0",
+    "@mui/material": "^5.15.21",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "@mui/x-data-grid-pro": "^6.20.3",
+    "@mui/x-date-pickers-pro": "^7.8.0",
     "@mui/x-license": "^7.2.0",
     "@mui/x-tree-view": "^6.17.0",
     "@nethru/ui": "^1.0.19",
@@ -22,19 +23,22 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@uiw/react-codemirror": "^4.21.21",
+    "dayjs": "^1.11.11",
     "days": "^1.1.1",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "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/Accordion.js

@@ -1,45 +0,0 @@
-import MuiAccordion from "@mui/material/Accordion";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  border: '1px solid #eaeaea',
-  boxShadow: 'none',
-  '.MuiAccordionDetails-root': {
-    pt: 0,
-    pl: 8,
-    pr: 8
-  },
-  '.MuiFormLabel-root.MuiInputLabel-root': {
-    fontSize: '14px'
-  },
-  '.MuiInputBase-input.MuiInput-input': {
-    color: '#555',
-    fontSize: '15px'
-  },
-  '.MuiTabs-root.MuiTabs-vertical': {
-    mt: 2
-  },
-  '.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
-    fontSize: '14px',
-    minWidth: '32px',
-    maxWidth: '32px'
-  },
-  '.MuiButtonBase-root.MuiToggleButton-root': {
-    pt: '1px',
-    pb: '1px',
-    fontSize: '12px'
-  }
-};
-export default function Accordion({
-  children,
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(MuiAccordion, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

package/dist/AccordionDetails.js

@@ -1,19 +0,0 @@
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  mb: 2
-};
-export default function AccordionDetails({
-  children,
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(MuiAccordionDetails, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

package/dist/AccordionSummary.js

@@ -1,35 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-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 AccordionSummary({
-  title,
-  desc,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      ...props,
-      children: /*#__PURE__*/_jsxs(Stack, {
-        direction: "row",
-        alignItems: "flex-end",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: title
-        }), desc && /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          color: "#aaa",
-          children: desc
-        })]
-      })
-    }), !title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      ...props,
-      children: children
-    })]
-  });
-}

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

@@ -1,56 +0,0 @@
-import React from "react";
-import { Button, IconButton, Stack, Tooltip, Typography } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-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 AppendableFormList({
-  gap = 1,
-  forms,
-  renderForm,
-  addOns,
-  onAppend,
-  onRemove,
-  readOnly
-}) {
-  return /*#__PURE__*/_jsxs(Stack, {
-    gap: gap,
-    children: [/*#__PURE__*/_jsxs(_Fragment, {
-      children: [forms.map((form, index) => /*#__PURE__*/_jsxs(Stack, {
-        direction: "row",
-        alignItems: "end",
-        gap: 2,
-        children: [renderForm(form, index), !readOnly && /*#__PURE__*/_jsx(Tooltip, {
-          title: "\uC0AD\uC81C",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: _ => onRemove(index),
-            size: "small",
-            sx: {
-              ml: '-10px',
-              mb: '-5px'
-            },
-            children: /*#__PURE__*/_jsx(DeleteIcon, {
-              fontSize: "small"
-            })
-          })
-        })]
-      }, index)), forms.length === 0 && /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        sx: {
-          color: '#999'
-        },
-        children: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
-      })]
-    }), !readOnly && /*#__PURE__*/_jsxs(Stack, {
-      direction: "row",
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(Button, {
-        variant: "text",
-        startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
-        onClick: onAppend,
-        children: "\uCD94\uAC00"
-      }), addOns]
-    })]
-  });
-}

package/dist/AvatarDropdown.js

@@ -1,80 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Avatar, Box, IconButton } from '@mui/material';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Divider from '@mui/material/Divider';
-import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import { red } from '@mui/material/colors';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function AvatarDropdown({
-  name,
-  color,
-  bgcolor,
-  children,
-  onProfileClick,
-  onLogoutClick,
-  ...props
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const firstLetter = useMemo(() => {
-    return name && name.length > 0 ? name[0].toUpperCase() : "?";
-  }, [name]);
-  const handleClick = event => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
-  const styles = {
-    color: color ? color : '#fff',
-    bgcolor: bgcolor ? bgcolor : red[900],
-    width: 32,
-    height: 32,
-    fontSize: 16
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    ...props,
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      onClick: handleClick,
-      size: "small",
-      sx: {
-        ml: 2
-      },
-      children: /*#__PURE__*/_jsx(Avatar, {
-        sx: styles,
-        children: firstLetter
-      })
-    }), /*#__PURE__*/_jsxs(Menu, {
-      anchorEl: anchorEl,
-      open: open,
-      onClose: handleClose,
-      onClick: handleClose,
-      sx: {
-        '.MuiButtonBase-root.MuiMenuItem-root': {
-          fontSize: 14
-        }
-      },
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: onProfileClick,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            sx: {
-              ...styles,
-              mr: 1,
-              fontSize: 13,
-              width: 22,
-              height: 22
-            },
-            children: firstLetter
-          })
-        }), name]
-      }), /*#__PURE__*/_jsx(Divider, {}), children, children && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: onLogoutClick,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(LogoutRoundedIcon, {
-            fontSize: "small"
-          })
-        }), "\uB85C\uADF8\uC544\uC6C3"]
-      })]
-    })]
-  });
-}

package/dist/Button.js

@@ -1,61 +0,0 @@
-import { useMemo } from "react";
-import MuiButton from "@mui/material/Button";
-import { Box, CircularProgress, IconButton } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Button({
-  label,
-  icon,
-  iconPlacement = 'start',
-  iconSize = '20px',
-  iconProps = {},
-  progressProps = {},
-  loading = false,
-  ...props
-}) {
-  const iconComponent = useMemo(() => {
-    return icon ? /*#__PURE__*/_jsx(Box, {
-      component: icon,
-      sx: {
-        '&.MuiSvgIcon-root': {
-          fontSize: `${iconSize}!important`
-        }
-      },
-      ...iconProps
-    }) : null;
-  }, [icon, iconSize, iconProps]);
-  const startIcon = useMemo(() => {
-    return iconPlacement === 'start' ? iconComponent : null;
-  }, [iconComponent, iconPlacement]);
-  const endIcon = useMemo(() => {
-    return iconPlacement === 'end' ? iconComponent : null;
-  }, [iconComponent, iconPlacement]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative',
-      width: 'fit-content'
-    },
-    children: [label ? /*#__PURE__*/_jsx(MuiButton, {
-      startIcon: startIcon,
-      endIcon: endIcon,
-      disabled: loading,
-      ...props,
-      children: label
-    }) : /*#__PURE__*/_jsx(IconButton, {
-      disabled: loading,
-      ...props,
-      children: iconComponent
-    }), loading && /*#__PURE__*/_jsx(CircularProgress, {
-      size: 24,
-      thickness: 6,
-      sx: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        marginTop: '-12px',
-        marginLeft: '-12px'
-      },
-      ...progressProps
-    })]
-  });
-}

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

@@ -1,33 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import MuiCircularProgress from "@mui/material/CircularProgress";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function CircularProgress(props) {
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative',
-      display: 'inline-flex'
-    },
-    children: [/*#__PURE__*/_jsx(MuiCircularProgress, {
-      variant: "determinate",
-      ...props
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "caption",
-        component: "div",
-        color: "text.secondary",
-        children: `${Math.round(props.value)}%`
-      })
-    })]
-  });
-}