extract code editor package (microsoft#349)

* create component scaffold package this can be copied to a new directory to have a typescript component library * clean up obieditor package.json * add scaffold for code-editor package * add monaco editor dependencies * create code-editor package * upgrades some dependencies * style the div that the router inserts into the dom * update border style and word wrap * integrate code-editor package in all up view * explicitly declare code-editor as a client dependency * copy code-editor package.json in docker image * try making code-editor private * build for unit tests * do not collapse the nav by default * export Lg and Lu editors * use lu editor in form
savitaverma · Jun 7, 2019 · 1687024 · 1687024
1 parent 7b002e3
commit 1687024
Show file tree

Hide file tree

Showing 53 changed files with 1,626 additions and 1,663 deletions.
diff --git a/Composer/Dockerfile b/Composer/Dockerfile
@@ -9,6 +9,7 @@ COPY packages/client/package.json ./packages/client/
 COPY packages/server/package.json ./packages/server/
 COPY packages/lib/package.json ./packages/lib/
 COPY packages/lib/cci-graph-lib/package.json ./packages/lib/cci-graph-lib/
+COPY packages/lib/code-editor/package.json ./packages/lib/code-editor/
 COPY packages/extensions/package.json ./packages/extensions/
 COPY packages/extensions/obieditortest/package.json ./packages/extensions/obieditortest/
 COPY packages/extensions/sample-json-editor/package.json ./packages/extensions/sample-json-editor/

diff --git a/Composer/jest.config.js b/Composer/jest.config.js
@@ -8,8 +8,8 @@ module.exports = {
     '!**/extensions/**/dist/**',
     '!**/extensions/**/es/**',
     '!**/extensions/**/lib/**',
-    '!**/cci-graph-lib/lib/**',
-    '!**/cci-graph-lib/es/**',
+    '!packages/lib/**/lib/**',
+    '!packages/lib/**/es/**',
     '!**/coverage/**',
     '!**/jest/**',
     '!**/jestMocks/**',

diff --git a/Composer/packages/client/package.json b/Composer/packages/client/package.json
@@ -14,6 +14,7 @@
     "babel-preset-react-app": "^7.0.1",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "code-editor": "*",
     "codemirror": "^5.45.0",
     "composer-extensions": "*",
     "css-loader": "1.0.0",

diff --git a/Composer/packages/client/src/App.js b/Composer/packages/client/src/App.js
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import { forwardRef } from 'react';
 import { Fragment, useContext, useEffect, useState } from 'react';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
@@ -14,6 +15,9 @@ import { main, sideBar, content, divider, globalNav } from './styles';
 
 initializeIcons(/* optional base url */);
 
+// eslint-disable-next-line react/display-name
+const Content = forwardRef((props, ref) => <div css={content} {...props} ref={ref} />);
+
 export function App() {
   const { state, actions } = useContext(Store);
   const [sideBarExpand, setSideBarExpand] = useState('');
@@ -63,9 +67,8 @@ export function App() {
           />
           <NavItem to="setting" iconName="Settings" labelName={formatMessage('Settings')} labelHide={!sideBarExpand} />
         </div>
-        <div css={content}>
-          <Routes />
-        </div>
+
+        <Routes component={Content} />
       </div>
     </Fragment>
   );

diff --git a/Composer/packages/client/src/components/ProjectTree/index.js b/Composer/packages/client/src/components/ProjectTree/index.js
@@ -35,7 +35,7 @@ export const ProjectTree = props => {
       onLinkExpandClick={(ev, item) => {
         onSelect(item.id);
       }}
-      groups={[{ links: links, collapseByDefault: true }]}
+      groups={[{ links: links }]}
       selectedKey={activeNode}
     />
   );

diff --git a/Composer/packages/client/src/pages/language-generation/code-editor.js b/Composer/packages/client/src/pages/language-generation/code-editor.js
diff --git a/Composer/packages/client/src/pages/language-generation/content.js b/Composer/packages/client/src/pages/language-generation/content.js
@@ -2,8 +2,10 @@
 import { jsx } from '@emotion/core';
 import { Fragment } from 'react';
 import lodash from 'lodash';
+import { LgEditor } from 'code-editor';
+
+import { contentEditor } from '../language-understanding/styles';
 
-import CodeEditor from './code-editor';
 import FormEditor from './form-editor';
 
 // TODO: validate here,
@@ -15,7 +17,9 @@ export default function Content(props) {
 
   return lodash.isEmpty(lgFile) === false ? (
     textMode ? (
-      <CodeEditor file={lgFile} onChange={onChange} />
+      <div css={contentEditor}>
+        <LgEditor value={lgFile.content} onChange={onChange} />
+      </div>
     ) : (
       <FormEditor file={lgFile} onChange={onChange} />
     )

diff --git a/Composer/packages/client/src/pages/language-understanding/code-editor.js b/Composer/packages/client/src/pages/language-understanding/code-editor.js
diff --git a/Composer/packages/client/src/pages/language-understanding/content.js b/Composer/packages/client/src/pages/language-understanding/content.js
@@ -2,9 +2,10 @@
 import { jsx } from '@emotion/core';
 import { Fragment } from 'react';
 import lodash from 'lodash';
+import { LuEditor } from 'code-editor';
 
-import CodeEditor from './code-editor';
 import FormEditor from './form-editor';
+import { contentEditor } from './styles';
 
 export default function Content(props) {
   const luFile = props.file;
@@ -13,7 +14,9 @@ export default function Content(props) {
 
   return lodash.isEmpty(luFile) === false ? (
     textMode ? (
-      <CodeEditor file={luFile} onChange={onChange} />
+      <div css={contentEditor}>
+        <LuEditor value={luFile.content} onChange={onChange} />
+      </div>
     ) : (
       <FormEditor file={luFile} onChange={onChange} />
     )

diff --git a/Composer/packages/client/src/pages/language-understanding/styles.js b/Composer/packages/client/src/pages/language-understanding/styles.js
@@ -27,6 +27,7 @@ export const ContentHeaderStyle = css`
 export const ContentStyle = css`
   display: flex;
   border-top: 1px solid #dddddd;
+  flex: 1;
   nav {
     width: 200px;
     ul {
@@ -39,6 +40,7 @@ export const contentEditor = css`
   flex: 4;
   margin: 20px;
 `;
+
 export const codeEditorContainer = css`
   width: 100%;
 `;

diff --git a/Composer/packages/client/src/router.js b/Composer/packages/client/src/router.js
@@ -7,8 +7,8 @@ import { SettingPage } from './pages/setting';
 import { LUPage } from './pages/language-understanding';
 import { LGPage } from './pages/language-generation';
 
-const Routes = () => (
-  <Router>
+const Routes = props => (
+  <Router {...props}>
     <DesignPage path="/" />
     <SettingPage path="setting/*" />
     <LUPage path="language-understanding/:fileId" />

diff --git a/Composer/packages/client/src/styles.js b/Composer/packages/client/src/styles.js
@@ -33,8 +33,9 @@ export const globalNav = css`
 `;
 
 export const content = css`
+  outline: none;
   height: 100%;
-  overflow: hidden;
-  z-index: 2;
   flex: 1;
+  display: flex;
+  flex-direction: column;
 `;
diff --git a/Composer/packages/extensions/obieditortest/package.json b/Composer/packages/extensions/obieditortest/package.json
@@ -28,6 +28,7 @@
     "@uifabric/fluent-theme": "^0.16.2",
     "@uifabric/styling": "^6.45.3",
     "classnames": "^2.2.6",
+    "code-editor": "*",
     "format-message": "^6.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
@@ -36,20 +37,18 @@
     "lodash.omit": "^4.5.0",
     "nanoid": "^2.0.1",
     "office-ui-fabric-react": "^6.165.1",
-    "react-error-boundary": "^1.2.5",
-    "react-scripts": "2.1.3"
+    "react-error-boundary": "^1.2.5"
   },
   "peerDependencies": {
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.3.4",
-    "@babel/plugin-proposal-class-properties": "7.3.4",
-    "@babel/plugin-transform-runtime": "7.4.0",
-    "@babel/preset-env": "7.3.0",
-    "@babel/preset-react": "7.0.0",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
     "@types/codemirror": "^0.0.74",
     "@types/jest": "^24.0.11",
     "@types/json-schema": "^7.0.3",
@@ -63,19 +62,16 @@
     "@types/nanoid": "^1.2.1",
     "@types/react": "^16.8.13",
     "@types/react-dom": "^16.8.4",
-    "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "@typescript-eslint/parser": "^1.6.0",
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
     "autoprefixer": "^9.5.1",
-    "babel-jest": "24.0.0",
     "codemirror": "^5.44.0",
     "copyfiles": "^2.1.0",
     "css-loader": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "24.0.0",
     "jest-dom": "^3.1.3",
     "mini-css-extract-plugin": "^0.6.0",
-    "nwb": "0.23.x",
-    "nwb-sass": "^0.9.0",
     "postcss-loader": "^3.0.0",
     "react": "^16.8.4",
     "react-codemirror2": "^5.1.0",
@@ -87,7 +83,7 @@
     "ts-jest": "^24.0.2",
     "ts-loader": "^5.3.3",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "^3.4.3",
+    "typescript": "^3.5.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.3.0",

diff --git a/.../Form/fields/RecognizerField/LuEditor.tsx → ...m/fields/RecognizerField/ToggleEditor.tsx b/.../Form/fields/RecognizerField/LuEditor.tsx → ...m/fields/RecognizerField/ToggleEditor.tsx
@@ -2,15 +2,15 @@ import React, { useState } from 'react';
 import { Link, FontSizes } from 'office-ui-fabric-react';
 import formatMessage from 'format-message';
 
-export default function LuEditor(props) {
+export default function ToggleEditor(props) {
   const [showEditor, setShowEditor] = useState(false);
 
   if (!props.formData) {
     return null;
   }
 
   return (
-    <div className="LuEditor">
+    <div className="ToggleEditor">
       <Link
         onClick={() => setShowEditor(!showEditor)}
         styles={{ root: { fontSize: FontSizes.smallPlus, marginBottom: '10px' } }}
@@ -19,7 +19,7 @@ export default function LuEditor(props) {
           ? formatMessage('Hide {title}', { title: props.title })
           : formatMessage('View {title}', { title: props.title })}
       </Link>
-      <div className="LuEditorContent">{showEditor && props.children()}</div>
+      <div className="ToggleEditorContent">{showEditor && props.children()}</div>
     </div>
   );
 }
diff --git a/Composer/packages/extensions/obieditortest/src/Form/fields/RecognizerField/index.tsx b/Composer/packages/extensions/obieditortest/src/Form/fields/RecognizerField/index.tsx
@@ -1,20 +1,14 @@
 import React from 'react';
 import formatMessage from 'format-message';
 import { FieldProps } from '@bfdesigner/react-jsonschema-form';
-import {
-  DefaultButton,
-  IContextualMenuItem,
-  Label,
-  Link,
-  TextField,
-  ContextualMenuItemType,
-} from 'office-ui-fabric-react';
+import { DefaultButton, IContextualMenuItem, Label, Link, ContextualMenuItemType } from 'office-ui-fabric-react';
 import classnames from 'classnames';
 import { FontSizes } from '@uifabric/styling';
+import { LuEditor } from 'code-editor';
 
 import { BaseField } from '../BaseField';
 
-import LuEditor from './LuEditor';
+import ToggleEditor from './ToggleEditor';
 import RegexEditor from './RegexEditor';
 import './styles.scss';
 
@@ -86,22 +80,26 @@ export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props
           />
         </div>
       </div>
-      <LuEditor title={selectedFile ? 'text editor' : 'regex editor'} formData={formData}>
+      <ToggleEditor title={selectedFile ? 'text editor' : 'regex editor'} formData={formData}>
         {() => {
           if (selectedFile) {
             const updateLuFile = (_, newValue?: string) => {
               const { updateLuFile } = formContext.shellApi;
               updateLuFile({ id: selectedFile.id, content: newValue });
             };
 
-            return <TextField value={selectedFile.content || ''} rows={20} multiline onChange={updateLuFile} />;
+            return (
+              <div style={{ height: '500px' }}>
+                <LuEditor value={selectedFile.content} onChange={updateLuFile} />
+              </div>
+            );
           }
 
           if (typeof formData === 'object' && formData.$type === 'Microsoft.RegexRecognizer') {
             return <RegexEditor {...props} />;
           }
         }}
-      </LuEditor>
+      </ToggleEditor>
     </BaseField>
   );
 };
diff --git a/Composer/packages/extensions/obieditortest/src/Form/fields/RecognizerField/styles.scss b/Composer/packages/extensions/obieditortest/src/Form/fields/RecognizerField/styles.scss
@@ -17,7 +17,7 @@
   }
 }
 
-.LuEditor {
+.ToggleEditor {
   .BaseField {
     margin-top: 5px;
   }

diff --git a/Composer/packages/extensions/obieditortest/src/Form/types.ts b/Composer/packages/extensions/obieditortest/src/Form/types.ts
@@ -26,14 +26,3 @@ export interface RadioWidgetProps extends WidgetProps {
     enumOptions: EnumOption[];
   };
 }
-
-export interface OBISchema {
-  $role?: string;
-}
-
-declare module 'json-schema' {
-  interface JSONSchema6 extends OBISchema {
-    title?: string;
-    __additional_property?: boolean;
-  }
-}