@nethru/ui 1.0.15 → 1.0.16

package/dist/Editor.js

@@ -0,0 +1,57 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { Box, Typography } from "@mui/material";
+import { useMemo, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Editor({
+  editable = true,
+  error = false,
+  helperText,
+  basicSetup,
+  extensions = [],
+  jsonFormat = false,
+  onUpdate,
+  style,
+  ...props
+}) {
+  const [focused, setFocused] = useState(false);
+  const styles = useMemo(() => {
+    return {
+      borderBottom: focused ? `3px solid ${error ? '#d32f2f' : '#1976d2'}` : '2px solid rgba(0, 0, 0, 0.42)'
+    };
+  }, [error, focused]);
+  const handleUpdate = viewUpdate => {
+    setFocused(viewUpdate.view.hasFocus);
+    if (onUpdate) onUpdate(viewUpdate);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(CodeMirror, {
+      editable: editable,
+      extensions: [jsonFormat ? json() : javascript({
+        jsx: true
+      }), ...extensions],
+      basicSetup: {
+        ...basicSetup,
+        highlightActiveLineGutter: false,
+        highlightActiveLine: editable
+      },
+      onUpdate: handleUpdate,
+      style: {
+        ...style,
+        ...styles
+      },
+      ...props
+    }), focused && error && helperText && /*#__PURE__*/_jsx(Typography, {
+      sx: helperTextStyles,
+      children: helperText
+    })]
+  });
+}
+const helperTextStyles = {
+  color: '#d32f2f',
+  fontSize: 12,
+  ml: '14px',
+  mt: '3px'
+};

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as Checkbox } from "./Checkbox";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as DataGrid } from "./DataGrid";
 export { default as Dialog } from "./Dialog";
+export { default as Editor } from "./Editor";
 export { default as FormLabel } from "./FormLabel";
 export { default as Frame } from "./Frame";
 export { default as GroupSelect } from "./GroupSelect";

package/dist/samples/global.sample.css

@@ -45,4 +45,15 @@ html, body {
     border: 1px solid #ccc;
     border-radius: 3px;
     padding: 8px;
+}
+
+
+/* CodeMirror */
+.cm-theme-light {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    font-size: 14px;
+}
+
+.cm-editor, .cm-editor.cm-focused {
+    outline: 1px solid #eaeaea;
 }

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "main": "dist/index.js",
   "files": [
     "/dist"
   ],
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-json": "^6.0.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
@@ -17,6 +19,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@uiw/react-codemirror": "^4.21.21",
     "days": "^1.1.1",
     "immer": "^10.0.3",
     "react": "^18.2.0",
@@ -33,7 +36,12 @@
   },
   "babel": {
     "presets": [
-      ["@babel/preset-react", {"runtime": "automatic"}]
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
     ]
   },
   "eslintConfig": {