@nethru/ui 1.0.82 → 2.0.0

package/base/styles/mui/switch.js

@@ -0,0 +1,33 @@
+import { blue, grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      '& + .MuiFormControlLabel-label': {
+        margin: -5
+      }
+    },
+    switchBase: ({
+      ownerState
+    }) => ({
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[5]
+      },
+      '&.Mui-checked + .MuiSwitch-track': {
+        backgroundColor: blue[100],
+        opacity: 1
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        backgroundColor: grey[50],
+        opacity: 1
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        backgroundColor: ownerState.checked ? blue[100] : grey[150],
+        opacity: 1
+      }
+    }),
+    track: {
+      backgroundColor: grey[300],
+      opacity: 1
+    }
+  }
+};

package/base/styles/mui/tab.js

@@ -0,0 +1,23 @@
+import typography from "../typography";
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyXlMedium,
+      color: grey[600],
+      '&:hover, &.Mui-focusVisible': {
+        color: grey[900]
+      },
+      '&.Mui-focusVisible.Mui-selected': {
+        backgroundColor: grey[5]
+      },
+      '&.Mui-selected': {
+        ...typography.headline2
+      },
+      minWidth: 'unset',
+      minHeight: 40,
+      padding: 0
+    }
+  }
+};

package/base/styles/mui/tablePagination.js

@@ -0,0 +1,8 @@
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    selectLabel: {
+      color: grey[700]
+    }
+  }
+};

package/base/styles/mui/tabs.js

@@ -0,0 +1,20 @@
+export const styles = {
+  styleOverrides: {
+    root: {
+      minHeight: 42
+    },
+    flexContainer: {
+      gap: 16
+    },
+    flexContainerVertical: ({
+      ownerState,
+      theme
+    }) => ({
+      gap: 16,
+      '.MuiTab-root': {
+        minHeight: 'unset',
+        paddingRight: theme.spacing(2)
+      }
+    })
+  }
+};

package/base/styles/mui/textField.js

@@ -0,0 +1,11 @@
+export const styles = {
+  styleOverrides: {
+    root: ({
+      ownerState
+    }) => {
+      return ownerState.label && {
+        marginTop: 17
+      };
+    }
+  }
+};

package/base/styles/mui/toggleButton.js

@@ -0,0 +1,96 @@
+import { blue, grey } from "../../colors";
+import typography from "../typography";
+import borderRadius from "../borderRadius";
+export const styles = {
+  variants: [{
+    props: {
+      variant: 'normal'
+    },
+    style: {}
+  }, {
+    props: {
+      variant: 'apps'
+    },
+    style: {
+      '&': {
+        borderColor: 'transparent'
+      },
+      '&.Mui-selected': {
+        backgroundColor: grey[10],
+        borderColor: grey[700]
+      }
+    }
+  }, {
+    props: {
+      variant: 'gnb'
+    },
+    style: {
+      '&.Mui-selected': {
+        backgroundColor: grey[10],
+        borderColor: grey[700]
+      }
+    }
+  }, {
+    props: {
+      variant: 'lnb'
+    },
+    style: {
+      '&': {
+        borderColor: 'transparent'
+      },
+      '&.Mui-selected': {
+        backgroundColor: grey[10]
+      }
+    }
+  }],
+  defaultProps: {
+    variant: 'normal'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      color: grey[600],
+      borderColor: grey[300],
+      borderRadius: borderRadius[2],
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[5]
+      },
+      '&:active': {
+        backgroundColor: grey[10]
+      },
+      '&.Mui-selected': {
+        color: theme.palette.info.main,
+        backgroundColor: blue[50],
+        ':hover, &.Mui-focusVisible': {
+          backgroundColor: blue[100]
+        },
+        '&.MuiToggleButtonGroup-grouped.MuiToggleButtonGroup-middleButton': {
+          borderLeftColor: grey[300]
+        }
+      },
+      '&.Mui-disabled': {
+        color: grey[400],
+        borderColor: grey[300]
+      }
+    }),
+    sizeLarge: undefined,
+    sizeMedium: ({
+      ownerState,
+      theme
+    }) => ({
+      width: ownerState.variant === 'apps' || ownerState.variant === 'gnb' ? 36 : undefined,
+      height: 36
+    }),
+    sizeSmall: ({
+      ownerState,
+      theme
+    }) => ({
+      width: ownerState.variant === 'apps' || ownerState.variant === 'gnb' ? 26 : undefined,
+      height: 26
+    })
+  }
+};

package/base/styles/mui/tooltip.js

@@ -0,0 +1,22 @@
+import typography from "../typography";
+import shadow from "../shadow";
+import { grey } from "../../colors";
+export const styles = {
+  defaultProps: {
+    arrow: true
+  },
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmMedium
+    },
+    tooltip: {
+      color: grey[900],
+      backgroundColor: '#fff',
+      boxShadow: shadow[4]
+    },
+    arrow: {
+      color: '#fff'
+    }
+  }
+};

package/base/styles/palette.js

@@ -0,0 +1,40 @@
+import { blue, green, grey, lime, orange, red } from "../colors";
+const palette = {
+  primary: {
+    main: grey[900],
+    contrastText: '#fff'
+  },
+  info: {
+    main: blue[500],
+    contrastText: '#fff'
+  },
+  warning: {
+    main: orange[500],
+    contrastText: '#fff'
+  },
+  error: {
+    main: red[500],
+    contrastText: '#fff'
+  },
+  crud: {
+    main: blue[50],
+    contrastText: blue[500]
+  },
+  blue: {
+    main: blue[500],
+    contrastText: blue[700]
+  },
+  green: {
+    main: green[500],
+    contrastText: green[700]
+  },
+  orange: {
+    main: orange[500],
+    contrastText: orange[700]
+  },
+  lime: {
+    main: lime[500],
+    contrastText: lime[700]
+  }
+};
+export default palette;

package/base/styles/shadow.js

@@ -0,0 +1,8 @@
+const shadow = {
+  1: '0px 18px 20px -20px rgba(90, 90, 90, 0.20)',
+  2: '1px 1px 8px 1px rgba(101, 101, 101, 0.20)',
+  3: '0px 5px 10px 0px rgba(101, 101, 101, 0.16),' + '0px 3px 4px -1px rgba(101, 101, 101, 0.08)',
+  4: '0px 2px 10px 0px rgba(0, 0, 0, 0.14),' + '0px 1px 5px -1px rgba(0, 0, 0, 0.20)',
+  5: '0px 20px 31px 3px rgba(0, 0, 0, 0.14),' + '0px 10px 13px -6px rgba(0, 0, 0, 0.20)'
+};
+export default shadow;

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.0",
+  "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/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]
-    })
-  });
-}