@nethru/ui 2.0.6 → 2.0.8

package/base/AddableFormList.js

@@ -57,7 +57,7 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
             })
           })]
         })]
-      }, form.id)), forms.length === 0 && /*#__PURE__*/_jsx(Typography, {
+      }, form.id ?? form)), forms.length === 0 && /*#__PURE__*/_jsx(Typography, {
         variant: "bodySmRegular",
         children: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
       })]

package/base/FormContent.js

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+import { Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormContent = /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Typography, {
+    ref: ref,
+    variant: "bodyXlMedium",
+    children: children
+  });
+});
+export default FormContent;

package/base/HelpTooltipIcon.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import { IconButton, Tooltip } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HelpTooltipIcon = /*#__PURE__*/forwardRef(({
+  tooltip,
+  onClick,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Tooltip, {
+    ref: ref,
+    title: tooltip,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      size: "small",
+      onClick: onClick,
+      children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+        fontSize: "inherit"
+      })
+    })
+  });
+});
+export default HelpTooltipIcon;

package/base/SectionLabel.js

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+import { Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SectionLabel = /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Typography, {
+    ref: ref,
+    variant: "bodyLgSemibold",
+    children: children
+  });
+});
+export default SectionLabel;

package/base/editor/Editor.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, FormHelperText } from "@mui/material";
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
@@ -7,6 +7,10 @@ import { nScript } from './nScript';
 import { Decoration, EditorView } from "@codemirror/view";
 import { RegExpCursor, SearchCursor } from '@codemirror/search';
 import { StateEffect, StateField } from "@codemirror/state";
