Merge pull request #32 from firecamp-io/feat/monaco

Feat/monaco

packages/firecamp-rest/src/components/request/tabs/BodyTab.tsx

@@ -15,8 +15,6 @@ import {
   PrimaryIFT,
   MultipartIFT,
   Button,
-
-
   StatusBar,
   /* ToolBar, */
 } from '@firecamp/ui-kit'; /* 

packages/firecamp-rest/src/components/request/tabs/HeadersTab.tsx

@@ -1,6 +1,13 @@
+import { useEffect } from 'react';
 import shallow from 'zustand/shallow';
 
-import { PrimaryIFT, BulkEditIFT, Container } from '@firecamp/ui-kit';
+import {
+  BasicTable,
+  SingleLineEditor,
+  PrimaryIFT,
+  BulkEditIFT,
+  Container,
+} from '@firecamp/ui-kit';
 
 import { useRestStore } from '../../../store';
 
@@ -14,6 +21,10 @@ const HeadersTab = () => {
     shallow
   );
 
+  useEffect(() => {
+    console.log('1. re-rendering the header tabs');
+  }, [headers]);
+
   let onHeaderChange = (headers) => {
     changeHeaders(headers);
   };
@@ -33,6 +44,14 @@ const HeadersTab = () => {
             },
           }}
         />
+        {/* <SingleLineEditor type="text" path="a" value="123" />
+        <SingleLineEditor type="text" path="b" value="qwqe" />
+        <SingleLineEditor type="text" path="c" value="66666666" />
+        <SingleLineEditor type="text" path="d" value="fgfgfg" />
+        <SingleLineEditor type="text" path="e" value="tytytyty" />
+        <SingleLineEditor type="text" path="f" value="bbbb" /> */}
+
+        {/* <BasicTable resizable={true} /> */}
         {
           // ctx_tabData.type //todo: implement this auth header feature later after migration
           auth_headers && auth_headers.length ? (

packages/ui-kit/src/components/editors/monaco-v2/Editor.stories.tsx

@@ -1,4 +1,5 @@
 import Editor from './Editor';
+import SingleLineEditor from './SingleLineEditor'
 
 export default {
   title: "UI-Kit/Editor",
@@ -7,7 +8,7 @@ export default {
   }
 };
 
-const Template = (args: any) => <Editor {...args} />;
+const EditorTemplate = (args: any) => <Editor {...args} />;
 
-export const EditorComponent = Template.bind({});
+export const EditorComponent = EditorTemplate.bind({});
 EditorComponent.args = {};

packages/ui-kit/src/components/editors/monaco-v2/Editor.tsx

@@ -212,11 +212,11 @@ const Editor: FC<IEditor> = ({
            * allow comments for JSON language
            * @ref: https://github.com/microsoft/monaco-editor/issues/2426
            */
-          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            allowComments: true,
-            schemaValidation: 'error',
-          });
+          // monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          //   validate: true,
+          //   allowComments: true,
+          //   schemaValidation: 'error',
+          // });
 
           onBlur && editor.onDidBlurEditorText(() => onBlur(editor));
           onFocus && editor.onDidFocusEditorText(() => onFocus(editor));

packages/ui-kit/src/components/editors/monaco-v2/SingleLineEditor.stories.tsx

@@ -0,0 +1,16 @@
+import Editor from './Editor';
+import SingleLineEditor from './SingleLineEditor'
+
+export default {
+  title: "UI-Kit/Editor",
+  component: SingleLineEditor,
+  argTypes: {
+  }
+};
+
+const SingleLineEditorTemplate = (args: any) => <SingleLineEditor {...args} />;
+export const SLEComponent = SingleLineEditorTemplate.bind({});
+SLEComponent.args = {
+  height: 30,
+  value: "This is the SLE"
+};

packages/ui-kit/src/components/editors/monaco-v2/SingleLineEditor.tsx

@@ -19,8 +19,9 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
   monacoOptions = {},
   placeholder = '',
   className = '',
-  height,
+  height= 50,
   path,
+  loading,
   onChange = () => {}, // similar DOM event, e = { preventDefault, target }
   onBlur,
   onFocus,
@@ -36,12 +37,13 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
   onCtrlShiftEnter = () => {},
 }) => {
   const editorIdRef = useRef('');
-  useEffect(() => {
-    MonacoFirecampLangInit();
-    SetCompletionProvider('ife-header-key', { name: 'Nishchit' });
-  }, []);
+  // useEffect(() => {
+  //   MonacoFirecampLangInit();
+  //   SetCompletionProvider('ife-header-key', { name: 'Nishchit' });
+  // }, []);
 
   useEffect(() => {
+    console.log("this is re-rendering <SingleLineEditor />")
     //@ts-ignore
     if (!window.ife) window.ife = new Map();
     return () => {
@@ -218,7 +220,7 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
     options.readOnly = disabled;
   }
 
-  console.log(value, language, 'language...');
+  // console.log(value, language, 'language...');
   value = type === 'number' ? '' + value : value;
   /**
    * 1. Check if number or not, if number then convert to string and show
@@ -227,15 +229,15 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
   //  value = value.replace(/[\n\r]/g, '');
 
   return (
-    <div className="fc-input-wrapper">
+    <div>
       {placeholder && !value ? (
         <div className="urlbar-url-text-placeholder absolute top-0 left-0 text-inputPlaceholder text-lg ">
           {placeholder}
         </div>
       ) : (
         <></>
       )}
-      <div className={cx('fc-input-IFE', '-fc-input-IFE-focused', className)}>
+      <div className={cx(className)}>
         <MonacoEditor
           language={language}
           defaultValue={value}
@@ -244,6 +246,7 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
           height={height}
           path={path}
           key={path}
+          loading={loading || <></>}
           onChange={(value, e) => {
             value = value.replace(/[\n\r]/g, '');
             console.log(value);
@@ -253,7 +256,7 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
             });
           }}
           onMount={(editor, monaco) => {
-            console.log(editor, monaco, 9999);
+            // console.log(editor, monaco, 9999);
             /**
              * disable `Find` widget
              * @ref: https://github.com/microsoft/monaco-editor/issues/287#issuecomment-328371787