+import borderRadius from "../styles/borderRadius";
+import { blue, grey, red, yellow } from "../colors";
+import typography from "../styles/typography";
+import shadow from "../styles/shadow";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Editor({
@@ -32,29 +36,70 @@ export default function Editor({
   const [view, setView] = useState();
   const [content, setContent] = useState('');
   const [focused, setFocused] = useState(false);
+  const theme = useMemo(() => EditorView.theme({
+    '&': {
+      fontSize: '13px',
+      outline: 'none !important'
+    },
+    '.cm-scroller': {
+      border: `1px solid ${error ? red[500] : focused ? grey[900] : grey[300]}`,
+      borderRadius: `${borderRadius[2]}px`
+    },
+    '.cm-gutters': {
+      width: '42px',
+      justifyContent: 'center',
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      backgroundColor: grey[50],
+      borderRight: `1px solid ${grey[300]}`
+    },
+    '.cm-content': {
+      ...typography.code,
+      backgroundColor: '#fff'
+    },
+    '.cm-content.cm-lineWrapping': {
+      wordBreak: 'break-all'
+    },
+    '.cm-content .cm-activeLine': {
+      backgroundColor: blue[5]
+    },
+    '.cm-content .cm-selectionMatch': {
+      backgroundColor: blue[100]
+    },
+    '.cm-selectionLayer .cm-selectionBackground': {
+      backgroundColor: `${blue[200]} !important`
+    },
+    '.cm-tooltip': {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmRegular,
+      borderRadius: `${borderRadius[1]}px`,
+      boxShadow: shadow[1]
+    },
+    '.cm-tooltip-autocomplete ul li[aria-selected]': {
+      color: 'unset',
+      backgroundColor: blue[100]
+    },
+    '.cm-tooltip.cm-completionInfo': {
+      top: '0px !important',
+      left: '101% !important',
+      maxWidth: '300px !important'
+    }
+  }, {
+    dark: false
+  }), [focused, error]);
   const styles = useMemo(() => {
     return {
-      maxWidth: restrictWidth && ref.current ? `${ref.current.offsetWidth}px` : 'unset',
-      borderBottom: focused || error ? `3px solid ${error ? '#d32f2f' : '#1976d2'}` : `${!readOnly ? '2px' : '0px'} solid rgba(0, 0, 0, 0.42)`
+      maxWidth: restrictWidth && ref.current ? `${ref.current.offsetWidth}px` : 'unset'
     };
     // eslint-disable-next-line
-  }, [readOnly, error, focused, ref.current]);
-  const helperTextStyles = useMemo(() => {
-    return {
-      color: error ? '#d32f2f' : '#555',
-      fontSize: 12,
-      ml: '14px',
-      mt: '3px'
-    };
-  }, [error]);
+  }, [restrictWidth, ref.current]);
   const highlight = useMemo(() => {
     const highlightEffect = StateEffect.define();
     const decoration = Decoration.mark({
       attributes: {
-        style: "background-color:#e9db5d" //#90caf9
+        style: `background-color: ${yellow[100]}`
       }
     });
-
     const extension = StateField.define({
       create() {
         return Decoration.none;
@@ -153,13 +198,14 @@ export default function Editor({
       },
       onCreateEditor: (view, state) => setView(view),
       onUpdate: handleUpdate,
+      theme: theme,
       style: {
         ...style,
         ...styles
       },
       ...props
-    }), helperText && /*#__PURE__*/_jsx(Typography, {
-      sx: helperTextStyles,
+    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      error: error,
       children: helperText
     })]
   });

package/base/index.js

@@ -17,6 +17,8 @@ export { default as ConfirmDialog } from "./dialog/ConfirmDialog";
 export { default as DataGrid } from "./datagrid/DataGrid";
 export { default as Dialog } from "./dialog/Dialog";
 export { default as DropdownButton } from "./DropdownButton";
+export { default as FormContent } from "./FormContent";
+export { default as HelpTooltipIcon } from "./HelpTooltipIcon";
 export { default as Editor } from "./editor/Editor";
 export { default as Frame } from "./frame/Frame";
 export { default as MainHeader } from "./MainHeader";
@@ -25,8 +27,9 @@ export { default as PropertyTable } from "./PropertyTable";
 export { default as Radio } from "./Radio";
 export { default as SearchableSelect } from "./SearchableSelect";
 export { default as SearchTextField } from "./SearchTextField";
-export { default as Sidebar } from "./frame/sidebar/Sidebar";
+export { default as SectionLabel } from "./SectionLabel";
 export { default as Select } from "./Select";
+export { default as Sidebar } from "./frame/sidebar/Sidebar";
 export { default as Slider } from "./Slider";
 export { default as Snackbar } from "./Snackbar";
 export { default as Switch } from "./Switch";

package/base/styles/createTheme.js

@@ -17,6 +17,8 @@ import * as select from "./mui/select";
 import * as autocomplete from "./mui/autocomplete";
 import * as textField from "./mui/textField";
 import * as formControl from "./mui/formControl";
+import * as formControlLabel from "./mui/formControlLabel";
+import * as formLabel from "./mui/formLabel";
 import * as outlinedInput from "./mui/outlinedInput";
 import * as formHelperText from "./mui/formHelperText";
 import * as inputLabel from "./mui/inputLabel";
@@ -24,7 +26,6 @@ import * as popover from "./mui/popover";
 import * as paper from "./mui/paper";
 import * as list from "./mui/list";
 import * as menuItem from "./mui/menuItem";
-import * as formControlLabel from "./mui/formControlLabel";
 import * as chip from "./mui/chip";
 import * as slider from "./mui/slider";
 import * as tabs from "./mui/tabs";
@@ -68,6 +69,7 @@ export default function createTheme() {
       MuiTextField: textField.styles,
       MuiFormControl: formControl.styles,
       MuiFormControlLabel: formControlLabel.styles,
+      MuiFormLabel: formLabel.styles,
       MuiInputLabel: inputLabel.styles,
       MuiOutlinedInput: outlinedInput.styles,
       MuiFormHelperText: formHelperText.styles,

package/base/styles/globalStyles.js

@@ -22,19 +22,6 @@ const globalStyles = {
     backgroundColor: blueGrey.contentBg,
     minWidth: '1280px'
   },
-  code: {
-    fontFamily: typography.fontFamily
-  },
-  '.cm-theme-light': {
-    fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
-    fontSize: '14px'
-  },
-  '.cm-editor, .cm-editor.cm-focused': {
-    outline: '1px solid #eaeaea'
-  },
-  '.cm-editor .cm-content.cm-lineWrapping': {
-    wordBreak: 'break-all'
-  },
   '.highcharts-tooltip-box': {
     fillOpacity: 0
   },

package/base/styles/mui/formLabel.js

@@ -0,0 +1,12 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      '&.MuiFormLabel-colorPrimary': {
+        ...typography.bodyMdMedium
+      }
+    }
+  }
+};

package/base/styles/typography.js

@@ -121,9 +121,10 @@ const typography = {
     letterSpacing: 0
   },
   code: {
+    fontFamily: "D2Coding, 'D2 coding', monospace",
     color: grey[900],
-    fontSize: '13px',
-    fontWeight: 500,
+    fontSize: '14px',
+    fontWeight: 400,
     lineHeight: 1.6,
     letterSpacing: 0
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "main": "base/index.js",
   "files": [
     "/base"