diff --git a/Composer/.eslintrc.react.js b/Composer/.eslintrc.react.js
index 5463727b2f..e40ee6357f 100644
--- a/Composer/.eslintrc.react.js
+++ b/Composer/.eslintrc.react.js
@@ -3,7 +3,7 @@ module.exports = {
   plugins: ['react-hooks', 'format-message', 'emotion'],
   settings: {
     react: {
-      version: '16.9.0',
+      version: '16.9.16',
     },
   },
   parserOptions: {
diff --git a/Composer/README.md b/Composer/README.md
index c4395a8faa..779d6016d4 100644
--- a/Composer/README.md
+++ b/Composer/README.md
@@ -50,7 +50,7 @@ Composer is managed via yarn workspaces, producing such a folder layout.
     |- server       // composer api server
     |- extensions
       |- package.json  // put all extension as one package
-      |- obiformeditor // dialog property editor
+      |- adaptive-form // dialog property editor
     |- lib
       |- shared        // shared code
 ```
diff --git a/Composer/cypress/integration/NotificationPage.spec.ts b/Composer/cypress/integration/NotificationPage.spec.ts
index d93e0e03ff..5b5dec6110 100644
--- a/Composer/cypress/integration/NotificationPage.spec.ts
+++ b/Composer/cypress/integration/NotificationPage.spec.ts
@@ -62,7 +62,13 @@ context('Notification Page', () => {
 
     cy.withinEditor('FormEditor', () => {
       cy.findByText('Condition').should('exist');
-      cy.get('.ObjectItem input').type('()');
+      cy.findByTestId('expression-type-dropdown-Condition')
+        .focus()
+        .type('{downarrow}')
+        .should('contain.text', 'expression');
+      cy.get('#root\\.condition')
+        .click()
+        .type('()');
     });
 
     cy.get('[data-testid="notifications-info-button"]').click();
diff --git a/Composer/cypress/integration/ToDoBot.spec.ts b/Composer/cypress/integration/ToDoBot.spec.ts
index 587ac63950..c9cec69b9d 100644
--- a/Composer/cypress/integration/ToDoBot.spec.ts
+++ b/Composer/cypress/integration/ToDoBot.spec.ts
@@ -5,6 +5,7 @@ context('ToDo Bot', () => {
   before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('TodoSample');
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(5000);
   });
 
diff --git a/Composer/cypress/support/index.ts b/Composer/cypress/support/index.ts
index 0bbb874401..57ccbe952a 100644
--- a/Composer/cypress/support/index.ts
+++ b/Composer/cypress/support/index.ts
@@ -9,6 +9,7 @@ beforeEach(() => {
 });
 
 after(() => {
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(500);
   cy.exec('yarn test:integration:clean');
 });
diff --git a/Composer/jest.config.js b/Composer/jest.config.js
index 3acf2967a6..99516d0016 100644
--- a/Composer/jest.config.js
+++ b/Composer/jest.config.js
@@ -39,11 +39,18 @@ module.exports = {
   testPathIgnorePatterns: ['/node_modules/', '/scripts/', '/jestMocks/', '__tests__/setup.(j|t)s', '/cypress/'],
   projects: [
     '<rootDir>/packages/client',
-    '<rootDir>/packages/server',
-    '<rootDir>/packages/extensions/obiformeditor',
+    '<rootDir>/packages/extensions/adaptive-form',
+    '<rootDir>/packages/extensions/extension',
     '<rootDir>/packages/extensions/visual-designer',
     '<rootDir>/packages/lib/code-editor',
     '<rootDir>/packages/lib/shared',
+    '<rootDir>/packages/server',
     '<rootDir>/packages/tools/language-servers/language-generation',
+    '<rootDir>/packages/ui-plugins/expressions',
+    '<rootDir>/packages/ui-plugins/json',
+    '<rootDir>/packages/ui-plugins/lg',
+    '<rootDir>/packages/ui-plugins/luis',
+    '<rootDir>/packages/ui-plugins/prompts',
+    '<rootDir>/packages/ui-plugins/select-dialog',
   ],
 };
diff --git a/Composer/package.json b/Composer/package.json
index 3b4c44915b..78ba5f0004 100644
--- a/Composer/package.json
+++ b/Composer/package.json
@@ -3,7 +3,7 @@
   "license": "MIT",
   "private": true,
   "resolutions": {
-    "@types/react": "16.9.0"
+    "@types/react": "16.9.23"
   },
   "engines": {
     "node": ">=12"
@@ -17,14 +17,15 @@
     "packages/lib/*",
     "packages/tools",
     "packages/tools/language-servers",
-    "packages/tools/language-servers/*"
+    "packages/tools/language-servers/*",
+    "packages/ui-plugins/*"
   ],
   "scripts": {
     "build": "node scripts/update.js && node scripts/begin.js && yarn build:prod && yarn build:plugins",
     "build:prod": "yarn build:dev && yarn build:server && yarn build:client",
     "build:dev": "yarn build:lib && yarn build:tools && yarn build:extensions && yarn build:plugins",
     "build:lib": "yarn workspace @bfc/libs build:all",
-    "build:extensions": "yarn workspace @bfc/extensions build:all",
+    "build:extensions": "wsrun -lt -p @bfc/extension @bfc/adaptive-form @bfc/visual-designer @bfc/ui-plugin-* -c build",
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
     "build:tools": "yarn workspace @bfc/tools build:all",
@@ -71,6 +72,7 @@
     "@cypress/webpack-preprocessor": "^4.1.1",
     "@emotion/babel-preset-css-prop": "^10.0.17",
     "@testing-library/cypress": "^5.2.1",
+    "@types/jest": "^25.1.3",
     "@typescript-eslint/eslint-plugin": "2.10.0",
     "@typescript-eslint/parser": "2.10.0",
     "babel-jest": "24.0.0",
diff --git a/Composer/packages/client/config/webpack.config.js b/Composer/packages/client/config/webpack.config.js
index f56da750fe..03916f3df3 100644
--- a/Composer/packages/client/config/webpack.config.js
+++ b/Composer/packages/client/config/webpack.config.js
@@ -17,7 +17,6 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const MonacoWebpackPlugin = require('@bfcomposer/monaco-editor-webpack-plugin');
 
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
@@ -404,10 +403,6 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      new MonacoWebpackPlugin({
-        // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-        languages: ['markdown', 'json'],
-      }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(
diff --git a/Composer/packages/client/jest.config.js b/Composer/packages/client/jest.config.js
index 488f228227..37e85427c6 100644
--- a/Composer/packages/client/jest.config.js
+++ b/Composer/packages/client/jest.config.js
@@ -1,6 +1,7 @@
 // eslint-disable-next-line
 const path = require('path');
 module.exports = {
+  displayName: 'client',
   preset: 'ts-jest/presets/js-with-ts',
   // transform: {
   //   '^.+\\.tsx?$': 'ts-jest',
@@ -19,7 +20,14 @@ module.exports = {
 
     '^@src/(.*)$': '<rootDir>/src/$1',
   },
-  testPathIgnorePatterns: ['/node_modules/', '/jestMocks/', '/testUtils/', '__tests__/setupTests.ts', '.*\\.d\\.ts'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/jestMocks/',
+    '__mocks__',
+    '/testUtils/',
+    '__tests__/setupTests.ts',
+    '.*\\.d\\.ts',
+  ],
   // Some node modules are packaged and distributed in a non-transpiled form
   // (ex. contain import & export statements); and Jest won't be able to
   // understand them because node_modules aren't transformed by default. So
diff --git a/Composer/packages/client/package.json b/Composer/packages/client/package.json
index 8485687069..28a105a773 100644
--- a/Composer/packages/client/package.json
+++ b/Composer/packages/client/package.json
@@ -16,13 +16,24 @@
   },
   "proxy": "http://localhost:5000",
   "dependencies": {
+    "@bfc/adaptive-form": "*",
     "@bfc/code-editor": "*",
-    "@bfc/extensions": "*",
+    "@bfc/extension": "*",
     "@bfc/indexers": "*",
     "@bfc/shared": "*",
+    "@bfc/ui-plugin-expressions": "*",
+    "@bfc/ui-plugin-json": "*",
+    "@bfc/ui-plugin-lg": "*",
+    "@bfc/ui-plugin-luis": "*",
+    "@bfc/ui-plugin-prompts": "*",
+    "@bfc/ui-plugin-select-dialog": "*",
+    "@bfc/visual-designer": "*",
     "@emotion/core": "^10.0.7",
     "@microsoft/bf-lu": "^4.9.0-preview.115707",
     "@reach/router": "^1.2.1",
+    "@uifabric/fluent-theme": "^7.1.13",
+    "@uifabric/icons": "^7.3.4",
+    "@uifabric/styling": "^7.10.4",
     "adaptive-expressions": "^4.8.0-preview-110700",
     "axios": "^0.18.0",
     "botbuilder-lg": "^4.8.0-preview-109324",
@@ -31,13 +42,13 @@
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.15",
     "nanoid": "^2.1.6",
-    "office-ui-fabric-react": "7.37.1",
+    "office-ui-fabric-react": "^7.88.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.8.2",
-    "react": "16.9.0",
+    "react": "16.13.0",
     "react-app-polyfill": "^0.2.1",
     "react-dev-utils": "^7.0.3",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.0",
     "react-frame-component": "^4.0.2",
     "react-timeago": "^4.4.0",
     "styled-components": "^4.1.3"
@@ -56,15 +67,14 @@
     "@babel/preset-env": "7.3.0",
     "@babel/preset-react": "7.0.0",
     "@babel/runtime": "7.3.4",
-    "@bfcomposer/monaco-editor-webpack-plugin": "^1.7.2",
     "@emotion/babel-preset-css-prop": "^10.0.14",
     "@svgr/webpack": "4.1.0",
     "@types/jest": "^24.0.16",
     "@types/jwt-decode": "^2.2.1",
     "@types/lodash": "^4.14.146",
     "@types/reach__router": "^1.2.4",
-    "@types/react": "16.9.0",
-    "@types/react-dom": "16.9.0",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "24.0.0",
diff --git a/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts b/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts
index 3883445a5a..1888854b91 100644
--- a/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts
+++ b/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts
@@ -18,6 +18,7 @@ export const dropdown: Partial<IDropdownStyles> = {
   subComponentStyles: {
     label: textFieldlabel,
     panel: {},
+    multiSelectItem: {},
   },
   // root: [
   //   {
diff --git a/Composer/packages/client/src/ShellApi.ts b/Composer/packages/client/src/ShellApi.ts
index f682247993..7a972eaf8a 100644
--- a/Composer/packages/client/src/ShellApi.ts
+++ b/Composer/packages/client/src/ShellApi.ts
@@ -96,8 +96,9 @@ export const ShellApi: React.FC = () => {
       return {} as ShellData;
     }
 
+    const data = getData(sourceWindow);
     return {
-      data: getData(sourceWindow),
+      data,
       locale,
       botName,
       projectId,
@@ -108,6 +109,7 @@ export const ShellApi: React.FC = () => {
       luFiles,
       currentDialog,
       dialogId,
+      designerId: get(data, '$designer.id'),
       focusedEvent: selected,
       focusedActions: focused ? [focused] : [],
       focusedSteps: focused ? [focused] : selected ? [selected] : [],
diff --git a/Composer/packages/client/src/TestController.tsx b/Composer/packages/client/src/TestController.tsx
index af83970b86..abca29f4d0 100644
--- a/Composer/packages/client/src/TestController.tsx
+++ b/Composer/packages/client/src/TestController.tsx
@@ -9,7 +9,7 @@ import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import formatMessage from 'format-message';
-import { DiagnosticSeverity, Diagnostic } from '@bfc/indexers';
+import { DiagnosticSeverity, Diagnostic } from '@bfc/shared';
 
 import settingsStorage from './utils/dialogSettingStorage';
 import { StoreContext } from './store';
diff --git a/Composer/packages/client/src/components/NavItem/index.tsx b/Composer/packages/client/src/components/NavItem/index.tsx
index 2cb046c31f..d6a8e487dd 100644
--- a/Composer/packages/client/src/components/NavItem/index.tsx
+++ b/Composer/packages/client/src/components/NavItem/index.tsx
@@ -3,11 +3,12 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useCallback, useContext, useState } from 'react';
-import { Link, LinkGetProps } from '@reach/router';
+import { useCallback, useContext } from 'react';
+import { Link } from '@reach/router';
 import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
 
 import { StoreContext } from '../../store';
+import { useLocation } from '../../utils/hooks';
 
 import { link, outer, commandBarButton } from './styles';
 
@@ -31,8 +32,11 @@ export const NavItem: React.FC<INavItemProps> = props => {
     actions: { onboardingAddCoachMarkRef },
   } = useContext(StoreContext);
 
-  const { to, exact, iconName, labelName, disabled } = props;
-  const [active, setActive] = useState(false);
+  const { to, iconName, labelName, disabled } = props;
+  const {
+    location: { pathname },
+  } = useLocation();
+  const active = pathname.startsWith(to);
 
   const addRef = useCallback(ref => onboardingAddCoachMarkRef({ [`nav${labelName.replace(' ', '')}`]: ref }), []);
 
@@ -40,11 +44,6 @@ export const NavItem: React.FC<INavItemProps> = props => {
     <Link
       to={to}
       css={link(active, disabled)}
-      getProps={(props: LinkGetProps) => {
-        const isActive = exact ? props.isCurrent : props.isPartiallyCurrent;
-        setActive(isActive);
-        return {};
-      }}
       data-testid={'LeftNav-CommandBarButton' + labelName}
       aria-disabled={disabled}
       aria-label={labelName}
diff --git a/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx b/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
index 33bdf9a08d..5cbd006603 100644
--- a/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
@@ -12,8 +12,9 @@ import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { DialogInfo, luIndexer, combineMessage } from '@bfc/indexers';
+import { luIndexer, combineMessage } from '@bfc/indexers';
 import get from 'lodash/get';
+import { DialogInfo } from '@bfc/shared';
 import { LuEditor } from '@bfc/code-editor';
 
 import {
@@ -265,7 +266,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
             <LuEditor
               onChange={onTriggerPhrasesChange}
               value={formData.triggerPhrases}
-              errorMsg={formData.errors.triggerPhrases}
+              errorMessage={formData.errors.triggerPhrases}
               hidePlaceholder={true}
               luOption={{
                 projectId,
diff --git a/Composer/packages/client/src/components/ProjectTree/index.tsx b/Composer/packages/client/src/components/ProjectTree/index.tsx
index f0b6dc4a8f..4090a2b8df 100644
--- a/Composer/packages/client/src/components/ProjectTree/index.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/index.tsx
@@ -16,7 +16,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
-import { DialogInfo, ITrigger } from '@bfc/indexers';
+import { DialogInfo, ITrigger } from '@bfc/shared';
 
 import { StoreContext } from '../../store';
 import { createSelectedPath, getFriendlyName } from '../../utils';
diff --git a/Composer/packages/client/src/extension-container/EditorMap.ts b/Composer/packages/client/src/extension-container/EditorMap.ts
index 325ff50a72..3cde21c3a6 100644
--- a/Composer/packages/client/src/extension-container/EditorMap.ts
+++ b/Composer/packages/client/src/extension-container/EditorMap.ts
@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 
 // this is currently hard-coded here
-import FormEditor from '@bfc/extensions/obiformeditor';
-import VisualDesigner from '@bfc/extensions/visual-designer';
+import VisualDesigner from '@bfc/visual-designer';
+import AdaptiveForm from '@bfc/adaptive-form';
 
-const getEditor = (): typeof VisualDesigner | typeof FormEditor | null => {
+const getEditor = (): typeof VisualDesigner | typeof AdaptiveForm | null => {
   // i'm now more towarding pick editor based on name, not data
   // because we want shell to totally control file read/save
   // which means each editor cann't be differiante by data
@@ -14,7 +14,7 @@ const getEditor = (): typeof VisualDesigner | typeof FormEditor | null => {
   }
 
   if (window.name === 'FormEditor') {
-    return FormEditor;
+    return AdaptiveForm;
   }
   return null;
 };
diff --git a/Composer/packages/client/src/extension-container/ExtensionContainer.tsx b/Composer/packages/client/src/extension-container/ExtensionContainer.tsx
index 1a0db0e6aa..9dc0af9c66 100644
--- a/Composer/packages/client/src/extension-container/ExtensionContainer.tsx
+++ b/Composer/packages/client/src/extension-container/ExtensionContainer.tsx
@@ -4,10 +4,12 @@
 import React, { useState, useEffect } from 'react';
 import { initializeIcons } from '@uifabric/icons';
 import { ShellData, ShellApi } from '@bfc/shared';
+import Extension from '@bfc/extension';
 
 import ApiClient from '../messenger/ApiClient';
 
 import getEditor from './EditorMap';
+import plugins from './plugins';
 
 import './extensionContainer.css';
 
@@ -181,7 +183,21 @@ function ExtensionContainer() {
 
   const RealEditor = shellData.data ? getEditor() : null;
 
-  return RealEditor && <RealEditor {...shellData} onChange={shellApi.saveData} shellApi={shellApi} />;
+  return (
+    RealEditor && (
+      <Extension shell={shellApi} shellData={shellData}>
+        <RealEditor
+          key={shellData.focusPath}
+          {...shellData}
+          onChange={shellApi.saveData}
+          shellApi={shellApi}
+          formData={shellData.data}
+          plugins={plugins}
+          schema={shellData.schemas?.sdk?.content}
+        />
+      </Extension>
+    )
+  );
 }
 
 export default ExtensionContainer;
diff --git a/Composer/packages/client/src/extension-container/plugins.ts b/Composer/packages/client/src/extension-container/plugins.ts
new file mode 100644
index 0000000000..ea6f8d90c4
--- /dev/null
+++ b/Composer/packages/client/src/extension-container/plugins.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import json from '@bfc/ui-plugin-json';
+import expressions from '@bfc/ui-plugin-expressions';
+import prompts from '@bfc/ui-plugin-prompts';
+import selectDialog from '@bfc/ui-plugin-select-dialog';
+import lg from '@bfc/ui-plugin-lg';
+import lu from '@bfc/ui-plugin-luis';
+
+export default [json, prompts, selectDialog, lg, lu, expressions];
diff --git a/Composer/packages/client/src/pages/design/PropertyEditor.tsx b/Composer/packages/client/src/pages/design/PropertyEditor.tsx
new file mode 100644
index 0000000000..325e665fdd
--- /dev/null
+++ b/Composer/packages/client/src/pages/design/PropertyEditor.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import formatMessage from 'format-message';
+
+import { BASEPATH } from '../../constants';
+
+import { formEditor } from './styles';
+
+const rootPath = BASEPATH.replace(/\/+$/g, '');
+
+const PropertyEditor: React.FC = () => {
+  return (
+    <iframe
+      id="FormEditor"
+      key="FormEditor"
+      name="FormEditor"
+      css={formEditor}
+      src={`${rootPath}/extensionContainer.html`}
+      title={formatMessage('form editor')}
+    />
+  );
+};
+
+export { PropertyEditor };
diff --git a/Composer/packages/client/src/pages/design/VisualEditor.tsx b/Composer/packages/client/src/pages/design/VisualEditor.tsx
new file mode 100644
index 0000000000..6f02f715bf
--- /dev/null
+++ b/Composer/packages/client/src/pages/design/VisualEditor.tsx
@@ -0,0 +1,88 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useContext, useCallback, useState, useEffect } from 'react';
+import formatMessage from 'format-message';
+import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import get from 'lodash/get';
+
+import grayComposerIcon from '../../images/grayComposerIcon.svg';
+import { StoreContext } from '../../store';
+import { BASEPATH } from '../../constants';
+
+import { middleTriggerContainer, middleTriggerElements, triggerButton, visualEditor } from './styles';
+
+const rootPath = BASEPATH.replace(/\/+$/g, '');
+
+const addIconProps = {
+  iconName: 'CircleAddition',
+  styles: { root: { fontSize: '12px' } },
+};
+
+function onRenderBlankVisual(isTriggerEmpty, onClickAddTrigger) {
+  return (
+    <div css={middleTriggerContainer}>
+      <div css={middleTriggerElements}>
+        {isTriggerEmpty ? (
+          <React.Fragment>
+            {formatMessage(`This dialog has no trigger yet.`)}
+            <ActionButton
+              data-testid="MiddleAddNewTriggerButton"
+              iconProps={addIconProps}
+              css={triggerButton}
+              onClick={onClickAddTrigger}
+            >
+              {formatMessage('New Trigger ..')}
+            </ActionButton>
+          </React.Fragment>
+        ) : (
+          <div>
+            <img alt={formatMessage('bot framework composer icon gray')} src={grayComposerIcon} />
+            {formatMessage('Select a trigger on the left')} <br /> {formatMessage('navigation to see actions')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface VisualEditorProps {
+  openNewTriggerModal: () => void;
+}
+
+const VisualEditor: React.FC<VisualEditorProps> = props => {
+  const { openNewTriggerModal } = props;
+  const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
+  const { state, actions } = useContext(StoreContext);
+  const { designPageLocation, dialogs } = state;
+  const { onboardingAddCoachMarkRef } = actions;
+  const { selected, dialogId } = designPageLocation;
+
+  const addRef = useCallback(visualEditor => onboardingAddCoachMarkRef({ visualEditor }), []);
+
+  useEffect(() => {
+    const dialog = dialogs.find(d => d.id === dialogId);
+    const visible = get(dialog, 'triggers', []).length === 0;
+    setTriggerButtonVisibility(visible);
+  }, [dialogs, dialogId]);
+
+  return (
+    <React.Fragment>
+      <iframe
+        id="VisualEditor"
+        key="VisualEditor"
+        name="VisualEditor"
+        css={visualEditor}
+        hidden={triggerButtonVisible || !selected}
+        src={`${rootPath}/extensionContainer.html`}
+        ref={addRef}
+        title={formatMessage('visual editor')}
+      />
+      {!selected && onRenderBlankVisual(triggerButtonVisible, openNewTriggerModal)}
+    </React.Fragment>
+  );
+};
+
+export { VisualEditor };
diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
index 4030a66a07..2bc0b09147 100644
--- a/Composer/packages/client/src/pages/design/index.tsx
+++ b/Composer/packages/client/src/pages/design/index.tsx
@@ -3,20 +3,18 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { Fragment, useContext, useEffect, useMemo, useState } from 'react';
 import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
 import { globalHistory } from '@reach/router';
 import get from 'lodash/get';
 import { PromptTab } from '@bfc/shared';
-import { seedNewDialog, SDKTypes } from '@bfc/shared';
-import { DialogInfo } from '@bfc/indexers';
+import { seedNewDialog, SDKTypes, DialogInfo } from '@bfc/shared';
 
 import { VisualEditorAPI } from '../../messenger/FrameAPI';
 import { TestController } from '../../TestController';
-import { BASEPATH, DialogDeleting } from '../../constants';
+import { DialogDeleting } from '../../constants';
 import { createSelectedPath, deleteTrigger, getbreadcrumbLabel } from '../../utils';
 import { TriggerCreationModal, LuFilePayload } from '../../components/ProjectTree/TriggerCreationModal';
 import { Conversation } from '../../components/Conversation';
@@ -27,7 +25,6 @@ import { StoreContext } from '../../store';
 import { ToolBar } from '../../components/ToolBar/index';
 import { clearBreadcrumb } from '../../utils/navigation';
 import undoHistory from '../../store/middlewares/undo/history';
-import grayComposerIcon from '../../images/grayComposerIcon.svg';
 import { navigateTo } from '../../utils';
 
 import { CreateDialogModal } from './createDialogModal';
@@ -37,19 +34,11 @@ import {
   deleteDialogContent,
   editorContainer,
   editorWrapper,
-  formEditor,
-  middleTriggerContainer,
-  middleTriggerElements,
   pageRoot,
-  triggerButton,
-  visualEditor,
   visualPanel,
 } from './styles';
-
-const addIconProps = {
-  iconName: 'CircleAddition',
-  styles: { root: { fontSize: '12px' } },
-};
+import { VisualEditor } from './VisualEditor';
+import { PropertyEditor } from './PropertyEditor';
 
 function onRenderContent(subTitle, style) {
   return (
@@ -70,33 +59,6 @@ function onRenderBreadcrumbItem(item, render) {
   );
 }
 
-function onRenderBlankVisual(isTriggerEmpty, onClickAddTrigger) {
-  return (
-    <div css={middleTriggerContainer}>
-      <div css={middleTriggerElements}>
-        {isTriggerEmpty ? (
-          <Fragment>
-            {formatMessage(`This dialog has no trigger yet.`)}
-            <ActionButton
-              data-testid="MiddleAddNewTriggerButton"
-              iconProps={addIconProps}
-              css={triggerButton}
-              onClick={onClickAddTrigger}
-            >
-              {formatMessage('New Trigger ..')}
-            </ActionButton>
-          </Fragment>
-        ) : (
-          <div>
-            <img alt={formatMessage('bot framework composer icon gray')} src={grayComposerIcon} />
-            {formatMessage('Select a trigger on the left')} <br /> {formatMessage('navigation to see actions')}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
 function getAllRef(targetId, dialogs) {
   let refs: string[] = [];
   dialogs.forEach(dialog => {
@@ -117,8 +79,6 @@ const getTabFromFragment = () => {
   }
 };
 
-const rootPath = BASEPATH.replace(/\/+$/g, '');
-
 function DesignPage(props) {
   const { state, actions } = useContext(StoreContext);
   const { dialogs, designPageLocation, breadcrumb, visualEditorSelection, projectId } = state;
@@ -130,14 +90,10 @@ function DesignPage(props) {
     setectAndfocus,
     updateDialog,
     clearUndoHistory,
-    onboardingAddCoachMarkRef,
   } = actions;
   const { location, match } = props;
   const { dialogId, selected } = designPageLocation;
   const [triggerModalVisible, setTriggerModalVisibility] = useState(false);
-  const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
-
-  const addRef = useCallback(visualEditor => onboardingAddCoachMarkRef({ visualEditor }), []);
 
   useEffect(() => {
     const currentDialog = dialogs.find(({ id }) => id === dialogId);
@@ -170,12 +126,6 @@ function DesignPage(props) {
     }
   }, [location]);
 
-  useEffect(() => {
-    const dialog = dialogs.find(d => d.id === dialogId);
-    const visible = get(dialog, 'triggers', []).length === 0;
-    setTriggerButtonVisibility(visible);
-  }, [dialogs, dialogId]);
-
   const onTriggerCreationDismiss = () => {
     setTriggerModalVisibility(false);
   };
@@ -417,25 +367,9 @@ function DesignPage(props) {
               <div css={editorWrapper}>
                 <div css={visualPanel}>
                   {breadcrumbItems}
-                  <iframe
-                    id="VisualEditor"
-                    key="VisualEditor"
-                    name="VisualEditor"
-                    css={visualEditor}
-                    hidden={triggerButtonVisible || !selected}
-                    src={`${rootPath}/extensionContainer.html`}
-                    ref={addRef}
-                    title={formatMessage('visual editor')}
-                  />
-                  {!selected && onRenderBlankVisual(triggerButtonVisible, openNewTriggerModal)}
+                  <VisualEditor openNewTriggerModal={openNewTriggerModal} />
                 </div>
-                <iframe
-                  key="FormEditor"
-                  name="FormEditor"
-                  css={formEditor}
-                  src={`${rootPath}/extensionContainer.html`}
-                  title={formatMessage('form editor')}
-                />
+                <PropertyEditor />
               </div>
             </Fragment>
           </Conversation>
diff --git a/Composer/packages/client/src/pages/language-generation/code-editor.tsx b/Composer/packages/client/src/pages/language-generation/code-editor.tsx
index d3e0d25ec4..e5f9d193ae 100644
--- a/Composer/packages/client/src/pages/language-generation/code-editor.tsx
+++ b/Composer/packages/client/src/pages/language-generation/code-editor.tsx
@@ -3,11 +3,10 @@
 
 /* eslint-disable react/display-name */
 import React, { useState, useEffect, useMemo, useContext, useCallback } from 'react';
-import { LgEditor } from '@bfc/code-editor';
+import { LgEditor, EditorDidMount } from '@bfc/code-editor';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import { editor } from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
 import { lgIndexer, filterTemplateDiagnostics } from '@bfc/indexers';
 import { RouteComponentProps } from '@reach/router';
 import querystring from 'query-string';
@@ -31,7 +30,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
   const file = lgFiles.find(({ id }) => id === `${dialogId}.${locale}`);
   const [diagnostics, setDiagnostics] = useState(get(file, 'diagnostics', []));
   const [errorMsg, setErrorMsg] = useState('');
-  const [lgEditor, setLgEditor] = useState<editor.IStandaloneCodeEditor | null>(null);
+  const [lgEditor, setLgEditor] = useState<any>(null);
 
   const search = props.location?.search ?? '';
   const searchTemplateName = querystring.parse(search).t;
@@ -58,7 +57,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
 
   const currentDiagnostics = inlineMode && template ? filterTemplateDiagnostics(diagnostics, template) : diagnostics;
 
-  const editorDidMount = (lgEditor: editor.IStandaloneCodeEditor) => {
+  const editorDidMount: EditorDidMount = (_getValue, lgEditor) => {
     setLgEditor(lgEditor);
   };
 
@@ -144,19 +143,18 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
 
   return (
     <LgEditor
-      // typescript is unable to reconcile 'on' as part of a union type
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-      // @ts-ignore
       options={{
-        lineNumbers: 'on',
-        minimap: 'on',
+        lineNumbers: 'on' as 'on',
+        minimap: {
+          enabled: true,
+        },
         lineDecorationsWidth: undefined,
-        lineNumbersMinChars: false,
+        lineNumbersMinChars: undefined,
       }}
       hidePlaceholder={inlineMode}
       editorDidMount={editorDidMount}
       value={content}
-      errorMsg={errorMsg}
+      errorMessage={errorMsg}
       diagnostics={currentDiagnostics}
       lgOption={lgOption}
       languageServer={{
diff --git a/Composer/packages/client/src/pages/language-generation/table-view.tsx b/Composer/packages/client/src/pages/language-generation/table-view.tsx
index 3e2672850d..4ec3e53ff7 100644
--- a/Composer/packages/client/src/pages/language-generation/table-view.tsx
+++ b/Composer/packages/client/src/pages/language-generation/table-view.tsx
@@ -15,7 +15,7 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import formatMessage from 'format-message';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
 import { RouteComponentProps } from '@reach/router';
-import { LgTemplate } from '@bfc/indexers';
+import { LgTemplate } from '@bfc/shared';
 
 import { StoreContext } from '../../store';
 import { increaseNameUtilNotExist } from '../../utils/lgUtil';
diff --git a/Composer/packages/client/src/pages/language-understanding/code-editor.tsx b/Composer/packages/client/src/pages/language-understanding/code-editor.tsx
index 8e3a489a29..048d6dc4ca 100644
--- a/Composer/packages/client/src/pages/language-understanding/code-editor.tsx
+++ b/Composer/packages/client/src/pages/language-understanding/code-editor.tsx
@@ -3,11 +3,10 @@
 
 /* eslint-disable react/display-name */
 import React, { useState, useEffect, useMemo, useContext, useCallback } from 'react';
-import { LuEditor } from '@bfc/code-editor';
+import { LuEditor, EditorDidMount } from '@bfc/code-editor';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import { editor } from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
 import { luIndexer, filterTemplateDiagnostics } from '@bfc/indexers';
 import { RouteComponentProps } from '@reach/router';
 import querystring from 'query-string';
@@ -30,7 +29,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
   const file = luFiles.find(({ id }) => id === `${dialogId}.${locale}`);
   const [diagnostics, setDiagnostics] = useState(get(file, 'diagnostics', []));
   const [httpErrorMsg, setHttpErrorMsg] = useState('');
-  const [luEditor, setLuEditor] = useState<editor.IStandaloneCodeEditor | null>(null);
+  const [luEditor, setLuEditor] = useState<any>(null);
 
   const search = props.location?.search ?? '';
   const searchSectionName = querystring.parse(search).t;
@@ -57,7 +56,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
 
   const currentDiagnostics = inlineMode && intent ? filterTemplateDiagnostics(diagnostics, intent) : diagnostics;
 
-  const editorDidMount = (luEditor: editor.IStandaloneCodeEditor) => {
+  const editorDidMount: EditorDidMount = (_getValue, luEditor) => {
     setLuEditor(luEditor);
   };
 
@@ -157,7 +156,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
       hidePlaceholder={inlineMode}
       editorDidMount={editorDidMount}
       value={content}
-      errorMsg={httpErrorMsg}
+      errorMessage={httpErrorMsg}
       diagnostics={currentDiagnostics}
       luOption={luOption}
       languageServer={{
diff --git a/Composer/packages/client/src/pages/language-understanding/table-view.tsx b/Composer/packages/client/src/pages/language-understanding/table-view.tsx
index 54e4bed304..1328916b61 100644
--- a/Composer/packages/client/src/pages/language-understanding/table-view.tsx
+++ b/Composer/packages/client/src/pages/language-understanding/table-view.tsx
@@ -16,8 +16,8 @@ import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import formatMessage from 'format-message';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
-import { LuFile } from '@bfc/indexers';
 import { RouteComponentProps } from '@reach/router';
+import { LuFile } from '@bfc/shared';
 
 import { StoreContext } from '../../store';
 import { navigateTo } from '../../utils';
diff --git a/Composer/packages/client/src/pages/notifications/types.ts b/Composer/packages/client/src/pages/notifications/types.ts
index 707e3823da..2e1a6cd24f 100644
--- a/Composer/packages/client/src/pages/notifications/types.ts
+++ b/Composer/packages/client/src/pages/notifications/types.ts
@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Diagnostic, createSingleMessage, DialogInfo, LuFile, isDiagnosticWithInRange } from '@bfc/indexers';
+import { createSingleMessage, isDiagnosticWithInRange } from '@bfc/indexers';
+import { Diagnostic, DialogInfo, LuFile } from '@bfc/shared';
 
 import { replaceDialogDiagnosticLabel } from '../../utils';
 export const DiagnosticSeverity = ['Error', 'Warning']; //'Information', 'Hint'
diff --git a/Composer/packages/client/src/store/action/dialog.ts b/Composer/packages/client/src/store/action/dialog.ts
index 2005a2475d..aabae8c609 100644
--- a/Composer/packages/client/src/store/action/dialog.ts
+++ b/Composer/packages/client/src/store/action/dialog.ts
@@ -3,7 +3,7 @@
 
 import clonedeep from 'lodash/cloneDeep';
 import reject from 'lodash/reject';
-import { DialogInfo } from '@bfc/indexers';
+import { DialogInfo } from '@bfc/shared';
 import debounce from 'lodash/debounce';
 
 import { ActionCreator, State } from '../types';
diff --git a/Composer/packages/client/src/store/index.tsx b/Composer/packages/client/src/store/index.tsx
index 53bf28c84f..b7f451659f 100644
--- a/Composer/packages/client/src/store/index.tsx
+++ b/Composer/packages/client/src/store/index.tsx
@@ -4,8 +4,7 @@
 import React, { useReducer, useRef } from 'react';
 import once from 'lodash/once';
 import { ImportResolverDelegate, LGParser } from 'botbuilder-lg';
-import { LgFile, LuFile } from '@bfc/indexers';
-import { importResolverGenerator } from '@bfc/shared';
+import { LgFile, LuFile, importResolverGenerator } from '@bfc/shared';
 
 import { prepareAxios } from '../utils/auth';
 
diff --git a/Composer/packages/client/src/store/reducer/index.ts b/Composer/packages/client/src/store/reducer/index.ts
index 5c52853c00..a2688a7b8b 100644
--- a/Composer/packages/client/src/store/reducer/index.ts
+++ b/Composer/packages/client/src/store/reducer/index.ts
@@ -3,9 +3,9 @@
 
 import get from 'lodash/get';
 import set from 'lodash/set';
+import { dialogIndexer, lgIndexer, luIndexer } from '@bfc/indexers';
+import { SensitiveProperties, LuFile, DialogInfo, importResolverGenerator } from '@bfc/shared';
 import formatMessage from 'format-message';
-import { SensitiveProperties, importResolverGenerator } from '@bfc/shared';
-import { lgIndexer, luIndexer, LuFile, DialogInfo, dialogIndexer } from '@bfc/indexers';
 
 import { ActionTypes, FileTypes, BotStatus } from '../../constants';
 import { DialogSetting, ReducerFunc } from '../types';
diff --git a/Composer/packages/client/src/store/types.ts b/Composer/packages/client/src/store/types.ts
index ab3bcf2c49..1efeeb359c 100644
--- a/Composer/packages/client/src/store/types.ts
+++ b/Composer/packages/client/src/store/types.ts
@@ -4,8 +4,7 @@
 // TODO: remove this once we can expand the types
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import { PromptTab, BotSchemas, ProjectTemplate } from '@bfc/shared';
-import { DialogInfo, LgFile, LuFile } from '@bfc/indexers';
+import { PromptTab, BotSchemas, ProjectTemplate, DialogInfo, LgFile, LuFile } from '@bfc/shared';
 
 import { CreationFlowStatus, BotStatus } from '../constants';
 
diff --git a/Composer/packages/client/src/utils/dialogUtil.ts b/Composer/packages/client/src/utils/dialogUtil.ts
index 42dc314db3..b35d090ba4 100644
--- a/Composer/packages/client/src/utils/dialogUtil.ts
+++ b/Composer/packages/client/src/utils/dialogUtil.ts
@@ -1,13 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ConceptLabels, DialogGroup, SDKTypes, dialogGroups, seedNewDialog } from '@bfc/shared';
+import { ConceptLabels, DialogGroup, SDKTypes, dialogGroups, seedNewDialog, DialogInfo } from '@bfc/shared';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import cloneDeep from 'lodash/cloneDeep';
 import { ExpressionEngine } from 'adaptive-expressions';
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { DialogInfo } from '@bfc/indexers';
 
 import { getFocusPath } from './navigation';
 import { upperCaseName } from './fileUtil';
diff --git a/Composer/packages/client/src/utils/luUtil.ts b/Composer/packages/client/src/utils/luUtil.ts
index 667b8e4f11..1474935a61 100644
--- a/Composer/packages/client/src/utils/luUtil.ts
+++ b/Composer/packages/client/src/utils/luUtil.ts
@@ -7,7 +7,7 @@
  * for more usage detail, please check client/__tests__/utils/luUtil.test.ts
  */
 
-import { LuFile, DialogInfo } from '@bfc/indexers';
+import { LuFile, DialogInfo } from '@bfc/shared';
 
 import { getBaseName } from './fileUtil';
 export * from '@bfc/indexers/lib/utils/luUtil';
diff --git a/Composer/packages/extensions/adaptive-form/.eslintignore b/Composer/packages/extensions/adaptive-form/.eslintignore
new file mode 100644
index 0000000000..4e72fa6ace
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/.eslintignore
@@ -0,0 +1,3 @@
+demo/webpack.config.js
+node_modules
+packages/**/lib
diff --git a/Composer/packages/extensions/obiformeditor/.eslintrc.js b/Composer/packages/extensions/adaptive-form/.eslintrc.js
similarity index 100%
rename from Composer/packages/extensions/obiformeditor/.eslintrc.js
rename to Composer/packages/extensions/adaptive-form/.eslintrc.js
diff --git a/Composer/packages/extensions/adaptive-form/.gitignore b/Composer/packages/extensions/adaptive-form/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/extensions/adaptive-form/jest.config.js b/Composer/packages/extensions/adaptive-form/jest.config.js
new file mode 100644
index 0000000000..7b29dcfa5e
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'adaptive-form',
+  preset: 'ts-jest',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/extensions/adaptive-form/package.json b/Composer/packages/extensions/adaptive-form/package.json
new file mode 100644
index 0000000000..21036dc69e
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@bfc/adaptive-form",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer form components.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/extension": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "format-message": "^6.2.3",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/extension": "*",
+    "@types/lodash": "^4.14.149",
+    "@types/jest": "^25.1.3",
+    "@types/react": "16.9.23",
+    "format-message": "^6.2.3",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.27",
+    "lodash": "^4.17.15",
+    "react-error-boundary": "^1.2.5"
+  }
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/PluginContext.ts b/Composer/packages/extensions/adaptive-form/src/PluginContext.ts
new file mode 100644
index 0000000000..bea09ab348
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/PluginContext.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { PluginConfig } from '@bfc/extension';
+
+const PluginContext = React.createContext<Required<PluginConfig>>({
+  uiSchema: {},
+  roleSchema: {},
+  // kindSchema: {},
+  recognizers: [],
+});
+
+export default PluginContext;
diff --git a/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/ErrorInfo.tsx b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/ErrorInfo.tsx
new file mode 100644
index 0000000000..b9c3dd55d1
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/ErrorInfo.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+
+const ErrorInfo: React.FC<FallbackProps> = ({ componentStack, error }) => (
+  <div style={{ marginRight: '20px' }}>
+    <MessageBar isMultiline={false} messageBarType={MessageBarType.error}>
+      <p style={{ whiteSpace: 'pre-wrap' }}>
+        <strong>Oops! An error occured in the form editor!</strong>
+        <br />
+        This is likely due to malformed data or missing functionality in Composer.
+        <br />
+        Try navigating to another node in the visual editor.
+      </p>
+      <p>Here’s what we know…</p>
+      <p style={{ whiteSpace: 'pre-wrap' }}>
+        <strong>Error:</strong> {error && error.toString()}
+      </p>
+      <p style={{ whiteSpace: 'pre-wrap' }}>
+        <strong>Component Stacktrace:</strong> {componentStack}
+      </p>
+    </MessageBar>
+  </div>
+);
+
+export default ErrorInfo;
diff --git a/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx
new file mode 100644
index 0000000000..54899e152c
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx
@@ -0,0 +1,107 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { FontWeights } from '@uifabric/styling';
+import { FontSizes } from '@uifabric/fluent-theme';
+import startCase from 'lodash/startCase';
+import formatMessage from 'format-message';
+import { UIOptions, JSONSchema7 } from '@bfc/extension';
+
+import { EditableField } from '../fields/EditableField';
+
+import { title as styles } from './styles';
+
+interface FormTitleProps {
+  description?: string;
+  formData: any;
+  id: string;
+  name?: string;
+  onChange?: (data: any) => void;
+  schema: JSONSchema7;
+  title?: string;
+  uiOptions?: UIOptions;
+}
+
+const FormTitle: React.FC<FormTitleProps> = props => {
+  const { name, description, schema, formData, uiOptions = {} } = props;
+
+  const handleTitleChange = (e: any, newTitle?: string): void => {
+    if (props.onChange) {
+      props.onChange({
+        ...formData.$designer,
+        name: newTitle,
+      });
+    }
+  };
+
+  const uiLabel = typeof uiOptions?.label === 'function' ? uiOptions.label(formData) : uiOptions.label;
+  const uiSubtitle = typeof uiOptions?.subtitle === 'function' ? uiOptions.subtitle(formData) : uiOptions.subtitle;
+  const getTitle = (): string => {
+    const designerName = formData.$designer?.name;
+
+    return designerName || uiLabel || schema.title || startCase(name);
+  };
+
+  const getSubTitle = (): string => {
+    return uiSubtitle || uiLabel || formData.$type;
+  };
+
+  const getDescription = (): string => {
+    const { description: descriptionOverride } = uiOptions;
+
+    if (descriptionOverride) {
+      if (typeof descriptionOverride === 'function') {
+        const result = descriptionOverride(formData);
+
+        if (result) {
+          return result;
+        }
+      } else {
+        return descriptionOverride;
+      }
+    }
+
+    return description || schema.description || '';
+  };
+
+  return (
+    <div css={styles.container} id={props.id}>
+      <div>
+        <EditableField
+          depth={0}
+          fontSize={FontSizes.size20}
+          id="form-title"
+          name="$designer.name"
+          schema={{}}
+          styles={{
+            field: { fontWeight: FontWeights.semibold },
+            root: { margin: '5px 0 7px -9px' },
+          }}
+          uiOptions={{}}
+          value={getTitle()}
+          onChange={handleTitleChange}
+        />
+        <p css={styles.subtitle}>{getSubTitle()}</p>
+        <p css={styles.description}>
+          {getDescription()}
+          {uiOptions?.helpLink && (
+            <React.Fragment>
+              <br />
+              <br />
+              <a href={uiOptions?.helpLink} target="_blank" rel="noopener noreferrer">
+                {formatMessage('Learn more')}
+              </a>
+            </React.Fragment>
+          )}
+        </p>
+      </div>
+
+      {props.children}
+    </div>
+  );
+};
+
+export default FormTitle;
diff --git a/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/index.tsx b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/index.tsx
new file mode 100644
index 0000000000..dc02a45149
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/index.tsx
@@ -0,0 +1,133 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useShellApi, PluginConfig, FormErrors, JSONSchema7 } from '@bfc/extension';
+import ErrorBoundary from 'react-error-boundary';
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
+
+import PluginContext from '../../PluginContext';
+import { resolveBaseSchema, getUISchema, mergePluginConfigs } from '../../utils';
+import { SchemaField } from '../SchemaField';
+
+import FormTitle from './FormTitle';
+import ErrorInfo from './ErrorInfo';
+
+export interface AdaptiveFormProps {
+  schema?: JSONSchema7;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formData?: any;
+  plugins: PluginConfig[];
+}
+
+export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(props) {
+  const { shellApi, focusedSteps, currentDialog, focusPath } = useShellApi();
+  const { formData, schema, plugins } = props;
+  const [localData, setLocalData] = useState(formData);
+
+  const syncData = useRef(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    debounce((shellData: any, localData: any) => {
+      if (!isEqual(shellData, localData)) {
+        setLocalData(shellData);
+      }
+    }, 300)
+  ).current;
+
+  useEffect(() => {
+    syncData(formData, localData);
+
+    return () => {
+      syncData.cancel();
+    };
+  }, [formData]);
+
+  const $schema = useMemo(() => {
+    if (schema && localData) {
+      return resolveBaseSchema(schema, localData);
+    }
+  }, [schema, localData]);
+
+  const pluginConfig = useMemo(() => {
+    return mergePluginConfigs(...plugins);
+  }, []);
+
+  const $uiSchema = useMemo(() => {
+    return getUISchema($schema, pluginConfig.uiSchema);
+  }, [$schema, pluginConfig]);
+
+  const errors = useMemo(() => {
+    const diagnostics = currentDialog?.diagnostics;
+    if (diagnostics) {
+      const currentPath = focusPath.replace('#', '');
+
+      return diagnostics.reduce((errors, d) => {
+        const [dPath, dType, dProp] = d.path?.split('#') || [];
+        const dParts = dProp ? dProp.split(/[[\].]+/).filter(Boolean) : [];
+
+        if (dPath === currentPath && dType === localData?.$type) {
+          const propErr = dParts.reverse().reduce((err, prop, idx) => {
+            if (idx === 0) {
+              return { [prop]: d.message };
+            } else {
+              return { [prop]: err };
+            }
+          }, {});
+
+          return {
+            ...errors,
+            ...propErr,
+          };
+        }
+
+        return errors;
+      }, {} as FormErrors);
+    }
+
+    return {};
+  }, [currentDialog, focusPath, localData]);
+
+  if (!localData) {
+    return <>No Data</>;
+  }
+
+  if (!$schema) {
+    return null;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleDataChange = (newData?: any) => {
+    setLocalData(newData);
+
+    if (!isEqual(formData, newData)) {
+      shellApi.saveData(newData, focusedSteps[0]);
+    }
+  };
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorInfo}>
+      <div key={localData?.$designer?.id}>
+        <PluginContext.Provider value={pluginConfig}>
+          <FormTitle
+            formData={localData}
+            id={localData.$designer?.id || 'unknown'}
+            schema={$schema}
+            onChange={$designer => handleDataChange({ ...localData, $designer })}
+            uiOptions={$uiSchema}
+          />
+          <SchemaField
+            definitions={schema?.definitions}
+            depth={-1}
+            id="root"
+            name="root"
+            rawErrors={errors}
+            schema={$schema}
+            uiOptions={$uiSchema}
+            value={localData}
+            onChange={handleDataChange}
+          />
+        </PluginContext.Provider>
+      </div>
+    </ErrorBoundary>
+  );
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/styles.ts b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/styles.ts
new file mode 100644
index 0000000000..4acab78ba8
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/styles.ts
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { css } from '@emotion/core';
+import { FontSizes } from '@uifabric/styling';
+
+export const title = {
+  container: css`
+    border-bottom: 1px solid #c8c6c4;
+    padding: 0 18px;
+    margin-bottom: 0px;
+  `,
+
+  subtitle: css`
+    height: 15px;
+    line-height: 15px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #4f4f4f;
+    margin: -7px 0 7px;
+  `,
+
+  description: css`
+    margin-top: 0;
+    margin-bottom: 10px;
+    white-space: pre-line;
+    font-size: ${FontSizes.smallPlus};
+  `,
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/ErrorMessage.tsx b/Composer/packages/extensions/adaptive-form/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000000..f4e2199085
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/ErrorMessage.tsx
@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import formatMessage from 'format-message';
+
+interface ErrorMessageProps {
+  label?: string | false;
+  error?: string;
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = props => {
+  const { error, label } = props;
+
+  return (
+    <MessageBar
+      truncated
+      dismissButtonAriaLabel={formatMessage('Close')}
+      isMultiline={false}
+      messageBarType={MessageBarType.error}
+      overflowButtonAriaLabel={formatMessage('See more')}
+    >
+      {[label, error].filter(Boolean).join(' ')}
+    </MessageBar>
+  );
+};
+
+export { ErrorMessage };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/FieldLabel.tsx b/Composer/packages/extensions/adaptive-form/src/components/FieldLabel.tsx
new file mode 100644
index 0000000000..48fcb3bde3
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/FieldLabel.tsx
@@ -0,0 +1,99 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { DirectionalHint, TooltipHost, TooltipDelay } from 'office-ui-fabric-react/lib/Tooltip';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { NeutralColors } from '@uifabric/fluent-theme';
+import formatMessage from 'format-message';
+
+interface DescriptionCalloutProps {
+  title: string;
+  description?: string;
+  id?: string;
+  helpLink?: string;
+}
+
+const DescriptionCallout: React.FC<DescriptionCalloutProps> = function DescriptionCallout(props) {
+  const { description, title, id, helpLink } = props;
+
+  if (!description) {
+    return null;
+  }
+
+  return (
+    <TooltipHost
+      delay={TooltipDelay.zero}
+      directionalHint={DirectionalHint.bottomAutoEdge}
+      id={`${id}-description`}
+      styles={{ root: { display: 'inline-block' } }}
+      tooltipProps={{
+        styles: { root: { width: '288px', padding: '17px 28px' } },
+        onRenderContent: () => (
+          <div>
+            <h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }}>{title}</h3>
+            <p>{description}</p>
+            {helpLink && (
+              <Link href={helpLink} target="_blank" rel="noopener noreferrer">
+                {formatMessage('Learn more')}
+              </Link>
+            )}
+          </div>
+        ),
+      }}
+    >
+      <IconButton
+        aria-labelledby={`${id}-description`}
+        iconProps={{
+          iconName: 'Unknown',
+        }}
+        styles={{
+          root: { width: '20px', minWidth: '20px', height: '20px' },
+          rootHovered: { backgroundColor: 'transparent' },
+          rootChecked: { backgroundColor: 'transparent' },
+          icon: {
+            color: NeutralColors.gray160,
+            fontSize: '12px',
+            marginBottom: '-2px',
+          },
+        }}
+      />
+    </TooltipHost>
+  );
+};
+
+interface FieldLabelProps {
+  id?: string;
+  label?: string | false;
+  description?: string;
+  helpLink?: string;
+  inline?: boolean;
+}
+
+const FieldLabel: React.FC<FieldLabelProps> = props => {
+  const { label, description, id, inline, helpLink } = props;
+
+  if (!label) {
+    return null;
+  }
+
+  return (
+    <Label
+      htmlFor={id}
+      styles={{
+        root: {
+          fontWeight: '400',
+          display: 'flex',
+          alignItems: 'center',
+          marginLeft: inline ? '4px' : '0',
+        },
+      }}
+    >
+      {label}
+      <DescriptionCallout description={description} id={id} title={label} helpLink={helpLink} />
+    </Label>
+  );
+};
+
+export { FieldLabel };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx b/Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx
new file mode 100644
index 0000000000..93478e9288
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx
@@ -0,0 +1,105 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import React from 'react';
+import { FieldProps, UIOptions } from '@bfc/extension';
+
+import { resolvePropSchema } from '../utils';
+
+import SchemaField from './SchemaField';
+
+interface FormRowProps extends Omit<FieldProps, 'onChange'> {
+  onChange: (field: string) => (data: any) => void;
+  row: string | [string, string];
+}
+
+const formRow = {
+  row: css`
+    display: flex;
+    margin: 10px 18px;
+    label: FormRowContainer;
+  `,
+  property: css`
+    flex: 1;
+    margin: 0;
+
+    & + & {
+      margin-left: 16px;
+    }
+  `,
+};
+
+const FormRow: React.FC<FormRowProps> = props => {
+  const {
+    id,
+    depth,
+    schema,
+    row,
+    definitions,
+    value,
+    uiOptions,
+    transparentBorder,
+    className,
+    label,
+    rawErrors,
+    onBlur,
+    onFocus,
+    onChange,
+  } = props;
+
+  if (Array.isArray(row)) {
+    return (
+      <div css={formRow.row}>
+        {row.map(property => (
+          <SchemaField
+            key={`${id}.${property}`}
+            css={formRow.property}
+            className={className}
+            definitions={definitions}
+            depth={depth}
+            id={`${id}.${property}`}
+            label={label === false ? false : undefined}
+            name={property}
+            rawErrors={rawErrors?.[property]}
+            schema={resolvePropSchema(schema, property, definitions) || {}}
+            transparentBorder={transparentBorder}
+            uiOptions={(uiOptions.properties?.[property] as UIOptions) ?? {}}
+            value={value && value[property]}
+            onBlur={onBlur}
+            onChange={onChange(property)}
+            onFocus={onFocus}
+          />
+        ))}
+      </div>
+    );
+  }
+  const propSchema = resolvePropSchema(schema, row, definitions);
+
+  if (propSchema) {
+    return (
+      <SchemaField
+        key={`${id}.${row}`}
+        className={className}
+        definitions={definitions}
+        depth={depth}
+        id={`${id}.${row}`}
+        label={label === false ? false : undefined}
+        name={row}
+        rawErrors={rawErrors?.[row]}
+        schema={propSchema}
+        transparentBorder={transparentBorder}
+        uiOptions={(uiOptions.properties?.[row] as UIOptions) ?? {}}
+        value={value && value[row]}
+        onBlur={onBlur}
+        onChange={onChange(row)}
+        onFocus={onFocus}
+      />
+    );
+  }
+
+  return null;
+};
+
+export { FormRow };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx b/Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx
new file mode 100644
index 0000000000..568da51c1e
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx
@@ -0,0 +1,87 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+
+import { getUISchema, resolveFieldWidget, resolveRef, getUiLabel, getUiPlaceholder, getUiDescription } from '../utils';
+import { usePluginConfig } from '../hooks';
+
+import { ErrorMessage } from './ErrorMessage';
+
+const schemaField = {
+  container: (depth = 0) => css`
+    margin: 10px ${depth === 0 ? 18 : 0}px;
+    label: SchemaFieldContainer;
+  `,
+  field: css`
+    width: 100%;
+    label: SchemaField;
+  `,
+};
+
+const SchemaField: React.FC<FieldProps> = props => {
+  const {
+    className,
+    definitions,
+    name,
+    schema: baseSchema,
+    uiOptions: baseUIOptions = {},
+    value,
+    rawErrors,
+    hideError,
+    onChange,
+  } = props;
+  const pluginConfig = usePluginConfig();
+  const schema = resolveRef(baseSchema, definitions);
+  const uiOptions = {
+    ...getUISchema(schema, pluginConfig.uiSchema),
+    ...baseUIOptions,
+  };
+
+  const error = typeof rawErrors === 'string' && <ErrorMessage error={rawErrors} label={getUiLabel(props)} />;
+
+  if (!schema || name.startsWith('$')) {
+    return null;
+  }
+
+  const handleChange = (newValue: any) => {
+    const serializedValue =
+      typeof uiOptions?.serializer?.set === 'function' ? uiOptions.serializer.set(newValue) : newValue;
+    onChange(serializedValue);
+  };
+
+  const deserializedValue = typeof uiOptions?.serializer?.get === 'function' ? uiOptions.serializer.get(value) : value;
+
+  const FieldWidget = resolveFieldWidget(schema, uiOptions, pluginConfig);
+  const fieldProps = {
+    ...props,
+    uiOptions,
+    enumOptions: schema.enum as string[],
+    label: getUiLabel({ ...props, uiOptions }),
+    placeholder: getUiPlaceholder({ ...props, uiOptions }),
+    description: getUiDescription({ ...props, uiOptions }),
+    schema,
+    value: deserializedValue,
+    error: error || undefined,
+    rawErrors: typeof rawErrors?.[name] === 'object' ? rawErrors?.[name] : rawErrors,
+    onChange: handleChange,
+  };
+
+  return (
+    <div className={className} css={schemaField.container(props.depth)}>
+      {error && !hideError ? (
+        <div css={schemaField.field}>
+          <FieldWidget {...fieldProps} />
+          {error}
+        </div>
+      ) : (
+        <FieldWidget {...fieldProps} />
+      )}
+    </div>
+  );
+};
+
+export { SchemaField };
+export default SchemaField;
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayField.tsx
new file mode 100644
index 0000000000..84b9b2b897
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayField.tsx
@@ -0,0 +1,98 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { SharedColors, NeutralColors, FontSizes } from '@uifabric/fluent-theme';
+import { FieldProps } from '@bfc/extension';
+import formatMessage from 'format-message';
+
+import { getArrayItemProps, useArrayItems } from '../../utils';
+import { FieldLabel } from '../FieldLabel';
+
+import { arrayField } from './styles';
+import { ArrayFieldItem } from './ArrayFieldItem';
+import { UnsupportedField } from './UnsupportedField';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ArrayField: React.FC<FieldProps<any[]>> = props => {
+  const { value = [], onChange, schema, label, description, id, rawErrors = [], uiOptions } = props;
+  const [newValue, setNewValue] = useState<string>();
+  const { arrayItems, handleChange, addItem } = useArrayItems(value, onChange);
+
+  const handleNewChange = (_e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) =>
+    setNewValue(newValue || '');
+
+  const handleKeyDown = event => {
+    if (event.key.toLowerCase() === 'enter') {
+      event.preventDefault();
+
+      if (newValue) {
+        addItem(newValue);
+        setNewValue('');
+      }
+    }
+  };
+
+  const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
+
+  if (!itemSchema || itemSchema === true) {
+    return <UnsupportedField {...props} />;
+  }
+
+  return (
+    <div>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <div>
+        {arrayItems.map((element, idx) => (
+          <ArrayFieldItem
+            {...props}
+            key={element.id}
+            transparentBorder
+            label={false}
+            rawErrors={rawErrors[idx]}
+            error={rawErrors[idx]}
+            schema={itemSchema}
+            value={element.value}
+            {...getArrayItemProps(arrayItems, idx, handleChange)}
+          />
+        ))}
+      </div>
+      <div css={arrayField.inputFieldContainer}>
+        <div css={arrayField.field}>
+          <TextField
+            data-testid="string-array-text-input"
+            iconProps={{
+              iconName: 'ReturnKey',
+              style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
+            }}
+            value={newValue}
+            onChange={handleNewChange}
+            onKeyDown={handleKeyDown}
+            ariaLabel={formatMessage('New value')}
+            styles={{ root: { width: '100%' } }}
+          />
+          <IconButton
+            disabled
+            menuIconProps={{ iconName: 'MoreVertical' }}
+            ariaLabel={formatMessage('Item Actions')}
+            styles={{
+              menuIcon: {
+                backgroundColor: NeutralColors.white,
+                color: NeutralColors.gray130,
+                fontSize: FontSizes.size16,
+              },
+              rootDisabled: {
+                backgroundColor: NeutralColors.white,
+              },
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ArrayField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayFieldItem.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayFieldItem.tsx
new file mode 100644
index 0000000000..28d51e6b77
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayFieldItem.tsx
@@ -0,0 +1,109 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import { NeutralColors } from '@uifabric/fluent-theme';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { FontSizes } from '@uifabric/styling';
+import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
+
+import SchemaField from '../SchemaField';
+
+import { arrayItem } from './styles';
+
+interface ArrayFieldItemProps extends FieldProps {
+  index: number;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
+  canRemove: boolean;
+  stackArrayItems?: boolean;
+  onReorder: (aIdx: number) => void;
+  onRemove: () => void;
+}
+
+const ArrayFieldItem: React.FC<ArrayFieldItemProps> = props => {
+  const {
+    canMoveUp,
+    canMoveDown,
+    canRemove,
+    onReorder,
+    onRemove,
+    index,
+    depth,
+    onBlur,
+    stackArrayItems,
+    transparentBorder,
+    uiOptions,
+    value,
+    ...rest
+  } = props;
+
+  // This needs to return true to dismiss the menu after a click.
+  const fabricMenuItemClickHandler = fn => e => {
+    fn(e);
+    return true;
+  };
+
+  const contextItems: IContextualMenuItem[] = [
+    {
+      key: 'moveUp',
+      text: 'Move Up',
+      iconProps: { iconName: 'CaretSolidUp' },
+      disabled: !canMoveUp,
+      onClick: fabricMenuItemClickHandler(() => onReorder(index - 1)),
+    },
+    {
+      key: 'moveDown',
+      text: 'Move Down',
+      iconProps: { iconName: 'CaretSolidDown' },
+      disabled: !canMoveDown,
+      onClick: fabricMenuItemClickHandler(() => onReorder(index + 1)),
+    },
+    {
+      key: 'remove',
+      text: 'Remove',
+      iconProps: { iconName: 'Cancel' },
+      disabled: !canRemove,
+      onClick: fabricMenuItemClickHandler(onRemove),
+    },
+  ];
+
+  const handleBlur = () => {
+    if (!value || (typeof value === 'object' && !Object.values(value).some(Boolean))) {
+      onRemove();
+    }
+
+    if (typeof onBlur === 'function') {
+      onBlur(rest.id, value);
+    }
+  };
+
+  return (
+    <div css={arrayItem.container}>
+      <div css={arrayItem.field}>
+        <SchemaField
+          {...rest}
+          css={arrayItem.schemaFieldOverride(!!stackArrayItems)}
+          depth={depth + 1}
+          label={!stackArrayItems ? false : undefined}
+          transparentBorder={!stackArrayItems ? transparentBorder : undefined}
+          uiOptions={uiOptions}
+          value={value}
+          onBlur={handleBlur}
+        />
+      </div>
+      <IconButton
+        ariaLabel="Item Actions"
+        menuIconProps={{ iconName: 'MoreVertical' }}
+        menuProps={{ items: contextItems }}
+        styles={{
+          menuIcon: { color: NeutralColors.black, fontSize: FontSizes.medium },
+        }}
+      />
+    </div>
+  );
+};
+
+export { ArrayFieldItem };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/BooleanField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/BooleanField.tsx
new file mode 100644
index 0000000000..4794b3fa24
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/BooleanField.tsx
@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import { Dropdown, IDropdownOption, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
+
+import { FieldLabel } from '../FieldLabel';
+
+const BooleanField: React.FC<FieldProps> = function CheckboxWidget(props) {
+  const { onChange, value, label, id, schema, uiOptions } = props;
+  const { description } = schema;
+
+  const options: IDropdownOption[] = [
+    {
+      key: 'none',
+      text: '',
+    },
+    {
+      key: 'true',
+      text: 'true',
+    },
+    {
+      key: 'false',
+      text: 'false',
+    },
+  ];
+
+  const handleChange = (e, option?: IDropdownOption) => {
+    if (option) {
+      const optionValue = option.key === 'none' ? undefined : option.key === 'true';
+      onChange(optionValue);
+    }
+  };
+
+  const selectedKey = typeof value === 'boolean' ? value.toString() : '';
+
+  return (
+    <React.Fragment>
+      <FieldLabel inline description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <Dropdown
+        id={id}
+        options={options}
+        responsiveMode={ResponsiveMode.large}
+        selectedKey={selectedKey}
+        onChange={handleChange}
+        styles={{
+          root: { width: '100%' },
+          label: { fontSize: '10px', fontWeight: '400' },
+          errorMessage: { display: 'none' },
+        }}
+      />
+    </React.Fragment>
+  );
+};
+
+export { BooleanField };
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/EditableField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/EditableField.tsx
similarity index 62%
rename from Composer/packages/extensions/obiformeditor/src/Form/fields/EditableField.tsx
rename to Composer/packages/extensions/adaptive-form/src/components/fields/EditableField.tsx
index 7d328d3674..b54f970b74 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/EditableField.tsx
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/EditableField.tsx
@@ -2,28 +2,38 @@
 // Licensed under the MIT License.
 
 import React, { useState, useEffect } from 'react';
-import { TextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
+import { TextField, ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { mergeStyleSets } from '@uifabric/styling';
+import { FieldProps } from '@bfc/extension';
 
-interface EditableFieldProps extends ITextFieldProps {
-  onChange: (e: any, newTitle?: string) => void;
-  placeholder?: string;
+interface EditableFieldProps extends FieldProps {
   fontSize?: string;
-  options?: any;
-  ariaLabel?: string;
+  styles?: Partial<ITextFieldStyles>;
+  transparentBorder?: boolean;
 }
 
-export const EditableField: React.FC<EditableFieldProps> = props => {
-  const { styles = {}, placeholder, fontSize, onChange, onBlur, value, ariaLabel, options = {}, ...rest } = props;
-  const { transparentBorder } = options;
+const EditableField: React.FC<EditableFieldProps> = props => {
+  const {
+    depth,
+    styles = {},
+    placeholder,
+    fontSize,
+    onChange,
+    onBlur,
+    value,
+    id,
+    error,
+    className,
+    transparentBorder,
+  } = props;
   const [editing, setEditing] = useState<boolean>(false);
   const [hasFocus, setHasFocus] = useState<boolean>(false);
   const [localValue, setLocalValue] = useState<string | undefined>(value);
   const [hasBeenEdited, setHasBeenEdited] = useState<boolean>(false);
 
   useEffect(() => {
-    if (!hasBeenEdited) {
+    if (!hasBeenEdited || value !== localValue) {
       setLocalValue(value);
     }
   }, [value]);
@@ -31,29 +41,34 @@ export const EditableField: React.FC<EditableFieldProps> = props => {
   const handleChange = (_e: any, newValue?: string) => {
     setLocalValue(newValue);
     setHasBeenEdited(true);
-    onChange(_e, newValue);
+    onChange(newValue);
   };
 
-  const handleCommit = (e: React.FocusEvent<HTMLInputElement>) => {
+  const handleCommit = () => {
     setHasFocus(false);
     setEditing(false);
-    onBlur && onBlur(e);
+    onBlur && onBlur(id, value);
   };
 
   let borderColor: string | undefined = undefined;
 
-  if (!editing) {
-    borderColor = localValue || transparentBorder ? 'transparent' : NeutralColors.gray30;
+  if (!editing && !error) {
+    borderColor = localValue || transparentBorder || depth > 1 ? 'transparent' : NeutralColors.gray30;
   }
 
   return (
-    <div onMouseEnter={() => setEditing(true)} onMouseLeave={() => !hasFocus && setEditing(false)}>
+    <div
+      className={className}
+      onMouseEnter={() => setEditing(true)}
+      onMouseLeave={() => !hasFocus && setEditing(false)}
+    >
       <TextField
+        autoComplete="off"
+        errorMessage={error as string}
         placeholder={placeholder || value}
-        value={localValue}
         styles={mergeStyleSets(
           {
-            root: { margin: '5px 0 7px 0' },
+            root: { margin: '0', width: '100%' },
             field: {
               fontSize: fontSize,
               selectors: {
@@ -74,13 +89,13 @@ export const EditableField: React.FC<EditableFieldProps> = props => {
           },
           styles
         )}
+        value={localValue}
         onBlur={handleCommit}
-        onFocus={() => setHasFocus(true)}
         onChange={handleChange}
-        autoComplete="off"
-        ariaLabel={ariaLabel}
-        {...rest}
+        onFocus={() => setHasFocus(true)}
       />
     </div>
   );
 };
+
+export { EditableField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx
new file mode 100644
index 0000000000..ef72aa8f53
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx
@@ -0,0 +1,48 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import { DialogInfo, SDKTypes } from '@bfc/shared';
+import formatMessage from 'format-message';
+
+import { usePluginConfig } from '../../hooks';
+import { FieldLabel } from '../FieldLabel';
+
+// TODO: extend recognizer config to support this
+export function recognizerType({ content }: DialogInfo): string | null {
+  const { recognizer } = content;
+
+  if (recognizer) {
+    if (typeof recognizer === 'object' && recognizer.$type === SDKTypes.RegexRecognizer) {
+      return SDKTypes.RegexRecognizer;
+    } else if (typeof recognizer === 'string') {
+      return SDKTypes.LuisRecognizer;
+    }
+  }
+
+  return null;
+}
+
+const IntentField: React.FC<FieldProps> = props => {
+  const { id, description, uiOptions, value, onChange } = props;
+  const { currentDialog } = useShellApi();
+  const { recognizers } = usePluginConfig();
+  const type = recognizerType(currentDialog);
+
+  const handleChange = () => {
+    onChange(value);
+  };
+
+  const Editor = recognizers.find(r => r.id === type)?.editor;
+  const label = formatMessage('Trigger phrases (intent: #{intentName})', { intentName: value });
+
+  return (
+    <React.Fragment>
+      <FieldLabel id={id} label={label} description={description} helpLink={uiOptions?.helpLink} />
+      {Editor ? <Editor {...props} onChange={handleChange} /> : `No Editor for ${type}`}
+    </React.Fragment>
+  );
+};
+
+export { IntentField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/NumberField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/NumberField.tsx
new file mode 100644
index 0000000000..f5b013bdb3
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/NumberField.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
+import { FieldProps } from '@bfc/extension';
+
+import { FieldLabel } from '../FieldLabel';
+
+const getInt = (value: string, step: number) => {
+  return parseInt(value, 10) + step;
+};
+
+const getFloat = (value: string, step: number) => {
+  const fixed = (parseFloat(value) + step).toFixed(step !== 0 ? `${step}`.split('.')[1].length : step);
+
+  return parseFloat(fixed);
+};
+
+export const NumberField: React.FC<FieldProps> = function NumberField(props) {
+  const { description, disabled, id, label, onChange, readonly, schema, value, uiOptions } = props;
+
+  const { type } = schema;
+
+  const updateValue = (step: number) => (value: string) => {
+    // if the number is a float, we need to convert to a fixed decimal place
+    // in order to avoid floating point math rounding errors (ex. 1.2000000001)
+    // ex. if step = 0.01, we fix to 2 decimals
+    const newValue = type === 'integer' ? getInt(value, step) : getFloat(value, step);
+
+    onChange(newValue);
+  };
+
+  const step = type === 'integer' ? 1 : 0.1;
+
+  return (
+    <>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <SpinButton
+        disabled={Boolean(schema.const) || readonly || disabled}
+        step={step}
+        styles={{
+          labelWrapper: { display: 'none' },
+        }}
+        value={value}
+        onDecrement={updateValue(-step)}
+        onIncrement={updateValue(step)}
+        onValidate={updateValue(0)}
+      />
+    </>
+  );
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/ObjectArrayField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/ObjectArrayField.tsx
new file mode 100644
index 0000000000..64359fc09e
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/ObjectArrayField.tsx
@@ -0,0 +1,185 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState, useMemo } from 'react';
+import { FieldProps } from '@bfc/extension';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { JSONSchema7 } from 'json-schema';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
+import formatMessage from 'format-message';
+import map from 'lodash/map';
+
+import { getArrayItemProps, getOrderedProperties, useArrayItems } from '../../utils';
+import { FieldLabel } from '../FieldLabel';
+
+import { objectArrayField } from './styles';
+import { ArrayFieldItem } from './ArrayFieldItem';
+import { UnsupportedField } from './UnsupportedField';
+
+const getNewPlaceholder = (props: FieldProps<any[]>, propertyName: string): string | undefined => {
+  const { uiOptions } = props;
+  const placeholderOverride = uiOptions.properties?.[propertyName]?.placeholder;
+
+  if (placeholderOverride) {
+    return typeof placeholderOverride === 'function' ? placeholderOverride(undefined) : placeholderOverride;
+  }
+
+  return formatMessage('Add new {propertyName}', { propertyName });
+};
+
+const ObjectArrayField: React.FC<FieldProps<any[]>> = props => {
+  const { value = [], schema, id, onChange, className, uiOptions, label, description } = props;
+  const { items } = schema;
+  const itemSchema = Array.isArray(items) ? items[0] : items;
+  const properties = (itemSchema && itemSchema !== true && itemSchema.properties) || {};
+  const [newObject, setNewObject] = useState({});
+  const { arrayItems, handleChange, addItem } = useArrayItems(value, onChange);
+
+  const handleNewObjectChange = (property: string) => (_e: React.FormEvent, newValue?: string) => {
+    setNewObject({ ...newObject, [property]: newValue });
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key.toLowerCase() === 'enter') {
+      event.preventDefault();
+
+      if (Object.keys(newObject).length) {
+        const formattedData = Object.entries(newObject).reduce((obj, [key, value]) => {
+          const serializeValue = uiOptions?.properties?.[key]?.serializer?.set;
+          return { ...obj, [key]: typeof serializeValue === 'function' ? serializeValue(value) : value };
+        }, {});
+
+        addItem(formattedData);
+        setNewObject({});
+      }
+    }
+  };
+
+  const handleAdd = () => {
+    addItem({});
+  };
+
+  const orderedProperties = getOrderedProperties(
+    itemSchema && typeof itemSchema !== 'boolean' ? itemSchema : {},
+    uiOptions,
+    value
+  );
+
+  const stackArrayItems = useMemo(
+    () =>
+      orderedProperties.length > 2 ||
+      !!Object.entries(properties).filter(
+        ([key, { $role }]: any) => orderedProperties.includes(key) && $role === 'expression'
+      ).length,
+    [itemSchema, orderedProperties]
+  );
+
+  if (!itemSchema || itemSchema === true) {
+    return <UnsupportedField {...props} />;
+  }
+
+  return (
+    <div className={className}>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <div>
+        {orderedProperties.length > 1 && !stackArrayItems && (
+          <div css={objectArrayField.objectItemLabel}>
+            {orderedProperties.map((key, index) => {
+              if (typeof key === 'string') {
+                const propSchema = properties[key];
+
+                if (propSchema && propSchema !== true) {
+                  return (
+                    <div key={index} css={objectArrayField.objectItemValueLabel}>
+                      <FieldLabel
+                        description={propSchema.description}
+                        id={`${id}.${key}`}
+                        inline
+                        label={propSchema.title}
+                      />
+                    </div>
+                  );
+                }
+              }
+            })}
+            <div style={{ width: '32px' }} />
+          </div>
+        )}
+        {map(arrayItems, (item, idx) => (
+          <ArrayFieldItem
+            key={item.id}
+            {...props}
+            id={`${id}.${idx}`}
+            schema={itemSchema as JSONSchema7}
+            stackArrayItems={stackArrayItems}
+            transparentBorder
+            value={item.value}
+            {...getArrayItemProps(arrayItems, idx, handleChange)}
+          />
+        ))}
+      </div>
+      <div css={objectArrayField.inputFieldContainer}>
+        {!stackArrayItems ? (
+          <React.Fragment>
+            <div css={objectArrayField.arrayItemField}>
+              {orderedProperties
+                .filter(p => !Array.isArray(p))
+                .map((property, index, allProperties) => {
+                  if (typeof property === 'string') {
+                    return (
+                      <div key={index} css={objectArrayField.objectItemInputField}>
+                        <TextField
+                          autoComplete="off"
+                          iconProps={{
+                            ...(index === allProperties.length - 1
+                              ? {
+                                  iconName: 'ReturnKey',
+                                  style: {
+                                    color: SharedColors.cyanBlue10,
+                                    opacity: 0.6,
+                                  },
+                                }
+                              : {}),
+                          }}
+                          placeholder={getNewPlaceholder(props, property)}
+                          styles={{ field: { padding: '0 24px 0 8px' } }}
+                          value={newObject[property] || ''}
+                          onChange={handleNewObjectChange(property)}
+                          onKeyDown={handleKeyDown}
+                        />
+                      </div>
+                    );
+                  }
+                })}
+            </div>
+            <IconButton
+              disabled
+              ariaLabel="Item Actions"
+              menuIconProps={{ iconName: 'MoreVertical' }}
+              styles={{
+                menuIcon: {
+                  backgroundColor: NeutralColors.white,
+                  color: NeutralColors.gray130,
+                  fontSize: FontSizes.size16,
+                },
+                rootDisabled: {
+                  backgroundColor: NeutralColors.white,
+                },
+              }}
+            />
+          </React.Fragment>
+        ) : (
+          <DefaultButton type="button" onClick={handleAdd}>
+            {formatMessage('Add')}
+          </DefaultButton>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { ObjectArrayField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/ObjectField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/ObjectField.tsx
new file mode 100644
index 0000000000..6d75e4e2c9
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/ObjectField.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+
+import { getOrderedProperties } from '../../utils';
+import { FormRow } from '../FormRow';
+
+const ObjectField: React.FC<FieldProps<object>> = function ObjectField(props) {
+  const { schema, uiOptions, depth, value, ...rest } = props;
+
+  if (!schema) {
+    return null;
+  }
+
+  const newDepth = depth + 1;
+
+  const handleChange = (field: string) => (data: any) => {
+    const newData = { ...value };
+
+    if (
+      typeof data === 'undefined' ||
+      (Array.isArray(data) && data.length === 0) ||
+      (typeof data === 'string' && data.length === 0)
+    ) {
+      delete newData[field];
+    } else {
+      newData[field] = data;
+    }
+
+    props.onChange(newData);
+  };
+
+  const orderedProperties = getOrderedProperties(schema, uiOptions, value);
+
+  return (
+    <React.Fragment>
+      {orderedProperties.map(row => (
+        <FormRow
+          key={`${props.id}.${typeof row === 'string' ? row : row.join('_')}`}
+          {...rest}
+          value={value}
+          schema={schema}
+          uiOptions={uiOptions}
+          row={row}
+          depth={newDepth}
+          onChange={handleChange}
+        />
+      ))}
+    </React.Fragment>
+  );
+};
+
+export { ObjectField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/OneOfField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/OneOfField.tsx
new file mode 100644
index 0000000000..6572004908
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/OneOfField.tsx
@@ -0,0 +1,153 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState, useMemo } from 'react';
+import { FieldProps, JSONSchema7, JSONSchema7Definition } from '@bfc/extension';
+import { Dropdown, IDropdownOption, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
+import formatMessage from 'format-message';
+
+import { FieldLabel } from '../FieldLabel';
+import { resolveRef, resolveFieldWidget } from '../../utils';
+import { usePluginConfig } from '../../hooks';
+
+import { oneOfField } from './styles';
+
+const getOptions = (schema: JSONSchema7, definitions?: { [key: string]: JSONSchema7Definition }): IDropdownOption[] => {
+  const { type, oneOf } = schema;
+
+  if (type && Array.isArray(type)) {
+    const options: IDropdownOption[] = type.map(t => ({
+      key: t,
+      text: t,
+      data: { schema: { ...schema, type: t } },
+    }));
+
+    options.sort(({ text: t1 }, { text: t2 }) => (t1 > t2 ? 1 : -1));
+
+    return options;
+  }
+
+  if (oneOf && Array.isArray(oneOf)) {
+    return oneOf
+      .map(s => {
+        if (typeof s === 'object') {
+          const resolved = resolveRef(s, definitions);
+
+          return {
+            key: resolved.title?.toLowerCase() || resolved.type,
+            text: resolved.title?.toLowerCase() || resolved.type,
+            data: { schema: resolved },
+          } as IDropdownOption;
+        }
+      })
+      .filter(Boolean) as IDropdownOption[];
+  }
+
+  return [];
+};
+
+const getSelectedOption = (value: any | undefined, options: IDropdownOption[]): IDropdownOption | undefined => {
+  if (options.length === 0) {
+    return;
+  }
+
+  const valueType = Array.isArray(value) ? 'array' : typeof value;
+
+  if (valueType === 'array') {
+    const item = value[0];
+    const firstArrayOption = options.find(o => o.data.schema.type === 'array');
+
+    // if there is nothing in the array, default to the first array type
+    if (!item) {
+      return firstArrayOption;
+    }
+
+    // else, find the option with an item schema that matches item type
+    return (
+      options.find(o => {
+        const {
+          data: { schema },
+        } = o;
+
+        const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
+        return itemSchema && typeof item === itemSchema.type;
+      }) || firstArrayOption
+    );
+  }
+
+  // if the value if undefined, default to the first option
+  if (!value) {
+    return options[0];
+  }
+
+  // lastly, attempt to find the option based on value type
+  return options.find(({ data }) => data.schema.type === valueType) || options[0];
+};
+
+const OneOfField: React.FC<FieldProps> = props => {
+  const { schema, value, definitions } = props;
+  const pluginConfig = usePluginConfig();
+  const options = useMemo(() => getOptions(schema, definitions), [schema, definitions]);
+  const initialSelectedOption = useMemo(
+    () => getSelectedOption(value, options) || ({ key: '', data: { schema: undefined } } as IDropdownOption),
+    []
+  );
+
+  const [
+    {
+      key: selectedKey,
+      data: { schema: selectedSchema },
+    },
+    setSelectedOption,
+  ] = useState<IDropdownOption>(initialSelectedOption);
+
+  const handleTypeChange = (_e: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
+    if (option) {
+      setSelectedOption(option);
+      props.onChange(undefined);
+    }
+  };
+
+  const renderTypeTitle = (options?: IDropdownOption[]) => {
+    const option = options && options[0];
+    return option ? <React.Fragment>{option.text}</React.Fragment> : null;
+  };
+
+  const Field = resolveFieldWidget(selectedSchema || {}, props.uiOptions, pluginConfig);
+
+  return (
+    <React.Fragment>
+      <div css={oneOfField.label}>
+        <FieldLabel {...props} />
+        {options && options.length > 1 && (
+          <Dropdown
+            id={`${props.id}-oneOf`}
+            options={options}
+            responsiveMode={ResponsiveMode.large}
+            selectedKey={selectedKey}
+            onChange={handleTypeChange}
+            onRenderTitle={renderTypeTitle}
+            styles={{
+              caretDownWrapper: { height: '24px', lineHeight: '24px' },
+              root: { flexBasis: 'auto', padding: '5px 0', minWidth: '110px' },
+              title: { height: '24px', lineHeight: '20px' },
+            }}
+            ariaLabel={formatMessage('select property type')}
+          />
+        )}
+      </div>
+      <Field
+        {...props}
+        transparentBorder={false}
+        schema={selectedSchema || {}}
+        // allow object fields to render their labels
+        label={selectedSchema?.type === 'object' ? undefined : false}
+        depth={props.depth - 1}
+      />
+    </React.Fragment>
+  );
+};
+
+export { OneOfField };
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/OpenObjectField.tsx
similarity index 51%
rename from Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx
rename to Composer/packages/extensions/adaptive-form/src/components/fields/OpenObjectField.tsx
index 3278cfdd8c..5909c1ebd2 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/OpenObjectField.tsx
@@ -1,18 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback, useState } from 'react';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
+import React, { useState } from 'react';
 import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import formatMessage from 'format-message';
+import { FieldProps } from '@bfc/extension';
+
+import { FieldLabel } from '../FieldLabel';
 
-import { BaseField } from './BaseField';
-import { customObjectFieldContainer, customObjectFieldItem, customObjectFieldLabel } from './styles';
+import { openObjectField } from './styles';
 import { EditableField } from './EditableField';
 
 const ObjectItem = ({
@@ -31,54 +30,60 @@ const ObjectItem = ({
       iconProps: { iconName: 'Cancel' },
       key: 'remove',
       onClick: handleDropPropertyClick,
-      text: formatMessage('Remove'),
+      text: 'Remove',
     },
   ];
 
-  const handleBlur = useCallback(() => {
+  const handleBlur = () => {
     if (name !== originalName && Object.keys(formData).includes(name)) {
-      setErrorMessage(formatMessage('Keys must be unique'));
+      setErrorMessage('Keys must be unique');
     } else {
       handleNameChange(name);
       setErrorMessage('');
     }
-  }, [formData, handleNameChange, name, originalName, setErrorMessage]);
+  };
 
   return (
-    <div css={customObjectFieldContainer}>
-      <div css={customObjectFieldItem}>
+    <div css={openObjectField.container}>
+      <div css={openObjectField.item}>
         <EditableField
-          autoComplete="off"
-          onBlur={handleBlur}
-          onChange={(_, newValue) => setName(newValue || '')}
-          options={{ transparentBorder: true }}
-          placeholder={formatMessage('Add a new key')}
-          value={name}
+          transparentBorder
+          depth={0}
+          error={errorMessage}
+          id={`${name}.key`}
+          name="key"
+          placeholder={'Add a new key'}
+          schema={{}}
           styles={{
             errorMessage: { display: 'block', paddingTop: 0 },
             root: { margin: '7px 0 7px 0' },
           }}
-          errorMessage={errorMessage}
-          ariaLabel={formatMessage('Key')}
+          uiOptions={{}}
+          value={name}
+          onBlur={handleBlur}
+          onChange={newValue => setName(newValue || '')}
         />
       </div>
-      <div css={customObjectFieldItem}>
+      <div css={openObjectField.item}>
         <EditableField
-          autoComplete="off"
-          onChange={handleValueChange}
-          options={{ transparentBorder: true }}
-          placeholder={formatMessage('Add a new value')}
-          value={value}
+          transparentBorder
+          depth={0}
+          id={`${name}.value`}
+          name="value"
+          placeholder={'Add a new value'}
+          schema={{}}
           styles={{
             root: { margin: '7px 0 7px 0' },
           }}
-          ariaLabel={formatMessage('Value')}
+          uiOptions={{}}
+          value={value}
+          onChange={handleValueChange}
         />
       </div>
       <IconButton
-        ariaLabel={formatMessage('Edit Property')}
-        menuProps={{ items: contextItems }}
+        ariaLabel={'Edit Property'}
         menuIconProps={{ iconName: 'MoreVertical' }}
+        menuProps={{ items: contextItems }}
         styles={{
           root: { margin: '7px 0 7px 0' },
           menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 },
@@ -88,106 +93,107 @@ const ObjectItem = ({
   );
 };
 
-export const CustomObjectField: React.FC<FieldProps> = props => {
+export const OpenObjectField: React.FC<FieldProps<{
+  [key: string]: any;
+}>> = props => {
   const {
-    formData = {},
+    value = {},
     schema: { additionalProperties },
     onChange,
+    id,
+    label,
+    description,
+    uiOptions,
   } = props;
 
   const [name, setName] = useState<string>('');
-  const [value, setValue] = useState<string>('');
+  const [newValue, setNewValue] = useState<string>('');
 
-  const handleKeyDown = useCallback(
-    event => {
-      if (event.key.toLowerCase() === 'enter') {
-        event.preventDefault();
+  const handleKeyDown = event => {
+    if (event.key.toLowerCase() === 'enter') {
+      event.preventDefault();
 
-        if (name && !Object.keys(formData).includes(name)) {
-          onChange({ ...formData, [name]: value });
-          setName('');
-          setValue('');
-        }
+      if (name && !Object.keys(value).includes(name)) {
+        onChange({ ...value, [name]: newValue });
+        setName('');
+        setNewValue('');
       }
-    },
-    [formData, onChange, name, setName, setValue, value]
-  );
+    }
+  };
 
-  const handleNameChange = useCallback(
-    name => newName => {
-      const { [name]: value, ...rest } = formData;
-      const newFormData = !(newName || value) ? rest : { ...rest, [newName]: value };
-      onChange(newFormData);
-    },
-    [formData, onChange]
-  );
-  const handleValueChange = useCallback(
-    name => (_, newValue) => {
-      onChange({ ...formData, [name]: newValue || '' });
-    },
-    [formData, onChange]
-  );
-  const handleDropPropertyClick = useCallback(
-    name => () => {
-      const { [name]: _, ...newFormData } = formData;
-      onChange(newFormData);
-    },
-    [formData, onChange]
-  );
+  const handleNameChange = (name: string) => (newName: string) => {
+    const { [name]: currentValue, ...rest } = value;
+    const newFormData = !(newName || currentValue) ? rest : { ...rest, [newName]: currentValue };
+    onChange(newFormData);
+  };
+
+  const handleValueChange = (name: string) => (_, newValue) => {
+    onChange({ ...value, [name]: newValue || '' });
+  };
+
+  const handleDropPropertyClick = (name: string) => () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { [name]: _, ...newFormData } = value;
+    onChange(newFormData);
+  };
 
   return (
-    <BaseField {...props} className="JsonField">
-      <div css={customObjectFieldContainer}>
-        <div css={[customObjectFieldItem, customObjectFieldLabel]}>{formatMessage('Key')}</div>
-        <div css={[customObjectFieldItem, customObjectFieldLabel]}>{formatMessage('Value')}</div>
+    <div className="OpenObjectField">
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <div css={openObjectField.labelContainer}>
+        <div css={openObjectField.label}>
+          <FieldLabel id={`${id}.key`} label={'Key'} />
+        </div>
+        <div css={openObjectField.label}>
+          <FieldLabel id={`${id}.value`} label={'Value'} />
+        </div>
+        <div css={openObjectField.filler} />
       </div>
-      {Object.entries(formData).map(([name, value], index) => {
+      {Object.entries(value).map(([name, value], index) => {
         return (
           <ObjectItem
             key={index}
-            formData={formData}
-            name={name}
-            value={value}
+            formData={value}
+            handleDropPropertyClick={handleDropPropertyClick(name)}
             handleNameChange={handleNameChange(name)}
             handleValueChange={handleValueChange(name)}
-            handleDropPropertyClick={handleDropPropertyClick(name)}
+            name={name}
+            value={value}
           />
         );
       })}
       {additionalProperties && (
-        <div css={customObjectFieldContainer}>
-          <div css={customObjectFieldItem}>
+        <div css={openObjectField.container}>
+          <div css={openObjectField.item}>
             <TextField
               autoComplete="off"
-              onChange={(_, newValue) => setName(newValue || '')}
-              onKeyDown={handleKeyDown}
-              placeholder={formatMessage('Add a new key')}
-              value={name}
+              placeholder={'Add a new key'}
               styles={{
                 root: { margin: '7px 0 7px 0' },
               }}
-              ariaLabel={formatMessage('Key')}
+              value={name}
+              onChange={(_, newValue) => setName(newValue || '')}
+              onKeyDown={handleKeyDown}
             />
           </div>
-          <div css={customObjectFieldItem}>
+          <div css={openObjectField.item}>
             <TextField
               autoComplete="off"
-              onChange={(_, newValue) => setValue(newValue || '')}
-              onKeyDown={handleKeyDown}
-              placeholder={formatMessage('Add a new value')}
-              value={value}
               iconProps={{
                 iconName: 'ReturnKey',
                 style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
               }}
+              placeholder={'Add a new value'}
               styles={{
                 root: { margin: '7px 0 7px 0' },
               }}
-              ariaLabel={formatMessage('Value')}
+              value={newValue}
+              onChange={(_, newValue) => setNewValue(newValue || '')}
+              onKeyDown={handleKeyDown}
             />
           </div>
           <IconButton
-            ariaLabel={formatMessage('Edit Property')}
+            ariaLabel={'Edit Property'}
             disabled={true}
             menuIconProps={{ iconName: 'MoreVertical' }}
             styles={{
@@ -200,6 +206,6 @@ export const CustomObjectField: React.FC<FieldProps> = props => {
           />
         </div>
       )}
-    </BaseField>
+    </div>
   );
 };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx
new file mode 100644
index 0000000000..bf185badfb
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useContext, useMemo } from 'react';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import { MicrosoftIRecognizer } from '@bfc/shared';
+import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import formatMessage from 'format-message';
+
+import PluginContext from '../../PluginContext';
+import { FieldLabel } from '../FieldLabel';
+
+const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props => {
+  const { value, id, label, description, uiOptions } = props;
+  const { shellApi, ...shellData } = useShellApi();
+  const { recognizers } = useContext(PluginContext);
+
+  const options = useMemo(() => {
+    return recognizers.map(r => ({
+      key: r.id,
+      text: typeof r.displayName === 'function' ? r.displayName(value) : r.displayName,
+    }));
+  }, [recognizers]);
+
+  const selectedType = useMemo(() => {
+    const selected = recognizers.filter(r => r.isSelected(value)).map(r => r.id);
+
+    if (selected.length !== 1) {
+      console.error(
+        `Unable to determine selected recognizer.\n
+         Value: ${JSON.stringify(value)}.\n
+         Selected Recognizers: [${selected.join(', ')}]`
+      );
+      return;
+    }
+
+    return selected[0];
+  }, [value]);
+
+  const handleChangeRecognizerType = (_, option?: IDropdownOption): void => {
+    if (option) {
+      const handler = recognizers.find(r => r.id === option.key)?.handleRecognizerChange;
+
+      if (handler) {
+        handler(props, shellData, shellApi);
+      }
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <FieldLabel id={id} label={label} description={description} helpLink={uiOptions?.helpLink} />
+      {selectedType ? (
+        <Dropdown
+          label={formatMessage('Recognizer Type')}
+          options={options}
+          responsiveMode={ResponsiveMode.large}
+          selectedKey={selectedType}
+          onChange={handleChangeRecognizerType}
+        />
+      ) : (
+        `Unable to determine recognizer type from data: ${value}`
+      )}
+    </React.Fragment>
+  );
+};
+
+export { RecognizerField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/RegexIntentField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/RegexIntentField.tsx
new file mode 100644
index 0000000000..f9111b06e2
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/RegexIntentField.tsx
@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import { DialogInfo, RegexRecognizer } from '@bfc/shared';
+
+import { StringField } from './StringField';
+
+function getRegexIntentPattern(currentDialog: DialogInfo, intent: string): string {
+  const recognizer = currentDialog.content.recognizer as RegexRecognizer;
+  let pattern = '';
+
+  if (!recognizer) {
+    return '';
+  }
+
+  if (recognizer.intents) {
+    pattern = recognizer.intents.find(i => i.intent === intent)?.pattern || '';
+  }
+
+  return pattern;
+}
+
+const RegexIntentField: React.FC<FieldProps> = ({ value: intentName, ...rest }) => {
+  const { currentDialog, shellApi } = useShellApi();
+  const [localValue, setLocalValue] = useState(getRegexIntentPattern(currentDialog, intentName));
+  const handleIntentchange = (pattern): void => {
+    setLocalValue(pattern);
+    shellApi.updateRegExIntent(currentDialog.id, intentName, pattern);
+  };
+
+  return <StringField {...rest} label={false} value={localValue} onChange={handleIntentchange} />;
+};
+
+export { RegexIntentField };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/SelectField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/SelectField.tsx
new file mode 100644
index 0000000000..7672d0a3de
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/SelectField.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { Dropdown, IDropdownOption, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
+import { FieldProps } from '@bfc/extension';
+
+import { FieldLabel } from '../FieldLabel';
+
+export const SelectField: React.FC<FieldProps<string | number>> = function SelectField(props) {
+  const { description, enumOptions, id, label, onBlur, onChange, onFocus, value, error, uiOptions } = props;
+
+  const options: IDropdownOption[] = (enumOptions ?? []).map(o => ({
+    key: o?.toString(),
+    text: o?.toString(),
+  }));
+
+  const handleChange = (_e: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
+    if (option) {
+      onChange(option.key);
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  return (
+    <>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <Dropdown
+        errorMessage={error as string}
+        id={id}
+        options={options}
+        responsiveMode={ResponsiveMode.large}
+        selectedKey={value}
+        styles={{
+          label: { fontSize: '10px', fontWeight: '400' },
+          errorMessage: { display: 'none' },
+        }}
+        onBlur={() => onBlur && onBlur(id, value)}
+        onChange={handleChange}
+        onFocus={() => onFocus && onFocus(id, value)}
+      />
+    </>
+  );
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/StringField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/StringField.tsx
new file mode 100644
index 0000000000..848a8f8db1
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/StringField.tsx
@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import { NeutralColors } from '@uifabric/fluent-theme';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+
+import { FieldLabel } from '../FieldLabel';
+
+export const StringField: React.FC<FieldProps<string>> = function StringField(props) {
+  const {
+    id,
+    value = '',
+    onChange,
+    disabled,
+    label,
+    description,
+    placeholder,
+    readonly,
+    transparentBorder,
+    onFocus,
+    onBlur,
+    error,
+    uiOptions,
+  } = props;
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (typeof onFocus === 'function') {
+      e.stopPropagation();
+      onFocus(id, value);
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (typeof onBlur === 'function') {
+      e.stopPropagation();
+      onBlur(id, value);
+    }
+  };
+
+  const handleChange = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+    onChange(newValue);
+  };
+
+  return (
+    <>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <TextField
+        disabled={disabled}
+        errorMessage={error}
+        id={id}
+        placeholder={placeholder}
+        readOnly={readonly}
+        styles={{
+          ...(transparentBorder
+            ? {
+                fieldGroup: {
+                  borderColor: error ? undefined : 'transparent',
+                  transition: 'border-color 0.1s linear',
+                  selectors: {
+                    ':hover': {
+                      borderColor: error ? undefined : NeutralColors.gray30,
+                    },
+                  },
+                },
+              }
+            : {}),
+          root: { width: '100%' },
+          errorMessage: { display: 'none' },
+        }}
+        value={value}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        onFocus={handleFocus}
+      />
+    </>
+  );
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/UnsupportedField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/UnsupportedField.tsx
new file mode 100644
index 0000000000..8fb77c3c7d
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/UnsupportedField.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { FieldProps } from '@bfc/extension';
+import omit from 'lodash/omit';
+
+import { unsupportedField } from './styles';
+
+export const UnsupportedField: React.FC<FieldProps> = function UnsupportedField(props) {
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <React.Fragment>
+      <div css={unsupportedField.container}>
+        {props.label} (Unsupported Field)
+        <Link styles={unsupportedField.link} onClick={() => setShowDetails(prev => !prev)}>
+          Toggle Details
+        </Link>
+      </div>
+      <pre css={unsupportedField.details(!showDetails)}>
+        props: {JSON.stringify(omit(props, ['definitions']), null, 2)}
+      </pre>
+    </React.Fragment>
+  );
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts b/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts
new file mode 100644
index 0000000000..fc8fd2571b
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts
@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export * from './ArrayField';
+export * from './BooleanField';
+export * from './EditableField';
+export * from './NumberField';
+export * from './ObjectArrayField';
+export * from './ObjectField';
+export * from './OneOfField';
+export * from './OpenObjectField';
+export * from './RecognizerField';
+export * from './IntentField';
+export * from './SelectField';
+export * from './StringField';
+export * from './UnsupportedField';
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/styles.ts b/Composer/packages/extensions/adaptive-form/src/components/fields/styles.ts
new file mode 100644
index 0000000000..750621caec
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/styles.ts
@@ -0,0 +1,165 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { css } from '@emotion/core';
+import { NeutralColors } from '@uifabric/fluent-theme';
+import { FontSizes } from '@uifabric/styling';
+
+export const arrayField = {
+  field: css`
+    flex: 1;
+    margin-top: 0;
+    margin-bottom: 0;
+    display: flex;
+  `,
+
+  inputFieldContainer: css`
+    border-top: 1px solid ${NeutralColors.gray30};
+    display: flex;
+    padding: 7px 0px;
+  `,
+};
+
+export const arrayItem = {
+  container: css`
+    border-top: 1px solid ${NeutralColors.gray30};
+    display: flex;
+    padding: 7px 0;
+
+    label: ArrayFieldItemContainer;
+  `,
+
+  field: css`
+    display: flex;
+    flex: 1 1 0%;
+    /* prevents field from overflowing when error present */
+    min-width: 0px;
+
+    label: ArrayFieldItemField;
+  `,
+
+  schemaFieldOverride: (stacked: boolean) => css`
+    display: flex;
+    flex-direction: ${stacked ? 'column' : 'row'};
+    flex: 1;
+    margin: 0;
+    /* prevents field from overflowing when error present */
+    min-width: 0px;
+
+    & + & {
+      margin-left: ${stacked ? 0 : '16px'};
+    }
+  `,
+};
+
+export const objectItemLabel = css`
+  display: flex;
+`;
+
+export const objectItemValueLabel = css`
+  color: ${NeutralColors.gray130};
+  flex: 1;
+  font-size: 14px;
+  margin-left: 7px;
+  & + & {
+    margin-left: 20px;
+  }
+`;
+
+export const objectItemInputField = css`
+  flex: 1;
+  & + & {
+    margin-left: 20px;
+  }
+`;
+
+export const unsupportedField = {
+  container: css`
+    display: flex;
+    justify-content: space-between;
+  `,
+  link: {
+    root: {
+      fontSize: FontSizes.small,
+    },
+  },
+  details: (hidden: boolean) => css`
+    display: block;
+    height: ${hidden ? '0px' : 'auto'};
+    white-space: pre;
+    background: ${NeutralColors.gray30};
+    overflow-x: scroll;
+    overflow-y: none;
+    padding: ${hidden ? '0px' : '1rem'};
+  `,
+};
+
+export const openObjectField = {
+  container: css`
+    border-top: 1px solid ${NeutralColors.gray30};
+    display: flex;
+  `,
+  filler: css`
+    width: 32px;
+  `,
+  item: css`
+    flex: 1;
+
+    & + & {
+      margin-left: 16px;
+    }
+  `,
+  label: css`
+    flex: 1;
+    padding-left: 8px;
+
+    & + & {
+      margin-left: 16px;
+    }
+  `,
+  labelContainer: css`
+    display: flex;
+  `,
+};
+
+export const objectArrayField = {
+  objectItemLabel: css`
+    display: flex;
+  `,
+
+  objectItemValueLabel: css`
+    color: ${NeutralColors.gray130};
+    flex: 1;
+    font-size: 14px;
+    margin-left: 7px;
+    & + & {
+      margin-left: 20px;
+    }
+  `,
+
+  objectItemInputField: css`
+    flex: 1;
+    & + & {
+      margin-left: 20px;
+    }
+  `,
+
+  arrayItemField: css`
+    flex: 1;
+    display: flex;
+    min-width: 0;
+  `,
+
+  inputFieldContainer: css`
+    border-top: 1px solid ${NeutralColors.gray30};
+    display: flex;
+    padding: 7px 0;
+  `,
+};
+
+export const oneOfField = {
+  label: css`
+    display: flex;
+    justify-content: space-between;
+  `,
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/index.ts b/Composer/packages/extensions/adaptive-form/src/components/index.ts
new file mode 100644
index 0000000000..db17f31027
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/index.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export * from './AdaptiveForm';
+export * from './FieldLabel';
+export * from './ErrorMessage';
+export * from './SchemaField';
+export * from './fields';
diff --git a/Composer/packages/extensions/adaptive-form/src/defaultRecognizers.ts b/Composer/packages/extensions/adaptive-form/src/defaultRecognizers.ts
new file mode 100644
index 0000000000..9ae43ba33d
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/defaultRecognizers.ts
@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { RecognizerSchema } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+import formatMessage from 'format-message';
+
+import { RegexIntentField } from './components/fields/RegexIntentField';
+
+const DefaultRecognizers: RecognizerSchema[] = [
+  {
+    id: 'none',
+    displayName: () => formatMessage('None'),
+    isSelected: data => data === undefined,
+    handleRecognizerChange: props => props.onChange(undefined),
+  },
+  {
+    id: SDKTypes.RegexRecognizer,
+    displayName: () => formatMessage('Regular Expression'),
+    editor: RegexIntentField,
+    isSelected: data => {
+      return typeof data === 'object' && data.$type === SDKTypes.RegexRecognizer;
+    },
+    handleRecognizerChange: props => {
+      props.onChange({ $type: SDKTypes.RegexRecognizer, intents: [] });
+    },
+  },
+];
+
+export default DefaultRecognizers;
diff --git a/Composer/packages/extensions/adaptive-form/src/defaultRoleSchema.ts b/Composer/packages/extensions/adaptive-form/src/defaultRoleSchema.ts
new file mode 100644
index 0000000000..3006b022b8
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/defaultRoleSchema.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { RoleSchema } from '@bfc/extension';
+
+const DefaultRoleSchema: RoleSchema = {};
+
+export default DefaultRoleSchema;
diff --git a/Composer/packages/extensions/adaptive-form/src/defaultUiSchema.ts b/Composer/packages/extensions/adaptive-form/src/defaultUiSchema.ts
new file mode 100644
index 0000000000..81539520e0
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/defaultUiSchema.ts
@@ -0,0 +1,189 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+import formatMessage from 'format-message';
+
+import { RecognizerField, IntentField } from './components/fields';
+
+const triggerUiSchema = {
+  order: ['condition', '*'],
+  hidden: ['actions'],
+};
+
+const DefaultUISchema: UISchema = {
+  [SDKTypes.AdaptiveDialog]: {
+    description: 'This configures a data driven dialog via a collection of events and actions.',
+    helpLink: 'https://aka.ms/botframework',
+    order: ['recognizer', '*'],
+    hidden: ['triggers', 'autoEndDialog', 'generator', 'selector', 'schema'],
+    properties: {
+      recognizer: {
+        label: () => formatMessage('Language Understanding'),
+        description: () =>
+          formatMessage(
+            'To understand what the user says, your dialog needs a "Recognizer"; that includes example words and sentences that users may use.'
+          ),
+      },
+    },
+  },
+  [SDKTypes.AttachmentInput]: {
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+  },
+  [SDKTypes.BeginDialog]: {
+    helpLink: 'https://aka.ms/bfc-understanding-dialogs',
+    order: ['dialog', 'options', 'resultProperty', 'includeActivity', '*'],
+  },
+  [SDKTypes.CancelAllDialogs]: {
+    helpLink: 'https://aka.ms/bfc-understanding-dialogs',
+    order: ['dialog', 'property', '*'],
+  },
+  [SDKTypes.ChoiceInput]: {
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+  },
+  [SDKTypes.ConfirmInput]: {
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+  },
+  [SDKTypes.DateTimeInput]: {
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+  },
+  [SDKTypes.DebugBreak]: { label: () => formatMessage('Debug Break') },
+  [SDKTypes.DeleteProperties]: {
+    label: () => formatMessage('Delete Properties'),
+    helpLink: 'https://aka.ms/bfc-using-memory',
+  },
+  [SDKTypes.DeleteProperty]: {
+    label: () => formatMessage('Delete a Property'),
+    helpLink: 'https://aka.ms/bfc-using-memory',
+  },
+  [SDKTypes.DeleteProperties]: {
+    helpLink: 'https://aka.ms/bfc-using-memory',
+  },
+  [SDKTypes.EditActions]: { label: () => formatMessage('Modify active dialog') },
+  [SDKTypes.EditArray]: {
+    label: () => formatMessage('Edit an Array Property'),
+    helpLink: 'https://aka.ms/bfc-using-memory',
+  },
+  [SDKTypes.EmitEvent]: {
+    label: () => formatMessage('Emit a custom event'),
+    helpLink: 'https://aka.ms/bfc-custom-events',
+  },
+  [SDKTypes.EndDialog]: {
+    helpLink: 'https://aka.ms/bfc-understanding-dialogs',
+  },
+  [SDKTypes.EndDialog]: {
+    helpLink: 'https://aka.ms/bfc-understanding-dialogs',
+  },
+  [SDKTypes.Foreach]: {
+    order: ['itemsProperty', '*'],
+    hidden: ['actions'],
+    helpLink: 'https://aka.ms/bfc-controlling-conversation-flow',
+  },
+  [SDKTypes.ForeachPage]: {
+    order: ['itemsProperty', 'pageSize', '*'],
+    hidden: ['actions'],
+    helpLink: 'https://aka.ms/bfc-controlling-conversation-flow',
+  },
+  [SDKTypes.HttpRequest]: {
+    order: ['method', 'url', 'body', 'headers', '*'],
+    helpLink: 'https://aka.ms/bfc-using-http',
+  },
+  [SDKTypes.IfCondition]: {
+    hidden: ['actions', 'elseActions'],
+    helpLink: 'https://aka.ms/bfc-controlling-conversation-flow',
+  },
+  [SDKTypes.LogAction]: {
+    helpLink: 'https://aka.ms/bfc-debugging-bots',
+  },
+  [SDKTypes.LuisRecognizer]: {
+    helpLink: 'https://aka.ms/BFC-Using-LU',
+  },
+  [SDKTypes.MultiLanguageRecognizer]: {
+    helpLink: 'https://aka.ms/BFC-Using-LU',
+  },
+  [SDKTypes.NumberInput]: {
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+  },
+  [SDKTypes.OAuthInput]: {
+    helpLink: 'https://aka.ms/bfc-using-oauth',
+  },
+  [SDKTypes.OAuthInput]: { order: ['connectionName', '*'] },
+  [SDKTypes.OnActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnBeginDialog]: { ...triggerUiSchema },
+  [SDKTypes.OnCancelDialog]: { ...triggerUiSchema },
+  [SDKTypes.OnCondition]: { ...triggerUiSchema },
+  [SDKTypes.OnConversationUpdateActivity]: {
+    label: 'Greeting',
+    description: 'Handle the events fired when a user begins a new conversation with the bot.',
+    helpLink:
+      'https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-conversations?view=azure-bot-service-4.0#conversation-lifetime',
+    ...triggerUiSchema,
+  },
+  [SDKTypes.OnCustomEvent]: { ...triggerUiSchema },
+  [SDKTypes.OnDialogEvent]: { ...triggerUiSchema },
+  [SDKTypes.OnEndOfConversationActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnError]: { ...triggerUiSchema },
+  [SDKTypes.OnEventActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnHandoffActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnIntent]: {
+    order: ['intent', 'condition', 'entities', '*'],
+    hidden: ['actions'],
+    properties: {
+      intent: {
+        field: IntentField,
+      },
+    },
+  },
+  [SDKTypes.OnInvokeActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnMessageActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnMessageDeleteActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnMessageReactionActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnMessageUpdateActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnRepromptDialog]: { ...triggerUiSchema },
+  [SDKTypes.OnTypingActivity]: { ...triggerUiSchema },
+  [SDKTypes.OnUnknownIntent]: { ...triggerUiSchema },
+  [SDKTypes.QnAMakerDialog]: {
+    helpLink: 'https://aka.ms/bfc-using-QnA',
+  },
+  [SDKTypes.Recognizer]: {
+    field: RecognizerField,
+    helpLink: 'https://aka.ms/BFC-Using-LU',
+  },
+  [SDKTypes.RegexRecognizer]: { hidden: ['entities'] },
+  [SDKTypes.RepeatDialog]: {
+    helpLink: 'https://aka.ms/bfc-understanding-dialogs',
+    order: ['options', 'includeActivity', '*'],
+  },
+  [SDKTypes.ReplaceDialog]: {
+    helpLink: 'https://aka.ms/bfc-understanding-dialogs',
+    order: ['dialog', 'options', 'includeActivity', '*'],
+  },
+  [SDKTypes.SendActivity]: {
+    helpLink: 'https://aka.ms/bfc-send-activity',
+    order: ['activity', '*'],
+  },
+  [SDKTypes.SetProperty]: {
+    helpLink: 'https://aka.ms/bfc-using-memory',
+    label: () => formatMessage('Set a Property'),
+  },
+  [SDKTypes.SetProperties]: {
+    helpLink: 'https://aka.ms/bfc-using-memory',
+    label: () => formatMessage('Set Properties'),
+  },
+  [SDKTypes.SkillDialog]: {
+    helpLink: 'https://aka.ms/bfc-call-skill',
+  },
+  [SDKTypes.SwitchCondition]: {
+    helpLink: 'https://aka.ms/bfc-controlling-conversation-flow',
+    hidden: ['default'],
+    properties: { cases: { hidden: ['actions'] } },
+  },
+  [SDKTypes.TextInput]: {
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+  },
+  [SDKTypes.TraceActivity]: {
+    helpLink: 'https://aka.ms/bfc-debugging-bots',
+  },
+};
+
+export default DefaultUISchema;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/NullField.tsx b/Composer/packages/extensions/adaptive-form/src/hooks/index.ts
similarity index 61%
rename from Composer/packages/extensions/obiformeditor/src/Form/fields/NullField.tsx
rename to Composer/packages/extensions/adaptive-form/src/hooks/index.ts
index 88d0b61392..830c91180f 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/NullField.tsx
+++ b/Composer/packages/extensions/adaptive-form/src/hooks/index.ts
@@ -1,6 +1,4 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export function NullField() {
-  return null;
-}
+export * from './usePluginConfig';
diff --git a/Composer/packages/extensions/adaptive-form/src/hooks/usePluginConfig.ts b/Composer/packages/extensions/adaptive-form/src/hooks/usePluginConfig.ts
new file mode 100644
index 0000000000..c72973b417
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/hooks/usePluginConfig.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useContext } from 'react';
+
+import PluginContext from '../PluginContext';
+
+export function usePluginConfig() {
+  return useContext(PluginContext);
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/index.ts b/Composer/packages/extensions/adaptive-form/src/index.ts
new file mode 100644
index 0000000000..f3782792b5
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/index.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { AdaptiveForm } from './components';
+
+export * from './components';
+export * from './hooks';
+export * from './utils';
+
+export default AdaptiveForm;
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/__tests__/arrayUtils.test.ts b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/arrayUtils.test.ts
new file mode 100644
index 0000000000..5980c4f05a
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/arrayUtils.test.ts
@@ -0,0 +1,80 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { ArrayItem, getArrayItemProps } from '../arrayUtils';
+
+describe('getArrayItemProps', () => {
+  let onChange: jest.Mock;
+  const value: ArrayItem[] = [
+    { id: '1', value: 1 },
+    { id: '2', value: 2 },
+    { id: '3', value: 3 },
+  ];
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+
+  describe('canRemove', () => {
+    it('always returns true', () => {
+      expect(getArrayItemProps(value, 0, onChange).canRemove).toBe(true);
+    });
+  });
+
+  describe('canMoveDown', () => {
+    it('returns true when item is not last', () => {
+      expect(getArrayItemProps(value, 0, onChange).canMoveDown).toBe(true);
+    });
+
+    it('returns false when item is last', () => {
+      expect(getArrayItemProps(value, 2, onChange).canMoveDown).toBe(false);
+    });
+  });
+
+  describe('canMoveUp', () => {
+    it('returns truen when item is not first', () => {
+      expect(getArrayItemProps(value, 1, onChange).canMoveUp).toBe(true);
+    });
+
+    it('returns false when item is first', () => {
+      expect(getArrayItemProps(value, 0, onChange).canMoveUp).toBe(false);
+    });
+  });
+
+  describe('onItemChange', () => {
+    it('invokes onChange with updated item', () => {
+      const { onChange: onItemChange } = getArrayItemProps(value, 1, onChange);
+      onItemChange(4);
+      expect(onChange).toHaveBeenCalledWith([
+        { id: '1', value: 1 },
+        { id: '2', value: 4 },
+        { id: '3', value: 3 },
+      ]);
+      expect(onChange.mock.calls[0][0]).not.toBe(value);
+    });
+  });
+
+  describe('onReorder', () => {
+    it('swaps two items', () => {
+      const { onReorder } = getArrayItemProps(value, 0, onChange);
+      onReorder(1);
+      expect(onChange).toHaveBeenCalledWith([
+        { id: '2', value: 2 },
+        { id: '1', value: 1 },
+        { id: '3', value: 3 },
+      ]);
+      expect(onChange.mock.calls[0][0]).not.toBe(value);
+    });
+  });
+
+  describe('onRemove', () => {
+    it('removes the item', () => {
+      const { onRemove } = getArrayItemProps(value, 1, onChange);
+      onRemove();
+      expect(onChange).toHaveBeenCalledWith([
+        { id: '1', value: 1 },
+        { id: '3', value: 3 },
+      ]);
+      expect(onChange.mock.calls[0][0]).not.toBe(value);
+    });
+  });
+});
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/__tests__/getOrderedProperties.test.ts b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/getOrderedProperties.test.ts
new file mode 100644
index 0000000000..99c5b22829
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/getOrderedProperties.test.ts
@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { JSONSchema7 } from 'json-schema';
+
+import { getOrderedProperties } from '../getOrderedProperties';
+
+const schema = {
+  properties: {
+    one: { type: 'string' },
+    two: { type: 'string' },
+    three: { type: 'number' },
+    four: { type: 'object' },
+    five: { type: 'object' },
+    six: { type: 'object' },
+    $kind: { type: 'string' },
+  },
+} as JSONSchema7;
+const data = 'form data';
+
+describe('getOrderedProperties', () => {
+  it('excludes fields according to hidden option', () => {
+    const expectedResult = ['one', 'three', 'four', ['five', 'six']];
+
+    expect(getOrderedProperties(schema, { hidden: ['two'], order: ['two', '*', ['five', 'six']] }, data)).toEqual(
+      expectedResult
+    );
+
+    expect(getOrderedProperties(schema, { hidden: () => ['two'], order: ['two', '*', ['five', 'six']] }, data)).toEqual(
+      expectedResult
+    );
+  });
+
+  it('sorts according to order option', () => {
+    const expectedResult = ['three', 'one', 'four', 'five', 'six', 'two'];
+
+    expect(getOrderedProperties(schema, { order: ['three', '*', 'two'] }, data)).toEqual(expectedResult);
+
+    expect(getOrderedProperties(schema, { order: () => ['three', '*', 'two'] }, data)).toEqual(expectedResult);
+  });
+
+  it("excludes fields that don't exist in the schema", () => {
+    const expectedResult = ['three', 'one', 'four', 'five', 'six', 'two'];
+
+    expect(getOrderedProperties(schema, { order: ['three', '*', 'two', 'seven'] }, data)).toEqual(expectedResult);
+
+    expect(getOrderedProperties(schema, { order: () => ['three', '*', 'two', 'seven'] }, data)).toEqual(expectedResult);
+  });
+
+  it('throws an exception if there is no wildcard in order option', () => {
+    expect(() => getOrderedProperties(schema, { order: ['three', 'two'] }, data)).toThrow('no wildcard');
+  });
+
+  it('throws an exception if there are multiple wildcards in order option', () => {
+    expect(() => getOrderedProperties(schema, { order: ['three', '*', 'two', '*'] }, data)).toThrow(
+      'multiple wildcards'
+    );
+  });
+});
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/__tests__/getUISchema.test.ts b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/getUISchema.test.ts
new file mode 100644
index 0000000000..663fe7669b
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/getUISchema.test.ts
@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema, JSONSchema7 } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+
+import { getUISchema } from '../getUISchema';
+
+describe('getUISchema', () => {
+  it('returns empty object when type schema not found', () => {
+    // @ts-ignore - Intentionally passing in an invalid value
+    expect(getUISchema('SomeDialog')).toEqual({});
+  });
+
+  it('returns UI schema for $type', () => {
+    const schema: JSONSchema7 = {
+      properties: {
+        $kind: {
+          const: SDKTypes.AdaptiveDialog,
+        },
+      },
+    };
+    expect(getUISchema(schema)).toMatchInlineSnapshot(`Object {}`);
+  });
+
+  it('merges overrides into default schema', () => {
+    const schema: JSONSchema7 = {
+      properties: {
+        $kind: {
+          const: SDKTypes.AdaptiveDialog,
+        },
+      },
+    };
+
+    const uiSchema: UISchema = {
+      [SDKTypes.AdaptiveDialog]: {
+        order: ['*', 'recognizer'],
+        label: 'First Label',
+      },
+    };
+    expect(getUISchema(schema, uiSchema)).toMatchInlineSnapshot(`
+Object {
+  "label": "First Label",
+  "order": Array [
+    "*",
+    "recognizer",
+  ],
+}
+`);
+  });
+});
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/__tests__/mergePluginConfigs.test.ts b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/mergePluginConfigs.test.ts
new file mode 100644
index 0000000000..aecff61ec4
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/mergePluginConfigs.test.ts
@@ -0,0 +1,464 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { SDKTypes, SDKRoles, SDKKinds } from '@bfc/shared';
+
+import { mergePluginConfigs } from '../mergePluginConfigs';
+import DefaultUISchema from '../../defaultUiSchema';
+import DefaultRoleSchema from '../../defaultRoleSchema';
+import DefaultRecognizers from '../../defaultRecognizers';
+
+describe('mergePluginConfigs', () => {
+  it('returns default ui schema when no overrides', () => {
+    expect(mergePluginConfigs()).toEqual({
+      uiSchema: DefaultUISchema,
+      roleSchema: DefaultRoleSchema,
+      recognizers: DefaultRecognizers,
+    });
+  });
+
+  it('merges overrides into the defaults', () => {
+    const overrides = {
+      uiSchema: {
+        [SDKTypes.AdaptiveDialog]: {
+          hidden: ['recognizer'],
+          properties: {
+            triggers: {
+              label: 'Foo',
+            },
+          },
+        },
+      },
+      roleSchema: {
+        [SDKRoles.expression]: {
+          label: 'expression label',
+        },
+      },
+      kindSchema: {
+        [SDKKinds.IDialog]: {
+          hidden: ['foo'],
+        },
+      },
+    };
+
+    expect(mergePluginConfigs(overrides)).toMatchInlineSnapshot(`
+Object {
+  "kindSchema": Object {
+    "Microsoft.IDialog": Object {
+      "hidden": Array [
+        "foo",
+      ],
+    },
+  },
+  "recognizers": Array [
+    Object {
+      "displayName": [Function],
+      "handleRecognizerChange": [Function],
+      "id": "none",
+      "isSelected": [Function],
+    },
+    Object {
+      "displayName": [Function],
+      "editor": [Function],
+      "handleRecognizerChange": [Function],
+      "id": "Microsoft.RegexRecognizer",
+      "isSelected": [Function],
+    },
+  ],
+  "roleSchema": Object {
+    "expression": Object {
+      "label": "expression label",
+    },
+  },
+  "uiSchema": Object {
+    "Microsoft.AdaptiveDialog": Object {
+      "description": "This configures a data driven dialog via a collection of events and actions.",
+      "helpLink": "https://aka.ms/botframework",
+      "hidden": Array [
+        "recognizer",
+      ],
+      "order": Array [
+        "recognizer",
+        "*",
+      ],
+      "properties": Object {
+        "recognizer": Object {
+          "description": [Function],
+          "label": [Function],
+        },
+        "triggers": Object {
+          "label": "Foo",
+        },
+      },
+    },
+    "Microsoft.AttachmentInput": Object {
+      "helpLink": "https://aka.ms/bfc-ask-for-user-input",
+    },
+    "Microsoft.BeginDialog": Object {
+      "helpLink": "https://aka.ms/bfc-understanding-dialogs",
+      "order": Array [
+        "dialog",
+        "options",
+        "resultProperty",
+        "includeActivity",
+        "*",
+      ],
+    },
+    "Microsoft.CancelAllDialogs": Object {
+      "helpLink": "https://aka.ms/bfc-understanding-dialogs",
+      "order": Array [
+        "dialog",
+        "property",
+        "*",
+      ],
+    },
+    "Microsoft.ChoiceInput": Object {
+      "helpLink": "https://aka.ms/bfc-ask-for-user-input",
+    },
+    "Microsoft.ConfirmInput": Object {
+      "helpLink": "https://aka.ms/bfc-ask-for-user-input",
+    },
+    "Microsoft.DateTimeInput": Object {
+      "helpLink": "https://aka.ms/bfc-ask-for-user-input",
+    },
+    "Microsoft.DebugBreak": Object {
+      "label": [Function],
+    },
+    "Microsoft.DeleteProperties": Object {
+      "helpLink": "https://aka.ms/bfc-using-memory",
+    },
+    "Microsoft.DeleteProperty": Object {
+      "helpLink": "https://aka.ms/bfc-using-memory",
+      "label": [Function],
+    },
+    "Microsoft.EditActions": Object {
+      "label": [Function],
+    },
+    "Microsoft.EditArray": Object {
+      "helpLink": "https://aka.ms/bfc-using-memory",
+      "label": [Function],
+    },
+    "Microsoft.EmitEvent": Object {
+      "helpLink": "https://aka.ms/bfc-custom-events",
+      "label": [Function],
+    },
+    "Microsoft.EndDialog": Object {
+      "helpLink": "https://aka.ms/bfc-understanding-dialogs",
+    },
+    "Microsoft.Foreach": Object {
+      "helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "itemsProperty",
+        "*",
+      ],
+    },
+    "Microsoft.ForeachPage": Object {
+      "helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "itemsProperty",
+        "pageSize",
+        "*",
+      ],
+    },
+    "Microsoft.HttpRequest": Object {
+      "helpLink": "https://aka.ms/bfc-using-http",
+      "order": Array [
+        "method",
+        "url",
+        "body",
+        "headers",
+        "*",
+      ],
+    },
+    "Microsoft.IfCondition": Object {
+      "helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
+      "hidden": Array [
+        "actions",
+        "elseActions",
+      ],
+    },
+    "Microsoft.LogAction": Object {
+      "helpLink": "https://aka.ms/bfc-debugging-bots",
+    },
+    "Microsoft.LuisRecognizer": Object {
+      "helpLink": "https://aka.ms/BFC-Using-LU",
+    },
+    "Microsoft.MultiLanguageRecognizer": Object {
+      "helpLink": "https://aka.ms/BFC-Using-LU",
+    },
+    "Microsoft.NumberInput": Object {
+      "helpLink": "https://aka.ms/bfc-ask-for-user-input",
+    },
+    "Microsoft.OAuthInput": Object {
+      "order": Array [
+        "connectionName",
+        "*",
+      ],
+    },
+    "Microsoft.OnActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnBeginDialog": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnCancelDialog": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnCondition": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnConversationUpdateActivity": Object {
+      "description": "Handle the events fired when a user begins a new conversation with the bot.",
+      "helpLink": "https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-conversations?view=azure-bot-service-4.0#conversation-lifetime",
+      "hidden": Array [
+        "actions",
+      ],
+      "label": "Greeting",
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnCustomEvent": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnDialogEvent": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnEndOfConversationActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnError": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnEventActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnHandoffActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnIntent": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "intent",
+        "condition",
+        "entities",
+        "*",
+      ],
+      "properties": Object {
+        "intent": Object {
+          "field": [Function],
+        },
+      },
+    },
+    "Microsoft.OnInvokeActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnMessageActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnMessageDeleteActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnMessageReactionActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnMessageUpdateActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnRepromptDialog": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnTypingActivity": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.OnUnknownIntent": Object {
+      "hidden": Array [
+        "actions",
+      ],
+      "order": Array [
+        "condition",
+        "*",
+      ],
+    },
+    "Microsoft.QnAMakerDialog": Object {
+      "helpLink": "https://aka.ms/bfc-using-QnA",
+    },
+    "Microsoft.Recognizer": Object {
+      "field": [Function],
+      "helpLink": "https://aka.ms/BFC-Using-LU",
+    },
+    "Microsoft.RegexRecognizer": Object {
+      "hidden": Array [
+        "entities",
+      ],
+    },
+    "Microsoft.RepeatDialog": Object {
+      "helpLink": "https://aka.ms/bfc-understanding-dialogs",
+      "order": Array [
+        "options",
+        "includeActivity",
+        "*",
+      ],
+    },
+    "Microsoft.ReplaceDialog": Object {
+      "helpLink": "https://aka.ms/bfc-understanding-dialogs",
+      "order": Array [
+        "dialog",
+        "options",
+        "includeActivity",
+        "*",
+      ],
+    },
+    "Microsoft.SendActivity": Object {
+      "helpLink": "https://aka.ms/bfc-send-activity",
+      "order": Array [
+        "activity",
+        "*",
+      ],
+    },
+    "Microsoft.SetProperties": Object {
+      "helpLink": "https://aka.ms/bfc-using-memory",
+      "label": [Function],
+    },
+    "Microsoft.SetProperty": Object {
+      "helpLink": "https://aka.ms/bfc-using-memory",
+      "label": [Function],
+    },
+    "Microsoft.SkillDialog": Object {
+      "helpLink": "https://aka.ms/bfc-call-skill",
+    },
+    "Microsoft.SwitchCondition": Object {
+      "helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
+      "hidden": Array [
+        "default",
+      ],
+      "properties": Object {
+        "cases": Object {
+          "hidden": Array [
+            "actions",
+          ],
+        },
+      },
+    },
+    "Microsoft.TextInput": Object {
+      "helpLink": "https://aka.ms/bfc-ask-for-user-input",
+    },
+    "Microsoft.TraceActivity": Object {
+      "helpLink": "https://aka.ms/bfc-debugging-bots",
+    },
+  },
+}
+`);
+  });
+});
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/__tests__/resolveFieldWidget.test.ts b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/resolveFieldWidget.test.ts
new file mode 100644
index 0000000000..2f322ffd2c
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/resolveFieldWidget.test.ts
@@ -0,0 +1,206 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import * as DefaultFields from '../../components/fields';
+import { resolveFieldWidget } from '../resolveFieldWidget';
+
+const TestField = () => 'test field';
+
+describe('resolveFieldWidget', () => {
+  describe('ui option field', () => {
+    it('returns field override if present', () => {
+      const uiOptions = {
+        field: TestField,
+      };
+
+      const schema = {
+        type: 'string' as const,
+      };
+
+      // @ts-ignore
+      expect(resolveFieldWidget(schema, uiOptions)).toEqual(TestField);
+    });
+  });
+
+  describe('schema.$role', () => {
+    it('uses global overrides', () => {
+      const schema = {
+        type: 'string' as const,
+        $role: 'expression',
+      };
+
+      const globalSchema = {
+        roleSchema: {
+          expression: {
+            field: DefaultFields.StringField,
+          },
+        },
+        uiSchema: {},
+        recognizers: [],
+      };
+
+      expect(resolveFieldWidget(schema, {}, globalSchema)).toEqual(DefaultFields.StringField);
+    });
+  });
+
+  describe('schema.$kind', () => {
+    it('uses global overrides', () => {
+      const schema = {
+        type: 'string' as const,
+        $kind: 'Microsoft.Recognizer',
+      };
+
+      const globalSchema = {
+        roleSchema: {},
+        uiSchema: {
+          'Microsoft.Recognizer': {
+            field: DefaultFields.RecognizerField,
+          },
+        },
+        recognizers: [],
+      };
+
+      expect(resolveFieldWidget(schema, {}, globalSchema)).toEqual(DefaultFields.RecognizerField);
+    });
+  });
+
+  describe('schema: oneOf', () => {
+    it('returns OneOfField', () => {
+      const schema = {
+        oneOf: [
+          {
+            type: 'number' as const,
+          },
+          {
+            type: 'string' as const,
+          },
+        ],
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.OneOfField);
+    });
+  });
+
+  describe('type: any[]', () => {
+    it('returns OneOfField', () => {
+      const schema = {
+        type: ['string', 'number', 'boolean'],
+      };
+
+      // @ts-ignore
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.OneOfField);
+    });
+  });
+
+  describe('type: string', () => {
+    it('returns StringField', () => {
+      const schema = {
+        type: 'string' as const,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.StringField);
+    });
+
+    it('returns SelectField with an enum', () => {
+      const schema = {
+        type: 'string' as const,
+        enum: ['one', 'two', 'three'],
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.SelectField);
+    });
+  });
+
+  describe('type: integer', () => {
+    it('returns NumberField', () => {
+      const schema = {
+        type: 'integer' as const,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.NumberField);
+    });
+  });
+
+  describe('type: number', () => {
+    it('returns NumberField', () => {
+      const schema = {
+        type: 'number' as const,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.NumberField);
+    });
+  });
+
+  describe('type: boolean', () => {
+    it('returns BooleanField', () => {
+      const schema = {
+        type: 'boolean' as const,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.BooleanField);
+    });
+  });
+
+  describe('type: array', () => {
+    it('returns ArrayField', () => {
+      const schema = {
+        type: 'array' as const,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.ArrayField);
+    });
+
+    it('returns ObjectArrayField when item type is object', () => {
+      const schema = {
+        type: 'array' as const,
+        items: {
+          type: 'object' as const,
+        },
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.ObjectArrayField);
+    });
+
+    it('can handle different items schemas', () => {
+      const stringArray = {
+        type: 'array' as const,
+        items: [
+          {
+            type: 'string' as const,
+          },
+        ],
+      };
+
+      expect(resolveFieldWidget(stringArray)).toEqual(DefaultFields.ArrayField);
+
+      const objectArray = {
+        type: 'array' as const,
+        items: [
+          {
+            type: 'object' as const,
+          },
+        ],
+      };
+
+      expect(resolveFieldWidget(objectArray)).toEqual(DefaultFields.ObjectArrayField);
+    });
+  });
+
+  describe('type: object', () => {
+    it('returns ObjectField by default', () => {
+      const schema = {
+        type: 'object' as const,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.ObjectField);
+    });
+
+    it('returns OpenObjectField when additional properties are allowed', () => {
+      const schema = {
+        type: 'object' as const,
+        additionalProperties: true,
+      };
+
+      expect(resolveFieldWidget(schema)).toEqual(DefaultFields.OpenObjectField);
+    });
+  });
+});
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/__tests__/uiOptionsHelpers.test.ts b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/uiOptionsHelpers.test.ts
new file mode 100644
index 0000000000..eac00bef12
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/__tests__/uiOptionsHelpers.test.ts
@@ -0,0 +1,93 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { FieldProps, UIOptions } from '@bfc/extension';
+
+import { getUiLabel, getUiDescription, getUiPlaceholder } from '../uiOptionsHelpers';
+
+let props;
+
+beforeEach(() => {
+  props = {
+    label: 'prop label',
+    description: 'prop description',
+    placeholder: 'prop placeholder',
+    value: 'some value',
+    name: 'prop name',
+    schema: {
+      title: 'schema title',
+      description: 'schema description',
+    },
+    uiOptions: {},
+  } as FieldProps;
+});
+
+describe('getUiLabel', () => {
+  it('returns false if the label prop is false', () => {
+    expect(getUiLabel({ ...props, label: false })).toBe(false);
+  });
+
+  it('invokes ui options label if a function', () => {
+    const uiOptions = { label: jest.fn() };
+    uiOptions.label.mockReturnValue('ui option label');
+    expect(getUiLabel({ ...props, uiOptions })).toEqual('ui option label');
+
+    expect(uiOptions.label).toHaveBeenCalledWith(props.value);
+  });
+
+  it('returns ui options label if it is not a function', () => {
+    let uiOptions: UIOptions = { label: 'ui option label' };
+    expect(getUiLabel({ ...props, uiOptions })).toEqual('ui option label');
+
+    uiOptions = { label: false };
+    expect(getUiLabel({ ...props, uiOptions })).toBe(false);
+  });
+
+  it('falls back to prop label, schema title, or name', () => {
+    expect(getUiLabel(props)).toEqual('prop label');
+    expect(getUiLabel({ ...props, label: undefined })).toEqual('Schema Title');
+    expect(getUiLabel({ ...props, label: undefined, schema: { title: undefined } })).toEqual('Prop Name');
+  });
+});
+
+describe('getUiDescription', () => {
+  it('invokes ui options description if a function', () => {
+    const uiOptions = { description: jest.fn() };
+    uiOptions.description.mockReturnValue('ui option description');
+    expect(getUiDescription({ ...props, uiOptions })).toEqual('ui option description');
+
+    expect(uiOptions.description).toHaveBeenCalledWith(props.value);
+  });
+
+  it('returns ui options description if it is not a function', () => {
+    const uiOptions = { description: 'ui option description' };
+    expect(getUiDescription({ ...props, uiOptions })).toEqual('ui option description');
+  });
+
+  it('falls back to prop description or schema description', () => {
+    expect(getUiDescription(props)).toEqual('prop description');
+    expect(getUiDescription({ ...props, description: undefined })).toEqual('schema description');
+  });
+});
+
+describe('getUiPlaceholder', () => {
+  it('invokes ui options placeholder if a function', () => {
+    const uiOptions = { placeholder: jest.fn() };
+    uiOptions.placeholder.mockReturnValue('ui option placeholder');
+    expect(getUiPlaceholder({ ...props, uiOptions })).toEqual('ui option placeholder');
+
+    expect(uiOptions.placeholder).toHaveBeenCalledWith(props.value);
+  });
+
+  it('returns ui options placeholder if it is not a function', () => {
+    const uiOptions = { placeholder: 'ui option placeholder' };
+    expect(getUiPlaceholder({ ...props, uiOptions })).toEqual('ui option placeholder');
+  });
+
+  it('falls back to prop placeholder or schema examples', () => {
+    expect(getUiPlaceholder(props)).toEqual('prop placeholder');
+    expect(getUiPlaceholder({ ...props, placeholder: undefined, schema: { examples: ['one', 'two'] } })).toEqual(
+      'ex. one, two'
+    );
+  });
+});
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/arrayUtils.ts b/Composer/packages/extensions/adaptive-form/src/utils/arrayUtils.ts
new file mode 100644
index 0000000000..83749f9519
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/arrayUtils.ts
@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { generateUniqueId } from '@bfc/shared';
+import { ChangeHandler } from '@bfc/extension';
+import { useState } from 'react';
+
+type ArrayChangeHandler = (items: ArrayItem[]) => void;
+
+export interface ArrayItem {
+  id: string;
+  value: any;
+}
+
+interface ArrayItemState {
+  arrayItems: ArrayItem[];
+  handleChange: ArrayChangeHandler;
+  addItem: (newItem: any) => void;
+}
+
+const generateArrayItems = (value: any[]): ArrayItem[] => {
+  return value.map(i => ({
+    id: generateUniqueId(),
+    value: i,
+  }));
+};
+
+const createArrayItem = (value: any): ArrayItem => {
+  return {
+    id: generateUniqueId(),
+    value,
+  };
+};
+
+export const getArrayItemProps = (items: ArrayItem[], index: number, onChange: ArrayChangeHandler) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onItemChange = (newValue: any) => {
+    const updated = items.map((item, i) => {
+      if (index === i) {
+        return { ...item, value: newValue };
+      }
+
+      return item;
+    });
+    onChange(updated);
+  };
+
+  const onReorder = (aIdx: number) => {
+    const copy = [...items];
+    const tmp = copy[index];
+    copy[index] = copy[aIdx];
+    copy[aIdx] = tmp;
+    onChange(copy);
+  };
+
+  const onRemove = () => {
+    const newData = items.slice(0, index).concat(items.slice(index + 1));
+    onChange(newData);
+  };
+
+  return {
+    canRemove: true,
+    canMoveDown: index < items.length - 1,
+    canMoveUp: index > 0,
+    index,
+    onChange: onItemChange,
+    onReorder,
+    onRemove,
+  };
+};
+
+export function useArrayItems(items: any[], onChange: ChangeHandler<any[]>): ArrayItemState {
+  const [cache, setCache] = useState<ArrayItem[]>(generateArrayItems(items));
+
+  const handleChange = (newItems: ArrayItem[]) => {
+    setCache(newItems);
+    onChange(newItems.map(({ value }) => value));
+  };
+
+  const addItem = (newItem: any) => {
+    handleChange(cache.concat(createArrayItem(newItem)));
+  };
+
+  return { arrayItems: cache, handleChange, addItem };
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/getAdaptiveType.ts b/Composer/packages/extensions/adaptive-form/src/utils/getAdaptiveType.ts
new file mode 100644
index 0000000000..d1c727c09b
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/getAdaptiveType.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import get from 'lodash/get';
+
+export function getAdaptiveType(data: any) {
+  return get(data, '$type');
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/getOrderedProperties.ts b/Composer/packages/extensions/adaptive-form/src/utils/getOrderedProperties.ts
new file mode 100644
index 0000000000..1b08c90a9a
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/getOrderedProperties.ts
@@ -0,0 +1,72 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UIOptions, JSONSchema7 } from '@bfc/extension';
+import cloneDeep from 'lodash/cloneDeep';
+
+const globalHiddenProperties = ['$type', '$id', '$copy', '$designer', 'id'];
+
+type OrderConfig = (string | [string, string])[];
+
+export function getOrderedProperties(
+  schema: JSONSchema7,
+  uiOptions: UIOptions,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any
+): OrderConfig {
+  const { hidden: hidden, order: order = ['*'] } = cloneDeep(uiOptions);
+
+  const hiddenFieldSet = new Set(typeof hidden === 'function' ? hidden(data) : hidden || []);
+  globalHiddenProperties.forEach(f => hiddenFieldSet.add(f));
+
+  const uiOrder = typeof order === 'function' ? order(data) : order || [];
+  const orderedFieldSet = new Set<string>();
+  const orderedFields = uiOrder.reduce((allFields, field) => {
+    if (field === '*') {
+      allFields.push(field);
+      return allFields;
+    }
+
+    if (Array.isArray(field)) {
+      const fieldTuple: string[] = [];
+      for (const f of field) {
+        if (!hiddenFieldSet.has(f) && schema.properties?.[f]) {
+          orderedFieldSet.add(f);
+          fieldTuple.push(f);
+        }
+      }
+
+      if (fieldTuple.length === 2) {
+        allFields.push(fieldTuple as [string, string]);
+      } else {
+        allFields.push(...fieldTuple);
+      }
+    } else {
+      if (!hiddenFieldSet.has(field) && schema.properties?.[field]) {
+        orderedFieldSet.add(field);
+        allFields.push(field);
+      }
+    }
+
+    return allFields;
+  }, [] as OrderConfig);
+
+  const restIdx = orderedFields.indexOf('*');
+
+  let errorMsg = '';
+  if (restIdx === -1) {
+    errorMsg = 'no wildcard';
+  } else if (restIdx !== orderedFields.lastIndexOf('*')) {
+    errorMsg = 'multiple wildcards';
+  }
+
+  if (errorMsg) {
+    throw new Error(`Error in ui schema for ${schema.title}: ${errorMsg}\n${JSON.stringify(uiOptions, null, 2)}`);
+  }
+
+  const restFields = Object.keys(schema.properties || {}).filter(p => {
+    return !orderedFieldSet.has(p) && !hiddenFieldSet.has(p) && !p.startsWith('$');
+  });
+
+  orderedFields.splice(restIdx, 1, ...restFields);
+  return orderedFields;
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/getUISchema.ts b/Composer/packages/extensions/adaptive-form/src/utils/getUISchema.ts
new file mode 100644
index 0000000000..b057f9ddf2
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/getUISchema.ts
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema, UIOptions, JSONSchema7 } from '@bfc/extension';
+/**
+ * Merges overrides into default ui schema and returns the UIOptions
+ */
+export function getUISchema(schema?: JSONSchema7, uiSchema?: UISchema): UIOptions {
+  const { $kind } = schema?.properties || {};
+
+  const kind = $kind && typeof $kind === 'object' && ($kind.const as string);
+
+  return uiSchema && kind && uiSchema[kind] ? uiSchema[kind] : {};
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/index.ts b/Composer/packages/extensions/adaptive-form/src/utils/index.ts
new file mode 100644
index 0000000000..181336d373
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/index.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export * from './arrayUtils';
+export * from './getAdaptiveType';
+export * from './getOrderedProperties';
+export * from './getUISchema';
+export * from './mergePluginConfigs';
+export * from './resolveBaseSchema';
+export * from './resolveFieldWidget';
+export * from './resolvePropertySchema';
+export * from './resolveRef';
+export * from './uiOptionsHelpers';
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/mergePluginConfigs.ts b/Composer/packages/extensions/adaptive-form/src/utils/mergePluginConfigs.ts
new file mode 100644
index 0000000000..5de66a75cb
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/mergePluginConfigs.ts
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { PluginConfig } from '@bfc/extension';
+import mergeWith from 'lodash/mergeWith';
+import isArray from 'lodash/isArray';
+// this is just a type import
+// eslint-disable-next-line lodash/import-scope
+import { MergeWithCustomizer } from 'lodash';
+
+import DefaultUISchema from '../defaultUiSchema';
+import DefaultRoleSchema from '../defaultRoleSchema';
+import DefaultRecognizers from '../defaultRecognizers';
+
+const defaults: PluginConfig = {
+  uiSchema: DefaultUISchema,
+  roleSchema: DefaultRoleSchema,
+  recognizers: DefaultRecognizers,
+};
+
+const mergeArrays: MergeWithCustomizer = (objValue, srcValue, key) => {
+  if (isArray(objValue)) {
+    // merge recognizers into defaults
+    if (key === 'recognizers') {
+      return objValue.concat(srcValue);
+    }
+
+    // otherwise override other arrays
+    return srcValue;
+  }
+};
+
+export function mergePluginConfigs(...plugins: PluginConfig[]): Required<PluginConfig> {
+  return mergeWith({}, defaults, ...plugins, mergeArrays);
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/resolveBaseSchema.ts b/Composer/packages/extensions/adaptive-form/src/utils/resolveBaseSchema.ts
new file mode 100644
index 0000000000..b7789a95de
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/resolveBaseSchema.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { JSONSchema7 } from 'json-schema';
+import { MicrosoftAdaptiveDialog } from '@bfc/shared';
+
+import { resolveRef } from './resolveRef';
+
+export function resolveBaseSchema(schema: JSONSchema7, data: MicrosoftAdaptiveDialog): JSONSchema7 | undefined {
+  if (schema.definitions && schema.definitions?.[data.$type] && schema.definitions?.[data.$type] !== true) {
+    return resolveRef(schema.definitions?.[data.$type], schema.definitions);
+  }
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/resolveFieldWidget.ts b/Composer/packages/extensions/adaptive-form/src/utils/resolveFieldWidget.ts
new file mode 100644
index 0000000000..85fffcf1f1
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/resolveFieldWidget.ts
@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UIOptions, FieldWidget, PluginConfig, JSONSchema7 } from '@bfc/extension';
+
+import * as DefaultFields from '../components/fields';
+
+/**
+ * Resolves field widget in this order:
+ *   UISchema field override, schema.$role, schema.$kind, schema.type
+ * @param schema
+ * @param uiOptions
+ */
+export function resolveFieldWidget(
+  schema?: JSONSchema7,
+  uiOptions?: UIOptions,
+  globalConfig?: Required<PluginConfig>
+): FieldWidget {
+  const FieldOverride = uiOptions?.field;
+
+  if (typeof FieldOverride === 'function') {
+    return FieldOverride;
+  }
+
+  if (schema) {
+    if (globalConfig) {
+      const RoleOverride = schema.$role && globalConfig?.roleSchema[schema.$role]?.field;
+
+      if (RoleOverride) {
+        return RoleOverride;
+      }
+
+      const KindOverride = schema.$kind && globalConfig?.uiSchema[schema.$kind]?.field;
+
+      if (KindOverride) {
+        return KindOverride;
+      }
+    }
+
+    if ((schema.oneOf && Array.isArray(schema.oneOf)) || Array.isArray(schema.type)) {
+      return DefaultFields.OneOfField;
+    }
+
+    switch (schema.type) {
+      case 'string':
+        return schema.enum ? DefaultFields.SelectField : DefaultFields.StringField;
+      case 'integer':
+      case 'number':
+        return DefaultFields.NumberField;
+      case 'boolean':
+        return DefaultFields.BooleanField;
+      case 'array': {
+        const { items } = schema;
+
+        if (Array.isArray(items) && typeof items[0] === 'object' && items[0].type === 'object') {
+          return DefaultFields.ObjectArrayField;
+        } else if (!Array.isArray(items) && typeof items === 'object' && items?.type === 'object') {
+          return DefaultFields.ObjectArrayField;
+        }
+
+        return DefaultFields.ArrayField;
+      }
+      case 'object':
+        return schema.additionalProperties ? DefaultFields.OpenObjectField : DefaultFields.ObjectField;
+    }
+  }
+
+  return DefaultFields.UnsupportedField;
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/resolvePropertySchema.ts b/Composer/packages/extensions/adaptive-form/src/utils/resolvePropertySchema.ts
new file mode 100644
index 0000000000..7bc02fa11b
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/resolvePropertySchema.ts
@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { JSONSchema7, JSONSchema7Definition } from '@bfc/extension';
+
+import { resolveRef } from './resolveRef';
+
+export function resolvePropSchema(
+  schema: JSONSchema7,
+  path: string,
+  definitions: {
+    [k: string]: JSONSchema7Definition;
+  } = {}
+): JSONSchema7 | undefined {
+  if (!schema.properties) {
+    return;
+  }
+
+  const pathParts = path.split('.');
+  let propSchema: JSONSchema7 = schema.properties;
+
+  for (const part of pathParts) {
+    propSchema = resolveRef((propSchema?.properties || propSchema)?.[part], definitions);
+  }
+
+  return propSchema;
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/resolveRef.ts b/Composer/packages/extensions/adaptive-form/src/utils/resolveRef.ts
new file mode 100644
index 0000000000..cf08679fcf
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/resolveRef.ts
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { JSONSchema7, JSONSchema7Definition } from '@bfc/extension';
+
+export function resolveRef(
+  schema: JSONSchema7 = {},
+  definitions: { [key: string]: JSONSchema7Definition } = {}
+): JSONSchema7 {
+  if (typeof schema?.$ref === 'string') {
+    const defName = schema.$ref.replace('#/definitions/', '');
+    const defSchema = typeof definitions?.[defName] === 'object' ? definitions?.[defName] : {};
+
+    const resolvedSchema = {
+      ...defSchema,
+      ...schema,
+    } as JSONSchema7;
+    delete resolvedSchema.$ref;
+
+    return resolvedSchema;
+  }
+
+  return schema;
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/utils/uiOptionsHelpers.ts b/Composer/packages/extensions/adaptive-form/src/utils/uiOptionsHelpers.ts
new file mode 100644
index 0000000000..0b22d6b6f8
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/utils/uiOptionsHelpers.ts
@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { FieldProps } from '@bfc/extension';
+import startCase from 'lodash/startCase';
+
+export function getUiLabel(props: FieldProps): string | false | undefined {
+  const { uiOptions, schema, name, value, label } = props;
+
+  if (label === false) {
+    return false;
+  }
+
+  const { label: uiLabel } = uiOptions;
+
+  if (uiLabel) {
+    return typeof uiLabel === 'function' ? uiLabel(value) : uiLabel;
+  } else if (uiLabel === false) {
+    return false;
+  }
+
+  return label || startCase(schema?.title || name);
+}
+
+export function getUiDescription(props: FieldProps): string | undefined {
+  const { uiOptions, schema, value, description } = props;
+
+  const { description: uiDescription } = uiOptions;
+
+  if (uiDescription) {
+    return typeof uiDescription === 'function' ? uiDescription(value) : uiDescription;
+  }
+
+  return description || schema?.description;
+}
+
+export function getUiPlaceholder(props: FieldProps): string | undefined {
+  const { uiOptions, schema, value, placeholder } = props;
+
+  const { placeholder: uiPlaceholder } = uiOptions;
+
+  if (uiPlaceholder) {
+    return typeof uiPlaceholder === 'function' ? uiPlaceholder(value) : uiPlaceholder;
+  }
+
+  if (placeholder) {
+    return placeholder;
+  }
+
+  if (schema && Array.isArray(schema.examples) && schema.examples.length > 0) {
+    return `ex. ${schema.examples.join(', ')}`;
+  }
+}
diff --git a/Composer/packages/extensions/adaptive-form/tsconfig.build.json b/Composer/packages/extensions/adaptive-form/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/extensions/obiformeditor/tsconfig.json b/Composer/packages/extensions/adaptive-form/tsconfig.json
similarity index 58%
rename from Composer/packages/extensions/obiformeditor/tsconfig.json
rename to Composer/packages/extensions/adaptive-form/tsconfig.json
index 8eab2df086..3188b0d622 100644
--- a/Composer/packages/extensions/obiformeditor/tsconfig.json
+++ b/Composer/packages/extensions/adaptive-form/tsconfig.json
@@ -2,7 +2,6 @@
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./lib/",
-    "module": "esnext",
   },
-  "include": ["./src/**/*", "./__tests__/**/*"]
+  "include": ["src"]
 }
diff --git a/Composer/packages/extensions/extension/.eslintrc.js b/Composer/packages/extensions/extension/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/extensions/extension/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/extensions/extension/.gitignore b/Composer/packages/extensions/extension/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/extensions/extension/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/extensions/extension/jest.config.js b/Composer/packages/extensions/extension/jest.config.js
new file mode 100644
index 0000000000..7e02a5179c
--- /dev/null
+++ b/Composer/packages/extensions/extension/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'extension',
+  preset: 'ts-jest',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/extensions/extension/package.json b/Composer/packages/extensions/extension/package.json
new file mode 100644
index 0000000000..1b7aab0b1e
--- /dev/null
+++ b/Composer/packages/extensions/extension/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@bfc/extension",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer extension api.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.25",
+    "@types/react": "16.9.23",
+    "jest": "^24.9.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
+    "ts-jest": "^24.2.0"
+  },
+  "dependencies": {
+    "@bfc/shared": "*",
+    "lodash": "^4.17.15"
+  }
+}
diff --git a/Composer/packages/extensions/extension/src/components/Extension.tsx b/Composer/packages/extensions/extension/src/components/Extension.tsx
new file mode 100644
index 0000000000..9eeff50504
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/components/Extension.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useMemo } from 'react';
+import { ShellApi, ShellData } from '@bfc/shared';
+
+import ExtensionContext from '../extensionContext';
+
+interface ExtensionProps {
+  shell: ShellApi;
+  shellData: ShellData;
+}
+
+export const Extension: React.FC<ExtensionProps> = function Extension(props) {
+  const { shell, shellData } = props;
+
+  const context = useMemo(() => {
+    return { shellApi: shell, shellData };
+  }, [shell, shellData]);
+
+  return <ExtensionContext.Provider value={context}>{props.children}</ExtensionContext.Provider>;
+};
+
+export default Extension;
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/jestMocks/styleMock.ts b/Composer/packages/extensions/extension/src/components/index.ts
similarity index 72%
rename from Composer/packages/extensions/obiformeditor/__tests__/jestMocks/styleMock.ts
rename to Composer/packages/extensions/extension/src/components/index.ts
index 76e5d6543e..708ee39e10 100644
--- a/Composer/packages/extensions/obiformeditor/__tests__/jestMocks/styleMock.ts
+++ b/Composer/packages/extensions/extension/src/components/index.ts
@@ -1,4 +1,3 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-
-module.exports = {};
+export * from './Extension';
diff --git a/Composer/packages/extensions/extension/src/extensionContext.ts b/Composer/packages/extensions/extension/src/extensionContext.ts
new file mode 100644
index 0000000000..c8fa61ade3
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/extensionContext.ts
@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { ShellApi, ShellData } from '@bfc/shared';
+
+interface ExtensionContext {
+  shellApi: ShellApi;
+  shellData: ShellData;
+}
+
+const ExtensionContext = React.createContext<ExtensionContext>({
+  shellApi: {},
+  shellData: {},
+} as ExtensionContext);
+
+export default ExtensionContext;
diff --git a/Composer/packages/extensions/extension/src/hooks/index.ts b/Composer/packages/extensions/extension/src/hooks/index.ts
new file mode 100644
index 0000000000..ef51c4fe96
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/hooks/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export * from './useDebounce';
+export * from './useShellApi';
diff --git a/Composer/packages/extensions/extension/src/hooks/useDebounce.ts b/Composer/packages/extensions/extension/src/hooks/useDebounce.ts
new file mode 100644
index 0000000000..47b4f79c5f
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/hooks/useDebounce.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+
+export const useDebounce: typeof debounce = (fn, options) => {
+  return useMemo(() => debounce(fn, options), [fn]);
+};
diff --git a/Composer/packages/extensions/extension/src/hooks/useShellApi.ts b/Composer/packages/extensions/extension/src/hooks/useShellApi.ts
new file mode 100644
index 0000000000..a6bf77f1ef
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/hooks/useShellApi.ts
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { useContext } from 'react';
+import { ShellApi, ShellData } from '@bfc/shared';
+
+import ExtensionContext from '../extensionContext';
+
+interface ShellContext extends ShellData {
+  shellApi: ShellApi;
+}
+
+export function useShellApi(): ShellContext {
+  const { shellApi, shellData } = useContext(ExtensionContext);
+
+  if (!shellApi) {
+    // eslint-disable-next-line no-console
+    console.error(new Error('No ShellApi in Extension Context!'));
+    return {} as ShellContext;
+  }
+
+  if (!shellData) {
+    // eslint-disable-next-line no-console
+    console.error(new Error('No ShellData in Extension Context!'));
+    return {} as ShellContext;
+  }
+
+  return { shellApi, ...shellData };
+}
diff --git a/Composer/packages/extensions/extension/src/index.ts b/Composer/packages/extensions/extension/src/index.ts
new file mode 100644
index 0000000000..3ecebc1a7c
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/index.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Extension } from './components';
+
+export * from './components';
+export * from './hooks';
+export * from './types';
+
+export default Extension;
diff --git a/Composer/packages/extensions/extension/src/types/extension.ts b/Composer/packages/extensions/extension/src/types/extension.ts
new file mode 100644
index 0000000000..e9e076050d
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/types/extension.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { UISchema, RoleSchema, RecognizerSchema } from './uiSchema';
+
+export interface PluginConfig {
+  uiSchema?: UISchema;
+  roleSchema?: RoleSchema;
+  recognizers?: RecognizerSchema[];
+}
diff --git a/Composer/packages/extensions/extension/src/types/form.ts b/Composer/packages/extensions/extension/src/types/form.ts
new file mode 100644
index 0000000000..5c9a4863d2
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/types/form.ts
@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
+import React from 'react';
+
+import { UIOptions } from './uiSchema';
+
+declare module 'json-schema' {
+  interface JSONSchema7 {
+    $copy?: string;
+    $id?: string;
+    $kind?: string;
+    $role?: string;
+    /** @deprecated */
+    $type?: string;
+    $designer?: {
+      id: string;
+      [key: string]: any;
+    };
+  }
+}
+
+// Re-export monkey patched json schema interfaces
+export { JSONSchema7, JSONSchema7Definition };
+
+export type FormErrors = {
+  [key: string]: string | FormErrors;
+};
+
+export type ChangeHandler<T = any> = (newValue?: T) => void;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface FieldProps<T = any> {
+  className?: string;
+  definitions?: { [key: string]: JSONSchema7Definition };
+  depth: number;
+  description?: string;
+  disabled?: boolean;
+  enumOptions?: string[];
+  error?: string | JSX.Element;
+  hideError?: boolean;
+  id: string;
+  label?: string | false;
+  name: string;
+  placeholder?: string;
+  rawErrors?: FormErrors | string | string[] | FormErrors[];
+  readonly?: boolean;
+  schema: JSONSchema7;
+  transparentBorder?: boolean;
+  uiOptions: UIOptions;
+  value?: T;
+
+  onChange: ChangeHandler<T>;
+  onFocus?: (id: string, value?: T) => void;
+  onBlur?: (id: string, value?: T) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type FieldWidget<T = any> = React.FC<FieldProps<T>>;
diff --git a/Composer/packages/extensions/extension/src/types/index.ts b/Composer/packages/extensions/extension/src/types/index.ts
new file mode 100644
index 0000000000..88efefe76a
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/types/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export * from './extension';
+export * from './form';
+export * from './uiSchema';
diff --git a/Composer/packages/extensions/extension/src/types/uiSchema.ts b/Composer/packages/extensions/extension/src/types/uiSchema.ts
new file mode 100644
index 0000000000..615ddc502b
--- /dev/null
+++ b/Composer/packages/extensions/extension/src/types/uiSchema.ts
@@ -0,0 +1,63 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { SDKTypes, SDKRoles, ShellApi, ShellData } from '@bfc/shared';
+
+import { FieldWidget, FieldProps } from './form';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type UIOptionValue<R = string, D = any> = R | UIOptionFunc<R, D>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type UIOptionFunc<R, D> = (data: D) => R;
+
+export interface UIOptions {
+  /** Description override. */
+  description?: UIOptionValue<string | undefined>;
+  /** Field widget override. */
+  field?: FieldWidget;
+  /** Url to docs. Rendered below field description. */
+  helpLink?: string;
+  /**
+   * Fields to hide in the form. A function can be used to dynamically hide/show fields.
+   * @example
+   * (data) => {
+   *   if (data.someProperty === '42') {
+   *     return ['someOtherProperty'];
+   *   }
+   * }
+   */
+  hidden?: UIOptionValue<string[]>;
+  /** Label override. */
+  label?: UIOptionValue<string | false | undefined>;
+  /** Set order of fields. Use * for all other fields. */
+  order?: UIOptionValue<(string | [string, string])[]>;
+  /** Placeholder override. If undefined, schema.examples are used. */
+  placeholder?: UIOptionValue<string, undefined>;
+  /** Define ui options on fields that are children of this field. */
+  properties?: {
+    [key: string]: UIOptions;
+  };
+  /** Use the serializer to apply additional data processing.
+   * `get` is called to retrieve the value that is passed to SchemaField
+   * `set` is called prior to the `onChange` handler  */
+  serializer?: {
+    get: (value: any) => any;
+    set: (value: any) => any;
+  };
+  /** subtitle rendered in form title */
+  subtitle?: UIOptionValue<string>;
+}
+
+export type RoleSchema = { [key in SDKRoles]?: Omit<UIOptions, 'properties'> };
+export type UISchema = { [key in SDKTypes]?: UIOptions };
+export type RecognizerSchema = {
+  /** Unique id to identify recognizer (SDK $kind) */
+  id: string;
+  /** Display name used in the UI */
+  displayName: UIOptionValue<string>;
+  /** An inline editor to edit an intent. If none provided, users will not be able to edit. */
+  editor?: FieldWidget;
+  /** A function invoked with the form data to determine if this is the currently selected recognizer */
+  isSelected: (data: any) => boolean;
+  /** Invoked when changing the recognizer type */
+  handleRecognizerChange: (fieldProps: FieldProps, shellData: ShellData, shellApi: ShellApi) => void;
+};
diff --git a/Composer/packages/extensions/extension/tsconfig.build.json b/Composer/packages/extensions/extension/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/extensions/extension/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/extensions/extension/tsconfig.json b/Composer/packages/extensions/extension/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/extensions/extension/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/extensions/obiformeditor/.gitignore b/Composer/packages/extensions/obiformeditor/.gitignore
deleted file mode 100644
index c452c58463..0000000000
--- a/Composer/packages/extensions/obiformeditor/.gitignore
+++ /dev/null
@@ -1,7 +0,0 @@
-/coverage
-/demo/dist
-/es
-/lib
-/node_modules
-/umd
-npm-debug.log*
diff --git a/Composer/packages/extensions/obiformeditor/.travis.yml b/Composer/packages/extensions/obiformeditor/.travis.yml
deleted file mode 100644
index 06e30d936d..0000000000
--- a/Composer/packages/extensions/obiformeditor/.travis.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-sudo: false
-
-language: node_js
-node_js:
-  - 8
-
-before_install:
-  - npm install codecov.io coveralls
-
-after_success:
-  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
-  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
-
-branches:
-  only:
-    - master
diff --git a/Composer/packages/extensions/obiformeditor/README.md b/Composer/packages/extensions/obiformeditor/README.md
deleted file mode 100644
index 41c4cb29c3..0000000000
--- a/Composer/packages/extensions/obiformeditor/README.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# obiformeditor
-
-[![Travis][build-badge]][build]
-[![npm package][npm-badge]][npm]
-[![Coveralls][coveralls-badge]][coveralls]
-
-Describe obiformeditor here.
-
-[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
-[build]: https://travis-ci.org/user/repo
-
-[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
-[npm]: https://www.npmjs.org/package/npm-package
-
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
-[coveralls]: https://coveralls.io/github/user/repo
-
-[react-jsonschema-form]: https://github.com/mozilla-services/react-jsonschema-form
-
-#### Playground
-
-There is a playground to see and experiment with all of the different OBI types. This is usually helpful to view
-outside of Composer because it gives you a finer grain of control and allows you to drill down into any level of detail easily.
-
-In the Composer directory or in the obiformeditor directory:
-```bash
-yarn start
-```
-
-You can now access the playground at http://localhost:3001
-
-To see your changes in Composer:
-
-1. Build `yarn build`
-2. Refresh Composer.
-
-
-#### React JSON Schema Form
-
-This is a light wrapper around [react-jsonschema-form](react-jsonschema-form). It is possible that changes will need to be made
-in our fork of the project. When doing so, use the steps outlined below.
-
-##### Development
-
-In your local react-jsonschema-form directory:
-```bash
-yarn link
-# make changes
-npm run dist
-```
-
-In this directory:
-```bash
-yarn link react-jsonschema-form
-# test changes
-yarn unlink react-jsonschema-form
-```
-
-##### Upgrading
-
-Once you are done making changes, commit them and push.
-Then merge those changes into the [composer branch](https://github.com/a-b-r-o-w-n/react-jsonschema-form/tree/composer).
-Once merged, update the package version by incrementing the number after the actual package version (ex. `1.4.0-1` -> `1.4.0-2`).
-Create a tag with the new version number (`git tag v1.4.0-2`) and push to git.
-Finally, update the tag in obiformeditor package.json to reference the newly created tag.
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/App.test.tsx b/Composer/packages/extensions/obiformeditor/__tests__/App.test.tsx
deleted file mode 100644
index 529b38937c..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/App.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { render, waitForElement } from 'react-testing-library';
-
-import OBIEditor from '../src';
-
-describe('<App />', () => {
-  it('should render the app', async () => {
-    // @ts-ignore
-    const { getByText } = render(<OBIEditor data={{ invalid: 'schema' }} focusedSteps={[]} />);
-
-    await waitForElement(() => getByText(/Malformed data/));
-  });
-});
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ArrayItem.test.tsx b/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ArrayItem.test.tsx
deleted file mode 100644
index 6828ed8bb1..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ArrayItem.test.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { render, fireEvent, findAllByText } from 'react-testing-library';
-
-import ArrayItem from '../../../src/Form/ArrayFieldTemplate/ArrayItem';
-
-describe('<ArrayItem />', () => {
-  describe('when there are actions that can be made', () => {
-    let renderResult, onReorderClick, onDropIndexClick, clickResults;
-
-    beforeEach(() => {
-      clickResults = {
-        onReorderClick: [],
-        onDropIndexClick: [],
-      };
-
-      onReorderClick = (...args) => {
-        return () => {
-          clickResults.onReorderClick.push(args);
-        };
-      };
-      onDropIndexClick = (...args) => {
-        return () => {
-          clickResults.onDropIndexClick.push(args);
-        };
-      };
-
-      renderResult = render(
-        // @ts-ignore
-        <ArrayItem
-          hasMoveUp
-          hasMoveDown
-          hasRemove
-          onReorderClick={onReorderClick}
-          onDropIndexClick={onDropIndexClick}
-          index={3}
-        >
-          <div>element 1</div>
-        </ArrayItem>
-      );
-    });
-
-    async function getMenuItems(itemName?: string): Promise<HTMLElement[]> {
-      const { findByTestId } = renderResult;
-      const menuButton = await findByTestId('ArrayItemContextMenu');
-      expect(menuButton).toBeTruthy();
-      fireEvent.click(menuButton);
-
-      if (itemName) {
-        return findAllByText(document.body, itemName);
-      }
-
-      return findAllByText(document.body, /(Move Up|Move Down|Remove)/);
-    }
-
-    it('renders a context menu with available actions', async () => {
-      const menuItems = await getMenuItems();
-
-      expect(menuItems).toHaveLength(3);
-    });
-
-    it('can move an item up', async () => {
-      const [moveUpItem] = await getMenuItems('Move Up');
-
-      fireEvent.click(moveUpItem);
-      expect(clickResults.onReorderClick).toEqual([[3, 2]]);
-    });
-
-    it('can move an item down', async () => {
-      const [moveDownItem] = await getMenuItems('Move Down');
-
-      fireEvent.click(moveDownItem);
-      expect(clickResults.onReorderClick).toEqual([[3, 4]]);
-    });
-
-    it('can remove an item', async () => {
-      const [removeItem] = await getMenuItems('Remove');
-
-      fireEvent.click(removeItem);
-      expect(clickResults.onDropIndexClick).toEqual([[3]]);
-    });
-  });
-});
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/IDialogArray.test.tsx b/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/IDialogArray.test.tsx
deleted file mode 100644
index a3e294a692..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/IDialogArray.test.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { render, fireEvent, findByText, RenderResult } from 'react-testing-library';
-
-import IDialogArray from '../../../src/Form/ArrayFieldTemplate/IDialogArray';
-
-const TestTitleField: React.FC<any> = ({ title, ...rest }) => <label {...rest}>{title}</label>;
-const TestDescriptionField: React.FC<any> = ({ description, ...rest }) => <p {...rest}>{description}</p>;
-
-const items = [
-  { children: <div>element 1</div> },
-  { children: <div>element 2</div> },
-  { children: <div>element 3</div> },
-];
-
-function renderDefault(propOverrides = {}): RenderResult {
-  const props = {
-    TitleField: TestTitleField,
-    DescriptionField: TestDescriptionField,
-    items,
-    title: 'My Array Title',
-    schema: {
-      description: 'My array description.',
-    },
-    idSchema: {
-      __id: 'IDialogArrayTest',
-    },
-    ...propOverrides,
-  };
-
-  // @ts-ignore
-  return render(<IDialogArray {...props} />);
-}
-
-describe('<IDialogArray />', () => {
-  it('renders a TitleField', async () => {
-    const { findByText } = renderDefault();
-
-    const title = await findByText('My Array Title');
-    expect(title.tagName).toEqual('LABEL');
-    expect(title.id).toEqual('IDialogArrayTest__title');
-  });
-
-  it('renders a DescriptionField', async () => {
-    const { findByText } = renderDefault();
-
-    const title = await findByText('My array description.');
-    expect(title.tagName).toEqual('P');
-    expect(title.id).toEqual('IDialogArrayTest__description');
-  });
-
-  it('renders a StringItem for each item', async () => {
-    const { findAllByText } = renderDefault();
-
-    const items = await findAllByText('element', { exact: false });
-    expect(items).toHaveLength(3);
-  });
-
-  it('can add an item with a given type', async () => {
-    const onAddClick = jest.fn();
-    const { findByTestId } = renderDefault({ canAdd: true, onAddClick });
-    const addBtn = await findByTestId('ArrayContainerAdd');
-
-    fireEvent.click(addBtn);
-
-    const responseMenu = await findByText(document.body, 'Send a response');
-    fireEvent.click(responseMenu);
-
-    expect(onAddClick.mock.calls[0][1]).toEqual({
-      $type: 'Microsoft.SendActivity',
-      $designer: {
-        id: expect.any(String),
-        name: 'Send a response',
-      },
-      activity: '',
-      data: {
-        $type: 'Microsoft.SendActivity',
-        $designer: {
-          id: expect.any(String),
-          name: 'Send a response',
-        },
-        activity: '',
-      },
-      key: 'Microsoft.SendActivity',
-      name: 'Send a response',
-      onClick: expect.any(Function),
-    });
-  });
-});
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx b/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx
deleted file mode 100644
index 9390497bfc..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { render, fireEvent, RenderResult } from 'react-testing-library';
-
-import ObjectArray from '../../../src/Form/ArrayFieldTemplate/ObjectArray';
-
-const items = [
-  { children: <div>element 1</div> },
-  { children: <div>element 2</div> },
-  { children: <div>element 3</div> },
-];
-
-function renderDefault(propOverrides = {}): RenderResult {
-  const props = {
-    items,
-    title: 'My Array Title',
-    schema: {
-      description: 'My array description.',
-    },
-    idSchema: {
-      __id: 'ObjectArrayTest',
-    },
-    ...propOverrides,
-  };
-
-  // @ts-ignore
-  return render(<ObjectArray {...props} />);
-}
-
-describe('<ObjectArray />', () => {
-  it('renders a TitleField', async () => {
-    const { findByText } = renderDefault();
-
-    const title = await findByText('My Array Title');
-    expect(title).toBeTruthy();
-  });
-
-  it('renders a DescriptionField in tooltip', async () => {
-    const { baseElement } = renderDefault();
-    const icon = baseElement.querySelector('[data-icon-name="Unknown"]');
-
-    if (icon !== null) fireEvent.mouseOver(icon);
-
-    expect(baseElement).toHaveTextContent('My array description.');
-  });
-
-  it('renders a StringItem for each item', async () => {
-    const { findAllByText } = renderDefault();
-
-    const items = await findAllByText('element', { exact: false });
-    expect(items).toHaveLength(3);
-  });
-
-  it('can add new items', async () => {
-    const onAddClick = jest.fn();
-    const { findByText } = renderDefault({ canAdd: true, onAddClick });
-    const addBtn = await findByText('Add');
-    fireEvent.click(addBtn);
-    expect(onAddClick).toHaveBeenCalled();
-  });
-});
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx b/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx
deleted file mode 100644
index 061b7ae2a8..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { render, fireEvent } from 'react-testing-library';
-
-import StringArray from '../../../src/Form/ArrayFieldTemplate/StringArray';
-
-const items = [
-  { children: <div>element 1</div> },
-  { children: <div>element 2</div> },
-  { children: <div>element 3</div> },
-];
-
-function renderDefault(propOverrides = {}) {
-  const props = {
-    items,
-    title: 'My Array Title',
-    schema: {
-      description: 'My array description.',
-    },
-    idSchema: {
-      __id: 'StringArrayTest',
-    },
-    ...propOverrides,
-  };
-
-  // @ts-ignore
-  return render(<StringArray {...props} />);
-}
-
-describe('<StringArray />', () => {
-  it('renders a TitleField', async () => {
-    const { findByText } = renderDefault();
-
-    const title = await findByText('My Array Title');
-    expect(title).toBeTruthy();
-  });
-
-  it('renders a DescriptionField in tooltip', async () => {
-    const { baseElement } = renderDefault();
-    const icon = baseElement.querySelector('[data-icon-name="Unknown"]');
-
-    if (icon !== null) fireEvent.mouseOver(icon);
-
-    expect(baseElement).toHaveTextContent('My array description.');
-  });
-
-  it('renders a StringItem for each item', async () => {
-    const { findAllByText } = renderDefault();
-
-    const items = await findAllByText('element', { exact: false });
-    expect(items).toHaveLength(3);
-  });
-
-  it('can add an item', async () => {
-    const onAddClick = jest.fn();
-    const { findByTestId } = renderDefault({ canAdd: true, onAddClick });
-    const input = await findByTestId('string-array-text-input');
-    fireEvent.change(input, { target: { value: 'test' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 13 });
-    expect(onAddClick).toHaveBeenCalled();
-  });
-});
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/jestMocks/schema.ts b/Composer/packages/extensions/obiformeditor/__tests__/jestMocks/schema.ts
deleted file mode 100644
index 56f423d8c3..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/jestMocks/schema.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { JSONSchema6 } from 'json-schema';
-import merge from 'lodash/merge';
-
-const schema: JSONSchema6 = {
-  title: 'Mock Schema',
-};
-
-export function generateSchema(overrides = {}): JSONSchema6 {
-  return merge({}, schema, overrides);
-}
diff --git a/Composer/packages/extensions/obiformeditor/__tests__/setup.ts b/Composer/packages/extensions/obiformeditor/__tests__/setup.ts
deleted file mode 100644
index dbffe6f754..0000000000
--- a/Composer/packages/extensions/obiformeditor/__tests__/setup.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { setIconOptions } from 'office-ui-fabric-react/lib/Styling';
-import 'jest-dom/extend-expect';
-import { cleanup } from 'react-testing-library';
-
-// Suppress icon warnings.
-setIconOptions({
-  disableWarnings: true,
-});
-
-afterEach(cleanup);
diff --git a/Composer/packages/extensions/obiformeditor/babel.config.js b/Composer/packages/extensions/obiformeditor/babel.config.js
deleted file mode 100644
index 8804135af6..0000000000
--- a/Composer/packages/extensions/obiformeditor/babel.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-module.exports = {
-  env: {
-    test: {
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            modules: 'commonjs',
-            targets: {
-              node: 'current',
-            },
-          },
-        ],
-        '@babel/preset-react',
-      ],
-      plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
-    },
-  },
-};
diff --git a/Composer/packages/extensions/obiformeditor/demo/index.html b/Composer/packages/extensions/obiformeditor/demo/index.html
deleted file mode 100644
index 6243fec86b..0000000000
--- a/Composer/packages/extensions/obiformeditor/demo/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <div id="demo"></div>
-  </body>
-</html>
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/editorschema.json b/Composer/packages/extensions/obiformeditor/demo/src/editorschema.json
deleted file mode 100644
index b41d827cdb..0000000000
--- a/Composer/packages/extensions/obiformeditor/demo/src/editorschema.json
+++ /dev/null
@@ -1,159 +0,0 @@
-{
-  "fieldTemplateOverrides": {
-    "RulesField": {
-      "title": "Events",
-      "description": "Define handlers for events that occur within the bot."
-    },
-    "StepsField": {}
-  },
-  "SDKOverrides": {
-    "Microsoft.AdaptiveDialog": {
-      "title": "AdaptiveDialog",
-      "description": "This configures a data driven dialog via a collection of events and actions. <a href=\"https://aka.ms/botframework\" target=\"_blank\">Learn more</a>"
-    },
-    "Microsoft.BeginDialog": {
-      "title": "Begin a Dialog"
-    },
-    "Microsoft.CancelAllDialogs": {
-      "title": "Cancel All Dialogs"
-    },
-    "Microsoft.ChoiceInput": {
-      "title": "Prompt with multi-choice"
-    },
-    "Microsoft.ConditionalSelector": {
-      "title": "ConditionalSelector"
-    },
-    "Microsoft.ConfirmInput": {
-      "title": "Prompt for confirmation"
-    },
-    "Microsoft.OnConversationUpdateActivity": {
-      "title": "Conversation Update Activity",
-      "description": "Handle the events fired when a user begins a new conversation with the bot. <a href=\"https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-conversations?view=azure-bot-service-4.0#conversation-lifetime\" target=\"_blank\">Learn more</a>"
-    },
-    "Microsoft.DebugBreak": {
-      "title": "Debug Break"
-    },
-    "Microsoft.DeleteProperty": {
-      "title": "Delete a Property"
-    },
-    "Microsoft.DeleteProperties": {
-      "title": "Delete Properties"
-    },
-    "Microsoft.EditArray": {
-      "title": "Edit an Array Property"
-    },
-    "Microsoft.EmitEvent": {
-      "title": "Emit a custom event"
-    },
-    "Microsoft.EndDialog": {
-      "title": "End Dialog"
-    },
-    "Microsoft.EndTurn": {
-      "title": "End Turn"
-    },
-    "Microsoft.OnEvent": {
-      "title": "Event received"
-    },
-    "Microsoft.FirstSelector": {
-      "title": "FirstSelector"
-    },
-    "Microsoft.HttpRequest": {
-      "title": "HTTP Request"
-    },
-    "Microsoft.IfCondition": {
-      "title": "Branch: If/Else"
-    },
-    "Microsoft.OnIntent": {
-      "title": "Intent"
-    },
-    "Microsoft.LanguagePolicy": {
-      "title": "LanguagePolicy"
-    },
-    "Microsoft.LogAction": {
-      "title": "Log to console"
-    },
-    "Recognizer": {
-      "title": "Language Understanding",
-      "description": "To understand what the user says, your dialog needs a 'Recognizer', that includes example words and sentences that users may use. <a href=\"https://aka.ms/BFC-Using-LU\" target=\"_blank\">Learn more</a>"
-    },
-    "Microsoft.LuisRecognizer": {
-      "title": "Language Understanding",
-      "description": "To understand what the user says, your dialog needs a 'Recognizer', that includes example words and sentences that users may use. <a href=\"https://aka.ms/BFC-Using-LU\" target=\"_blank\">Learn more</a>"
-    },
-    "Microsoft.MostSpecificSelector": {
-      "title": "MostSpecificSelector"
-    },
-    "Microsoft.MultiLanguageRecognizer": {
-      "title": "Language Understanding",
-      "description": "To understand what the user says, your dialog needs a 'Recognizer', that includes example words and sentences that users may use. <a href=\"https://aka.ms/BFC-Using-LU\" target=\"_blank\">Learn more</a>"
-    },
-    "Microsoft.NumberInput": {
-      "title": "Prompt for a number"
-    },
-    "Microsoft.QnAMakerDialog": {
-      "title": "QnAMakerDialog"
-    },
-    "Microsoft.RandomSelector": {
-      "title": "RandomSelector"
-    },
-    "Microsoft.RegexRecognizer": {
-      "title": false,
-      "description": false
-    },
-    "Microsoft.RepeatDialog": {
-      "title": "Repeat this Dialog"
-    },
-    "Microsoft.ReplaceDialog": {
-      "title": "Replace this Dialog"
-    },
-    "Microsoft.Rule": {
-      "title": "Rule"
-    },
-    "Microsoft.SaveEntity": {
-      "title": "Save an Entity"
-    },
-    "Microsoft.SendActivity": {
-      "title": "Send an Activity"
-    },
-    "Microsoft.OAuthInput": {
-      "title": "OAuth Login"
-    },
-    "Microsoft.AttachmentInput": {
-      "title": "Prompt for Attachment"
-    },
-    "Activity": {
-      "title": "Language Generation",
-      "description": "What your bot says to the user. This is a template used to create the outgoing message. It can include language generation rules, properties from memory, and other features. <a target=\"_blank\" href=\"https://github.com/microsoft/BotBuilder-Samples/blob/master/experimental/language-generation/docs/lg-file-format.md\"> Visit the Language Generation reference for more info.</a><br><br> For example, to define variations that will be chosen at random, write: <br> - hello <br> - hi"
-    },
-    "Microsoft.SetProperty": {
-      "title": "Set a Property"
-    },
-    "Microsoft.SetProperties": {
-      "title": "Set Properties"
-    },
-    "Microsoft.SwitchCondition": {
-      "title": "Branch: Switch"
-    },
-    "Microsoft.TextInput": {
-      "title": "Prompt for text"
-    },
-    "Microsoft.TraceActivity": {
-      "title": "Emit a trace event"
-    },
-    "Microsoft.TrueSelector": {
-      "title": "TrueSelector"
-    },
-    "Microsoft.OnUnknownIntent": {
-      "title": "Handle Unknown Intent"
-    },
-    "Microsoft.Foreach": {
-      "title": "Loop: For Each"
-    },
-    "Microsoft.ForeachPage": {
-      "title": "Loop: For Each Page"
-    },
-    "Microsoft.EditSteps": {
-      "title": "Modify active dialog"
-    }
-  }
-}
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-bold.woff2 b/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-bold.woff2
deleted file mode 100755
index f086109c99..0000000000
Binary files a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-bold.woff2 and /dev/null differ
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-light.woff2 b/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-light.woff2
deleted file mode 100755
index 4522574966..0000000000
Binary files a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-light.woff2 and /dev/null differ
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-semibold.woff2 b/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-semibold.woff2
deleted file mode 100755
index 65b02d590e..0000000000
Binary files a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-semibold.woff2 and /dev/null differ
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-semilight.woff2 b/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-semilight.woff2
deleted file mode 100755
index 5e55b418a3..0000000000
Binary files a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui-semilight.woff2 and /dev/null differ
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui.woff2 b/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui.woff2
deleted file mode 100755
index a9905b33be..0000000000
Binary files a/Composer/packages/extensions/obiformeditor/demo/src/fonts/segoe-ui.woff2 and /dev/null differ
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/index.tsx b/Composer/packages/extensions/obiformeditor/demo/src/index.tsx
deleted file mode 100644
index 0fb705d24a..0000000000
--- a/Composer/packages/extensions/obiformeditor/demo/src/index.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import React, { Fragment, useState, useEffect, useRef } from 'react';
-import { render } from 'react-dom';
-import { Controlled as CodeMirror } from 'react-codemirror2';
-import { PrimaryButton, DefaultButton, DirectionalHint } from 'office-ui-fabric-react';
-import debounce from 'lodash/debounce';
-import nanoid from 'nanoid';
-import { initializeIcons } from '@uifabric/icons';
-import { ExpressionEngine } from 'adaptive-expressions';
-import { seedNewDialog, ShellApi } from '@bfc/shared';
-import { LuFile, DialogInfo } from '@bfc/indexers';
-
-import Example from '../../src';
-import { buildDialogOptions } from '../../src/Form/utils';
-
-import editorSchema from './editorschema.json';
-
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/material.css';
-import 'codemirror/theme/neat.css';
-
-import './styles.css';
-
-initializeIcons(undefined, { disableWarnings: true });
-
-const cmOptions = {
-  theme: 'material',
-  viewportMargin: Infinity,
-  mode: {
-    name: 'javascript',
-    json: true,
-    statementIndent: 2,
-  },
-  lineNumbers: true,
-  lineWrapping: true,
-  indentWithTabs: false,
-  tabSize: 2,
-  smartIndent: true,
-};
-
-const defaultData = seedNewDialog('Microsoft.TextInput');
-
-const defaultMemory = {
-  user: {
-    name: 'Chris',
-  },
-  converation: {},
-  dialog: {},
-  turn: {},
-};
-
-function createDialogInfo(id: string, content: Partial<MicrosoftAdaptiveDialog> = {}, customName?: string): DialogInfo {
-  return {
-    id,
-    displayName: customName || id,
-    relativePath: `${id}/${id}.dialog`,
-    isRoot: id === 'Main',
-    content: {
-      $type: 'Microsoft.AdaptiveDialog',
-      triggers: [],
-      ...content,
-    },
-    lgFile: '',
-    luFile: '',
-    diagnostics: [],
-    referredDialogs: [],
-    luIntents: [],
-    lgTemplates: [],
-  };
-}
-
-const dialogFiles: DialogInfo[] = [
-  createDialogInfo(
-    'Main',
-    {
-      recognizer: 'Main',
-    },
-    'MyCustomDialog1'
-  ),
-  createDialogInfo('MyCustomDialog2'),
-  createDialogInfo('MyCustomDialog3'),
-  createDialogInfo('MyCustomDialog4'),
-];
-
-const luFiles: LuFile[] = [
-  {
-    id: 'Main',
-    relativePath: 'SomePath/Main',
-    content: '# FirstHello\n-Hi\n\n# FirstGoodBye\n-Goodbye',
-    intents: [
-      {
-        Name: 'FirstHello',
-        Body: '- Hi',
-      },
-      {
-        Name: 'FirstGoodBye',
-        Body: '- Goodbye',
-      },
-    ],
-    diagnostics: [],
-  },
-  {
-    id: 'MyCustomDialog2',
-    relativePath: 'SomePath/MyCustomDialog2',
-    content: '# SecondHello\n-Good morning\n\n# SecondGoodBye\n-See ya!',
-    intents: [
-      {
-        Name: 'SecondHello',
-        Body: '- Good morning',
-      },
-      {
-        Name: 'SecondGoodBye',
-        Body: '- See ya!',
-      },
-    ],
-    diagnostics: [],
-  },
-  {
-    id: 'MyCustomDialog3',
-    relativePath: 'SomePath/MyCustomDialog3',
-    content: '# ThirdHello\n-Hello\n\n# ThirdGoodBye\n-Later',
-    intents: [
-      {
-        Name: 'ThirdHello',
-        Body: '- Hello',
-      },
-      {
-        Name: 'ThirdGoodbye',
-        Body: '- Later',
-      },
-    ],
-    diagnostics: [],
-  },
-];
-
-const lgFiles = [
-  {
-    id: 'common',
-    relativePath: 'common/common.lg',
-    content: '',
-  },
-];
-
-function getDefaultData() {
-  const storage = window.sessionStorage.getItem('formData');
-
-  if (storage) {
-    return JSON.parse(storage);
-  }
-
-  return defaultData;
-}
-
-function getDefaultMemory() {
-  const storage = window.sessionStorage.getItem('memoryFormData');
-
-  if (storage) {
-    return JSON.parse(storage);
-  }
-
-  return defaultMemory;
-}
-
-const mockShellApi = [
-  'getState',
-  'getData',
-  'saveData',
-  'navTo',
-  'updateLuFile',
-  'updateLgFile',
-  'createLuFile',
-  'createLgFile',
-  'getLgTemplates',
-  'createLgTemplate',
-  'updateLgTemplate',
-  'addLuIntent',
-  'updateLuIntent',
-  'removeLuIntent',
-  'updateRegExIntent',
-  'validateExpression',
-  'onFocusSteps',
-  'onFocusEvent',
-].reduce((mock, api) => {
-  mock[api] = (...args) =>
-    new Promise(resolve => {
-      console.info(`shellApi.${api} called with`, ...args);
-      resolve();
-    });
-  return mock;
-}, {}) as ShellApi;
-
-mockShellApi.validateExpression = exp => {
-  if (!exp) {
-    return Promise.resolve(true);
-  }
-
-  const ExpressionParser = new ExpressionEngine();
-  try {
-    ExpressionParser.parse(exp);
-    return Promise.resolve(true);
-  } catch (_err) {
-    return Promise.resolve(false);
-  }
-};
-
-const Demo: React.FC = () => {
-  const [dirtyFormData, setDirtyFormData] = useState(null);
-  const [memoryData, setMemoryData] = useState(JSON.stringify(getDefaultMemory(), null, 2));
-  const [dialogSelected, setDialogSelected] = useState(true);
-  const [memorySelected, setMemorySelected] = useState(false);
-  const [editorSchemaSelected, setEditorSchemaSelected] = useState(false);
-  const [editorSchemaData, setEditorSchemaData] = useState(JSON.stringify(editorSchema, null, 2));
-  const [editorSchemaFormData, setEditorSchemaFormData] = useState({
-    content: editorSchema,
-  });
-  const [editorSchemaValid, setEditorSchemaValid] = useState(true);
-  const [formData, setFormData] = useState(getDefaultData());
-  const [memoryFormData, setMemoryFormData] = useState(getDefaultMemory());
-  const [navPath, setNavPath] = useState(nanoid());
-  const debouncedOnChange = useRef(debounce(newData => setFormData(newData), 200)).current;
-
-  const [isValid, setValid] = useState(true);
-  const [isMemoryValid, setMemoryValid] = useState(true);
-
-  useEffect(() => {
-    window.sessionStorage.setItem('formData', JSON.stringify(formData));
-    window.sessionStorage.setItem('memoryFormData', JSON.stringify(memoryFormData));
-  }, [formData, memoryFormData]);
-
-  const updateFormData = (editor, data, value) => {
-    try {
-      const parsed = JSON.parse(value);
-      setFormData(parsed);
-      setDirtyFormData(null);
-      setValid(true);
-    } catch (err) {
-      setDirtyFormData(value);
-      setValid(false);
-    }
-  };
-
-  const updateMemoryData = (editor, data, value) => {
-    try {
-      const parsed = JSON.parse(value);
-      setMemoryFormData(parsed);
-      setMemoryValid(true);
-    } catch (err) {
-      setMemoryValid(false);
-    }
-  };
-
-  const updateEditorSchemaData = (editor, data, value) => {
-    try {
-      const parsed = JSON.parse(value);
-      setEditorSchemaFormData({ content: parsed });
-      setEditorSchemaValid(true);
-    } catch (err) {
-      setEditorSchemaValid(false);
-    }
-  };
-
-  const handlePaste = updater => (_, e) => {
-    e.preventDefault();
-
-    const data = (e.clipboardData || (window as any).clipboardData).getData('Text');
-
-    if (data) {
-      try {
-        const parsed = JSON.parse(data);
-        updater(parsed);
-      } catch (err) {
-        // do nothing
-      }
-    }
-  };
-
-  const handleDialogSelect = type => {
-    return () => {
-      setDialogSelected(false);
-      setMemorySelected(false);
-      setEditorSchemaSelected(false);
-      type(true);
-    };
-  };
-
-  return (
-    <div className="DemoContainer">
-      <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }} className="DemoJSONContainer">
-        <div
-          style={{
-            fontSize: '20px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <DefaultButton
-              data-automation-id="test"
-              allowDisabledFocus={true}
-              checked={dialogSelected}
-              text="Dialog"
-              onClick={handleDialogSelect(setDialogSelected)}
-            />
-            <DefaultButton
-              data-automation-id="test"
-              allowDisabledFocus={true}
-              checked={memorySelected}
-              text="Memory"
-              onClick={handleDialogSelect(setMemorySelected)}
-            />
-            <DefaultButton
-              data-automation-id="test"
-              allowDisabledFocus={true}
-              checked={editorSchemaSelected}
-              text="EditorSchema"
-              onClick={handleDialogSelect(setEditorSchemaSelected)}
-            />
-          </div>
-          {dialogSelected && (
-            <PrimaryButton
-              style={{ width: '200px' }}
-              title="Dialog Types"
-              menuProps={{
-                items: buildDialogOptions({
-                  onClick: (_, item) => setFormData(item.data),
-                }),
-                directionalHint: DirectionalHint.bottomAutoEdge,
-              }}
-            >
-              Dialog Types
-            </PrimaryButton>
-          )}
-        </div>
-        {dialogSelected && (
-          <Fragment>
-            <CodeMirror
-              value={dirtyFormData || JSON.stringify(formData, null, 2)}
-              options={cmOptions}
-              onBeforeChange={updateFormData}
-              onChange={updateFormData}
-              autoCursor
-              onPaste={handlePaste(setFormData)}
-              className={isValid ? '' : 'CodeMirror--error'}
-            />
-          </Fragment>
-        )}
-        {memorySelected && (
-          <Fragment>
-            <CodeMirror
-              value={memoryData}
-              options={cmOptions}
-              onBeforeChange={(editor, data, value) => {
-                setMemoryData(value);
-              }}
-              onChange={updateMemoryData}
-              autoCursor
-              onPaste={handlePaste(setMemoryData)}
-              className={isMemoryValid ? '' : 'CodeMirror--error'}
-            />
-          </Fragment>
-        )}
-        {editorSchemaSelected && (
-          <Fragment>
-            <CodeMirror
-              value={editorSchemaData}
-              options={cmOptions}
-              onBeforeChange={(editor, data, value) => {
-                setEditorSchemaData(value);
-              }}
-              onChange={updateEditorSchemaData}
-              autoCursor
-              onPaste={handlePaste(setEditorSchemaData)}
-              className={editorSchemaValid ? '' : 'CodeMirror--error'}
-            />
-          </Fragment>
-        )}
-      </div>
-      <div className="DemoForm">
-        <Example
-          navPath={navPath}
-          focusPath={navPath}
-          data={formData}
-          dialogs={dialogFiles}
-          memory={memoryFormData}
-          onChange={debouncedOnChange}
-          schemas={{ editor: editorSchemaFormData }}
-          shellApi={mockShellApi}
-          luFiles={luFiles}
-          lgFiles={lgFiles}
-          currentDialog={dialogFiles[0]}
-          isRoot={true}
-          focusedSteps={[]}
-        />
-      </div>
-    </div>
-  );
-};
-
-render(<Demo />, document.querySelector('#demo'));
diff --git a/Composer/packages/extensions/obiformeditor/demo/src/styles.css b/Composer/packages/extensions/obiformeditor/demo/src/styles.css
deleted file mode 100644
index cc04696d58..0000000000
--- a/Composer/packages/extensions/obiformeditor/demo/src/styles.css
+++ /dev/null
@@ -1,61 +0,0 @@
-@font-face {
-  font-family: Segoe UI;
-  font-weight: 700;
-  src: url("./fonts/segoe-ui-bold.woff2") format("woff2");
-}
-@font-face {
-  font-family: Segoe UI;
-  font-weight: 600;
-  src: url("./fonts/segoe-ui-semibold.woff2") format("woff2");
-}
-@font-face {
-  font-family: Segoe UI;
-  font-weight: 400;
-  src: url("./fonts/segoe-ui.woff2") format("woff2");
-}
-@font-face {
-  font-family: Segoe UI;
-  font-weight: 300;
-  src: url("./fonts/segoe-ui-semilight.woff2") format("woff2");
-}
-@font-face {
-  font-family: Segoe UI;
-  font-weight: 200;
-  src: url("./fonts/segoe-ui-light.woff2") format("woff2");
-}
-body {
-  margin: 0;
-  padding: 0;
-  font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.DemoContainer {
-  display: flex;
-  height: 100vh;
-}
-.DemoForm {
-  overflow-y: scroll;
-  height: 100%;
-  width: 100%;
-  max-width: 600px;
-}
-.DemoForm .App {
-  padding-top: 20px;
-}
-.DemoJSONContainer .react-codemirror2 {
-  margin-top: 0;
-  height: 100%;
-  position: relative;
-}
-.DemoJSONContainer .CodeMirror {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-}
-.DemoJSONContainer .CodeMirror--error {
-  border: 10px solid #e81123;
-}
diff --git a/Composer/packages/extensions/obiformeditor/demo/tsconfig.json b/Composer/packages/extensions/obiformeditor/demo/tsconfig.json
deleted file mode 100644
index 37c11c5100..0000000000
--- a/Composer/packages/extensions/obiformeditor/demo/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": "."
-  },
-  "include": ["./src/**/*", "../src/**/*"]
-}
diff --git a/Composer/packages/extensions/obiformeditor/demo/webpack.config.demo.js b/Composer/packages/extensions/obiformeditor/demo/webpack.config.demo.js
deleted file mode 100644
index c8c2bfbf43..0000000000
--- a/Composer/packages/extensions/obiformeditor/demo/webpack.config.demo.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* eslint-disable */
-const path = require('path');
-
-const webpack = require('webpack');
-const autoprefixer = require('autoprefixer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
-module.exports = {
-  entry: path.resolve(__dirname, 'src/index.tsx'),
-  mode: 'development',
-  devtool: 'inline-source-map',
-  devServer: {
-    contentBase: path.join(__dirname, 'dist'),
-    port: 3001,
-    stats: 'errors-only',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        exclude: /node_modules/,
-        options: {
-          transpileOnly: true,
-          experimentalWatchApi: true,
-        },
-      },
-      {
-        test: /\.(gif|png|webp)$/,
-        loader: 'url-loader',
-        options: {
-          limit: 1,
-          name: '[name].[hash:8].[ext]',
-        },
-      },
-      { test: /\.svg$/, loader: 'url-loader', options: { limit: 1, name: '[name].[hash:8].[ext]' } },
-      { test: /\.jpe?g$/, loader: 'url-loader', options: { limit: 1, name: '[name].[hash:8].[ext]' } },
-      {
-        test: /\.(eot|otf|ttf|woff|woff2)$/,
-        loader: 'url-loader',
-        options: { limit: 1, name: '[name].[hash:8].[ext]' },
-      },
-      {
-        test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader',
-            options: {
-              hmr: true,
-              sourceMap: true,
-            },
-          },
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          {
-            loader: 'postcss-loader',
-            options: {
-              ident: 'postcss',
-              plugins: [
-                autoprefixer({
-                  browsers: ['>1%', 'last 2 versions', 'not ie < 11'],
-                }),
-              ],
-            },
-          },
-        ],
-      },
-      {
-        test: /\.s[ac]ss$/,
-        use: [
-          {
-            loader: 'style-loader',
-            options: {
-              hmr: true,
-              sourceMap: true,
-            },
-          },
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          {
-            loader: 'postcss-loader',
-            options: {
-              ident: 'postcss',
-              plugins: [
-                autoprefixer({
-                  browsers: ['>1%', 'last 2 versions', 'not ie < 11'],
-                }),
-              ],
-            },
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-    plugins: [new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, './tsconfig.json') })],
-    alias: {
-      vscode: require.resolve('monaco-languageclient/lib/vscode-compatibility'),
-    },
-  },
-
-  output: {
-    filename: '[name].[chunkhash:8].js',
-    chunkFilename: '[name].[chunkhash:8].js',
-    path: path.resolve('./demo/dist'),
-  },
-
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development'),
-    }),
-    new HtmlWebpackPlugin({
-      chunksSortMode: 'dependency',
-      template: path.join(__dirname, 'index.html'),
-    }),
-  ],
-};
diff --git a/Composer/packages/extensions/obiformeditor/jest.config.js b/Composer/packages/extensions/obiformeditor/jest.config.js
deleted file mode 100644
index d134021d7c..0000000000
--- a/Composer/packages/extensions/obiformeditor/jest.config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// eslint-disable-next-line
-const path = require('path');
-module.exports = {
-  preset: 'ts-jest/presets/js-with-babel',
-  moduleNameMapper: {
-    // Any imports of .scss / .css files will instead import styleMock.js which is an empty object
-    '\\.(s)?css$': '<rootDir>/__tests__/jestMocks/styleMock.ts',
-    vscode$: 'monaco-languageclient/lib/vscode-compatibility',
-  },
-  testPathIgnorePatterns: ['/node_modules/', '/jestMocks/', '__tests__/setup.ts'],
-  // Some node modules are packaged and distributed in a non-transpiled form
-  // (ex. contain import & export statements); and Jest won't be able to
-  // understand them because node_modules aren't transformed by default. So
-  // we can specify that they need to be transformed here.
-  transformIgnorePatterns: ['"/node_modules/(?!office-ui-fabric-react).+\\.js$"'],
-  setupFilesAfterEnv: [path.resolve(__dirname, './__tests__/setup.ts')],
-
-  globals: {
-    'ts-jest': {
-      tsConfig: path.resolve(__dirname, './tsconfig.json'),
-      diagnostics: {
-        warnOnly: true,
-      },
-    },
-  },
-};
diff --git a/Composer/packages/extensions/obiformeditor/package.json b/Composer/packages/extensions/obiformeditor/package.json
deleted file mode 100644
index d59689522f..0000000000
--- a/Composer/packages/extensions/obiformeditor/package.json
+++ /dev/null
@@ -1,94 +0,0 @@
-{
-  "name": "@bfc/obiformeditor",
-  "version": "1.0.0",
-  "description": "obieditortest React component",
-  "engines": {
-    "node": ">=12"
-  },
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "files": [
-    "css",
-    "es",
-    "lib",
-    "umd"
-  ],
-  "scripts": {
-    "build": "yarn clean && yarn build:css && yarn build:ts",
-    "build:ts": "tsc --build tsconfig.build.json",
-    "build:css": "copyfiles --up 1 \"src/**/*.css\" \"src/**/*.scss\" lib",
-    "clean": "rimraf lib demo/dist",
-    "prepublishOnly": "npm run build",
-    "start": "webpack-dev-server --config demo/webpack.config.demo.js",
-    "test": "jest",
-    "lint": "eslint --quiet --ext .ts,.tsx ./src ./__tests__",
-    "lint:fix": "yarn lint --fix",
-    "lint:typecheck": "tsc --noEmit",
-    "watch": "yarn build:ts --watch"
-  },
-  "dependencies": {
-    "@bfc/code-editor": "*",
-    "@bfc/indexers": "*",
-    "@bfc/shared": "*",
-    "@bfcomposer/react-jsonschema-form": "1.6.5",
-    "@emotion/core": "^10.0.17",
-    "@types/vscode": "^1.40.0",
-    "@uifabric/fluent-theme": "7.1.4",
-    "@uifabric/styling": "7.7.1",
-    "classnames": "^2.2.6",
-    "format-message": "^6.2.1",
-    "lodash": "^4.17.15",
-    "nanoid": "^2.0.1",
-    "office-ui-fabric-react": "7.62.0",
-    "react-error-boundary": "^1.2.5"
-  },
-  "peerDependencies": {
-    "react": "16.9.0",
-    "react-dom": "16.9.0"
-  },
-  "devDependencies": {
-    "@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/classnames": "^2.2.9",
-    "@types/codemirror": "^0.0.74",
-    "@types/jest": "^24.0.11",
-    "@types/json-schema": "^7.0.3",
-    "@types/lodash": "^4.14.146",
-    "@types/nanoid": "^1.2.1",
-    "@types/react": "16.9.0",
-    "@types/react-dom": "16.9.0",
-    "autoprefixer": "^9.5.1",
-    "adaptive-expressions": "^4.8.0-preview-110700",
-    "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",
-    "postcss-loader": "^3.0.0",
-    "react": "16.9.0",
-    "react-codemirror2": "^5.1.0",
-    "react-dom": "16.9.0",
-    "react-testing-library": "^6.0.2",
-    "rimraf": "^2.6.3",
-    "style-loader": "^0.23.1",
-    "ts-jest": "^24.1.0",
-    "ts-loader": "^5.3.3",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.8.2"
-  },
-  "author": "",
-  "homepage": "https://github.com/Microsoft/BotFramework-Composer",
-  "license": "MIT",
-  "repository": "",
-  "keywords": [
-    "react-component"
-  ]
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ArrayItem.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ArrayItem.tsx
deleted file mode 100644
index 4467cb10d7..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ArrayItem.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { ArrayFieldItem } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
-
-import { arrayItem } from './styles';
-
-const ArrayItem: React.FC<ArrayFieldItem> = props => {
-  const { children, hasMoveUp, hasMoveDown, hasRemove, onReorderClick, onDropIndexClick, index } = props;
-
-  // This needs to return true to dismiss the menu after a click.
-  const fabricMenuItemClickHandler = fn => e => {
-    fn(e);
-    return true;
-  };
-
-  const contextItems: IContextualMenuItem[] = [
-    {
-      key: 'moveUp',
-      text: 'Move Up',
-      iconProps: { iconName: 'CaretSolidUp' },
-      disabled: !hasMoveUp,
-      onClick: fabricMenuItemClickHandler(onReorderClick(index, index - 1)),
-    },
-    {
-      key: 'moveDown',
-      text: 'Move Down',
-      iconProps: { iconName: 'CaretSolidDown' },
-      disabled: !hasMoveDown,
-      onClick: fabricMenuItemClickHandler(onReorderClick(index, index + 1)),
-    },
-    {
-      key: 'remove',
-      text: 'Remove',
-      iconProps: { iconName: 'Cancel' },
-      disabled: !hasRemove,
-      onClick: fabricMenuItemClickHandler(onDropIndexClick(index)),
-    },
-  ];
-
-  return (
-    <div css={arrayItem}>
-      {children}
-      <IconButton
-        menuProps={{ items: contextItems }}
-        menuIconProps={{ iconName: 'MoreVertical' }}
-        ariaLabel={formatMessage('Item Actions')}
-        data-testid="ArrayItemContextMenu"
-        styles={{
-          menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 },
-          root: { margin: 'auto 0' },
-        }}
-      />
-    </div>
-  );
-};
-
-ArrayItem.defaultProps = {
-  onReorderClick: () => () => {},
-  onDropIndexClick: () => () => {},
-};
-
-export default ArrayItem;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/IDialogArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/IDialogArray.tsx
deleted file mode 100644
index af5bda01d8..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/IDialogArray.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { ArrayFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-import { createStepMenu, DialogGroup } from '@bfc/shared';
-
-import ArrayItem from './ArrayItem';
-
-const IDialogArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
-  const { items, canAdd, onAddClick, TitleField, DescriptionField } = props;
-
-  return (
-    <div className="ArrayContainer">
-      <TitleField title={props.title} id={`${props.idSchema.__id}__title`} required={props.required} />
-      <DescriptionField description={props.schema.description} id={`${props.idSchema.__id}__description`} />
-      {items.map((element, idx) => (
-        <ArrayItem {...element} key={idx} />
-      ))}
-      {canAdd && (
-        <PrimaryButton
-          type="button"
-          menuProps={{
-            items: createStepMenu(
-              [
-                DialogGroup.RESPONSE,
-                DialogGroup.INPUT,
-                DialogGroup.BRANCHING,
-                DialogGroup.STEP,
-                DialogGroup.MEMORY,
-                DialogGroup.CODE,
-                DialogGroup.LOG,
-              ],
-              true,
-              onAddClick
-            ),
-            // items: buildDialogOptions({
-            //   filter: item => !item.includes('Rule'),
-            //   onClick: (e, item) => onAddClick(e, item.data),
-            // }),
-            onItemClick: (e, item) => {
-              const newItem = item && item.data;
-
-              if (newItem) {
-                onAddClick(e, newItem);
-              }
-            },
-          }}
-          data-testid="ArrayContainerAdd"
-        >
-          {formatMessage('Add')}
-        </PrimaryButton>
-      )}
-    </div>
-  );
-};
-
-IDialogArray.defaultProps = {
-  formData: [],
-  items: [],
-  onAddClick: () => {},
-};
-
-export default IDialogArray;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx
deleted file mode 100644
index 55eb32fbe2..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useCallback, useMemo, useState } from 'react';
-import { ArrayFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { JSONSchema6 } from 'json-schema';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import formatMessage from 'format-message';
-
-import { BaseField } from '../fields/BaseField';
-import { WidgetLabel } from '../widgets/WidgetLabel';
-
-import ArrayItem from './ArrayItem';
-import { arrayItemInputFieldContainer, objectItemLabel, objectItemInputField, objectItemValueLabel } from './styles';
-
-const ObjectArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
-  const { canAdd, idSchema, items, onAddClick, schema = {}, uiSchema = {} } = props;
-  const { object } = (uiSchema['ui:options'] || {}) as any;
-  const { items: itemSchema = {} } = schema;
-  const { properties = {} } = itemSchema as JSONSchema6;
-
-  const [value, setValue] = useState({});
-
-  const handleChange = useCallback(
-    property => (_, newValue?: string) => {
-      setValue(currentValue => ({ ...currentValue, [property]: newValue || '' }));
-    },
-    [setValue]
-  );
-
-  const handleKeyDown = useCallback(
-    event => {
-      if (event.key.toLowerCase() === 'enter') {
-        event.preventDefault();
-
-        if (Object.keys(value).length) {
-          onAddClick(event, value);
-          setValue({});
-        }
-      }
-    },
-    [onAddClick, setValue, value]
-  );
-
-  const isVisible = useCallback(
-    (property: string) => {
-      const { items: itemsSchema } = uiSchema;
-      return !(
-        itemsSchema['ui:hidden'] &&
-        Array.isArray(itemsSchema['ui:hidden']) &&
-        itemsSchema['ui:hidden'].includes(property)
-      );
-    },
-    [uiSchema]
-  );
-
-  const objectProperties = useMemo(() => Object.keys(properties).filter(isVisible), [properties]);
-
-  return (
-    <BaseField {...props}>
-      {object && (
-        <div css={objectItemLabel}>
-          {objectProperties.length > 1 &&
-            objectProperties.map((key, index) => {
-              const { description, title } = properties[key] as JSONSchema6;
-              const { __id = '' } = idSchema[key] || {};
-
-              return (
-                <div css={objectItemValueLabel} key={index}>
-                  <WidgetLabel description={description} label={title} inline={true} id={__id} />
-                </div>
-              );
-            })}
-          <div style={{ width: '32px' }} />
-        </div>
-      )}
-      <div className="ObjectArray">
-        {items.map((element, idx) => (
-          <ArrayItem {...element} key={idx} />
-        ))}
-        {canAdd &&
-          (!object ? (
-            <div css={arrayItemInputFieldContainer}>
-              <DefaultButton type="button" onClick={onAddClick} data-testid="ArrayContainerAdd">
-                {formatMessage('Add')}
-              </DefaultButton>
-            </div>
-          ) : (
-            <div css={arrayItemInputFieldContainer}>
-              {objectProperties.map((property, index, items) => (
-                <div css={objectItemInputField} key={index}>
-                  <TextField
-                    autoComplete="off"
-                    onChange={handleChange(property)}
-                    onKeyDown={handleKeyDown}
-                    placeholder={`${formatMessage('Add new')} ${property}`}
-                    value={value[property] || ''}
-                    iconProps={{
-                      ...(index === items.length - 1
-                        ? {
-                            iconName: 'ReturnKey',
-                            style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-                          }
-                        : {}),
-                    }}
-                    ariaLabel={property}
-                    data-testid="object-array-text-input"
-                  />
-                </div>
-              ))}
-              <IconButton
-                disabled={true}
-                menuIconProps={{ iconName: 'MoreVertical' }}
-                ariaLabel={formatMessage('Item Actions')}
-                styles={{
-                  menuIcon: {
-                    backgroundColor: NeutralColors.white,
-                    color: NeutralColors.gray130,
-                    fontSize: FontSizes.size16,
-                  },
-                  rootDisabled: {
-                    backgroundColor: NeutralColors.white,
-                  },
-                }}
-              />
-            </div>
-          ))}
-      </div>
-    </BaseField>
-  );
-};
-
-ObjectArray.defaultProps = {
-  formData: [],
-  items: [],
-  onAddClick: () => {},
-};
-
-export default ObjectArray;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx
deleted file mode 100644
index feaec00957..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useCallback, useState } from 'react';
-import { ArrayFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import formatMessage from 'format-message';
-
-import { BaseField } from '../fields/BaseField';
-
-import { arrayItemInputFieldContainer } from './styles';
-import ArrayItem from './ArrayItem';
-
-const StringArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
-  const { canAdd, items, onAddClick } = props;
-  const [value, setValue] = useState('');
-
-  const handleChange = useCallback((_, newValue?: string) => setValue(newValue || ''), [setValue]);
-
-  const handleKeyDown = useCallback(
-    event => {
-      if (event.key.toLowerCase() === 'enter') {
-        event.preventDefault();
-
-        if (value) {
-          onAddClick(event, value);
-          setValue('');
-        }
-      }
-    },
-    [onAddClick, setValue, value]
-  );
-
-  return (
-    <BaseField {...props}>
-      <div>
-        {items.map((element, idx) => (
-          <ArrayItem {...element} key={idx} />
-        ))}
-      </div>
-      {canAdd && (
-        <div css={arrayItemInputFieldContainer}>
-          <TextField
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            value={value}
-            iconProps={{
-              iconName: 'ReturnKey',
-              style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-            }}
-            styles={{ root: { width: '100%' } }}
-            data-testid="string-array-text-input"
-            ariaLabel={formatMessage('String value')}
-          />
-          <IconButton
-            disabled={true}
-            menuIconProps={{ iconName: 'MoreVertical' }}
-            ariaLabel={formatMessage('Item Actions')}
-            styles={{
-              menuIcon: {
-                backgroundColor: NeutralColors.white,
-                color: NeutralColors.gray130,
-                fontSize: FontSizes.size16,
-              },
-              rootDisabled: {
-                backgroundColor: NeutralColors.white,
-              },
-            }}
-          />
-        </div>
-      )}
-    </BaseField>
-  );
-};
-
-StringArray.defaultProps = {
-  formData: [],
-  items: [],
-  onAddClick: () => {},
-};
-
-export default StringArray;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/index.tsx
deleted file mode 100644
index 8e8e7ade81..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { findSchemaDefinition } from '@bfcomposer/react-jsonschema-form/lib/utils';
-import { ArrayFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-
-import StringArray from './StringArray';
-import ObjectArray from './ObjectArray';
-import IDialogArray from './IDialogArray';
-
-const ArrayFieldTemplate: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
-  const { registry, schema } = props;
-
-  if (!schema.items) {
-    return null;
-  }
-
-  let itemSchema = schema.items as any;
-  const $ref = itemSchema.$ref;
-
-  if (!itemSchema.type && $ref) {
-    itemSchema = findSchemaDefinition($ref, registry.definitions);
-  }
-
-  switch (itemSchema.type) {
-    case 'object':
-      if ($ref && $ref.includes('IDialog')) {
-        return <IDialogArray {...props} />;
-      }
-
-      return <ObjectArray {...props} />;
-    default:
-      return <StringArray {...props} />;
-  }
-};
-
-export default ArrayFieldTemplate;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.css
deleted file mode 100644
index df37acf01a..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.ArrayContainer {
-  margin: 20px 0;
-}
-.ArrayItem {
-  display: flex;
-}
-.ArrayItem .ArrayItemField {
-  flex: 1;
-}
-.ArrayItem .ArrayItemField .ObjectFieldTemplate > .BaseField {
-  margin-top: 0;
-}
-.ArrayItem .FieldTemplate {
-  padding: 0;
-}
-.ArrayItem .ArrayItemContext {
-  flex-basis: auto;
-  margin-left: 15px;
-}
-.ArrayItem + .ArrayItem {
-  margin-top: 10px;
-}
-.ObjectArray .ObjectItem .ObjectItemField {
-  padding: 0;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.ts
deleted file mode 100644
index 82486729ac..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { css } from '@emotion/core';
-import { NeutralColors } from '@uifabric/fluent-theme';
-
-export const arrayItem = css`
-  display: flex;
-  padding: 4px 0;
-
-  border-top: 1px solid ${NeutralColors.gray30};
-`;
-
-export const arrayItemInputFieldContainer = css`
-  border-top: 1px solid ${NeutralColors.gray30};
-  display: flex;
-  padding: 8px 0;
-`;
-
-export const objectItemLabel = css`
-  display: flex;
-`;
-
-export const objectItemValueLabel = css`
-  color: ${NeutralColors.gray130};
-  flex: 1;
-  font-size: 14px;
-  margin-left: 4px;
-  & + & {
-    margin-left: 20px;
-  }
-`;
-
-export const objectItemInputField = css`
-  flex: 1;
-  & + & {
-    margin-left: 20px;
-  }
-`;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/FieldTemplate.tsx b/Composer/packages/extensions/obiformeditor/src/Form/FieldTemplate.tsx
deleted file mode 100644
index 14402b0ff7..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/FieldTemplate.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import get from 'lodash/get';
-import { FieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-import { FIELDS_TO_HIDE } from '@bfc/shared';
-
-export default function FieldTemplate(props: FieldTemplateProps) {
-  const { children, label, uiSchema } = props;
-
-  const hidden = get(uiSchema, 'ui:widget') === 'hidden' || get(uiSchema, 'ui:field') === 'NullField';
-
-  if (hidden || (label && FIELDS_TO_HIDE.includes(label.toLowerCase()))) {
-    return null;
-  }
-
-  return <div className="FieldTemplate">{children}</div>;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/NewPropertyModal.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/NewPropertyModal.tsx
deleted file mode 100644
index aac4195e0e..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/NewPropertyModal.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState, FormEvent } from 'react';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import formatMessage from 'format-message';
-import { JSONSchema6 } from 'json-schema';
-import get from 'lodash/get';
-
-import Modal from '../../Modal';
-
-const NAME_PATTERN = /^\S+$/;
-
-function validateName(name?: string): string | null {
-  if (!name || name.trim().length === 0) {
-    return formatMessage("Name can't be blank");
-  }
-
-  if (!NAME_PATTERN.test(name)) {
-    return formatMessage("Name can't contain any spaces");
-  }
-
-  return null;
-}
-
-interface NewPropertyModalProps {
-  name: string;
-  onDismiss: () => void;
-  onSubmit: (name: string, value: string) => void;
-  schema: JSONSchema6;
-}
-
-interface NewPropertyFormState {
-  name?: string;
-  error?: string;
-}
-type formUpdater<T = HTMLInputElement | HTMLTextAreaElement> = (e: FormEvent<T>, newValue?: string) => void;
-
-function getDefaultValue(schema: JSONSchema6): any {
-  switch (get(schema, 'additionalProperties.type')) {
-    case 'object':
-      return {};
-    case 'array':
-      return [];
-    default:
-      return '';
-  }
-}
-
-const NewPropertyModal: React.FunctionComponent<NewPropertyModalProps> = props => {
-  const { onDismiss, onSubmit, name, schema } = props;
-  const [formData, setFormData] = useState<NewPropertyFormState>({ name });
-
-  const updateForm: formUpdater = (_, newValue): void => {
-    setFormData({ error: undefined, name: newValue });
-  };
-
-  const handleSubmit = (e: FormEvent): void => {
-    e.preventDefault();
-
-    const nameError = validateName(formData.name);
-    if (nameError) {
-      setFormData({ ...formData, error: nameError });
-      return;
-    }
-
-    onSubmit(formData.name as string, getDefaultValue(schema));
-  };
-
-  return (
-    <Modal onDismiss={onDismiss}>
-      <form onSubmit={handleSubmit}>
-        <TextField
-          description={get(schema, 'propertyNames.description')}
-          label={get(schema, 'propertyNames.title') || formatMessage('Name')}
-          onChange={updateForm}
-          required
-          errorMessage={formData.error}
-          value={formData.name}
-          componentRef={ref => {
-            if (ref) {
-              ref.focus();
-            }
-          }}
-        />
-        <PrimaryButton type="submit" primary styles={{ root: { width: '100%', marginTop: '20px' } }}>
-          {formatMessage('Add')}
-        </PrimaryButton>
-      </form>
-    </Modal>
-  );
-};
-
-NewPropertyModal.defaultProps = {
-  onDismiss: () => {},
-  onSubmit: () => {},
-};
-
-export default NewPropertyModal;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/ObjectItem.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/ObjectItem.tsx
deleted file mode 100644
index 18a5b98588..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/ObjectItem.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { IContextualMenuItem, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import formatMessage from 'format-message';
-import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
-import classnames from 'classnames';
-import { FIELDS_TO_HIDE, OBISchema } from '@bfc/shared';
-import { UiSchema } from '@bfcomposer/react-jsonschema-form';
-
-import './styles.css';
-
-interface ObjectItemProps {
-  content: React.ReactNode;
-  name: string;
-  onDropPropertyClick: (name: string) => (e) => void;
-  onEdit: (e) => void;
-  onAdd: (e) => void;
-  schema: OBISchema;
-  uiSchema: UiSchema;
-}
-
-export default function ObjectItem(props: ObjectItemProps) {
-  const { content, schema, onAdd, onEdit, onDropPropertyClick, name, uiSchema } = props;
-  const { inline } = uiSchema['ui:options'] || ({} as any);
-
-  if (name && FIELDS_TO_HIDE.includes(name)) {
-    return null;
-  }
-
-  const contextItems: IContextualMenuItem[] = [];
-
-  if (schema.__additional_property) {
-    contextItems.push({
-      key: 'edit',
-      text: formatMessage('Edit'),
-      iconProps: { iconName: 'Edit' },
-      onClick: onEdit,
-    });
-
-    contextItems.push({
-      key: 'remove',
-      text: formatMessage('Remove'),
-      iconProps: { iconName: 'Cancel' },
-      onClick: onDropPropertyClick(name),
-    });
-
-    contextItems.push({
-      key: 'divider',
-      itemType: ContextualMenuItemType.Divider,
-    });
-
-    contextItems.push({
-      key: 'new',
-      text: formatMessage('New'),
-      onClick: onAdd,
-    });
-  }
-
-  const compoundType = schema.type && typeof schema.type === 'string' && ['array', 'object'].includes(schema.type);
-
-  return (
-    <div className={classnames(inline ? 'ObjectItemInline' : 'ObjectItem', { ObjectItemContainer: compoundType })}>
-      <div className={inline ? 'ObjectItemFieldInline' : 'ObjectItemField'}>{content}</div>
-      {contextItems.length > 0 && (
-        <div className="ObjectItemContext">
-          <IconButton
-            ariaLabel={formatMessage('Edit Property')}
-            menuProps={{ items: contextItems }}
-            menuIconProps={{ iconName: 'MoreVertical' }}
-            styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/index.tsx
deleted file mode 100644
index eff1ba6791..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState } from 'react';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { getUiOptions } from '@bfcomposer/react-jsonschema-form/lib/utils';
-import get from 'lodash/get';
-import omit from 'lodash/omit';
-import { ObjectFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-
-import { BaseField } from '../fields/BaseField';
-
-import ObjectItem from './ObjectItem';
-import NewPropertyModal from './NewPropertyModal';
-
-import './styles.css';
-
-function canExpand({ formData, schema, uiSchema }: ObjectFieldTemplateProps): boolean {
-  if (!schema.additionalProperties) {
-    return false;
-  }
-  const { expandable } = getUiOptions(uiSchema);
-  if (expandable === false) {
-    return expandable;
-  }
-  // if ui:options.expandable was not explicitly set to false, we can add
-  // another property if we have not exceeded maxProperties yet
-  if (schema.maxProperties !== undefined) {
-    return Object.keys(formData).length < schema.maxProperties;
-  }
-  return true;
-}
-
-const ObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps> = props => {
-  const { uiSchema } = props;
-  const [showModal, setShowModal] = useState(false);
-  const [editableProperty, setEditableProperty] = useState('');
-
-  const handlePropertyEdit = (newName: string, newValue: string): void => {
-    props.onChange({
-      ...omit(props.formData, editableProperty),
-      [newName]: newValue || get(props.formData, newName || editableProperty, ''),
-    });
-    setShowModal(false);
-    setEditableProperty('');
-  };
-
-  const onEditProperty = (propName: string): void => {
-    setEditableProperty(propName);
-    setShowModal(true);
-  };
-
-  const onDismiss = (): void => {
-    setEditableProperty('');
-    setShowModal(false);
-  };
-
-  const isHidden = (property: string) => {
-    return uiSchema['ui:hidden'] && Array.isArray(uiSchema['ui:hidden']) && uiSchema['ui:hidden'].includes(property);
-  };
-
-  return (
-    <div className="ObjectFieldTemplate" key={props.idSchema.__id}>
-      <BaseField {...props}>
-        {props.properties
-          .filter(p => !isHidden(p.name))
-          .map(p => (
-            <ObjectItem
-              {...p}
-              key={p.name}
-              onEdit={() => onEditProperty(p.name)}
-              onAdd={() => setShowModal(true)}
-              uiSchema={uiSchema}
-            />
-          ))}
-        {canExpand(props) && (
-          <>
-            <DefaultButton type="button" onClick={() => setShowModal(true)} styles={{ root: { marginTop: '10px' } }}>
-              {formatMessage('Add')}
-            </DefaultButton>
-            {showModal && (
-              <NewPropertyModal
-                onSubmit={handlePropertyEdit}
-                onDismiss={onDismiss}
-                name={editableProperty}
-                schema={props.schema || {}}
-              />
-            )}
-          </>
-        )}
-      </BaseField>
-    </div>
-  );
-};
-
-export default ObjectFieldTemplate;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css
deleted file mode 100644
index 797cd77b1c..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.ObjectItemInline {
-  flex: 1;
-  min-width: 0;
-}
-
-.ObjectItemInline + .ObjectItemInline {
-  margin-left: 20px;
-}
-
-.ObjectItem .ObjectItemField {
-  flex: 1;
-  padding: 0px 12px;
-  margin: 10px 0;
-}
-
-.ObjectItem .ObjectItemField {
-  padding: 0px 12px;
-  margin: 10px 0;
-}
-
-.ObjectItemFieldInline {
-  flex: 1;
-}
-
-.ObjectItem .ObjectItemContext {
-  flex-basis: auto;
-  margin-left: 15px;
-  display: flex;
-  align-items: flex-end;
-}
-
-.ObjectItem .ObjectItemContainer {
-  padding: 24px 0;
-  border-top: 1px solid #c8c6c4;
-  border-bottom: 1px solid #c8c6c4;
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-/* override styles when next to other bordered sections */
-.RootFieldTitle + .ObjectItem .ObjectItemContainer,
-.ObjectItem .ObjectItemContainer + .ObjectItem .ObjectItemContainer,
-.ObjectItem .ObjectItemContainer + .RootFieldMetaData {
-  border-top: none;
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.ObjectItem .ObjectItemContainer .ObjectItemField {
-  margin: 0;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/index.tsx
deleted file mode 100644
index 5d1fbcb946..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/index.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useState } from 'react';
-import formatMessage from 'format-message';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { NeutralColors, FontSizes, SharedColors } from '@uifabric/fluent-theme';
-import { IAssignmentObject, OBISchema, MicrosoftAdaptiveDialog } from '@bfc/shared';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import get from 'lodash/get';
-
-import { BFDFieldProps } from '../../types';
-import { swap, remove } from '../../utils';
-import { TextWidget } from '../../widgets';
-
-import {
-  field,
-  assignmentField,
-  assignmentItem,
-  assignmentItemContainer,
-  assignmentItemLabel,
-  assignmentItemValue,
-  assignmentItemValueLabel,
-  assignmentItemErrorMessage,
-} from './styles';
-
-interface AssignmentItemProps extends FieldProps<MicrosoftAdaptiveDialog> {
-  index: number;
-  assignment: IAssignmentObject;
-  hasMoveUp: boolean;
-  hasMoveDown: boolean;
-  onReorder: (a: number, b: number) => void;
-  onDelete: (idx: number) => void;
-  onEdit: (idx: number, value?: IAssignmentObject) => void;
-}
-
-interface AssignmentItemError {
-  property: string | JSX.Element | undefined;
-  value: string | JSX.Element | undefined;
-}
-
-const AssignmentItem: React.FC<AssignmentItemProps> = props => {
-  const {
-    assignment,
-    index,
-    onEdit,
-    hasMoveUp,
-    hasMoveDown,
-    onReorder,
-    onDelete,
-    schema,
-    idSchema,
-    uiSchema,
-    formContext,
-  } = props;
-  const [key, setKey] = useState(`${assignment.value}:${assignment.property}`);
-  const options = uiSchema['ui:options'];
-  const getSchema = (field: keyof IAssignmentObject): OBISchema => {
-    return get(schema, ['items', 'properties', field]);
-  };
-  const contextItems: IContextualMenuItem[] = [
-    {
-      key: 'moveUp',
-      text: 'Move Up',
-      iconProps: { iconName: 'CaretSolidUp' },
-      disabled: !hasMoveUp,
-      onClick: () => onReorder(index, index - 1),
-    },
-    {
-      key: 'moveDown',
-      text: 'Move Down',
-      iconProps: { iconName: 'CaretSolidDown' },
-      disabled: !hasMoveDown,
-      onClick: () => onReorder(index, index + 1),
-    },
-    {
-      key: 'remove',
-      text: 'Remove',
-      iconProps: { iconName: 'Cancel' },
-      onClick: () => onDelete(index),
-    },
-  ];
-
-  const handleEdit = (field: 'value' | 'property') => (val?: string) => {
-    onEdit(index, { ...assignment, [field]: val });
-  };
-
-  const handleBlur = () => {
-    setKey(`${assignment.value}:${assignment.property}`);
-    if (!assignment.value && !assignment.property) {
-      onDelete(index);
-    }
-  };
-
-  const [errorMessages, setErrorMessages] = useState<AssignmentItemError>({ property: undefined, value: undefined });
-
-  const handleValidation = (field: 'value' | 'property') => (err?: JSX.Element | string) => {
-    setErrorMessages(errorMessages => ({ ...errorMessages, [field]: err }));
-  };
-  return (
-    <div css={[assignmentItemContainer(), assignmentItem]} key={key}>
-      <div css={assignmentItemValue}>
-        <TextWidget
-          onChange={handleEdit('property')}
-          value={assignment.property}
-          schema={getSchema('property')}
-          id={idSchema.property && idSchema.property.__id.replace('assignments_', `assignments_${index}_`)}
-          label={formatMessage('Property')}
-          formContext={formContext}
-          onBlur={handleBlur}
-          hiddenErrMessage={true}
-          onValidate={handleValidation('property')}
-          options={options}
-        />
-      </div>
-      <div css={assignmentItemValue}>
-        <TextWidget
-          onChange={handleEdit('value')}
-          value={assignment.value}
-          schema={getSchema('value')}
-          id={idSchema.value && idSchema.value.__id.replace('assignments_', `assignments_${index}_`)}
-          label={formatMessage('Value')}
-          formContext={formContext}
-          onBlur={handleBlur}
-          hiddenErrMessage={true}
-          onValidate={handleValidation('value')}
-          options={options}
-        />
-      </div>
-      <div>
-        <IconButton
-          menuProps={{ items: contextItems }}
-          menuIconProps={{ iconName: 'MoreVertical' }}
-          ariaLabel={formatMessage('Item Actions')}
-          styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-        />
-      </div>
-      <div css={assignmentItemErrorMessage}>{errorMessages && (errorMessages.property || errorMessages.value)}</div>
-    </div>
-  );
-};
-
-export const AssignmentsField: React.FC<BFDFieldProps> = props => {
-  const { formData = [], idSchema, onChange } = props;
-  const [newassignment, setNewassignment] = useState<IAssignmentObject>({ property: '', value: '' });
-  const [errorMsg, setErrorMsg] = useState<string>('');
-  const id = idSchema.__id;
-
-  const handleReorder = (aIdx: number, bIdx: number) => {
-    onChange(swap(formData, aIdx, bIdx));
-  };
-
-  const handleDelete = (idx: number) => {
-    onChange(remove(formData, idx));
-  };
-
-  const handleEdit = (idx, val) => {
-    const assignments = [...formData];
-    assignments[idx] = val;
-    onChange(assignments);
-  };
-
-  const handleNewassignmentEdit = (field: 'value' | 'property') => (_e: any, data?: string) => {
-    setNewassignment({ ...newassignment, [field]: data });
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key.toLowerCase() === 'enter') {
-      e.preventDefault();
-
-      if (newassignment) {
-        if (newassignment.value) {
-          onChange([...formData, newassignment]);
-          setNewassignment({ property: '', value: '' });
-          setErrorMsg('');
-        } else {
-          setErrorMsg(formatMessage('value required'));
-        }
-      }
-    }
-  };
-
-  return (
-    <div>
-      <div css={[assignmentItemContainer('flex-start'), assignmentItemLabel]}>
-        <div css={[assignmentItemValue, assignmentItemValueLabel]}>{formatMessage('property')}</div>
-        <div css={[assignmentItemValue, assignmentItemValueLabel]}>{formatMessage('value')}</div>
-      </div>
-      <div css={assignmentField}>
-        {Array.isArray(formData) &&
-          formData.map((c, i) => (
-            <AssignmentItem
-              key={`${i}-${formData.length}`}
-              assignment={c}
-              index={i}
-              onEdit={handleEdit}
-              onReorder={handleReorder}
-              onDelete={handleDelete}
-              hasMoveDown={i !== formData.length - 1}
-              hasMoveUp={i !== 0}
-              {...props}
-            />
-          ))}
-      </div>
-      <div css={field}>
-        <div css={assignmentItemContainer('flex-start')} onKeyDown={handleKeyDown}>
-          <div css={assignmentItemValue}>
-            <TextField
-              id={`${id}-property`}
-              value={newassignment ? newassignment.property : ''}
-              onChange={handleNewassignmentEdit('property')}
-              placeholder={formatMessage('Property (named location to store information).')}
-              autoComplete="off"
-              ariaLabel={formatMessage('Property')}
-            />
-          </div>
-          <div css={assignmentItemValue}>
-            <TextField
-              id={`${id}-value`}
-              value={newassignment ? newassignment.value : ''}
-              onChange={handleNewassignmentEdit('value')}
-              placeholder={formatMessage('New value or expression.')}
-              autoComplete="off"
-              errorMessage={errorMsg}
-              iconProps={{
-                iconName: 'ReturnKey',
-                style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-              }}
-              ariaLabel={formatMessage('Value')}
-            />
-          </div>
-          <div>
-            <IconButton
-              disabled={true}
-              menuIconProps={{ iconName: 'MoreVertical' }}
-              ariaLabel={formatMessage('Item Actions')}
-              styles={{
-                menuIcon: {
-                  backgroundColor: NeutralColors.white,
-                  color: NeutralColors.gray130,
-                  fontSize: FontSizes.size16,
-                },
-                rootDisabled: {
-                  backgroundColor: NeutralColors.white,
-                },
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/styles.ts
deleted file mode 100644
index 4f3fceeb78..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/styles.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { css } from '@emotion/core';
-import { NeutralColors } from '@uifabric/fluent-theme';
-
-export const field = css`
-  margin: 10px 0;
-`;
-
-export const assignmentItemContainer = (align = 'center') => css`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: ${align};
-`;
-
-export const assignmentField = css`
-  margin-bottom: 7px;
-`;
-
-export const assignmentItem = css`
-  border-bottom: 1px solid ${NeutralColors.gray30};
-`;
-
-export const assignmentItemValue = css`
-  flex: 1;
-
-  & + & {
-    margin-left: 20px;
-  }
-`;
-
-export const assignmentItemLabel = css`
-  border-bottom: 1px solid ${NeutralColors.gray30};
-  padding-bottom: 7px;
-`;
-
-export const assignmentItemValueLabel = css`
-  color: ${NeutralColors.gray130};
-  font-size: 12px;
-  margin-left: 7px;
-`;
-
-export const assignmentItemErrorMessage = css`
-  flex-basis: 100%;
-  min-width: 0;
-`;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx
deleted file mode 100644
index 74e0a3d484..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import startCase from 'lodash/startCase';
-import { JSONSchema6 } from 'json-schema';
-import { IdSchema, UiSchema } from '@bfcomposer/react-jsonschema-form';
-import get from 'lodash/get';
-import classnames from 'classnames';
-
-import { FormContext } from '../types';
-import { WidgetLabel } from '../widgets/WidgetLabel';
-
-import { RootField } from './RootField';
-
-import './styles.css';
-
-interface BaseFieldProps<T> {
-  children?: React.ReactNode;
-  className?: string;
-  description?: string;
-  formContext: FormContext;
-  formData: T;
-  idSchema: IdSchema;
-  name?: string;
-  onChange?: (data: T) => void;
-  schema: JSONSchema6;
-  title?: string;
-  uiSchema: UiSchema;
-}
-
-export function BaseField<T = any>(props: BaseFieldProps<T>): JSX.Element {
-  const { children, className, description, formContext, idSchema, name, schema, title, uiSchema } = props;
-  const isRootBaseField = idSchema.__id === formContext.rootId;
-  const fieldOverrides = get(formContext.editorSchema, `content.SDKOverrides`);
-  const { inline: displayInline, hideDescription } = (uiSchema['ui:options'] || {}) as any;
-  let titleOverride;
-  let descriptionOverride;
-  let helpLink;
-  let helpLinkText;
-  let helpLinkLabel;
-  let key = idSchema.__id;
-
-  if (schema.title) {
-    const SDKOverrides = fieldOverrides[`${schema.title}`];
-    titleOverride = get(SDKOverrides, 'title');
-    descriptionOverride = get(SDKOverrides, 'description');
-    helpLink = get(SDKOverrides, 'helpLink');
-    helpLinkText = get(SDKOverrides, 'helpLinkText');
-    helpLinkLabel = get(SDKOverrides, 'helpLinkLabel');
-  }
-
-  // use dialogId as the key because the focusPath may not be enough
-  if (formContext.dialogId) {
-    key = `${key}-${formContext.dialogId}`;
-  }
-
-  const getTitle = () => {
-    if (titleOverride === false) {
-      return null;
-    }
-
-    return uiSchema['ui:title'] || titleOverride || title || schema.title || startCase(name);
-  };
-
-  const getDescription = () => {
-    if (descriptionOverride === false) {
-      return null;
-    }
-
-    return descriptionOverride || description || uiSchema['ui:description'] || schema.description;
-  };
-
-  return isRootBaseField ? (
-    <RootField {...props} key={key} id={key.replace(/\.|#/g, '')}>
-      {children}
-    </RootField>
-  ) : (
-    <div className={classnames({ BaseField: !displayInline }, className)} key={key} id={key.replace(/\.|#/g, '')}>
-      {!hideDescription && (
-        <WidgetLabel
-          label={getTitle()}
-          description={getDescription()}
-          helpLink={helpLink}
-          helpLinkText={helpLinkText}
-          helpLinkLabel={helpLinkLabel}
-          id={key}
-        />
-      )}
-      <div className={classnames({ BaseFieldInline: displayInline })}>{children}</div>
-    </div>
-  );
-}
-
-BaseField.defaultProps = {
-  formContext: {},
-  uiSchema: {},
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/CodeField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/CodeField.tsx
deleted file mode 100644
index 1432c8cfd4..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/CodeField.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState } from 'react';
-import { UnControlled as CodeMirror } from 'react-codemirror2';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
-import formatMessage from 'format-message';
-
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/clike/clike';
-import 'codemirror/lib/codemirror.css';
-
-import './codemirror-fabric.css';
-import './styles.css';
-import { BaseField } from './BaseField';
-
-const cmOptions = {
-  theme: 'fabric',
-  viewportMargin: Infinity,
-  lineNumbers: true,
-  lineWrapping: true,
-  indentWithTabs: false,
-  tabSize: 2,
-  smartIndent: true,
-  height: 'auto',
-};
-
-const modeOptions: IDropdownOption[] = [
-  {
-    text: 'C#',
-    key: 'text/x-csharp',
-  },
-  {
-    text: 'Javscript',
-    key: 'javascript',
-  },
-];
-
-export const CodeField: React.FC<FieldProps> = props => {
-  const [mode, setMode] = useState('javascript');
-  const [initialData] = useState(props.formData);
-
-  return (
-    <BaseField {...props} className="CodeField">
-      <MessageBar messageBarType={MessageBarType.warning}>
-        <strong>{formatMessage('Experimental:')}</strong>&nbsp;
-        {formatMessage('The code step is experimental. It should be used cautiously.')}
-      </MessageBar>
-
-      <div className="CodeFieldModeSelector">
-        <Dropdown
-          label={formatMessage('Language')}
-          options={modeOptions}
-          selectedKey={mode}
-          onChange={(e, item) => {
-            if (item) {
-              setMode(item.key as string);
-            }
-          }}
-        />
-      </div>
-      <CodeMirror
-        value={initialData}
-        options={{ ...cmOptions, mode }}
-        onChange={(editor, data, value) => {
-          props.onChange(value);
-        }}
-        autoCursor={false}
-      />
-    </BaseField>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.css
deleted file mode 100644
index 7cf83d8586..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.DesignerField {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-}
-.DesignerFieldSection {
-  flex: 1;
-}
-.DesignerFieldSection + .DesignerFieldSection {
-  margin-left: 50px;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.tsx
deleted file mode 100644
index 28e8949264..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useEffect } from 'react';
-import formatMessage from 'format-message';
-import { getDesignerId, DesignerData } from '@bfc/shared';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { NeutralColors } from '@uifabric/fluent-theme';
-import get from 'lodash/get';
-
-import './DesignerField.css';
-
-interface DesignerFieldProps {
-  placeholder: string;
-  data: DesignerData;
-  onChange: (data: DesignerData) => void;
-}
-
-export const DesignerField: React.FC<DesignerFieldProps> = props => {
-  const { data, onChange } = props;
-
-  useEffect(() => {
-    // create new designer metadata
-    if (!data || !data.id) {
-      const newDesigner = getDesignerId(data);
-      onChange(newDesigner);
-    }
-  }, [data]);
-
-  const update = (field: string, val?: string) => {
-    onChange({
-      ...data,
-      [field]: val,
-    });
-  };
-
-  return (
-    <div className="DesignerField">
-      <div className="DesignerFieldSection">
-        <TextField
-          value={get(data, 'name')}
-          placeholder={props.placeholder}
-          label={formatMessage('Name')}
-          onChange={(_, val) => update('name', val)}
-        />
-        <TextField
-          multiline
-          autoAdjustHeight
-          value={get(data, 'description')}
-          label={formatMessage('Description')}
-          onChange={(_, val) => update('description', val)}
-        />
-      </div>
-      <div className="DesignerFieldSection">
-        <TextField
-          value={get(data, 'id')}
-          label={formatMessage('ID number')}
-          borderless
-          readOnly
-          styles={{ field: { color: NeutralColors.gray140, paddingLeft: 0 } }}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/JsonField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/JsonField.tsx
deleted file mode 100644
index 66f8e3cc41..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/JsonField.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { JsonEditor } from '@bfc/code-editor';
-
-import './styles.css';
-
-import { BaseField } from './BaseField';
-
-export const JsonField: React.FC<FieldProps> = props => {
-  return (
-    <BaseField {...props} className="JsonField">
-      <div style={{ height: '315px' }}>
-        <JsonEditor onChange={props.onChange} value={props.formData} />
-      </div>
-    </BaseField>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/LgEditorField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/LgEditorField.tsx
deleted file mode 100644
index bafb511190..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/LgEditorField.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { Suspense } from 'react';
-
-import { BFDFieldProps } from '../types';
-import { LoadingSpinner } from '../../LoadingSpinner';
-
-import { BaseField } from './BaseField';
-
-const LgEditorWidget = React.lazy(() => import('../widgets/LgEditorWidget'));
-
-export const LgEditorField: React.FC<BFDFieldProps> = props => {
-  return (
-    <BaseField {...props}>
-      <Suspense fallback={<LoadingSpinner />}>
-        <LgEditorWidget
-          name={props.name}
-          value={props.formData}
-          formContext={props.formContext}
-          onChange={props.onChange}
-        />
-      </Suspense>
-    </BaseField>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx
deleted file mode 100644
index 3f95feadb8..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import formatMessage from 'format-message';
-import { MicrosoftInputDialog } from '@bfc/shared';
-
-import { LgEditorWidget } from '../../widgets/LgEditorWidget';
-import { WidgetLabel } from '../../widgets/WidgetLabel';
-import { BFDFieldProps } from '../../types';
-
-import { field } from './styles';
-import { GetSchema, PromptFieldChangeHandler } from './types';
-
-interface BotAsksProps extends BFDFieldProps<MicrosoftInputDialog> {
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-}
-
-export const BotAsks: React.FC<BotAsksProps> = props => {
-  const { onChange, getSchema, formData, formContext } = props;
-
-  return (
-    <div css={field}>
-      <WidgetLabel label={formatMessage('Prompt')} description={getSchema('prompt').description} />
-      <LgEditorWidget
-        name="prompt"
-        onChange={onChange('prompt')}
-        value={formData.prompt}
-        formContext={formContext}
-        height={125}
-      />
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/ChoiceOptions.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/ChoiceOptions.tsx
deleted file mode 100644
index 95c544bced..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/ChoiceOptions.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { Fragment } from 'react';
-import formatMessage from 'format-message';
-import { IdSchema } from '@bfcomposer/react-jsonschema-form';
-import get from 'lodash/get';
-import { IChoiceOption, OBISchema } from '@bfc/shared';
-
-import { field } from '../styles';
-import { TextWidget, CheckboxWidget } from '../../../widgets';
-import { FormContext } from '../../../types';
-
-interface ChoiceOptionsProps {
-  idSchema: IdSchema;
-  schema: OBISchema;
-  formData: IChoiceOption;
-  onChange: (field: keyof IChoiceOption) => (data: any) => void;
-  formContext: FormContext;
-}
-
-export const ChoiceOptions: React.FC<ChoiceOptionsProps> = props => {
-  const { schema, formData, onChange, idSchema, formContext } = props;
-
-  const optionSchema = (field: keyof IChoiceOption): OBISchema => {
-    return get(schema, ['properties', field]);
-  };
-
-  return (
-    <Fragment>
-      <div css={field}>
-        <TextWidget
-          onChange={onChange('inlineSeparator')}
-          schema={optionSchema('inlineSeparator')}
-          id={idSchema.inlineSeparator && idSchema.inlineSeparator.__id}
-          value={formData.inlineSeparator}
-          label={formatMessage('Inline separator')}
-          formContext={formContext}
-        />
-      </div>
-      <div css={field}>
-        <TextWidget
-          onChange={onChange('inlineOr')}
-          schema={optionSchema('inlineOr')}
-          id={idSchema.inlineOr && idSchema.inlineOr.__id}
-          value={formData.inlineOr}
-          label={formatMessage('Inline or')}
-          formContext={formContext}
-        />
-      </div>
-      <div css={field}>
-        <TextWidget
-          onChange={onChange('inlineOrMore')}
-          schema={optionSchema('inlineOrMore')}
-          id={idSchema.inlineOrMore && idSchema.inlineOrMore.__id}
-          value={formData.inlineOrMore}
-          label={formatMessage('Inline or more')}
-          formContext={formContext}
-        />
-      </div>
-      <div css={field}>
-        <CheckboxWidget
-          onChange={onChange('includeNumbers')}
-          schema={optionSchema('includeNumbers')}
-          id={idSchema.includeNumbers && idSchema.includeNumbers.__id}
-          value={formData.includeNumbers}
-          label={formatMessage('Include numbers')}
-          formContext={formContext}
-        />
-      </div>
-    </Fragment>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/Choices.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/Choices.tsx
deleted file mode 100644
index bb758a9a9f..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/Choices.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Dropdown, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
-import { JSONSchema6 } from 'json-schema';
-import { IChoice } from '@bfc/shared';
-import formatMessage from 'format-message';
-
-import { FormContext } from '../../../types';
-import { WidgetLabel } from '../../../widgets/WidgetLabel';
-
-import { StaticChoices } from './StaticChoices';
-import { DynamicChoices } from './DynamicChoices';
-
-interface ChoicesProps {
-  id: string;
-  schema: JSONSchema6;
-  formContext: FormContext;
-  formData?: IChoice;
-  label: string;
-  onChange: (data: IChoice) => void;
-}
-
-export const Choices: React.FC<ChoicesProps> = props => {
-  const {
-    id,
-    label,
-    formContext,
-    formData,
-    onChange,
-    schema: { oneOf = [] },
-  } = props;
-  const [dynamicSchema] = oneOf;
-
-  const options = useMemo(() => oneOf.map(({ title = '' }: any) => ({ key: title.toLowerCase(), text: title })), [
-    oneOf,
-  ]);
-  const [choiceType, setChoiceType] = useState(Array.isArray(formData || []) ? 'static' : 'dynamic');
-  const handleChange = useCallback(
-    (_, { key }) => {
-      onChange(choiceType !== 'static' ? [] : '');
-      setChoiceType(key);
-    },
-    [choiceType, onchange, setChoiceType]
-  );
-
-  useEffect(() => {
-    setChoiceType(Array.isArray(formData ?? []) && typeof formData !== 'string' ? 'static' : 'dynamic');
-  }, [formData]);
-
-  return (
-    <React.Fragment>
-      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0' }}>
-        <WidgetLabel
-          label={label}
-          description={
-            formatMessage('A list of options to present to the user.') +
-            (choiceType === 'static'
-              ? formatMessage(" Synonyms can be used to allow for variation in a user's response.")
-              : '')
-          }
-          id={id}
-        />
-        {options.length > 0 && (
-          <Dropdown
-            styles={{
-              caretDownWrapper: { height: '24px', lineHeight: '24px' },
-              root: { padding: '7px 0', width: '100px' },
-              title: { height: '24px', lineHeight: '20px' },
-            }}
-            onChange={handleChange}
-            options={options}
-            selectedKey={choiceType}
-            responsiveMode={ResponsiveMode.large}
-          />
-        )}
-      </div>
-      {!options || choiceType === 'static' ? (
-        <StaticChoices {...props} />
-      ) : (
-        <DynamicChoices {...props} formContext={formContext} schema={dynamicSchema as JSONSchema6} />
-      )}
-    </React.Fragment>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/DynamicChoices.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/DynamicChoices.tsx
deleted file mode 100644
index 7e5ac01755..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/DynamicChoices.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { IChoice } from '@bfc/shared';
-import { JSONSchema6 } from 'json-schema';
-import formatMessage from 'format-message';
-
-import { ExpressionWidget } from '../../../widgets/ExpressionWidget';
-import { FormContext } from '../../../types';
-
-interface DynamicChoicesProps {
-  id: string;
-  formContext: FormContext;
-  formData?: any;
-  onChange?: (value: IChoice) => void;
-  schema: JSONSchema6;
-}
-
-export const DynamicChoices: React.FC<DynamicChoicesProps> = props => {
-  const {
-    id,
-    formContext,
-    formData = '',
-    onChange,
-    schema,
-    schema: { description },
-  } = props;
-  return (
-    <ExpressionWidget
-      id={id}
-      label={formatMessage('Choice')}
-      formContext={formContext}
-      onChange={(_, value = '') => onChange && onChange(value)}
-      options={{ hideLabel: true }}
-      placeholder={description}
-      value={formData}
-      schema={schema}
-    />
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx
deleted file mode 100644
index 3c4c9aa60d..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useState } from 'react';
-import formatMessage from 'format-message';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { NeutralColors, FontSizes, SharedColors } from '@uifabric/fluent-theme';
-import { IChoiceObject } from '@bfc/shared';
-
-import {
-  field,
-  choiceField,
-  choiceItem,
-  choiceItemContainer,
-  choiceItemLabel,
-  choiceItemValue,
-  choiceItemValueLabel,
-} from '../styles';
-import { swap, remove } from '../../../utils';
-import { EditableField } from '../../EditableField';
-
-interface ChoiceItemProps {
-  index: number;
-  choice: IChoiceObject;
-  hasMoveUp: boolean;
-  hasMoveDown: boolean;
-  onReorder: (a: number, b: number) => void;
-  onDelete: (idx: number) => void;
-  onEdit: (idx: number, value?: IChoiceObject) => void;
-}
-
-const ChoiceItem: React.FC<ChoiceItemProps> = props => {
-  const { choice, index, onEdit, hasMoveUp, hasMoveDown, onReorder, onDelete } = props;
-  const [key, setKey] = useState(`${choice.value}:${choice.synonyms ? choice.synonyms.join() : ''}`);
-
-  const contextItems: IContextualMenuItem[] = [
-    {
-      key: 'moveUp',
-      text: 'Move Up',
-      iconProps: { iconName: 'CaretSolidUp' },
-      disabled: !hasMoveUp,
-      onClick: () => onReorder(index, index - 1),
-    },
-    {
-      key: 'moveDown',
-      text: 'Move Down',
-      iconProps: { iconName: 'CaretSolidDown' },
-      disabled: !hasMoveDown,
-      onClick: () => onReorder(index, index + 1),
-    },
-    {
-      key: 'remove',
-      text: 'Remove',
-      iconProps: { iconName: 'Cancel' },
-      onClick: () => onDelete(index),
-    },
-  ];
-
-  const handleEdit = (field: 'value' | 'synonyms') => (_e: any, val?: string) => {
-    if (field === 'synonyms') {
-      onEdit(index, { ...choice, synonyms: val ? val.split(', ') : [] });
-    } else {
-      onEdit(index, { ...choice, value: val });
-    }
-  };
-
-  const handleBlur = () => {
-    setKey(`${choice.value}:${choice.synonyms ? choice.synonyms.join() : ''}`);
-    if (!choice.value && (!choice.synonyms || !choice.synonyms.length)) {
-      onDelete(index);
-    }
-  };
-
-  return (
-    <div css={[choiceItemContainer(), choiceItem]} key={key}>
-      <div css={choiceItemValue}>
-        <EditableField
-          onChange={handleEdit('value')}
-          value={choice.value}
-          styles={{
-            root: { margin: '7px 0 7px 0' },
-          }}
-          onBlur={handleBlur}
-          ariaLabel={formatMessage('Value')}
-        />
-      </div>
-      <div css={choiceItemValue}>
-        <EditableField
-          onChange={handleEdit('synonyms')}
-          value={choice.synonyms && choice.synonyms.join(', ')}
-          placeholder={formatMessage('Add multiple comma-separated synonyms')}
-          styles={{
-            root: { margin: '7px 0 7px 0' },
-          }}
-          options={{ transparentBorder: true }}
-          onBlur={handleBlur}
-          ariaLabel={formatMessage('Synonyms')}
-        />
-      </div>
-      <div>
-        <IconButton
-          menuProps={{ items: contextItems }}
-          menuIconProps={{ iconName: 'MoreVertical' }}
-          ariaLabel={formatMessage('Item Actions')}
-          styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const StaticChoices = props => {
-  const { formData = [], id, onChange } = props;
-  const [newChoice, setNewChoice] = useState<IChoiceObject | null>(null);
-  const [errorMsg, setErrorMsg] = useState<string>('');
-
-  const handleReorder = (aIdx: number, bIdx: number) => {
-    onChange(swap(formData, aIdx, bIdx));
-  };
-
-  const handleDelete = (idx: number) => {
-    onChange(remove(formData, idx));
-  };
-
-  const handleEdit = (idx, val) => {
-    const choices = [...(formData || [])];
-    choices[idx] = val;
-    onChange(choices);
-  };
-
-  const handleNewChoiceEdit = (field: 'value' | 'synonyms') => (_e: any, data?: string) => {
-    if (field === 'synonyms') {
-      setNewChoice({ ...newChoice, synonyms: data ? data.split(', ') : [] });
-    } else {
-      setNewChoice({ ...newChoice, value: data });
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key.toLowerCase() === 'enter') {
-      e.preventDefault();
-
-      if (newChoice) {
-        if (newChoice.value) {
-          onChange([...formData, newChoice]);
-          setNewChoice(null);
-          setErrorMsg('');
-        } else {
-          setErrorMsg(formatMessage('value required'));
-        }
-      }
-    }
-  };
-
-  return (
-    <div>
-      <div css={[choiceItemContainer('flex-start'), choiceItemLabel]}>
-        <div css={[choiceItemValue, choiceItemValueLabel]}>{formatMessage('Choice Name')}</div>
-        <div css={[choiceItemValue, choiceItemValueLabel]}>{formatMessage('Synonyms (Optional)')}</div>
-      </div>
-      <div css={choiceField}>
-        {Array.isArray(formData) &&
-          formData.map((c, i) => (
-            <ChoiceItem
-              key={`${i}-${formData.length}`}
-              choice={c}
-              index={i}
-              onEdit={handleEdit}
-              onReorder={handleReorder}
-              onDelete={handleDelete}
-              hasMoveDown={i !== formData.length - 1}
-              hasMoveUp={i !== 0}
-            />
-          ))}
-      </div>
-      <div css={field}>
-        <div css={choiceItemContainer('flex-start')} onKeyDown={handleKeyDown}>
-          <div css={choiceItemValue}>
-            <TextField
-              id={id}
-              value={newChoice ? newChoice.value : ''}
-              onChange={handleNewChoiceEdit('value')}
-              placeholder={formatMessage('Add new option here')}
-              autoComplete="off"
-              errorMessage={errorMsg}
-              ariaLabel={formatMessage('Value')}
-            />
-          </div>
-          <div css={choiceItemValue}>
-            <TextField
-              id={`${id}-synonyms`}
-              value={newChoice ? (newChoice.synonyms || []).join(', ') : ''}
-              onChange={handleNewChoiceEdit('synonyms')}
-              placeholder={formatMessage('Add multiple comma-separated synonyms ')}
-              autoComplete="off"
-              iconProps={{
-                iconName: 'ReturnKey',
-                style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-              }}
-              ariaLabel={formatMessage('Synonyms')}
-            />
-          </div>
-          <div>
-            <IconButton
-              disabled={true}
-              menuIconProps={{ iconName: 'MoreVertical' }}
-              ariaLabel={formatMessage('Item Actions')}
-              styles={{
-                menuIcon: {
-                  backgroundColor: NeutralColors.white,
-                  color: NeutralColors.gray130,
-                  fontSize: FontSizes.size16,
-                },
-                rootDisabled: {
-                  backgroundColor: NeutralColors.white,
-                },
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/index.tsx
deleted file mode 100644
index b57fd55576..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { Fragment } from 'react';
-import { FieldProps, IdSchema } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-import { ChoiceInput, IChoiceOption } from '@bfc/shared';
-
-import { PromptFieldChangeHandler, GetSchema } from '../types';
-import { CheckboxWidget } from '../../../widgets';
-import { field } from '../styles';
-import { FormContext } from '../../../types';
-
-import { Choices } from './Choices';
-import { ChoiceOptions } from './ChoiceOptions';
-
-interface ChoiceInputSettingsProps extends FieldProps<ChoiceInput> {
-  formContext: FormContext;
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-}
-
-export const ChoiceInputSettings: React.FC<ChoiceInputSettingsProps> = props => {
-  const { getSchema, formData, idSchema, onChange, formContext } = props;
-
-  const updateChoiceOptions = (field: keyof IChoiceOption) => (data: any) => {
-    const updater = onChange('choiceOptions');
-    updater({ ...formData.choiceOptions, [field]: data });
-  };
-
-  return (
-    <Fragment>
-      <Choices
-        formContext={formContext}
-        formData={formData.choices}
-        schema={getSchema('choices')}
-        onChange={onChange('choices')}
-        id={idSchema.choices && idSchema.choices.__id}
-        label={formatMessage('Choice Options')}
-      />
-      <ChoiceOptions
-        schema={getSchema('choiceOptions')}
-        idSchema={idSchema.choiceOptions as IdSchema}
-        onChange={updateChoiceOptions}
-        formData={formData.choiceOptions || {}}
-        formContext={formContext}
-      />
-      <div css={field}>
-        <CheckboxWidget
-          onChange={onChange('appendChoices')}
-          schema={getSchema('appendChoices')}
-          id={idSchema.appendChoices && idSchema.appendChoices.__id}
-          value={formData.appendChoices}
-          label={formatMessage('Append choices')}
-          formContext={formContext}
-        />
-      </div>
-    </Fragment>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ConfirmInput.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ConfirmInput.tsx
deleted file mode 100644
index 92ab6f5bcf..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ConfirmInput.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { FieldProps, IdSchema } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-import { ConfirmInput, IChoiceOption } from '@bfc/shared';
-
-import { PromptFieldChangeHandler, GetSchema } from './types';
-import { Choices } from './ChoiceInput/Choices';
-import { ChoiceOptions } from './ChoiceInput/ChoiceOptions';
-
-interface ConfirmInputSettingsProps extends FieldProps<ConfirmInput> {
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-}
-
-export const ConfirmInputSettings: React.FC<ConfirmInputSettingsProps> = props => {
-  const { getSchema, formData, idSchema, onChange, formContext } = props;
-
-  const updateChoiceOptions = (field: keyof IChoiceOption) => (data: any) => {
-    const updater = onChange('choiceOptions');
-    updater({ ...formData.choiceOptions, [field]: data });
-  };
-
-  return (
-    <>
-      <Choices
-        formContext={formContext}
-        formData={formData.confirmChoices}
-        schema={getSchema('confirmChoices')}
-        onChange={onChange('confirmChoices')}
-        id={idSchema.confirmChoices && idSchema.confirmChoices.__id}
-        label={formatMessage('Confirm Options')}
-      />
-      <ChoiceOptions
-        schema={getSchema('choiceOptions')}
-        idSchema={idSchema.choiceOptions as IdSchema}
-        onChange={updateChoiceOptions}
-        formData={formData.choiceOptions || {}}
-        formContext={formContext}
-      />
-    </>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/Other.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/Other.tsx
deleted file mode 100644
index 581957d1c4..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/Other.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-import { MicrosoftInputDialog } from '@bfc/shared';
-
-import { WidgetLabel } from '../../widgets/WidgetLabel';
-import { LgEditorWidget } from '../../widgets/LgEditorWidget';
-
-import { Validations } from './Validations';
-import { field } from './styles';
-import { PromptFieldChangeHandler, GetSchema } from './types';
-
-interface OtherProps extends FieldProps<MicrosoftInputDialog> {
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-}
-
-export const Other: React.FC<OtherProps> = props => {
-  const { onChange, getSchema, idSchema, formData } = props;
-
-  return (
-    <React.Fragment>
-      <div css={field}>
-        <WidgetLabel
-          label={formatMessage('Unrecognized Prompt')}
-          description={getSchema('unrecognizedPrompt').description}
-        />
-        <LgEditorWidget
-          name="unrecognizedPrompt"
-          onChange={onChange('unrecognizedPrompt')}
-          value={formData.unrecognizedPrompt}
-          formContext={props.formContext}
-          height={125}
-        />
-      </div>
-      <Validations
-        onChange={onChange('validations')}
-        formData={props.formData.validations || []}
-        schema={getSchema('validations')}
-        id={idSchema.validations.__id}
-        formContext={props.formContext}
-      />
-      <div css={field}>
-        <WidgetLabel label={formatMessage('Invalid Prompt')} description={getSchema('invalidPrompt').description} />
-        <LgEditorWidget
-          name="invalidPrompt"
-          onChange={onChange('invalidPrompt')}
-          value={formData.invalidPrompt}
-          formContext={props.formContext}
-          height={125}
-        />
-      </div>
-      <div css={field}>
-        <WidgetLabel
-          label={formatMessage('Default value response')}
-          description={getSchema('defaultValueResponse').description}
-        />
-        <LgEditorWidget
-          name="defaultValueResponse"
-          onChange={onChange('defaultValueResponse')}
-          value={formData.defaultValueResponse}
-          formContext={props.formContext}
-          height={125}
-        />
-      </div>
-    </React.Fragment>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/PromptSettings.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/PromptSettings.tsx
deleted file mode 100644
index 0afa495733..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/PromptSettings.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import formatMessage from 'format-message';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { MicrosoftInputDialog } from '@bfc/shared';
-
-import { TextWidget } from '../../widgets';
-
-import { TwoSettingFields } from './twoSettingFields';
-import { field, settingsFields, settingsFieldFull, settingsFieldInline } from './styles';
-import { PromptFieldChangeHandler, GetSchema, InputDialogKeys } from './types';
-
-interface PromptSettingsrops extends FieldProps<MicrosoftInputDialog> {
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-}
-
-export const PromptSettings: React.FC<PromptSettingsrops> = props => {
-  const { formData, idSchema, getSchema, onChange, errorSchema } = props;
-  const fields: { [key: string]: InputDialogKeys | string }[] = [
-    {
-      name: 'maxTurnCount',
-      title: formatMessage('Max turn count'),
-    },
-    {
-      name: 'defaultValue',
-      title: formatMessage('Default value'),
-    },
-  ];
-
-  return (
-    <div>
-      <TwoSettingFields fields={fields} {...props} />
-      <div css={settingsFields}>
-        <div css={[field, settingsFieldFull]}>
-          <TextWidget
-            onChange={onChange('allowInterruptions')}
-            schema={getSchema('allowInterruptions')}
-            id={idSchema.allowInterruptions.__id}
-            value={formData.allowInterruptions}
-            label={formatMessage('Allow interruptions')}
-            formContext={props.formContext}
-            rawErrors={errorSchema.allowInterruptions && errorSchema.allowInterruptions.__errors}
-          />
-        </div>
-        <div css={[field, settingsFieldFull, settingsFieldInline]}>
-          <TextWidget
-            onChange={onChange('alwaysPrompt')}
-            schema={getSchema('alwaysPrompt')}
-            id={idSchema.alwaysPrompt.__id}
-            value={formData.alwaysPrompt}
-            label={formatMessage('Always prompt')}
-            formContext={props.formContext}
-            rawErrors={errorSchema.alwaysPrompt && errorSchema.alwaysPrompt.__errors}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/UserInput.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/UserInput.tsx
deleted file mode 100644
index 8a83eb5dda..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/UserInput.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { Fragment } from 'react';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import formatMessage from 'format-message';
-import { JSONSchema6 } from 'json-schema';
-import { SDKTypes, MicrosoftInputDialog, ChoiceInput, ConfirmInput } from '@bfc/shared';
-import { DialogInfo } from '@bfc/indexers/lib/type';
-
-import { TextWidget, SelectWidget } from '../../widgets';
-import { LuEditorWidget } from '../../widgets/LuEditorWidget';
-
-import { field } from './styles';
-import { GetSchema, PromptFieldChangeHandler } from './types';
-import { ChoiceInputSettings } from './ChoiceInput';
-import { ConfirmInputSettings } from './ConfirmInput';
-
-const getOptions = (enumSchema: JSONSchema6) => {
-  if (!enumSchema || !enumSchema.enum || !Array.isArray(enumSchema.enum)) {
-    return [];
-  }
-
-  return enumSchema.enum.map(o => ({ label: o as string, value: o as string }));
-};
-
-const usesLuisRecognizer = ({ content }: DialogInfo) => {
-  return typeof content?.recognizer === 'string';
-};
-
-interface UserInputProps extends FieldProps<MicrosoftInputDialog> {
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-}
-
-export const UserInput: React.FC<UserInputProps> = props => {
-  const { formContext, onChange, getSchema, idSchema, formData, errorSchema } = props;
-  const { const: type } = getSchema('$type');
-  const [, promptType] = (type as string).split('.');
-  const intentName = `${promptType}.response-${formData?.$designer?.id}`;
-
-  return (
-    <Fragment>
-      <div css={field}>
-        <TextWidget
-          onChange={onChange('property')}
-          schema={getSchema('property')}
-          id={idSchema.property.__id}
-          value={formData.property}
-          label={formatMessage('Property to fill')}
-          formContext={props.formContext}
-          rawErrors={errorSchema.property && errorSchema.property.__errors}
-        />
-      </div>
-      {getSchema('outputFormat') && (
-        <div css={field}>
-          <TextWidget
-            onChange={onChange('outputFormat')}
-            schema={getSchema('outputFormat')}
-            id={idSchema.outputFormat.__id}
-            value={formData.outputFormat}
-            label={formatMessage('Output Format')}
-            formContext={props.formContext}
-            rawErrors={errorSchema.outputFormat && errorSchema.outputFormat.__errors}
-          />
-        </div>
-      )}
-      <div css={field}>
-        <TextWidget
-          onChange={onChange('value')}
-          schema={getSchema('value')}
-          id={idSchema.value.__id}
-          value={formData.value}
-          label={formatMessage('Value')}
-          formContext={props.formContext}
-          rawErrors={errorSchema.value && errorSchema.value.__errors}
-        />
-      </div>
-      {usesLuisRecognizer(formContext.currentDialog) && type !== SDKTypes.AttachmentInput && (
-        <div css={field}>
-          <LuEditorWidget name={intentName} formContext={formContext} prompt />
-        </div>
-      )}
-      {getSchema('defaultLocale') && (
-        <div css={field}>
-          <TextWidget
-            onChange={onChange('defaultLocale')}
-            schema={getSchema('defaultLocale')}
-            id={idSchema.defaultLocale.__id}
-            value={((formData as unknown) as ChoiceInput).defaultLocale}
-            label={formatMessage('Default locale')}
-            formContext={props.formContext}
-            rawErrors={errorSchema.defaultLocale && errorSchema.defaultLocale.__errors}
-          />
-        </div>
-      )}
-      {getSchema('style') && (
-        <div css={field}>
-          <SelectWidget
-            onChange={onChange('style')}
-            schema={getSchema('style')}
-            id={idSchema.style.__id}
-            value={((formData as unknown) as ChoiceInput).style}
-            label={formatMessage('List style')}
-            formContext={props.formContext}
-            rawErrors={errorSchema.style && errorSchema.style.__errors}
-            options={{ enumOptions: getOptions(getSchema('style')) }}
-          />
-        </div>
-      )}
-      {formData.$type === SDKTypes.ChoiceInput && (
-        <ChoiceInputSettings {...props} formData={(formData as unknown) as ChoiceInput} />
-      )}
-      {formData.$type === SDKTypes.ConfirmInput && (
-        <ConfirmInputSettings {...props} formData={(formData as unknown) as ConfirmInput} />
-      )}
-    </Fragment>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/Validations.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/Validations.tsx
deleted file mode 100644
index fa40cc3dd8..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/Validations.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useState } from 'react';
-import formatMessage from 'format-message';
-import { JSONSchema6 } from 'json-schema';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { NeutralColors, FontSizes, SharedColors } from '@uifabric/fluent-theme';
-
-import { swap, remove } from '../../utils';
-import { ExpressionWidget } from '../../widgets/ExpressionWidget';
-import { FormContext } from '../../types';
-import { WidgetLabel } from '../../widgets/WidgetLabel';
-
-import { validationItem, validationItemInput, validationItemValue, field } from './styles';
-
-interface ValidationItemProps {
-  index: number;
-  value: string;
-  id: string;
-  hasMoveUp: boolean;
-  hasMoveDown: boolean;
-  onReorder: (a: number, b: number) => void;
-  onDelete: (idx: number) => void;
-  formContext: FormContext;
-  schema: JSONSchema6;
-  onEdit: (idx: number, value?: string) => void;
-}
-
-const ValidationItem: React.FC<ValidationItemProps> = props => {
-  const { id, value, hasMoveDown, hasMoveUp, onReorder, onDelete, index, formContext, onEdit, schema } = props;
-  const [key, setKey] = useState<string>(value);
-
-  // This needs to return true to dismiss the menu after a click.
-  const fabricMenuItemClickHandler = fn => e => {
-    fn(e);
-    return true;
-  };
-
-  const contextItems: IContextualMenuItem[] = [
-    {
-      key: 'moveUp',
-      text: 'Move Up',
-      iconProps: { iconName: 'CaretSolidUp' },
-      disabled: !hasMoveUp,
-      onClick: fabricMenuItemClickHandler(() => onReorder(index, index - 1)),
-    },
-    {
-      key: 'moveDown',
-      text: 'Move Down',
-      iconProps: { iconName: 'CaretSolidDown' },
-      disabled: !hasMoveDown,
-      onClick: fabricMenuItemClickHandler(() => onReorder(index, index + 1)),
-    },
-    {
-      key: 'remove',
-      text: 'Remove',
-      iconProps: { iconName: 'Cancel' },
-      onClick: fabricMenuItemClickHandler(() => onDelete(index)),
-    },
-  ];
-
-  const handleEdit = (_e: any, newVal?: string) => {
-    onEdit(index, newVal);
-  };
-
-  const handleBlur = () => {
-    setKey(value);
-    if (!value) {
-      onDelete(index);
-    }
-  };
-
-  return (
-    <div css={validationItem}>
-      <div css={validationItemValue}>
-        <ExpressionWidget
-          key={key}
-          value={value}
-          id={id}
-          label={formatMessage('Validation')}
-          editable
-          formContext={formContext}
-          schema={schema}
-          onChange={handleEdit}
-          onBlur={handleBlur}
-          options={{ hideLabel: true }}
-          styles={{
-            root: { margin: '7px 0 7px 0' },
-          }}
-        />
-      </div>
-      <IconButton
-        menuProps={{ items: contextItems }}
-        menuIconProps={{ iconName: 'MoreVertical' }}
-        ariaLabel={formatMessage('Item Actions')}
-        styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-      />
-    </div>
-  );
-};
-
-interface ValidationsProps {
-  onChange: (newData: string[]) => void;
-  formData: string[];
-  schema: JSONSchema6;
-  id: string;
-  formContext: FormContext;
-}
-
-export const Validations: React.FC<ValidationsProps> = props => {
-  const { schema, id, formData, formContext } = props;
-  const { description } = schema;
-  const [newValidation, setNewValidation] = useState<string>('');
-
-  const handleChange = (_e: any, newValue?: string) => {
-    setNewValidation(newValue || '');
-  };
-
-  const submitNewValidation = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key.toLowerCase() === 'enter') {
-      e.preventDefault();
-
-      if (newValidation) {
-        props.onChange([...props.formData, newValidation]);
-        setNewValidation('');
-      }
-    }
-  };
-
-  const handleReorder = (aIdx: number, bIdx: number) => {
-    props.onChange(swap(props.formData, aIdx, bIdx));
-  };
-
-  const handleDelete = (idx: number) => {
-    props.onChange(remove(props.formData, idx));
-  };
-
-  const handleEdit = (idx, val) => {
-    const validationsCopy = [...props.formData];
-    validationsCopy[idx] = val;
-    props.onChange(validationsCopy);
-  };
-
-  return (
-    <div>
-      <WidgetLabel label={formatMessage('Validation Rules')} description={description} id={id} />
-      <div>
-        {formData.map((v, i) => (
-          <ValidationItem
-            // need to use index + length to account for data changing
-            key={`${i}-${formData.length}`}
-            value={v}
-            index={i}
-            id={`${id}_${i}`}
-            onReorder={handleReorder}
-            onDelete={handleDelete}
-            hasMoveDown={i !== props.formData.length - 1}
-            hasMoveUp={i !== 0}
-            onEdit={handleEdit}
-            formContext={formContext}
-            schema={schema}
-          />
-        ))}
-      </div>
-      <div css={[validationItemInput, field]}>
-        <div css={validationItemValue}>
-          <ExpressionWidget
-            id={id}
-            value={newValidation}
-            onChange={handleChange}
-            placeholder={formatMessage('Add new validation rule here')}
-            onKeyDown={submitNewValidation}
-            schema={schema}
-            formContext={formContext}
-            rawErrors={[]}
-            iconProps={{
-              iconName: 'ReturnKey',
-              style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-            }}
-          />
-        </div>
-        <IconButton
-          disabled={true}
-          menuIconProps={{ iconName: 'MoreVertical' }}
-          ariaLabel={formatMessage('Item Actions')}
-          styles={{
-            menuIcon: {
-              backgroundColor: NeutralColors.white,
-              color: NeutralColors.gray130,
-              fontSize: FontSizes.size16,
-            },
-            rootDisabled: {
-              backgroundColor: NeutralColors.white,
-            },
-          }}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/index.tsx
deleted file mode 100644
index 5aaf5df06d..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import formatMessage from 'format-message';
-import { Pivot, PivotLinkSize, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
-import get from 'lodash/get';
-import { PromptTab } from '@bfc/shared';
-
-import { BaseField } from '../BaseField';
-import { BFDFieldProps } from '../../types';
-
-import { tabs } from './styles';
-import { BotAsks } from './BotAsks';
-import { UserInput } from './UserInput';
-import { Other } from './Other';
-import { PromptSettings } from './PromptSettings';
-import { GetSchema, PromptFieldChangeHandler } from './types';
-
-export const PromptField: React.FC<BFDFieldProps> = props => {
-  const { formContext } = props;
-  const { shellApi, focusedTab, focusedSteps } = formContext;
-
-  const getSchema: GetSchema = field => {
-    const fieldSchema = get(props.schema, ['properties', field]);
-
-    return fieldSchema;
-  };
-
-  const updateField: PromptFieldChangeHandler = field => data => {
-    props.onChange({ ...props.formData, [field]: data });
-  };
-
-  const handleTabChange = (item?: PivotItem) => {
-    if (item) {
-      shellApi.onFocusSteps(focusedSteps, item.props.itemKey);
-    }
-  };
-
-  return (
-    <BaseField {...props}>
-      <Pivot
-        linkSize={PivotLinkSize.large}
-        styles={tabs}
-        selectedKey={focusedTab || PromptTab.BOT_ASKS}
-        onLinkClick={handleTabChange}
-      >
-        <PivotItem headerText={formatMessage('Bot Asks')} itemKey={PromptTab.BOT_ASKS}>
-          <BotAsks {...props} onChange={updateField} getSchema={getSchema} />
-        </PivotItem>
-        <PivotItem headerText={formatMessage('User Input')} itemKey={PromptTab.USER_INPUT}>
-          <UserInput {...props} onChange={updateField} getSchema={getSchema} />
-        </PivotItem>
-        <PivotItem headerText={formatMessage('Other')} itemKey={PromptTab.OTHER}>
-          <Other {...props} onChange={updateField} getSchema={getSchema} />
-          <PromptSettings {...props} onChange={updateField} getSchema={getSchema} />
-        </PivotItem>
-      </Pivot>
-    </BaseField>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
deleted file mode 100644
index 6cc18679b6..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { IPivotStyles } from 'office-ui-fabric-react/lib/Pivot';
-import { css } from '@emotion/core';
-import { NeutralColors } from '@uifabric/fluent-theme';
-
-export const tabs: Partial<IPivotStyles> = {
-  root: {
-    display: 'flex',
-    padding: '0 18px',
-  },
-  link: {
-    flex: 1,
-  },
-  linkIsSelected: {
-    flex: 1,
-  },
-  itemContainer: {
-    padding: '12px 12px',
-  },
-};
-
-export const validationItemInput = css`
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-`;
-
-export const validationItem = css`
-  ${validationItemInput}
-
-  border-bottom: 1px solid ${NeutralColors.gray30};
-
-  &:first-of-type {
-    border-top: 1px solid ${NeutralColors.gray30};
-  }
-`;
-
-export const validationItemValue = css`
-  flex: 1;
-  min-width: 0;
-`;
-
-export const field = css`
-  margin: 10px 0;
-`;
-
-export const settingsContainer = css`
-  /* padding: 24px 0; */
-`;
-
-export const settingsFields = css`
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  align-items: flex-end;
-`;
-
-export const settingsFieldFull = css`
-  flex-basis: 100%;
-  overflow: hidden;
-`;
-
-export const settingsFieldHalf = css`
-  flex: 1;
-  overflow: hidden;
-
-  & + & {
-    margin-left: 36px;
-  }
-`;
-
-export const settingsFieldInline = css`
-  margin: 0;
-`;
-
-export const settingsFieldValidation = css`
-  margin-top: -10px;
-`;
-
-export const choiceItemContainer = (align = 'center') => css`
-  display: flex;
-  align-items: ${align};
-`;
-
-export const choiceField = css`
-  margin-bottom: 7px;
-`;
-
-export const choiceItem = css`
-  border-bottom: 1px solid ${NeutralColors.gray30};
-`;
-
-export const choiceItemValue = css`
-  flex: 1;
-
-  & + & {
-    margin-left: 20px;
-  }
-`;
-
-export const choiceItemLabel = css`
-  border-bottom: 1px solid ${NeutralColors.gray30};
-  padding-bottom: 7px;
-`;
-
-export const choiceItemValueLabel = css`
-  color: ${NeutralColors.gray130};
-  font-size: 12px;
-  margin-left: 7px;
-`;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/twoSettingFields.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/twoSettingFields.tsx
deleted file mode 100644
index e66ae4d02d..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/twoSettingFields.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint-disable format-message/literal-pattern */
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useState } from 'react';
-import formatMessage from 'format-message';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { MicrosoftInputDialog } from '@bfc/shared';
-
-import { TextWidget } from '../../widgets';
-
-import { field, settingsFieldHalf, settingsFields, settingsFieldFull, settingsFieldValidation } from './styles';
-import { PromptFieldChangeHandler, GetSchema, InputDialogKeys } from './types';
-
-interface TwoSettingFieldsProps extends FieldProps<MicrosoftInputDialog> {
-  onChange: PromptFieldChangeHandler;
-  getSchema: GetSchema;
-  fields: { [key: string]: InputDialogKeys | string }[];
-}
-export const TwoSettingFields: React.FC<TwoSettingFieldsProps> = props => {
-  const { fields, formData, idSchema, getSchema, onChange, errorSchema } = props;
-  const errs: (JSX.Element | string | undefined)[] = [];
-  const [errorMessage, setErrorMessage] = useState<JSX.Element | string | undefined>();
-
-  const onValidate = (index: number, err?: JSX.Element | string | undefined) => {
-    errs[index] = err;
-    setErrorMessage(errs.find(err => err || null));
-  };
-
-  return (
-    <div css={settingsFields}>
-      {fields.map((settingField, index) => (
-        <div key={index} css={[field, settingsFieldHalf]}>
-          <TextWidget
-            onChange={onChange(settingField.name as InputDialogKeys)}
-            schema={getSchema(settingField.name as InputDialogKeys)}
-            id={idSchema[settingField.name].__id}
-            value={formData[settingField.name]}
-            label={formatMessage(settingField.title as string)}
-            formContext={props.formContext}
-            rawErrors={errorSchema[settingField.name] && errorSchema[settingField.name].__errors}
-            hiddenErrMessage={true}
-            onValidate={errMsg => {
-              onValidate(index, errMsg);
-            }}
-          />
-        </div>
-      ))}
-      <div css={[field, settingsFieldFull, settingsFieldValidation]}>{errorMessage}</div>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/types.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/types.ts
deleted file mode 100644
index 5db3d7b4d7..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { MicrosoftInputDialog, ChoiceInput, ConfirmInput, OBISchema } from '@bfc/shared';
-
-export type InputDialogKeys = keyof MicrosoftInputDialog | keyof ChoiceInput | keyof ConfirmInput;
-export type PromptFieldChangeHandler = (field: InputDialogKeys) => (data: any) => void;
-export type GetSchema = (field: InputDialogKeys) => OBISchema;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx
deleted file mode 100644
index 2652028a8e..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState } from 'react';
-import { LuEditor } from '@bfc/code-editor';
-import { LuFile } from '@bfc/indexers';
-
-interface InlineLuEditorProps {
-  file: LuFile;
-  onSave: (newValue?: string) => void;
-  errorMsg: string;
-}
-
-const InlineLuEditor: React.FC<InlineLuEditorProps> = props => {
-  const { file, onSave, errorMsg } = props;
-  const { content } = file;
-  const [localContent, setLocalContent] = useState(content || '');
-
-  const commitChanges = value => {
-    setLocalContent(value);
-    onSave(value);
-  };
-  const luOption = {
-    fileId: file.id,
-  };
-  return (
-    <LuEditor value={localContent} onChange={commitChanges} errorMsg={errorMsg} height={450} luOption={luOption} />
-  );
-};
-
-export default InlineLuEditor;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/RegexEditor.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/RegexEditor.tsx
deleted file mode 100644
index e1a0ee6a53..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/RegexEditor.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { toIdSchema } from '@bfcomposer/react-jsonschema-form/lib/utils';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { JSONSchema6 } from 'json-schema';
-import { MicrosoftIRecognizer } from '@bfc/shared';
-
-import { regexEditorContainer } from './styles';
-
-export default function RegexEditor(props: FieldProps<MicrosoftIRecognizer>) {
-  if (!props.schema.oneOf) {
-    return null;
-  }
-
-  const {
-    registry: {
-      fields: { ObjectField },
-      definitions,
-    },
-    formData,
-    idPrefix,
-  } = props;
-  const schema = props.schema.oneOf.find(
-    s => typeof s === 'object' && s.title === 'Microsoft.RegexRecognizer'
-  ) as JSONSchema6;
-  const idSchema = toIdSchema(schema, props.idSchema.__id, definitions, formData, idPrefix);
-
-  return (
-    <div css={regexEditorContainer}>
-      <ObjectField {...props} schema={schema} idSchema={idSchema} />
-    </div>
-  );
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/ToggleEditor.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/ToggleEditor.tsx
deleted file mode 100644
index e11ebb49a7..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/ToggleEditor.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState, ReactNode } from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
-import { FontSizes } from 'office-ui-fabric-react/lib/Styling';
-import formatMessage from 'format-message';
-
-interface ToggleEditorProps {
-  loaded: boolean;
-  title: string;
-  children: () => ReactNode;
-}
-
-export default function ToggleEditor(props: ToggleEditorProps) {
-  const [showEditor, setShowEditor] = useState(true);
-
-  if (!props.loaded) {
-    return null;
-  }
-
-  return (
-    <div className="ToggleEditor">
-      <Link
-        onClick={() => setShowEditor(!showEditor)}
-        styles={{ root: { fontSize: FontSizes.smallPlus, marginBottom: '10px' } }}
-      >
-        {showEditor
-          ? formatMessage('Hide {title}', { title: props.title })
-          : formatMessage('View {title}', { title: props.title })}
-      </Link>
-      <div>{showEditor && props.children()}</div>
-    </div>
-  );
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/index.tsx
deleted file mode 100644
index 40add4ec8b..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/index.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState, ReactElement } from 'react';
-import formatMessage from 'format-message';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import { MicrosoftIRecognizer } from '@bfc/shared';
-import { LuFile } from '@bfc/indexers';
-
-import { BaseField } from '../BaseField';
-
-import './styles.css';
-
-export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props => {
-  const { formData } = props;
-  const [loading, setLoading] = useState(false);
-
-  const {
-    formContext: { luFiles, shellApi, currentDialog, locale },
-    onChange,
-  } = props;
-
-  const isRegex = typeof formData === 'object' && formData.$type === 'Microsoft.RegexRecognizer';
-  const currentDialogId = currentDialog.id;
-  const selectedFile: LuFile | void = luFiles.find(f => f.id === `${currentDialogId}.${locale}`);
-
-  const handleChange = (_, option?: IDropdownOption): void => {
-    if (option) {
-      switch (option.key) {
-        case 'none': {
-          onChange(undefined);
-          return;
-        }
-        case 'luis': {
-          if (selectedFile) {
-            onChange(`${currentDialogId}.lu`);
-          } else {
-            const { createLuFile } = shellApi;
-
-            /**
-             * The setTimeouts are used to get around the
-             * 1. allows the store to update with the luFile creation
-             * 2. allows the debounced onChange to be invoked
-             *
-             * This is a hack, but dialogs will be created along with
-             * lu and lg files so this code path shouldn't be executed.
-             */
-            setLoading(true);
-            createLuFile(currentDialogId).then(() => {
-              setTimeout(() => {
-                onChange(`${currentDialogId}.lu`);
-                setTimeout(() => {
-                  setLoading(false);
-                }, 750);
-              }, 500);
-            });
-          }
-          return;
-        }
-        case 'regex': {
-          onChange({ $type: 'Microsoft.RegexRecognizer' });
-          return;
-        }
-        default:
-          return;
-      }
-    }
-  };
-  const options = [
-    {
-      key: 'none',
-      text: formatMessage('None'),
-    },
-    {
-      key: 'luis',
-      text: 'LUIS',
-    },
-    {
-      key: 'regex',
-      text: formatMessage('Regular Expression'),
-    },
-  ];
-
-  const getSelectedType = (): string => {
-    if (typeof props.formData === 'string') {
-      return 'luis';
-    }
-
-    if (isRegex) {
-      return 'regex';
-    }
-
-    return 'none';
-  };
-
-  const onRenderTitle = (options?: IDropdownOption[]): ReactElement => {
-    if (loading || !options) {
-      return (
-        <div style={{ height: '100%', display: 'flex' }}>
-          <Spinner size={SpinnerSize.small} />
-        </div>
-      );
-    }
-
-    const selectedOption = options.find(o => o.key === getSelectedType());
-
-    if (selectedOption) {
-      return <span>{selectedOption.text}</span>;
-    }
-
-    return <span />;
-  };
-
-  return (
-    <div className="RecognizerField">
-      <BaseField {...props}>
-        <Dropdown
-          label={formatMessage('Recognizer Type')}
-          onChange={handleChange}
-          options={options}
-          selectedKey={getSelectedType()}
-          responsiveMode={ResponsiveMode.large}
-          onRenderTitle={onRenderTitle}
-        />
-      </BaseField>
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.css
deleted file mode 100644
index 28213c669c..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.ToggleEditor .BaseField {
-  margin-top: 5px;
-}
-.ToggleEditor .ToggleEditorContent .ObjectItemContainer:last-child {
-  margin-bottom: 0;
-  border-bottom: none;
-}
-.LuFileSelector {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.LuFileSelector .LuFileSelectorLabel {
-  flex-grow: 0;
-}
-.LuFileSelector .LuFileSelectorFile {
-  flex: 1;
-  margin: 0 10px;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts
deleted file mode 100644
index 2274dd5af9..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { css } from '@emotion/core';
-
-// offset ObjectField's margin
-export const regexEditorContainer = css`
-  margin: 0 -12px -26px -12px;
-`;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
deleted file mode 100644
index 13c7699798..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import startCase from 'lodash/startCase';
-import get from 'lodash/get';
-import React from 'react';
-import { FontClassNames, FontWeights } from '@uifabric/styling';
-import classnames from 'classnames';
-import { JSONSchema6 } from 'json-schema';
-import { FontSizes } from '@uifabric/fluent-theme';
-import formatMessage from 'format-message';
-
-import { FormContext } from '../types';
-
-import { EditableField } from './EditableField';
-
-const overrideDefaults = {
-  title: undefined,
-  description: undefined,
-  helpLink: undefined,
-  helpLinkText: undefined,
-  helpLinkLabel: undefined,
-};
-
-interface RootFieldProps {
-  description?: string;
-  formContext: FormContext;
-  formData: any;
-  id: string;
-  name?: string;
-  onChange?: (data: any) => void;
-  schema: JSONSchema6;
-  title?: string;
-  showMetadata?: boolean;
-}
-
-export const RootField: React.FC<RootFieldProps> = props => {
-  const { title, name, description, schema, formData, formContext, showMetadata = false } = props;
-  const { currentDialog, editorSchema, isRoot } = formContext;
-
-  const sdkOverrides = get(editorSchema, ['content', 'SDKOverrides', formData.$type], overrideDefaults);
-
-  const handleTitleChange = (e: any, newTitle?: string): void => {
-    if (props.onChange) {
-      props.onChange({ ...formData, $designer: { ...formData.$designer, name: newTitle } });
-    }
-  };
-
-  const getTitle = (): string => {
-    const dialogName = isRoot && currentDialog.displayName;
-    const designerName = formData && formData.$designer && formData.$designer.name;
-
-    return designerName || dialogName || sdkOverrides.title || title || schema.title || startCase(name);
-  };
-
-  const getSubTitle = (): string => {
-    return sdkOverrides.subtitle || sdkOverrides.title || formData.$type;
-  };
-
-  const getDescription = (): string => {
-    return sdkOverrides.description || description || schema.description || '';
-  };
-
-  return (
-    <div id={props.id} className="RootField">
-      <div className="RootFieldTitle">
-        <EditableField
-          value={getTitle()}
-          onChange={handleTitleChange}
-          styles={{ field: { fontWeight: FontWeights.semibold }, root: { margin: '5px 0 7px -9px' } }}
-          fontSize={FontSizes.size20}
-          ariaLabel={formatMessage('Title')}
-        />
-        <p className={classnames('RootFieldSubtitle', FontClassNames.smallPlus)}>{getSubTitle()}</p>
-        {sdkOverrides.description !== false && (description || schema.description) && (
-          <p className={classnames('RootFieldDescription', FontClassNames.smallPlus)}>
-            {getDescription()}
-            {sdkOverrides.helpLink && sdkOverrides.helpLinkText && sdkOverrides.helpLinkLabel && (
-              <>
-                <br />
-                <br />
-                <a
-                  aria-label={sdkOverrides.helpLinkLabel}
-                  href={sdkOverrides.helpLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {sdkOverrides.helpLinkText}
-                </a>
-              </>
-            )}
-          </p>
-        )}
-      </div>
-
-      {props.children}
-
-      {showMetadata && (
-        <div className="RootFieldMetaData">
-          <div style={{ marginRight: '36px' }}>
-            <span style={{ marginRight: '8px', fontWeight: FontWeights.semibold as number }}>
-              {formatMessage('ID number')}
-            </span>
-            <span style={{ minWidth: '75px', display: 'inline-block' }}>{get(formData, '$designer.id')}</span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RulesField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RulesField.tsx
deleted file mode 100644
index 30cd2fb2a0..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RulesField.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import formatMessage from 'format-message';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import get from 'lodash/get';
-import { createStepMenu, DialogGroup, ITriggerCondition, OnIntent } from '@bfc/shared';
-
-import { setOverridesOnField } from '../utils';
-
-import { TableField } from './TableField';
-
-const renderTitle = (item: ITriggerCondition) => {
-  const friendlyName = get(item, '$designer.name');
-
-  if (friendlyName) {
-    return friendlyName;
-  }
-
-  const intentName = ((item as unknown) as OnIntent).intent;
-  if (intentName) {
-    return intentName;
-  }
-
-  return item.$type;
-};
-
-export function RulesField(props: FieldProps) {
-  const overrides = setOverridesOnField(props.formContext, 'RulesField');
-
-  return (
-    <TableField<ITriggerCondition>
-      {...props}
-      {...overrides}
-      dialogOptionsOpts={{ include: [DialogGroup.EVENTS], subMenu: false }}
-      label={formatMessage('Add New Rule')}
-      navPrefix="triggers"
-      renderTitle={renderTitle}
-    >
-      {({ createNewItemAtIndex }) => (
-        <DefaultButton
-          data-testid="RulesFieldAdd"
-          styles={{ root: { marginTop: '20px' } }}
-          menuProps={{
-            items: createStepMenu([DialogGroup.EVENTS], false, createNewItemAtIndex()),
-            calloutProps: { calloutMaxHeight: 500 },
-            directionalHint: DirectionalHint.bottomLeftEdge,
-          }}
-          type="button"
-        >
-          {formatMessage('Add')}
-        </DefaultButton>
-      )}
-    </TableField>
-  );
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/SelectorField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/SelectorField.tsx
deleted file mode 100644
index cbf24d00c8..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/SelectorField.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-
-import { UnsupportedField } from './UnsupportedField';
-
-export const SelectorField: React.FC<FieldProps> = props => <UnsupportedField {...props} fieldName="SelectorField" />;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/StepsField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/StepsField.tsx
deleted file mode 100644
index b4d06721a5..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/StepsField.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { DialogGroup, createStepMenu, MicrosoftIDialog } from '@bfc/shared';
-import formatMessage from 'format-message';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
-
-import { setOverridesOnField } from '../utils';
-import { BFDFieldProps } from '../types';
-
-import { TableField } from './TableField';
-
-export const StepsField: React.FC<BFDFieldProps> = props => {
-  const { formContext } = props;
-  const overrides = setOverridesOnField(formContext, 'StepsField');
-
-  if (formContext.isRoot) {
-    return null;
-  }
-
-  return (
-    <TableField<MicrosoftIDialog>
-      {...props}
-      {...overrides}
-      dialogOptionsOpts={{
-        exclude: [DialogGroup.EVENTS, DialogGroup.ADVANCED_EVENTS, DialogGroup.SELECTOR, DialogGroup.OTHER],
-      }}
-      navPrefix={props.name}
-    >
-      {({ createNewItemAtIndex }) => (
-        <DefaultButton
-          data-testid="StepsFieldAdd"
-          styles={{ root: { marginTop: '20px' } }}
-          menuProps={{
-            items: createStepMenu(
-              [
-                DialogGroup.RESPONSE,
-                DialogGroup.INPUT,
-                DialogGroup.BRANCHING,
-                DialogGroup.STEP,
-                DialogGroup.MEMORY,
-                DialogGroup.CODE,
-                DialogGroup.LOG,
-              ],
-              true,
-              createNewItemAtIndex()
-            ),
-            calloutProps: { calloutMaxHeight: 500 },
-            directionalHint: DirectionalHint.bottomLeftEdge,
-          }}
-          type="button"
-        >
-          {formatMessage('Add')}
-        </DefaultButton>
-      )}
-    </TableField>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/TableField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/TableField.tsx
deleted file mode 100644
index 19ace0c609..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/TableField.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import formatMessage from 'format-message';
-import { JSONSchema6 } from 'json-schema';
-import get from 'lodash/get';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
-import { COMPOUND_TYPES, MicrosoftIDialog } from '@bfc/shared';
-import { DetailsList, SelectionMode, DetailsListLayoutMode, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import {
-  ContextualMenuItemType,
-  IContextualMenuItem,
-  DirectionalHint,
-} from 'office-ui-fabric-react/lib/ContextualMenu';
-
-import { buildDialogOptions, swap, remove, insertAt, DialogOptionsOpts } from '../utils';
-import { FormContext } from '../types';
-
-import { BaseField } from './BaseField';
-
-interface TableRenderProps<T> {
-  createNewItemAtIndex: (idx?: number) => (e: any, item: IContextualMenuItem) => void;
-  onChange: (newItem: T | T[]) => void;
-}
-
-interface TableFieldProps<T extends MicrosoftIDialog = MicrosoftIDialog> extends FieldProps<T[]> {
-  additionalColumns?: IColumn[];
-  columnHeader?: string;
-  formContext: FormContext;
-  formData: T[];
-  navPrefix: string;
-  onChange: (items: T[]) => void;
-  renderTitle?: (item: T) => string;
-  renderDescription?: (item: T) => string;
-  name: string;
-  schema: JSONSchema6;
-  dialogOptionsOpts?: DialogOptionsOpts;
-  children?: (props: TableRenderProps<T>) => React.ReactNode;
-}
-
-interface ItemActionsProps<T extends MicrosoftIDialog> extends TableFieldProps<T> {
-  item: T;
-  index?: number;
-  newOptions: IContextualMenuItem[];
-}
-
-function ItemActions<T extends MicrosoftIDialog>(props: ItemActionsProps<T>) {
-  const { item, navPrefix, index, onChange, formData, formContext, newOptions } = props;
-
-  if (typeof index === 'undefined') {
-    return null;
-  }
-
-  const menuItems: IContextualMenuItem[] = [
-    {
-      key: 'edit',
-      text: formatMessage('Edit'),
-      iconProps: { iconName: 'Edit' },
-      onClick: () => {
-        // @ts-ignore - IDialog could potentially be a string, so TS complains about $type
-        if (COMPOUND_TYPES.includes(item.$type)) {
-          formContext.shellApi.onFocusEvent(`${navPrefix}[${index}]`);
-        }
-
-        formContext.shellApi.onFocusSteps([`${navPrefix}[${index}]`]);
-      },
-    },
-    {
-      key: 'moveUp',
-      text: formatMessage('Move Up'),
-      iconProps: { iconName: 'CaretSolidUp' },
-      disabled: index === 0,
-      onClick: () => {
-        const newItems = swap(formData, index, index - 1);
-        onChange(newItems);
-      },
-    },
-    {
-      key: 'moveDown',
-      text: formatMessage('Move Down'),
-      iconProps: { iconName: 'CaretSolidDown' },
-      disabled: index === formData.length - 1,
-      onClick: () => {
-        const newItems = swap(formData, index, index + 1);
-        onChange(newItems);
-      },
-    },
-    {
-      key: 'remove',
-      text: formatMessage('Remove'),
-      iconProps: { iconName: 'Cancel' },
-      onClick: () => {
-        const item = formData[index];
-        // @ts-ignore
-        if (item.$type === 'Microsoft.SendActivity' && item.activity && item.activity.indexOf('bfdactivity-') !== -1) {
-          // TODO: (ze) 'removeLgTemplate' -> 'removeLgTemplateRef', it should accept inputs like '[bfdactivity-1234]'
-          // @ts-ignore
-          formContext.shellApi.removeLgTemplate('common', item.activity.slice(1, item.activity.length - 1));
-        }
-        const newItems = remove(formData, index);
-        onChange(newItems);
-      },
-    },
-    {
-      key: 'divider_1',
-      itemType: ContextualMenuItemType.Divider,
-    },
-    {
-      key: 'new',
-      text: formatMessage('New'),
-      subMenuProps: {
-        items: newOptions,
-        calloutProps: { calloutMaxHeight: 500 },
-        directionalHint: DirectionalHint.rightTopEdge,
-      },
-    },
-  ];
-
-  return (
-    <IconButton
-      menuProps={{ items: menuItems }}
-      menuIconProps={{ iconName: 'MoreVertical' }}
-      styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-    />
-  );
-}
-
-export function TableField<T extends MicrosoftIDialog = MicrosoftIDialog>(props: TableFieldProps<T>): JSX.Element {
-  const {
-    additionalColumns = [],
-    columnHeader,
-    dialogOptionsOpts,
-    renderDescription,
-    children,
-    navPrefix,
-    formContext,
-  } = props;
-
-  const fieldOverrides = get(props.formContext.editorSchema, `content.SDKOverrides`);
-
-  const items = props.formData;
-
-  const onChange = newItem => {
-    if (Array.isArray(newItem)) {
-      props.onChange(newItem);
-    } else {
-      props.onChange([...items, newItem]);
-    }
-  };
-
-  const renderTitle = item => {
-    if (get(item, '$designer.name')) {
-      return get(item, '$designer.name');
-    } else if (fieldOverrides[item.$type] && fieldOverrides[item.$type].title) {
-      return fieldOverrides[item.$type].title;
-    } else {
-      return item.$type;
-    }
-  };
-
-  const createNewItemAtIndex = (idx: number = items.length) => (_: any, item: IContextualMenuItem) => {
-    onChange(insertAt(items, item.data, idx));
-    // wait until change can propogate before navigating
-    setTimeout(() => {
-      // @ts-ignore - IDialog could potentially be a string, so TS complains about $type
-      if (COMPOUND_TYPES.includes(item.$type)) {
-        formContext.shellApi.onFocusEvent(`${navPrefix}[${idx}]`);
-      }
-
-      formContext.shellApi.onFocusSteps([`${navPrefix}[${idx}]`]);
-    }, 500);
-    return true;
-  };
-
-  const columns: IColumn[] = [
-    {
-      key: 'name',
-      name: columnHeader || formatMessage('Name'),
-      minWidth: 30,
-      maxWidth: 150,
-      isResizable: true,
-      // eslint-disable-next-line react/display-name
-      onRender: item => (
-        <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>{renderTitle(item)}</div>
-      ),
-    },
-    {
-      key: 'description',
-      name: formatMessage('Description'),
-      minWidth: 30,
-      isResizable: true,
-      onRender: renderDescription
-        ? // eslint-disable-next-line react/display-name
-          item => <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>{renderDescription(item)}</div>
-        : undefined,
-    },
-    ...additionalColumns,
-    {
-      key: 'menu',
-      name: '',
-      minWidth: 50,
-      maxWidth: 50,
-      // eslint-disable-next-line react/display-name
-      onRender: (item, index) => {
-        return (
-          <ItemActions
-            {...props}
-            item={item}
-            index={index}
-            newOptions={buildDialogOptions({
-              ...dialogOptionsOpts,
-              onClick: createNewItemAtIndex(typeof index === 'undefined' ? 0 : index + 1),
-            })}
-          />
-        );
-      },
-    },
-  ];
-
-  return (
-    <BaseField {...props}>
-      {items && items.length > 0 && (
-        <DetailsList
-          columns={columns}
-          items={items}
-          selectionMode={SelectionMode.none}
-          layoutMode={DetailsListLayoutMode.justified}
-          styles={{
-            // offset the header padding
-            root: { marginTop: '-16px' },
-          }}
-        />
-      )}
-      {children && children({ onChange, createNewItemAtIndex })}
-    </BaseField>
-  );
-}
-
-TableField.defaultProps = {
-  additionalColumns: [],
-  formData: [],
-  navPrefix: '',
-  onChange: () => {},
-  renderTitle: item => {
-    return get(item, '$designer.name', item.$type);
-  },
-  renderDescription: item => get(item, '$designer.description'),
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/UnsupportedField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/UnsupportedField.tsx
deleted file mode 100644
index 37d7496448..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/UnsupportedField.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { FieldProps } from '@bfcomposer/react-jsonschema-form';
-
-export const UnsupportedField: React.FC<FieldProps> = props => {
-  return (
-    <div>
-      unsupported field: {`<${props.fieldName} />`} ({props.schema.title})
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/codemirror-fabric.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/codemirror-fabric.css
deleted file mode 100644
index e6aa4b78af..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/codemirror-fabric.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.cm-s-fabric span.cm-comment {
-    color: #008000;
-  }
-  .cm-s-fabric span.cm-keyword {
-    color: #0000ff;
-  }
-  .cm-s-fabric span.cm-def {
-    color: #267f99;
-  }
-  .cm-s-fabric span.cm-string {
-    color: #a31515;
-  }
-  .cm-s-fabric span.cm-property {
-    color: #00188f;
-  }
-  .cm-s-fabric span.cm-builtin {
-    line-height: 1em;
-    font-weight: bold;
-    color: #077;
-  }
-  .cm-s-fabric span.cm-special {
-    line-height: 1em;
-    font-weight: bold;
-    color: #0aa;
-  }
-  .cm-s-fabric span.cm-variable {
-    color: black;
-  }
-  .cm-s-fabric span.cm-number, .cm-s-fabric span.cm-atom {
-    color: #09885a;
-  }
-  .cm-s-fabric span.cm-meta {
-    color: #555;
-  }
-  .cm-s-fabric span.cm-link {
-    color: #3a3;
-  }
-  .cm-s-fabric .CodeMirror-activeline-background {
-    background: #6a7583;
-  }
-  .cm-s-fabric .CodeMirror-matchingbracket {
-    outline: 1px solid grey;
-    color: black !important;
-  }
-  .cm-s-fabric .CodeMirror-selected {
-    background: #add6ff80;
-  }
\ No newline at end of file
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/index.tsx
deleted file mode 100644
index 16cf4d75ec..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import './styles.css';
-
-export * from './CodeField';
-export * from './CustomObjectField';
-export * from './JsonField';
-export * from './PromptField';
-export * from './RecognizerField';
-export * from './RulesField';
-export * from './SelectorField';
-export * from './StepsField';
-export * from './UnsupportedField';
-export * from './NullField';
-export * from './LgEditorField';
-export * from './AssignmentsField';
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
deleted file mode 100644
index 6821b83483..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.BaseFieldTitle {
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0;
-  margin-bottom: 11px;
-}
-.BaseFieldDescription {
-  font-size: 12px;
-  margin: 0;
-  margin-bottom: 20px;
-  white-space: pre-line;
-}
-.BaseFieldInline {
-  display: flex;
-}
-.RootFieldTitle {
-  border-bottom: 1px solid #c8c6c4;
-  padding: 0 12px;
-  margin-bottom: 0px;
-}
-.RootFieldSubtitle {
-  height: 15px;
-  line-height: 15px;
-  font-size: 12px;
-  color: #4F4F4F;
-  margin: 12px 0;
-}
-.RootFieldDescription {
-  margin-top: 0;
-  margin-bottom: 12px;
-  white-space: pre-line;
-}
-.RootFieldMetaData {
-  padding: 18px;
-  display: flex;
-  border-top: 1px solid #c8c6c4;
-  margin-top: 14px;
-}
-.RootFieldTitle + .RootFieldMetaData {
-  border-top: none;
-  margin-top: 0;
-}
-.PromptField {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-}
-.CasesFieldConditions {
-  display: flex;
-}
-.CasesFieldConditions .ObjectFieldTemplate {
-  flex: 1;
-}
-.CasesFieldConditions .BaseField {
-  flex: 1;
-}
-.CasesFieldConditions .CasesFieldConditionsMenu {
-  flex-grow: 0;
-  margin-left: 20px;
-  margin-top: 30px;
-  padding-top: 4px;
-}
-a {
-  color: black;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.ts
deleted file mode 100644
index d9e7563ed8..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { css } from '@emotion/core';
-import { NeutralColors } from '@uifabric/fluent-theme';
-
-export const arrayItem = css`
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-
-  & + & {
-    margin-top: 10px;
-  }
-`;
-
-export const arrayItemValue = css`
-  flex: 1;
-`;
-
-export const arrayItemDefault = css`
-  font-size: 14px;
-`;
-
-export const field = css`
-  margin: 10px 0;
-`;
-
-export const customObjectFieldContainer = css`
-  display: flex;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${NeutralColors.gray30};
-  }
-`;
-
-export const customObjectFieldItem = css`
-  flex: 1;
-
-  & + & {
-    margin-left: 20px;
-  }
-`;
-
-export const customObjectFieldLabel = css`
-  color: ${NeutralColors.gray130};
-  font-size: 12px;
-  margin-left: 7px;
-  padding-bottom: 5px;
-`;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/index.tsx b/Composer/packages/extensions/obiformeditor/src/Form/index.tsx
deleted file mode 100644
index d11907d715..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import JSONForm, { UiSchema, Widget, FormProps as JSONFormProps } from '@bfcomposer/react-jsonschema-form';
-import { JSONSchema6 } from 'json-schema';
-
-import * as widgets from './widgets';
-import * as fields from './fields';
-import ArrayFieldTemplate from './ArrayFieldTemplate';
-import ObjectFieldTemplate from './ObjectFieldTemplate';
-import FieldTemplate from './FieldTemplate';
-import { FormContext } from './types';
-
-import './styles.css';
-
-function removeUndefinedOrEmpty(object: any): any {
-  if (object === null) {
-    return null;
-  }
-
-  if (Array.isArray(object)) {
-    return object.length > 0 ? object : undefined;
-  }
-
-  if (typeof object === 'object') {
-    const obj = Object.assign({}, object); // Prevent mutation of source object.
-
-    for (const key in obj) {
-      if (obj[key] === undefined) {
-        delete obj[key];
-        continue;
-      }
-
-      const result = removeUndefinedOrEmpty(obj[key]);
-      switch (typeof result) {
-        case 'undefined':
-          delete obj[key];
-          break;
-        case 'boolean':
-          obj[key] = result;
-          break;
-        case 'object':
-          if (Object.keys(result).length === 0) {
-            delete obj[key];
-          } else {
-            obj[key] = result;
-          }
-          break;
-        default:
-          obj[key] = result;
-      }
-    }
-
-    return obj;
-  }
-
-  return object;
-}
-
-interface FormProps extends JSONFormProps<object> {
-  children: React.ReactChild;
-  formContext: FormContext;
-  formData: object;
-  onBlur?: () => void;
-  onChange?: (formData: object) => void;
-  schema: JSONSchema6;
-  uiSchema: UiSchema;
-}
-
-const Form: React.FunctionComponent<FormProps> = props => {
-  const { formData, schema, uiSchema, onChange, formContext, ...rest } = props;
-
-  return (
-    <div className="FormContainer">
-      <JSONForm
-        ArrayFieldTemplate={ArrayFieldTemplate}
-        fields={fields}
-        FieldTemplate={FieldTemplate}
-        formatData={removeUndefinedOrEmpty}
-        formContext={formContext}
-        formData={formData}
-        ObjectFieldTemplate={ObjectFieldTemplate}
-        onChange={onChange}
-        safeRenderCompletion
-        schema={schema}
-        uiSchema={uiSchema}
-        widgets={widgets as { [key: string]: Widget }}
-        {...rest}
-      />
-    </div>
-  );
-};
-
-Form.defaultProps = {
-  onChange: () => {},
-  onSubmit: () => {},
-};
-
-export default Form;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/styles.css
deleted file mode 100644
index 182ab7e5c5..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.FieldTemplate {
-  flex: 1;
-  min-width: 0;
-}
-
-.FormContainer {
-  flex: 1;
-  /**
-   * There is currently a bug in chrome where flex/grid display
-   * on fieldset does not work. :(
-   */
-}
-
-.FieldTemplateInfo:focus {
-  outline: 1px solid #323130;
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/types.ts b/Composer/packages/extensions/obiformeditor/src/Form/types.ts
deleted file mode 100644
index 863606f528..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/types.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { WidgetProps, FieldProps, ObjectFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-import { ShellData, EditorSchema, ShellApi, OBISchema } from '@bfc/shared';
-
-export interface FormContext
-  extends Pick<
-    ShellData,
-    'locale' | 'luFiles' | 'lgFiles' | 'currentDialog' | 'focusedEvent' | 'focusedSteps' | 'focusedTab'
-  > {
-  editorSchema: EditorSchema;
-  shellApi: ShellApi;
-  rootId: string;
-  dialogOptions: { value: string; label: string }[];
-  dialogId?: string;
-  projectId: string;
-  isRoot: boolean;
-  formErrors: any;
-}
-
-interface EnumOption {
-  label: string;
-  value: string;
-}
-
-export interface BFDObjectFieldTemplateProps extends ObjectFieldTemplateProps {
-  id: string;
-  onChange: (any) => void;
-}
-
-export interface BFDFieldProps<T = any> extends FieldProps<T> {
-  formContext: FormContext;
-}
-
-export interface BFDWidgetProps extends Partial<WidgetProps> {
-  id: string;
-  schema: OBISchema;
-  onChange: (data: any) => void;
-  formContext: FormContext;
-  options?: {
-    label?: string | false;
-    enumOptions?: EnumOption[];
-    hideLabel?: boolean;
-    transparentBorder?: boolean;
-  };
-  hideLabel?: boolean;
-}
-
-export interface SelectWidgetProps extends BFDWidgetProps {
-  options: {
-    enumOptions: EnumOption[];
-  };
-}
-
-export interface RadioWidgetProps extends BFDWidgetProps {
-  options: {
-    enumOptions: EnumOption[];
-  };
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/utils.ts b/Composer/packages/extensions/obiformeditor/src/Form/utils.ts
deleted file mode 100644
index 334fd2e522..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/utils.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { IContextualMenuItem, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { useState } from 'react';
-import merge from 'lodash/merge';
-import get from 'lodash/get';
-import { dialogGroups, DialogGroup, DialogGroupItem, getDesignerId } from '@bfc/shared';
-
-import { FormMemory, MemoryScope } from '../types';
-
-export interface DialogOptionsOpts {
-  /** Used to filter individual types from the result. Default: () => true */
-  filter?: (type: string) => boolean | void;
-  /** Include only specific categories, if undefined, all categories are included. Default: undefined */
-  include?: DialogGroup[];
-  /** Exclude specific categories. Default: undefined */
-  exclude?: DialogGroup[];
-  /** Hide types in sub menus. Default: true */
-  subMenu?: boolean;
-  /** Returns non-nested options for usage in dropdown. Default: false */
-  asDropdown?: boolean;
-  onClick?: (e: any, item: IContextualMenuItem) => void;
-}
-
-/**
- * This method is used to build out the content of many popout menus in the form view
- * like context menus, "+Add" buttons and others.
- * @param opts
- */
-export function buildDialogOptions(opts: DialogOptionsOpts = {}): IContextualMenuItem[] {
-  const { filter = () => true, include, exclude, subMenu = true, onClick, asDropdown = false } = opts;
-  let menuOptions: IContextualMenuItem[] = [];
-
-  const filteredGroups = Object.keys(dialogGroups).reduce<DialogGroupItem[]>((filtered, group) => {
-    let includeGroup = true;
-
-    if (include) {
-      includeGroup = include.includes(group as DialogGroup);
-    }
-
-    if (exclude) {
-      includeGroup = !exclude.includes(group as DialogGroup);
-    }
-
-    if (includeGroup) {
-      filtered.push(dialogGroups[group]);
-    }
-    return filtered;
-  }, []);
-
-  const handleClick = (e, item) => {
-    if (onClick && item) {
-      onClick(e, item);
-    }
-  };
-
-  for (const group of filteredGroups) {
-    const dialogOpts = group.types.filter(filter).map(dialog => ({
-      key: dialog,
-      text: dialog,
-      data: {
-        $type: dialog,
-        $designer: getDesignerId(),
-      },
-      onClick: subMenu ? undefined : handleClick,
-    }));
-
-    if (subMenu && !asDropdown) {
-      const header: IContextualMenuItem = {
-        key: group.label,
-        text: group.label,
-        subMenuProps: {
-          items: dialogOpts,
-          onItemClick: handleClick,
-        },
-      };
-      menuOptions.push(header);
-    } else {
-      menuOptions = menuOptions.concat(dialogOpts);
-    }
-    menuOptions.push({ key: `${group.label}_divider`, text: '-', itemType: ContextualMenuItemType.Divider });
-  }
-
-  return menuOptions;
-}
-
-export function swap<T = any>(arr: T[], a: number, b: number): T[] {
-  const newArr = [...arr];
-  const tmp = newArr[a];
-
-  newArr[a] = newArr[b];
-  newArr[b] = tmp;
-
-  return newArr;
-}
-
-export function remove<T = any>(arr: T[], i: number): T[] {
-  const newArr = [...arr];
-  newArr.splice(i, 1);
-  return newArr;
-}
-
-export function insertAt<T = any>(arr: T[], item: T, idx: number): T[] {
-  const newArr = [...arr];
-
-  if (idx <= 0) {
-    newArr.splice(0, 0, item);
-  } else {
-    newArr.splice(idx, 0, item);
-  }
-
-  return newArr;
-}
-
-function getOptions(memory: FormMemory | undefined, scope: MemoryScope): IDropdownOption[] {
-  if (!memory || !memory[scope]) return [];
-
-  const options: IDropdownOption[] = [];
-  for (const key in memory[scope]) {
-    options.push({ key: `${scope}.${key}`, text: `${memory[scope][key]}` });
-  }
-  return options;
-}
-
-function buildScope(memory: FormMemory | undefined, scope: MemoryScope): IDropdownOption[] {
-  if (!memory || !memory[scope]) return [];
-
-  const options = getOptions(memory, scope);
-
-  if (options.length === 0) return [];
-
-  return [
-    { key: scope, text: scope.toUpperCase(), itemType: DropdownMenuItemType.Header },
-    ...options,
-    { key: `${scope}_divider`, text: '-', itemType: DropdownMenuItemType.Divider },
-  ];
-}
-
-export function getMemoryOptions(memory?: FormMemory): IDropdownOption[] {
-  return [
-    ...buildScope(memory, MemoryScope.user),
-    ...buildScope(memory, MemoryScope.conversation),
-    ...buildScope(memory, MemoryScope.dialog),
-    ...buildScope(memory, MemoryScope.turn),
-  ];
-}
-
-type FormUpdater<T> = (updates: Partial<T>) => void;
-
-export function useFormState<T extends object>(initialData?: T): [T, FormUpdater<T>] {
-  // @ts-ignore
-  const defaultFormState: T = {};
-  const [formData, setFormData] = useState<T>(initialData || defaultFormState);
-
-  const update: FormUpdater<T> = updates => {
-    setFormData(merge({}, formData, updates));
-  };
-
-  return [formData, update];
-}
-
-export function sweepUndefinedFields(fields) {
-  const definedFields = {};
-
-  for (const elem in fields) {
-    if (fields[elem] !== null && fields[elem] !== undefined) {
-      definedFields[elem] = fields[elem];
-    }
-  }
-
-  return definedFields;
-}
-
-export function overriddenFieldsTemplate(fieldOverrides) {
-  return {
-    title: fieldOverrides.title,
-    description: fieldOverrides.description,
-  };
-}
-
-export function setOverridesOnField(formContext: any, fieldName: string) {
-  const templateOverrides = get(formContext.editorSchema, `content.fieldTemplateOverrides.${fieldName}`);
-  const overrides = overriddenFieldsTemplate(templateOverrides);
-  return sweepUndefinedFields(overrides);
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx
deleted file mode 100644
index dc699780b0..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
-
-import { BFDWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
-export function CheckboxWidget(props: BFDWidgetProps) {
-  const { onChange, onBlur, onFocus, value, label, id, schema } = props;
-  const { description } = schema;
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', marginTop: '14px' }}>
-      <Checkbox
-        id={id}
-        checked={Boolean(value)}
-        onChange={(_, checked?: boolean) => onChange(checked)}
-        onBlur={() => onBlur && onBlur(id, Boolean(value))}
-        onFocus={() => onFocus && onFocus(id, Boolean(value))}
-        ariaLabel={label}
-      />
-      <WidgetLabel label={label} description={description} id={id} inline />
-    </div>
-  );
-}
-
-CheckboxWidget.defaultProps = {
-  schema: {},
-  options: {},
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/DateTimeWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/DateTimeWidget.tsx
deleted file mode 100644
index 31a4c4b6a3..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/DateTimeWidget.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
-
-import { BFDWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
-export function DateTimeWidget(props: BFDWidgetProps) {
-  const { onChange, onBlur, onFocus, required, value, label, id, schema } = props;
-  const { description } = schema;
-
-  const onSelectDate = (date?: Date | null) => {
-    onChange(date ? date.toISOString() : null);
-  };
-
-  return (
-    <>
-      <WidgetLabel label={label} description={description} id={id} />
-      <DatePicker
-        id={id}
-        isRequired={required}
-        onBlur={() => onBlur && onBlur(id, value)}
-        onFocus={() => onFocus && onFocus(id, value)}
-        onSelectDate={onSelectDate}
-        value={value ? new Date(value) : undefined}
-      />
-    </>
-  );
-}
-
-DateTimeWidget.defaultProps = {
-  schema: {},
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/ExpressionWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/ExpressionWidget.tsx
deleted file mode 100644
index 7003ae588a..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/ExpressionWidget.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { useState, useEffect } from 'react';
-import { TextField, ITextFieldProps, ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
-import { JSONSchema6 } from 'json-schema';
-import formatMessage from 'format-message';
-import get from 'lodash/get';
-
-import { FormContext } from '../types';
-import { EditableField } from '../fields/EditableField';
-
-import { WidgetLabel } from './WidgetLabel';
-
-interface ExpresionWidgetProps extends ITextFieldProps {
-  hiddenErrMessage?: boolean;
-  onValidate?: (err?: JSX.Element | string) => void;
-  formContext: FormContext;
-  rawErrors?: string[];
-  schema: JSONSchema6;
-  onChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
-  /** Set to true to display as inline text that is editable on hover */
-  editable?: boolean;
-  styles?: Partial<ITextFieldStyles>;
-  options?: any;
-}
-
-const getDefaultErrorMessage = errMessage => {
-  return formatMessage.rich('{errMessage}. Refer to the syntax documentation<a>here</a>', {
-    errMessage,
-    a: ({ children }) => (
-      <a
-        key="a"
-        href="https://github.com/microsoft/BotBuilder-Samples/blob/master/experimental/common-expression-language/prebuilt-functions.md"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {children}
-      </a>
-    ),
-  });
-};
-
-export const ExpressionWidget: React.FC<ExpresionWidgetProps> = props => {
-  const {
-    formContext,
-    schema,
-    id,
-    label,
-    value,
-    editable,
-    hiddenErrMessage,
-    onValidate,
-    options = {},
-    ...rest
-  } = props;
-  const { description } = schema;
-  const { hideLabel } = options;
-  const name = props.id
-    ?.split('_')
-    .slice(1)
-    .join('');
-
-  const [errorMessage, setErrorMessage] = useState<JSX.Element | string>('');
-  const getErrorMessage = (): JSX.Element | string => {
-    const errMessage = name && get(formContext, ['formErrors', name], '');
-
-    const messageBar = errMessage ? (
-      <MessageBar
-        messageBarType={MessageBarType.error}
-        isMultiline={false}
-        dismissButtonAriaLabel={formatMessage('Close')}
-        truncated
-        overflowButtonAriaLabel={formatMessage('See more')}
-      >
-        {getDefaultErrorMessage(`${label} ${errMessage}`)}
-      </MessageBar>
-    ) : (
-      ''
-    );
-
-    if (hiddenErrMessage) {
-      onValidate && onValidate(messageBar);
-      // return span so text field shows error border
-      return errMessage ? <span /> : '';
-    } else {
-      return errMessage ? messageBar : '';
-    }
-  };
-
-  useEffect(() => {
-    setErrorMessage(getErrorMessage());
-  }, [formContext.formErrors, value]);
-
-  const Field = editable ? EditableField : TextField;
-
-  return (
-    <>
-      {!hideLabel && !!label && <WidgetLabel label={label} description={description} id={id} />}
-      <Field
-        {...rest}
-        id={id}
-        value={value}
-        errorMessage={errorMessage}
-        autoComplete="off"
-        styles={{
-          root: { ...(!hideLabel && !!label ? {} : { margin: '7px 0' }) },
-          errorMessage: {
-            display: hiddenErrMessage ? 'none' : 'block',
-            paddingTop: 0,
-          },
-        }}
-        options={options}
-      />
-    </>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/IntentWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/IntentWidget.tsx
deleted file mode 100644
index b659fb552f..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/IntentWidget.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import formatMessage from 'format-message';
-import { DialogInfo } from '@bfc/indexers';
-
-import { BFDWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-import { LuEditorWidget } from './LuEditorWidget';
-import { RegexEditorWidget } from './RegexEditorWidget';
-
-const EMPTY_OPTION = { key: '', text: '' };
-
-enum RecognizerType {
-  'none',
-  'regex',
-  'luis',
-}
-
-function recognizerType({ content }: DialogInfo): RecognizerType | null {
-  const { recognizer } = content;
-
-  if (recognizer) {
-    if (typeof recognizer === 'object' && recognizer.$type === 'Microsoft.RegexRecognizer') {
-      return RecognizerType.regex;
-    } else if (typeof recognizer === 'string') {
-      return RecognizerType.luis;
-    }
-  }
-
-  return RecognizerType.none;
-}
-
-export const IntentWidget: React.FC<BFDWidgetProps> = props => {
-  const { disabled, onChange, id, onFocus, onBlur, value, formContext, placeholder, label, schema } = props;
-  const { description } = schema;
-  const { currentDialog } = formContext;
-
-  const type = recognizerType(currentDialog);
-  let options: IDropdownOption[] = [];
-
-  switch (type) {
-    case RecognizerType.regex:
-    case RecognizerType.luis:
-      break;
-    default:
-      options = [EMPTY_OPTION];
-      break;
-  }
-
-  const handleChange = (_e, option): void => {
-    if (option) {
-      onChange(option.key);
-    }
-  };
-
-  return (
-    <>
-      {type === RecognizerType.none && (
-        <>
-          <WidgetLabel label={label} description={description} id={id} />
-          <Dropdown
-            id={id.replace(/\.|#/g, '')}
-            onBlur={() => onBlur && onBlur(id, value)}
-            onChange={handleChange}
-            onFocus={() => onFocus && onFocus(id, value)}
-            options={options}
-            selectedKey={value || null}
-            responsiveMode={ResponsiveMode.large}
-            disabled={disabled || options.length === 1}
-            placeholder={options.length > 1 ? placeholder : formatMessage('No intents configured for this dialog')}
-          />
-        </>
-      )}
-      {type === RecognizerType.luis && <LuEditorWidget formContext={formContext} name={value} height={316} />}
-      {type === RecognizerType.regex && <RegexEditorWidget formContext={formContext} name={value} />}
-    </>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/LuEditorWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/LuEditorWidget.tsx
deleted file mode 100644
index d14b2620eb..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/LuEditorWidget.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import debounce from 'lodash/debounce';
-import formatMessage from 'format-message';
-import { LuEditor } from '@bfc/code-editor';
-import { LuFile, filterSectionDiagnostics } from '@bfc/indexers';
-import { LuIntentSection } from '@bfc/shared';
-
-import { FormContext } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
-interface LuEditorWidgetProps {
-  formContext: FormContext;
-  name: string;
-  height?: number | string;
-  onChange?: (template?: string) => void;
-  prompt?: boolean;
-}
-
-export class LuEditorWidget extends React.Component<LuEditorWidgetProps> {
-  constructor(props) {
-    super(props);
-    this.debounceUpdate = debounce(this.updateLuIntent, 500);
-    this.name = this.props.name;
-    this.formContext = this.props.formContext;
-    this.luFileId = `${this.formContext.currentDialog.luFile}.${this.formContext.locale}`;
-    this.luFile = this.formContext.luFiles.find(f => f.id === this.luFileId);
-    this.luIntent = (this.luFile && this.luFile.intents.find(intent => intent.Name === this.name)) || {
-      Name: this.name,
-      Body: '',
-    };
-  }
-
-  formContext: FormContext;
-  name: string;
-  luFileId: string;
-  luFile?: LuFile;
-  luIntent: LuIntentSection;
-  state = { localValue: '' };
-  debounceUpdate;
-  updateLuIntent = (body: string) => {
-    this.formContext.shellApi.updateLuIntent(this.luFileId, this.name, { Name: this.name, Body: body }).catch(() => {});
-  };
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const name = nextProps.name;
-    const formContext = nextProps.formContext;
-    const luFileId = `${formContext.currentDialog.id}.${formContext.locale}`;
-    const luFile = formContext.luFiles.find(f => f.id === luFileId);
-    const luIntent = (luFile && luFile.intents.find(intent => intent.Name === name)) || {
-      Name: name,
-      Body: '',
-    };
-    if (!prevState.localValue) {
-      return {
-        localValue: luIntent.Body,
-      };
-    }
-    return null;
-  }
-
-  onChange = (body: string) => {
-    this.setState({
-      localValue: body,
-    });
-    if (this.luFileId) {
-      if (body) {
-        this.debounceUpdate(body);
-      } else {
-        this.formContext.shellApi.removeLuIntent(this.luFileId, this.name);
-      }
-    }
-  };
-
-  render() {
-    const { height = 250 } = this.props;
-    const { luFile, luFileId, luIntent, name, formContext } = this;
-    const diagnostics = luFile ? filterSectionDiagnostics(luFile.diagnostics, luIntent) : [];
-
-    const label = prompt
-      ? formatMessage('Expected responses (intent: {name})', { name })
-      : formatMessage('Trigger phrases (intent: {name})', { name });
-
-    return (
-      <>
-        <WidgetLabel label={label} />
-        <LuEditor
-          onChange={this.onChange}
-          value={this.state.localValue}
-          diagnostics={diagnostics}
-          hidePlaceholder={true}
-          luOption={{
-            projectId: formContext.projectId,
-            fileId: luFileId,
-            sectionId: luIntent?.Name,
-          }}
-          options={{
-            lineNumbers: 'off',
-            minimap: {
-              enabled: false,
-            },
-            lineDecorationsWidth: 10,
-            lineNumbersMinChars: 0,
-            glyphMargin: false,
-            folding: false,
-            renderLineHighlight: 'none',
-          }}
-          height={height}
-        />
-      </>
-    );
-  }
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/RadioWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/RadioWidget.tsx
deleted file mode 100644
index 6e989fb761..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/RadioWidget.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
-
-import { RadioWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
-export function RadioWidget(props: RadioWidgetProps) {
-  const { label, onChange, onBlur, onFocus, value, options, id, schema } = props;
-  const { description } = schema;
-
-  const choices = (options.enumOptions || []).map(o => ({
-    key: o.value,
-    text: o.label,
-  }));
-
-  return (
-    <>
-      <WidgetLabel label={label} description={description} id={id} />
-      <ChoiceGroup
-        id={id}
-        onBlur={() => onBlur && onBlur(id, value)}
-        onChange={(e, option?: IChoiceGroupOption) => onChange(option ? option.key : null)}
-        onFocus={() => onFocus && onFocus(id, value)}
-        options={choices}
-        selectedKey={value}
-      />
-    </>
-  );
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/RegexEditorWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/RegexEditorWidget.tsx
deleted file mode 100644
index 6909cb0585..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/RegexEditorWidget.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import formatMessage from 'format-message';
-import { RegexRecognizer } from '@bfc/shared';
-import { DialogInfo } from '@bfc/indexers';
-import { useState } from 'react';
-
-import { FormContext } from '../types';
-
-import { TextWidget } from '.';
-
-interface RegexEditorWidgetProps {
-  formContext: FormContext;
-  name: string;
-  onChange?: (template?: string) => void;
-}
-
-function getRegexIntentPattern(currentDialog: DialogInfo, intent: string): string | null {
-  const recognizer = currentDialog.content.recognizer as RegexRecognizer;
-  let pattern: string | null = null;
-
-  if (!recognizer) {
-    return null;
-  }
-
-  if (recognizer.intents) {
-    pattern = recognizer.intents.find(i => i.intent === intent)?.pattern || null;
-  }
-
-  return pattern;
-}
-export const RegexEditorWidget: React.FC<RegexEditorWidgetProps> = props => {
-  const { formContext, name } = props;
-  const { currentDialog } = formContext;
-  const label = formatMessage('Trigger phrases (intent: #{name})', { name });
-  const [localValue, setLocalValue] = useState(getRegexIntentPattern(currentDialog, name));
-  const handleIntentchange = (pattern): void => {
-    setLocalValue(pattern);
-    formContext.shellApi.updateRegExIntent(currentDialog.id, name, pattern);
-  };
-  return (
-    <TextWidget
-      id="regIntent"
-      label={label}
-      onChange={handleIntentchange}
-      formContext={formContext}
-      value={localValue}
-    />
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/SelectWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/SelectWidget.tsx
deleted file mode 100644
index 53e6b29088..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/SelectWidget.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { ResponsiveMode } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
-
-import { SelectWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
-export const SelectWidget: React.FunctionComponent<SelectWidgetProps> = props => {
-  const { onChange, onFocus, onBlur, value, options, label, schema, id, hideLabel } = props;
-  const { description } = schema;
-
-  const handleChange = (_, option?: IDropdownOption) => {
-    if (option) {
-      onChange(option.key);
-    } else {
-      onChange(null);
-    }
-  };
-
-  return (
-    <>
-      {!hideLabel && <WidgetLabel label={label} description={description} id={id} />}
-      <Dropdown
-        id={id}
-        onBlur={() => onBlur && onBlur(id, value)}
-        onChange={handleChange}
-        onFocus={() => onFocus && onFocus(id, value)}
-        options={options.enumOptions.map(o => ({
-          key: o.value,
-          text: o.label,
-        }))}
-        selectedKey={value}
-        responsiveMode={ResponsiveMode.large}
-        styles={{
-          label: { fontSize: '10px', fontWeight: '400' },
-        }}
-      />
-    </>
-  );
-};
-
-SelectWidget.defaultProps = {
-  schema: {},
-  onBlur: () => {},
-  onFocus: () => {},
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx
deleted file mode 100644
index 08315af9fd..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { NeutralColors } from '@uifabric/fluent-theme';
-import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-
-import { BFDWidgetProps } from '../types';
-
-import { ExpressionWidget } from './ExpressionWidget';
-import { WidgetLabel } from './WidgetLabel';
-
-const getInt = (value: string, step: number) => {
-  return parseInt(value, 10) + step;
-};
-
-const getFloat = (value: string, step: number) => {
-  return (parseFloat(value) + step).toFixed(step > 0 ? `${step}`.split('.')[1].length : step);
-};
-
-interface ITextWidgetProps extends BFDWidgetProps {
-  hiddenErrMessage?: boolean;
-  onValidate?: (err?: JSX.Element | string) => void;
-}
-
-export function TextWidget(props: ITextWidgetProps) {
-  const {
-    label,
-    onBlur,
-    onChange,
-    onFocus,
-    readonly,
-    value,
-    placeholder,
-    schema,
-    id,
-    disabled,
-    formContext,
-    rawErrors,
-    hiddenErrMessage,
-    onValidate,
-    options = {},
-  } = props;
-  const { description, examples = [], type, $role } = schema;
-  const { hideLabel, transparentBorder } = options;
-  let placeholderText = placeholder;
-
-  if (!placeholderText && examples.length > 0) {
-    placeholderText = `ex. ${examples.join(', ')}`;
-  }
-
-  const sharedProps = {
-    disabled,
-    id,
-    value,
-    autoComplete: 'off',
-    onBlur: () => {
-      onBlur && onBlur(id, value);
-    },
-    onChange: (_, newValue?: string) => onChange(newValue),
-    onFocus: () => {
-      onFocus && onFocus(id, value);
-    },
-    placeholder: placeholderText,
-    readOnly: Boolean(schema.const) || readonly,
-  };
-
-  if ($role === 'expression') {
-    return (
-      <ExpressionWidget
-        {...sharedProps}
-        editable={transparentBorder}
-        label={label}
-        schema={schema}
-        formContext={formContext}
-        rawErrors={rawErrors}
-        styles={{ root: { margin: 0 } }}
-        hiddenErrMessage={hiddenErrMessage}
-        onValidate={onValidate}
-        options={options}
-      />
-    );
-  }
-
-  if (type === 'integer' || type === 'number') {
-    const updateValue = (step: number) => (value: string) => {
-      // if the number is a float, we need to convert to a fixed decimal place
-      // in order to avoid floating point math rounding errors (ex. 1.2000000001)
-      // ex. if step = 0.01, we fix to 2 decimals
-      const newValue = type === 'integer' ? getInt(value, step) : getFloat(value, step);
-
-      onChange(newValue);
-      // need to allow form data to propagate before flushing to state
-      setTimeout(() => onBlur && onBlur(id, value));
-    };
-
-    const step = type === 'integer' ? 1 : 0.1;
-
-    return (
-      <>
-        {!hideLabel && <WidgetLabel label={label} description={description} id={id} />}
-        <SpinButton
-          onDecrement={updateValue(-step)}
-          onIncrement={updateValue(step)}
-          onValidate={updateValue(0)}
-          disabled={Boolean(schema.const) || readonly || disabled}
-          step={step}
-          value={value}
-          styles={{
-            labelWrapper: { display: 'none' },
-          }}
-        />
-      </>
-    );
-  }
-
-  return (
-    <>
-      {!hideLabel && <WidgetLabel label={label} description={description} id={id} />}
-      <TextField
-        styles={{
-          fieldGroup: {
-            borderColor: transparentBorder ? 'transparent' : undefined,
-            transition: 'border-color 0.1s linear',
-            selectors: {
-              ':hover': {
-                borderColor: transparentBorder ? NeutralColors.gray30 : undefined,
-              },
-            },
-          },
-        }}
-        ariaLabel={
-          // if we hide the widget label above, ARIA will need the label to exist here instead
-          hideLabel ? label : undefined
-        }
-        {...sharedProps}
-      />
-    </>
-  );
-}
-
-TextWidget.defaultProps = {
-  schema: {},
-  options: {},
-  onBlur: () => {},
-  onFocus: () => {},
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextareaWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextareaWidget.tsx
deleted file mode 100644
index ba4d7eceb0..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextareaWidget.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-
-import { BFDWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
-export const TextareaWidget: React.FunctionComponent<BFDWidgetProps> = props => {
-  const { onBlur, onChange, onFocus, readonly, value, placeholder, schema, id, disabled, label } = props;
-  const { description, examples = [] } = schema;
-
-  let placeholderText = placeholder;
-
-  if (!placeholderText && examples.length > 0) {
-    placeholderText = `ex. ${examples.join(', ')}`;
-  }
-
-  return (
-    <>
-      <WidgetLabel label={label} description={description} id={id} />
-      <TextField
-        disabled={disabled}
-        id={id}
-        multiline
-        onBlur={() => onBlur && onBlur(id, value)}
-        onChange={(_, newValue?: string) => onChange(newValue)}
-        onFocus={() => onFocus && onFocus(id, value)}
-        placeholder={placeholderText}
-        readOnly={readonly}
-        value={value}
-        styles={{
-          subComponentStyles: {
-            label: { root: { fontSize: '12px', fontWeight: '400' } },
-          },
-        }}
-      />
-    </>
-  );
-};
-
-TextareaWidget.defaultProps = {
-  schema: {},
-  options: {},
-  onBlur: () => {},
-  onFocus: () => {},
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/ToggleWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/ToggleWidget.tsx
deleted file mode 100644
index 3a8da19186..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/ToggleWidget.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
-import { WidgetProps } from '@bfcomposer/react-jsonschema-form';
-
-import { WidgetLabel } from './WidgetLabel';
-
-export function ToggleWidget(props: WidgetProps) {
-  const { label, onChange, value, id, schema } = props;
-  const { description } = schema;
-
-  const handleChange = (e, val) => {
-    onChange(val);
-  };
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', marginTop: '14px' }}>
-      <Toggle id={id} checked={value} onChange={handleChange} styles={{ root: { marginBottom: '0' } }} />
-      <WidgetLabel label={label} description={description} id={id} inline />
-    </div>
-  );
-}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx
deleted file mode 100644
index 5a90500734..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { DirectionalHint, TooltipHost, TooltipDelay } from 'office-ui-fabric-react/lib/Tooltip';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { Label } from 'office-ui-fabric-react/lib/Label';
-import { NeutralColors } from '@uifabric/fluent-theme';
-
-interface DescriptionCalloutProps {
-  title: string;
-  description?: string;
-  id?: string;
-  helpLink?: string;
-  helpLinkText?: string;
-  helpLinkLabel?: string;
-}
-
-const DescriptionCallout: React.FC<DescriptionCalloutProps> = props => {
-  const { description, title, id, helpLink, helpLinkText, helpLinkLabel } = props;
-
-  if (!description) {
-    return null;
-  }
-
-  return (
-    <TooltipHost
-      tooltipProps={{
-        styles: { root: { width: '288px', padding: '17px 28px' } },
-        onRenderContent: () => (
-          <div>
-            <h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }}>{title}</h3>
-            <p>
-              {description}
-              {helpLink && helpLinkText && helpLinkLabel && (
-                <>
-                  <br />
-                  <br />
-                  <a aria-label={helpLinkLabel} href={helpLink} target="_blank" rel="noopener noreferrer">
-                    {helpLinkText}
-                  </a>
-                </>
-              )}
-            </p>
-          </div>
-        ),
-      }}
-      delay={TooltipDelay.zero}
-      directionalHint={DirectionalHint.leftCenter}
-      styles={{ root: { display: 'flex', alignItems: 'center' } }}
-      id={`${id}-description`}
-    >
-      <div tabIndex={0}>
-        <Icon
-          iconName="Unknown"
-          styles={{
-            root: {
-              width: '12px',
-              minWidth: '12px',
-              height: '12px',
-
-              padding: '0px 3px',
-
-              color: NeutralColors.gray160,
-              fontSize: '12px',
-            },
-          }}
-          aria-label={
-            // add a semicolon so the screen-reader pauses instead of making a confusing run-on
-            `;${description}`
-          }
-        />
-      </div>
-    </TooltipHost>
-  );
-};
-
-interface WidgetLabelProps {
-  id?: string;
-  label?: string;
-  description?: string;
-  inline?: boolean;
-  helpLink?: string;
-  helpLinkText?: string;
-  helpLinkLabel?: string;
-}
-
-export const WidgetLabel: React.FC<WidgetLabelProps> = props => {
-  const { label, description, id, inline, helpLink, helpLinkText, helpLinkLabel } = props;
-
-  if (!label) {
-    return null;
-  }
-
-  return (
-    <Label
-      htmlFor={id}
-      styles={{
-        root: {
-          fontWeight: '400',
-          display: 'flex',
-          alignItems: 'center',
-          marginLeft: inline ? '4px' : '0',
-        },
-      }}
-    >
-      {label}
-      <DescriptionCallout
-        description={description}
-        title={label}
-        id={id}
-        helpLink={helpLink}
-        helpLinkText={helpLinkText}
-        helpLinkLabel={helpLinkLabel}
-        aria-label={helpLinkLabel}
-      />
-    </Label>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/index.ts b/Composer/packages/extensions/obiformeditor/src/Form/widgets/index.ts
deleted file mode 100644
index c11fd9b117..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { ToggleWidget } from './ToggleWidget';
-
-export * from './CheckboxWidget';
-export * from './DateTimeWidget';
-export * from './DialogSelectWidget';
-export * from './IntentWidget';
-export * from './RadioWidget';
-export * from './SelectWidget';
-export * from './TextareaWidget';
-export * from './TextWidget';
-
-export const toggle = ToggleWidget;
diff --git a/Composer/packages/extensions/obiformeditor/src/FormEditor.tsx b/Composer/packages/extensions/obiformeditor/src/FormEditor.tsx
deleted file mode 100644
index 28b91830fb..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/FormEditor.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { Global, jsx } from '@emotion/core';
-import React, { useState, useMemo, useEffect, useRef } from 'react';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
-import { JSONSchema6Definition, JSONSchema6 } from 'json-schema';
-import merge from 'lodash/merge';
-import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
-import debounce from 'lodash/debounce';
-import { appschema, ShellData, ShellApi } from '@bfc/shared';
-import { Diagnostic } from '@bfc/indexers';
-
-import Form from './Form';
-import { uiSchema } from './schema/uischema';
-import { getMemoryOptions } from './Form/utils';
-import { FormMemory, FormData } from './types';
-import { root } from './styles';
-
-const getType = (data: FormData): string | undefined => {
-  return data.$type;
-};
-
-export interface FormEditorProps extends ShellData {
-  memory?: FormMemory;
-  onBlur?: () => void;
-  onChange: (newData: object, updatePath?: string) => void;
-  shellApi: ShellApi;
-}
-
-export const FormEditor: React.FunctionComponent<FormEditorProps> = props => {
-  const { data, schemas, memory, dialogs, shellApi } = props;
-  const [localData, setLocalData] = useState(data);
-  const type = getType(localData);
-
-  const sync = useRef(
-    debounce((shellData: FormData, localData: FormData) => {
-      if (!isEqual(shellData, localData)) {
-        setLocalData(shellData);
-      }
-    }, 750)
-  ).current;
-
-  useEffect(() => {
-    sync(data, localData);
-
-    return () => {
-      sync.cancel();
-    };
-  }, [data]);
-
-  const formErrors = useMemo(() => {
-    if (props.currentDialog && props.currentDialog.diagnostics) {
-      const currentPath = props.focusPath.replace('#', '');
-      const diagnostics = get(props.currentDialog, 'diagnostics', [] as Diagnostic[]);
-
-      return diagnostics.reduce((errors, d) => {
-        const [dPath, dType, dProp] = d.path?.split('#') || [];
-        const dPropName = dProp
-          ?.replace('[', '')
-          ?.replace(']', '')
-          ?.replace('.', '');
-
-        if (dPath === currentPath && dType === type && dPropName) {
-          errors[dPropName] = d.message;
-        }
-
-        return errors;
-      }, {});
-    }
-
-    return {};
-  }, [props.currentDialog]);
-
-  if (!type) {
-    return (
-      <div>
-        Malformed data: missing $type.
-        <pre>{JSON.stringify(localData, null, 2)}</pre>
-      </div>
-    );
-  }
-
-  const definitions = appschema.definitions || {};
-  const typeDef: JSONSchema6Definition = definitions[type];
-
-  if (!typeDef) {
-    return (
-      <div>
-        Malformed data: missing type defintion in schema.
-        <pre>{JSON.stringify(localData, null, 2)}</pre>
-      </div>
-    );
-  }
-
-  const dialogSchema = {
-    ...(typeDef as JSONSchema6),
-    definitions: merge({}, definitions, (typeDef as JSONSchema6).definitions),
-  };
-
-  const dialogUiSchema = {
-    ...uiSchema[type],
-  };
-
-  const dialogOptions = dialogs.map(f => ({ value: f.id, label: f.displayName }));
-
-  const onChange = newValue => {
-    if (!isEqual(newValue.formData, localData)) {
-      props.onChange(newValue.formData);
-      setLocalData(newValue.formData);
-    }
-  };
-
-  const onMemoryDropdownChange = (event, option) => {
-    (navigator as any).clipboard.writeText(`{${option.key}}`);
-  };
-
-  const memoryOptions = getMemoryOptions(memory);
-
-  return (
-    <div>
-      <Global styles={root} />
-      {memoryOptions.length > 0 && (
-        <Dropdown
-          style={{ width: '300px', paddingBottom: '10px', paddingLeft: '18px', paddingTop: '18px' }}
-          placeholder="Memory available to this Dialog"
-          options={memoryOptions}
-          onChange={onMemoryDropdownChange}
-          onFocus={() => {}}
-          selectedKey={null}
-        />
-      )}
-      <Form
-        noValidate
-        className="schemaForm"
-        onChange={onChange}
-        formData={localData}
-        onBlur={props.onBlur}
-        schema={dialogSchema}
-        uiSchema={dialogUiSchema}
-        formContext={{
-          shellApi,
-          locale: props.locale,
-          dialogOptions,
-          editorSchema: schemas.editor,
-          rootId: props.focusPath,
-          luFiles: props.luFiles,
-          lgFiles: props.lgFiles,
-          currentDialog: props.currentDialog,
-          dialogId: get(data, '$designer.id'),
-          projectId: props.projectId,
-          isRoot: props.focusPath.endsWith('#'),
-          focusedEvent: props.focusedEvent,
-          focusedSteps: props.focusedSteps,
-          focusedTab: props.focusedTab,
-          formErrors,
-        }}
-        idPrefix={props.focusPath}
-      >
-        <button style={{ display: 'none' }} />
-      </Form>
-    </div>
-  );
-};
-
-FormEditor.defaultProps = {
-  onChange: () => {},
-  onBlur: () => {},
-  schemas: {
-    editor: {},
-  },
-};
-
-export default FormEditor;
diff --git a/Composer/packages/extensions/obiformeditor/src/LoadingSpinner.tsx b/Composer/packages/extensions/obiformeditor/src/LoadingSpinner.tsx
deleted file mode 100644
index a2729b2544..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/LoadingSpinner.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
-import formatMessage from 'format-message';
-
-import { container } from './styles';
-
-export const LoadingSpinner: React.FC = () => {
-  return (
-    <div css={container}>
-      <Spinner label={formatMessage('Loading')} />
-    </div>
-  );
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/Modal.tsx b/Composer/packages/extensions/obiformeditor/src/Modal.tsx
deleted file mode 100644
index f3584e48b1..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/Modal.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import { Modal as FabricModal } from 'office-ui-fabric-react/lib/Modal';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import formatMessage from 'format-message';
-
-interface ModalProps {
-  children: React.ReactNode;
-  isOpen?: boolean;
-  onDismiss: () => void;
-}
-
-const Modal: React.FunctionComponent<ModalProps> = props => {
-  const { children, isOpen, onDismiss } = props;
-
-  return (
-    <FabricModal isOpen={isOpen} onDismiss={onDismiss} styles={{ main: { maxWidth: '500px', width: '100%' } }}>
-      <div style={{ padding: '30px' }}>
-        <div style={{ position: 'absolute', top: 10, right: 10 }}>
-          <IconButton
-            iconProps={{ iconName: 'ChromeClose' }}
-            title={formatMessage('Cancel')}
-            ariaLabel={formatMessage('Cancel')}
-            onClick={onDismiss}
-          />
-        </div>
-        <div>{children}</div>
-      </div>
-    </FabricModal>
-  );
-};
-
-Modal.defaultProps = {
-  isOpen: true,
-  onDismiss: () => {},
-};
-
-export default Modal;
diff --git a/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx b/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx
deleted file mode 100644
index ff8ef1da5b..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { Suspense } from 'react';
-import ErrorBoundary, { FallbackProps } from 'react-error-boundary';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
-import get from 'lodash/get';
-import { CacheProvider } from '@emotion/core';
-import createCache from '@emotion/cache';
-
-import { FormEditor, FormEditorProps } from './FormEditor';
-import { LoadingSpinner } from './LoadingSpinner';
-
-const emotionCache = createCache({
-  // @ts-ignore
-  nonce: window.__nonce__,
-});
-
-const ErrorInfo: React.FC<FallbackProps> = ({ componentStack, error }) => (
-  <div style={{ marginRight: '20px' }}>
-    <MessageBar messageBarType={MessageBarType.error} isMultiline={false}>
-      <p style={{ whiteSpace: 'pre-wrap' }}>
-        <strong>Oops! An error occured in the form editor!</strong>
-        <br />
-        This is likely due to malformed data or missing functionality in Composer.
-        <br />
-        Try navigating to another node in the visual editor.
-      </p>
-      <p>Here’s what we know…</p>
-      <p style={{ whiteSpace: 'pre-wrap' }}>
-        <strong>Error:</strong> {error && error.toString()}
-      </p>
-      <p style={{ whiteSpace: 'pre-wrap' }}>
-        <strong>Component Stacktrace:</strong> {componentStack}
-      </p>
-    </MessageBar>
-  </div>
-);
-
-const ObiFormEditor: React.FC<FormEditorProps> = props => {
-  const onChange = data => {
-    props.onChange(data, props.focusedSteps[0]);
-  };
-
-  const key = get(props.data, '$designer.id', props.focusPath);
-
-  return (
-    <Suspense fallback={<LoadingSpinner />}>
-      <CacheProvider value={emotionCache}>
-        <ErrorBoundary key={`${props.botName}-${key}`} FallbackComponent={ErrorInfo}>
-          <FormEditor {...props} onChange={onChange} />
-        </ErrorBoundary>
-      </CacheProvider>
-    </Suspense>
-  );
-};
-
-export default ObiFormEditor;
diff --git a/Composer/packages/extensions/obiformeditor/src/index.ts b/Composer/packages/extensions/obiformeditor/src/index.ts
deleted file mode 100644
index 03786da96b..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import formatMessage from 'format-message';
-
-import ObiFormEditor from './ObiFormEditor';
-
-formatMessage.setup({
-  missingTranslation: 'ignore',
-});
-
-export default ObiFormEditor;
diff --git a/Composer/packages/extensions/obiformeditor/src/schema/uischema.ts b/Composer/packages/extensions/obiformeditor/src/schema/uischema.ts
deleted file mode 100644
index 5144b375ca..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/schema/uischema.ts
+++ /dev/null
@@ -1,289 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { SDKTypes, PROMPT_TYPES } from '@bfc/shared';
-import { UiSchema } from '@bfcomposer/react-jsonschema-form';
-
-const globalHidden = ['property', 'id'];
-
-const promptFieldsSchemas = PROMPT_TYPES.reduce((schemas, type) => {
-  schemas[type] = {
-    'ui:field': 'PromptField',
-  };
-  return schemas;
-}, {});
-
-const triggerUiSchema = {
-  'ui:order': ['condition', '*'],
-  'ui:hidden': ['actions', ...globalHidden],
-};
-
-export const uiSchema: { [key in SDKTypes]?: UiSchema } = {
-  [SDKTypes.AdaptiveDialog]: {
-    recognizer: {
-      'ui:field': 'RecognizerField',
-      intents: {
-        'ui:options': {
-          object: true,
-        },
-        items: {
-          'ui:options': {
-            hideDescription: true,
-            inline: true,
-          },
-          intent: {
-            'ui:options': {
-              hideLabel: true,
-              transparentBorder: true,
-            },
-          },
-          pattern: {
-            'ui:options': {
-              hideLabel: true,
-              transparentBorder: true,
-            },
-          },
-        },
-      },
-      entities: {
-        items: {
-          'ui:options': {
-            displayLabel: false,
-            hideLabel: true,
-            hideDescription: true,
-          },
-        },
-      },
-    },
-    'ui:order': ['recognizer', 'triggers', '*'],
-    'ui:hidden': ['triggers', 'autoEndDialog', 'generator', ...globalHidden],
-  },
-  [SDKTypes.BeginDialog]: {
-    dialog: {
-      'ui:widget': 'DialogSelectWidget',
-    },
-    options: {
-      'ui:field': 'CustomObjectField',
-    },
-    'ui:order': ['dialog', 'options', 'resultProperty', 'includeActivity', '*'],
-  },
-  [SDKTypes.CancelAllDialogs]: {
-    eventValue: {
-      'ui:field': 'CustomObjectField',
-    },
-    'ui:order': ['dialog', 'property', '*'],
-  },
-  [SDKTypes.ConditionalSelector]: {
-    ifFalse: {
-      'ui:field': 'SelectorField',
-    },
-    ifTrue: {
-      'ui:field': 'SelectorField',
-    },
-    'ui:hidden': [...globalHidden],
-  },
-  [SDKTypes.EditActions]: {
-    actions: {
-      'ui:field': 'StepsField',
-    },
-  },
-  [SDKTypes.Foreach]: {
-    'ui:order': ['itemsProperty', 'actions', '*'],
-    'ui:hidden': ['actions'],
-  },
-  [SDKTypes.ForeachPage]: {
-    'ui:order': ['itemsProperty', 'pageSize', 'actions', '*'],
-    'ui:hidden': ['actions'],
-  },
-  [SDKTypes.HttpRequest]: {
-    body: {
-      'ui:field': 'JsonField',
-    },
-    headers: {
-      'ui:field': 'CustomObjectField',
-    },
-    'ui:order': ['method', 'url', 'body', 'property', 'responseTypes', 'headers', '*'],
-  },
-  [SDKTypes.IfCondition]: {
-    'ui:hidden': ['actions', 'elseActions', ...globalHidden],
-  },
-  [SDKTypes.SetProperties]: {
-    assignments: {
-      'ui:options': {
-        hideLabel: true,
-        transparentBorder: true,
-      },
-      'ui:field': 'AssignmentsField',
-    },
-  },
-  [SDKTypes.OnActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnBeginDialog]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnCancelDialog]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnCondition]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnConversationUpdateActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnCustomEvent]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnDialogEvent]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnEndOfConversationActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnError]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnEventActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnHandoffActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnIntent]: {
-    intent: {
-      'ui:widget': 'IntentWidget',
-    },
-    'ui:order': ['intent', 'condition', 'entities', '*'],
-    'ui:hidden': ['actions', ...globalHidden],
-  },
-  [SDKTypes.OnInvokeActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnMessageActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnMessageDeleteActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnMessageReactionActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnMessageUpdateActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnRepromptDialog]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnTypingActivity]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.OnUnknownIntent]: {
-    ...triggerUiSchema,
-  },
-  [SDKTypes.MostSpecificSelector]: {
-    selector: {
-      'ui:field': 'SelectorField',
-    },
-    'ui:hidden': [...globalHidden],
-  },
-  [SDKTypes.OAuthInput]: {
-    prompt: {
-      'ui:widget': 'TextareaWidget',
-    },
-    unrecognizedPrompt: {
-      'ui:widget': 'TextareaWidget',
-    },
-    invalidPrompt: {
-      'ui:widget': 'TextareaWidget',
-    },
-    'ui:order': ['connectionName', '*'],
-    'ui:hidden': ['alwaysPrompt'],
-  },
-  [SDKTypes.QnAMakerDialog]: {
-    strictFilters: {
-      'ui:options': {
-        object: true,
-      },
-      items: {
-        'ui:options': {
-          hideDescription: true,
-          inline: true,
-        },
-        name: {
-          'ui:options': {
-            hideLabel: true,
-            transparentBorder: true,
-          },
-        },
-        value: {
-          'ui:options': {
-            hideLabel: true,
-            transparentBorder: true,
-          },
-        },
-      },
-    },
-  },
-  [SDKTypes.ReplaceDialog]: {
-    dialog: {
-      'ui:widget': 'DialogSelectWidget',
-    },
-    options: {
-      'ui:field': 'CustomObjectField',
-    },
-    'ui:hidden': [...globalHidden],
-    'ui:order': ['dialog', 'options', 'includeActivity', '*'],
-  },
-  [SDKTypes.RepeatDialog]: {
-    options: {
-      'ui:field': 'CustomObjectField',
-    },
-    'ui:hidden': [...globalHidden],
-    'ui:order': ['options', 'includeActivity', '*'],
-  },
-  [SDKTypes.SwitchCondition]: {
-    cases: {
-      'ui:options': {
-        object: true,
-      },
-      items: {
-        'ui:hidden': ['actions'],
-        'ui:options': {
-          hideDescription: true,
-          inline: true,
-        },
-        value: {
-          'ui:options': {
-            hideLabel: true,
-            transparentBorder: true,
-          },
-        },
-      },
-    },
-    'ui:hidden': ['default', ...globalHidden],
-  },
-  [SDKTypes.SendActivity]: {
-    activity: {
-      'ui:field': 'LgEditorField',
-    },
-    'ui:hidden': [...globalHidden],
-  },
-  [SDKTypes.SkillDialog]: {
-    activity: {
-      'ui:field': 'LgEditorField',
-      'ui:title': 'Activity',
-    },
-    'ui:hidden': [...globalHidden],
-    'ui:order': [
-      'botId',
-      'skillEndpoint',
-      'skillHostEndpoint',
-      'skillAppId',
-      'activity',
-      'activityProcessed',
-      'resultProperty',
-      '*',
-    ],
-  },
-  ...promptFieldsSchemas,
-};
diff --git a/Composer/packages/extensions/obiformeditor/src/styles.ts b/Composer/packages/extensions/obiformeditor/src/styles.ts
deleted file mode 100644
index 9b572f13d0..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { css } from '@emotion/core';
-
-export const container = css`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const root = css`
-  input::placeholder {
-    font-style: italic;
-  }
-`;
diff --git a/Composer/packages/extensions/obiformeditor/src/types.ts b/Composer/packages/extensions/obiformeditor/src/types.ts
deleted file mode 100644
index 2d302a169b..0000000000
--- a/Composer/packages/extensions/obiformeditor/src/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-export enum MemoryScope {
-  user = 'user',
-  conversation = 'conversation',
-  dialog = 'dialog',
-  turn = 'turn',
-}
-interface MemoryBag {
-  [key: string]: any;
-}
-
-export interface FormMemory {
-  [MemoryScope.user]: MemoryBag;
-  [MemoryScope.conversation]: MemoryBag;
-  [MemoryScope.dialog]: MemoryBag;
-  [MemoryScope.turn]: MemoryBag;
-}
-
-export interface FormData {
-  $type?: string;
-  [key: string]: any;
-}
diff --git a/Composer/packages/extensions/obiformeditor/tsconfig.build.json b/Composer/packages/extensions/obiformeditor/tsconfig.build.json
deleted file mode 100644
index 398b6a50b3..0000000000
--- a/Composer/packages/extensions/obiformeditor/tsconfig.build.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["./src/**/*"]
-}
diff --git a/Composer/packages/extensions/package.json b/Composer/packages/extensions/package.json
deleted file mode 100644
index 3049abd6eb..0000000000
--- a/Composer/packages/extensions/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@bfc/extensions",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "engines": {
-    "node": ">=12"
-  },
-  "scripts": {
-    "build:visual-designer": "cd visual-designer && yarn build",
-    "build:obiformeditor": "cd obiformeditor && yarn build",
-    "build:all": "concurrently --kill-others-on-fail \"yarn:build:obiformeditor\" \"yarn:build:visual-designer\""
-  },
-  "author": "",
-  "license": "ISC"
-}
diff --git a/Composer/packages/extensions/visual-designer/jest.config.js b/Composer/packages/extensions/visual-designer/jest.config.js
index 2617bd488d..1d4fab45cd 100644
--- a/Composer/packages/extensions/visual-designer/jest.config.js
+++ b/Composer/packages/extensions/visual-designer/jest.config.js
@@ -1,6 +1,8 @@
 // eslint-disable-next-line
 const path = require('path');
+
 module.exports = {
+  displayName: 'visual-designer',
   preset: 'ts-jest/presets/js-with-babel',
   testPathIgnorePatterns: ['"/node_modules/(?!office-ui-fabric-react).+\\.js$"', '/node_modules/', '/jestMocks/'],
   moduleNameMapper: {
diff --git a/Composer/packages/extensions/visual-designer/package.json b/Composer/packages/extensions/visual-designer/package.json
index 736dba2a2a..8acb4d5148 100644
--- a/Composer/packages/extensions/visual-designer/package.json
+++ b/Composer/packages/extensions/visual-designer/package.json
@@ -27,7 +27,6 @@
     "@bfc/shared": "*",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
-    "@types/react": "16.9.0",
     "classnames": "^2.2.6",
     "create-react-class": "^15.6.3",
     "d3": "^5.9.1",
@@ -35,13 +34,13 @@
     "dagre-d3": "^0.6.3",
     "format-message": "^6.2.1",
     "lodash": "^4.17.15",
-    "office-ui-fabric-react": "7.62.0",
+    "office-ui-fabric-react": "^7.88.1",
     "prop-types": "^15.7.2",
     "react-measure": "^2.3.0",
     "source-map-loader": "^0.2.4"
   },
   "peerDependencies": {
-    "react": "16.x"
+    "react": "16.13.0"
   },
   "devDependencies": {
     "@babel/cli": "7.2.3",
@@ -52,12 +51,13 @@
     "@babel/preset-react": "7.0.0",
     "@types/jest": "^24.0.11",
     "@types/lodash": "^4.14.146",
+    "@types/react": "16.9.23",
     "babel-jest": "24.0.0",
     "babel-plugin-emotion": "^10.0.7",
     "jest": "^24.5.0",
     "json-loader": "^0.5.7",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
     "react-testing-library": "^6.0.2",
     "ts-jest": "^24.1.0",
     "ts-loader": "^6.0.3"
diff --git a/Composer/packages/extensions/visual-designer/src/index.tsx b/Composer/packages/extensions/visual-designer/src/index.tsx
index f9a64ef62f..671bea7580 100644
--- a/Composer/packages/extensions/visual-designer/src/index.tsx
+++ b/Composer/packages/extensions/visual-designer/src/index.tsx
@@ -117,7 +117,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
   );
 };
 
-interface VisualDesignerProps extends ShellData {
+export interface VisualDesignerProps extends ShellData {
   onChange: (newData: object, updatePath?: string) => void;
   shellApi: ShellApi;
 }
diff --git a/Composer/packages/lib/code-editor/demo/webpack.config.demo.js b/Composer/packages/lib/code-editor/demo/webpack.config.demo.js
index 61dd845d2f..993a80b629 100644
--- a/Composer/packages/lib/code-editor/demo/webpack.config.demo.js
+++ b/Composer/packages/lib/code-editor/demo/webpack.config.demo.js
@@ -4,7 +4,6 @@ const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const MonacoWebpackPlugin = require('@bfcomposer/monaco-editor-webpack-plugin');
 
 module.exports = {
   entry: path.resolve(__dirname, 'src/index.tsx'),
@@ -123,9 +122,5 @@ module.exports = {
       chunksSortMode: 'dependency',
       template: path.join(__dirname, 'index.html'),
     }),
-    new MonacoWebpackPlugin({
-      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-      languages: ['markdown', 'json'],
-    }),
   ],
 };
diff --git a/Composer/packages/lib/code-editor/jest.config.js b/Composer/packages/lib/code-editor/jest.config.js
index 89f28b50a8..205dfae4b9 100644
--- a/Composer/packages/lib/code-editor/jest.config.js
+++ b/Composer/packages/lib/code-editor/jest.config.js
@@ -2,6 +2,7 @@
 const path = require('path');
 
 module.exports = {
+  displayName: 'code-editor',
   preset: 'ts-jest/presets/js-with-babel',
   moduleNameMapper: {
     // Any imports of .scss / .css files will instead import styleMock.js which is an empty object
diff --git a/Composer/packages/lib/code-editor/package.json b/Composer/packages/lib/code-editor/package.json
index 8e242b1169..7420998888 100644
--- a/Composer/packages/lib/code-editor/package.json
+++ b/Composer/packages/lib/code-editor/package.json
@@ -24,8 +24,8 @@
     "watch": "yarn build:ts --watch"
   },
   "peerDependencies": {
-    "react": "16.9.0",
-    "react-dom": "16.9.0"
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -36,8 +36,8 @@
     "@types/express": "^4.17.1",
     "@types/jest": "^24.0.11",
     "@types/lodash": "^4.14.146",
-    "@types/react": "16.9.0",
-    "@types/react-dom": "16.9.0",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
     "autoprefixer": "^9.5.1",
     "copyfiles": "^2.1.0",
     "css-loader": "^2.1.1",
@@ -47,8 +47,8 @@
     "jest-dom": "^3.1.3",
     "mini-css-extract-plugin": "^0.6.0",
     "postcss-loader": "^3.0.0",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
     "react-testing-library": "^6.0.2",
     "rimraf": "^2.6.3",
     "style-loader": "^0.23.1",
@@ -61,12 +61,12 @@
   },
   "dependencies": {
     "@bfc/lg-languageserver": "*",
-    "@bfcomposer/monaco-editor-webpack-plugin": "^1.7.2",
-    "@bfcomposer/react-monaco-editor": "0.30.12",
+    "@emotion/core": "^10.0.27",
+    "@monaco-editor/react": "^3.1.0",
     "@types/node": "^12.12.8",
     "@types/vscode": "^1.40.0",
     "lodash": "^4.17.15",
-    "monaco-editor-core": "0.17.0",
+    "monaco-editor": "^0.19.0",
     "monaco-languageclient": "^0.10.0",
     "normalize-url": "^4.5.0",
     "reconnecting-websocket": "^3.2.2",
diff --git a/Composer/packages/lib/code-editor/src/BaseEditor.tsx b/Composer/packages/lib/code-editor/src/BaseEditor.tsx
index 63a94966c5..ffc0ba734c 100644
--- a/Composer/packages/lib/code-editor/src/BaseEditor.tsx
+++ b/Composer/packages/lib/code-editor/src/BaseEditor.tsx
@@ -1,14 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
-import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
-import MonacoEditor, { MonacoEditorProps } from '@bfcomposer/react-monaco-editor';
-import throttle from 'lodash/throttle';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React, { useState, useEffect, useMemo } from 'react';
+import Editor, { EditorDidMount, EditorProps, Monaco, monaco } from '@monaco-editor/react';
+import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import formatMessage from 'format-message';
+import { Diagnostic } from '@bfc/shared';
+import { findErrors, combineSimpleMessage, findWarnings } from '@bfc/indexers';
 
 import { assignDefined } from './utils/common';
 
-const defaultOptions: monacoEditor.editor.IEditorConstructionOptions = {
+const defaultOptions = {
   scrollBeyondLastLine: false,
   wordWrap: 'off',
   fontFamily: 'Segoe UI',
@@ -25,74 +30,167 @@ const defaultOptions: monacoEditor.editor.IEditorConstructionOptions = {
   renderLineHighlight: 'none',
 };
 
-export interface BaseEditorProps extends Omit<MonacoEditorProps, 'height'> {
+const styles = {
+  container: ({ hovered, focused, error, warning, height }) => {
+    let borderColor = NeutralColors.gray120;
+
+    if (hovered) {
+      borderColor = NeutralColors.gray160;
+    }
+
+    if (focused) {
+      borderColor = SharedColors.cyanBlue10;
+    }
+
+    if (warning) {
+      borderColor = SharedColors.yellow10;
+    }
+
+    if (error) {
+      borderColor = SharedColors.red20;
+    }
+
+    return css`
+      border-width: ${focused ? '2px' : '1px'};
+      padding: ${focused ? 0 : '1px'};
+      border-style: solid;
+      border-color: ${borderColor};
+      transition: border-color 0.1s linear;
+      box-sizing: border-box;
+      height: calc(${typeof height === 'string' ? height : `${height}px`} - ${error ? 32 : 0}px);
+    `;
+  },
+};
+
+export type OnInit = (instance: Monaco) => void;
+
+export interface BaseEditorProps extends EditorProps {
+  diagnostics?: Diagnostic[]; // indexer generic diagnostic
+  helpURL?: string;
+  hidePlaceholder?: boolean;
+  id?: string;
   onChange: (newValue: string) => void;
+  onInit?: OnInit;
   placeholder?: string;
   value?: string;
+  warningMessage?: string; // warning text show below editor
+  errorMessage?: string; // error text show below editor
 }
 
-export function BaseEditor(props: BaseEditorProps) {
-  const { onChange, placeholder, value } = props;
+const BaseEditor: React.FC<BaseEditorProps> = props => {
+  const {
+    onChange,
+    editorDidMount,
+    placeholder,
+    hidePlaceholder,
+    value,
+    errorMessage,
+    warningMessage,
+    diagnostics = [],
+    helpURL,
+    height = '100%',
+    onInit,
+    ...rest
+  } = props;
   const options = assignDefined(defaultOptions, props.options);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [rect, setRect] = useState({ height: 0, width: 0 });
-
-  const updateRect = throttle(() => {
-    if (containerRef.current) {
-      const { height, width } = containerRef.current.getBoundingClientRect();
-
-      if (height !== rect.height || (width !== rect.width && height + width > 0)) {
-        requestAnimationFrame(() => {
-          setRect({ height, width });
-        });
-      } else if (height + width === 0) {
-        // try again
-        setTimeout(updateRect, 50);
-      }
+
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [editor, setEditor] = useState<any>();
+  const initialValue = useMemo(() => value || (hidePlaceholder ? '' : placeholder), []);
+
+  const onEditorMount: EditorDidMount = (getValue, editor) => {
+    setEditor(editor);
+
+    if (typeof editorDidMount === 'function') {
+      editorDidMount(getValue, editor);
     }
-  }, 0);
+  };
 
   useEffect(() => {
-    window.addEventListener('resize', updateRect);
-
-    return () => {
-      window.addEventListener('resize', updateRect);
-    };
+    monaco.init().then(instance => {
+      typeof onInit === 'function' && onInit(instance);
+    });
   }, []);
 
-  useLayoutEffect(() => {
-    updateRect();
-  }, []);
+  useEffect(() => {
+    if (editor) {
+      const onFocusListener = editor.onDidFocusEditorWidget(() => {
+        setFocused(true);
+      });
+
+      const onBlurListener = editor.onDidBlurEditorWidget(() => {
+        setFocused(false);
+      });
 
-  const editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor) => {
-    if (typeof props.editorDidMount === 'function') {
-      props.editorDidMount(editor, monaco);
+      return () => {
+        onFocusListener.dispose();
+        onBlurListener.dispose();
+      };
     }
-  };
+  }, [editor]);
+
+  useEffect(() => {
+    if (editor) {
+      const disposable = editor.onDidChangeModelContent(() => {
+        onChange(editor.getValue());
+      });
+
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }, [onChange, editor]);
+
+  const errorMsgFromDiagnostics = useMemo(() => {
+    const errors = findErrors(diagnostics);
+    return errors.length ? combineSimpleMessage(errors) : '';
+  }, [diagnostics]);
+
+  const warningMsgFromDiagnostics = useMemo(() => {
+    const warnings = findWarnings(diagnostics);
+    return warnings.length ? combineSimpleMessage(warnings) : '';
+  }, [diagnostics]);
+
+  const hasError = !!errorMessage || !!errorMsgFromDiagnostics;
+  const hasWarning = !!warningMessage || !!warningMsgFromDiagnostics;
+
+  const messageHelp = formatMessage.rich('{msg}. Refer to the syntax documentation<a>here</a>.', {
+    msg: errorMessage || errorMsgFromDiagnostics || warningMessage || warningMsgFromDiagnostics,
+    a: ({ children }) => (
+      <a key="a" href={helpURL} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    ),
+  });
 
   return (
-    <div
-      className="CodeEditor"
-      ref={containerRef}
-      style={{
-        height: '100%',
-        boxSizing: 'border-box',
-      }}
-    >
-      <MonacoEditor
-        {...props}
-        {...rect}
-        editorDidMount={editorDidMount}
-        value={value || placeholder}
-        onChange={onChange}
-        options={options}
-      />
-    </div>
+    <React.Fragment>
+      <div
+        css={styles.container({ hovered, focused, error: hasError, warning: hasWarning, height })}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        <Editor {...rest} value={initialValue || ''} editorDidMount={onEditorMount} options={options} />
+      </div>
+      {(hasError || hasWarning) && (
+        <MessageBar
+          messageBarType={hasError ? MessageBarType.error : hasWarning ? MessageBarType.warning : MessageBarType.info}
+          isMultiline={false}
+          dismissButtonAriaLabel={formatMessage('Close')}
+          truncated
+          overflowButtonAriaLabel={formatMessage('See more')}
+        >
+          {messageHelp}
+        </MessageBar>
+      )}
+    </React.Fragment>
   );
-}
+};
 
 BaseEditor.defaultProps = {
-  height: '100%',
   language: 'markdown',
   theme: 'vs',
 };
+
+export { BaseEditor };
diff --git a/Composer/packages/lib/code-editor/src/JsonEditor.tsx b/Composer/packages/lib/code-editor/src/JsonEditor.tsx
index 26dc3e87cf..200522157f 100644
--- a/Composer/packages/lib/code-editor/src/JsonEditor.tsx
+++ b/Composer/packages/lib/code-editor/src/JsonEditor.tsx
@@ -1,29 +1,78 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React, { useState, useEffect } from 'react';
-import { editor } from '@bfcomposer/monaco-editor';
-import { EditorWillMount } from '@bfcomposer/react-monaco-editor';
 
 import * as utils from './utils';
-import { RichEditor, RichEditorProps } from './RichEditor';
+import { BaseEditor, BaseEditorProps, OnInit } from './BaseEditor';
 
-interface JsonEditorProps extends Omit<RichEditorProps, 'language' | 'value' | 'errorMsg' | 'onChange'> {
+interface JsonEditorProps extends Omit<BaseEditorProps, 'language' | 'value' | 'errorMessage' | 'onChange'> {
   onChange: (jsonData: any) => void;
   value?: object;
   obfuscate?: boolean;
+  schema?: any;
 }
 
-export function JsonEditor(props: JsonEditorProps) {
-  const { options: additionalOptions, value: initialValue, onChange, editorWillMount, obfuscate, ...rest } = props;
+const JsonEditor: React.FC<JsonEditorProps> = props => {
+  const {
+    options: additionalOptions,
+    value: initialValue,
+    onChange,
+    obfuscate,
+    onInit: onInitProp,
+    schema,
+    id,
+    ...rest
+  } = props;
   const [value, setValue] = useState<string>(JSON.stringify(initialValue, null, 2));
   const [parseError, setParseError] = useState<string>('');
 
-  const options: editor.IEditorConstructionOptions = {
+  const options = {
     quickSuggestions: true,
     folding: false,
+    readOnly: obfuscate,
     ...additionalOptions,
   };
 
+  const onInit: OnInit = monaco => {
+    const disposable = monaco.editor.onDidCreateModel(model => {
+      const diagnosticOptions: any = {
+        validate: true,
+      };
+
+      if (schema) {
+        const uri = btoa(JSON.stringify(schema));
+        const otherSchemas = monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || [];
+        const currentSchema = otherSchemas.find(s => s.uri === uri);
+
+        /**
+         * Because we mutate the global language settings, we need to
+         * add new schemas / new models to existing schemas.
+         * This lets us have multiple editors active using different schemas
+         * by taking advantage of the `fileMatch` property + the model's uri.
+         */
+        diagnosticOptions.schemas = [
+          ...otherSchemas.filter(s => s.uri !== uri),
+          {
+            uri,
+            schema,
+            fileMatch: [...(currentSchema?.fileMatch || []), model.uri.toString()],
+          },
+        ];
+      }
+
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions(diagnosticOptions);
+
+      if (disposable) {
+        // only do this once per model being created
+        disposable.dispose();
+      }
+    });
+
+    if (typeof onInitProp === 'function') {
+      onInitProp(monaco);
+    }
+  };
+
   useEffect(() => {
     const result = obfuscate ? utils.obfuscate(initialValue) : initialValue;
     setValue(JSON.stringify(result, null, 2));
@@ -38,7 +87,7 @@ export function JsonEditor(props: JsonEditorProps) {
         onChange(data);
         setParseError('');
       } catch (err) {
-        setParseError('invalid json');
+        setParseError('Invalid json');
       }
     } else {
       onChange(undefined);
@@ -46,26 +95,19 @@ export function JsonEditor(props: JsonEditorProps) {
     }
   };
 
-  const handleMount: EditorWillMount = monaco => {
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-    });
-
-    if (typeof editorWillMount === 'function') {
-      editorWillMount(monaco);
-    }
-  };
-
   return (
-    <RichEditor
+    <BaseEditor
+      id={id}
       helpURL="https://www.json.org"
       language="json"
       options={options}
       value={value}
       onChange={handleChange}
-      editorWillMount={handleMount}
-      errorMsg={parseError}
+      errorMessage={parseError}
+      onInit={onInit}
       {...rest}
     />
   );
-}
+};
+
+export { JsonEditor };
diff --git a/Composer/packages/lib/code-editor/src/LgEditor.tsx b/Composer/packages/lib/code-editor/src/LgEditor.tsx
index bc60e93e55..d08c167ea5 100644
--- a/Composer/packages/lib/code-editor/src/LgEditor.tsx
+++ b/Composer/packages/lib/code-editor/src/LgEditor.tsx
@@ -3,14 +3,13 @@
 
 import React from 'react';
 import { listen, MessageConnection } from 'vscode-ws-jsonrpc';
-import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
-import * as monacoCore from 'monaco-editor-core';
 import get from 'lodash/get';
 import { MonacoServices, MonacoLanguageClient } from 'monaco-languageclient';
+import { EditorDidMount } from '@monaco-editor/react';
 
 import { registerLGLanguage } from './languages';
 import { createUrl, createWebSocket, createLanguageClient } from './utils/lspUtil';
-import { RichEditor, RichEditorProps } from './RichEditor';
+import { BaseEditor, BaseEditorProps, OnInit } from './BaseEditor';
 
 const LG_HELP =
   'https://github.com/microsoft/BotBuilder-Samples/blob/master/experimental/language-generation/docs/lg-file-format.md';
@@ -23,7 +22,7 @@ export interface LGOption {
   templateId?: string;
 }
 
-export interface LGLSPEditorProps extends RichEditorProps {
+export interface LGLSPEditorProps extends BaseEditorProps {
   lgOption?: LGOption;
   languageServer?:
     | {
@@ -60,18 +59,20 @@ export function LgEditor(props: LGLSPEditorProps) {
     ...props.options,
   };
 
-  const { lgOption, languageServer, ...restProps } = props;
+  const { lgOption, languageServer, onInit: onInitProp, ...restProps } = props;
   const lgServer = languageServer || defaultLGServer;
 
-  const editorWillMount = (monaco: typeof monacoEditor) => {
+  const onInit: OnInit = monaco => {
     registerLGLanguage(monaco);
-    if (typeof props.editorWillMount === 'function') {
-      return props.editorWillMount(monaco);
+
+    if (typeof onInitProp === 'function') {
+      onInitProp(monaco);
     }
   };
-  const editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor) => {
+
+  const editorDidMount: EditorDidMount = (_getValue, editor) => {
     if (!window.monacoServiceInstance) {
-      window.monacoServiceInstance = MonacoServices.install(editor as monacoCore.editor.IStandaloneCodeEditor | any);
+      window.monacoServiceInstance = MonacoServices.install(editor as any);
     }
 
     if (!window.monacoLGEditorInstance) {
@@ -96,19 +97,19 @@ export function LgEditor(props: LGLSPEditorProps) {
     }
 
     if (typeof props.editorDidMount === 'function') {
-      return props.editorDidMount(editor, monaco);
+      return props.editorDidMount(_getValue, editor);
     }
   };
 
   return (
-    <RichEditor
+    <BaseEditor
       placeholder={placeholder}
       helpURL={LG_HELP}
       {...restProps}
-      theme={'lgtheme'}
-      language={'botbuilderlg'}
+      onInit={onInit}
+      theme="lgtheme"
+      language="botbuilderlg"
       options={options}
-      editorWillMount={editorWillMount}
       editorDidMount={editorDidMount}
     />
   );
diff --git a/Composer/packages/lib/code-editor/src/LuEditor.tsx b/Composer/packages/lib/code-editor/src/LuEditor.tsx
index c93d883164..98eb59b767 100644
--- a/Composer/packages/lib/code-editor/src/LuEditor.tsx
+++ b/Composer/packages/lib/code-editor/src/LuEditor.tsx
@@ -1,16 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { listen, MessageConnection } from 'vscode-ws-jsonrpc';
-import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
-import * as monacoCore from 'monaco-editor-core';
 import get from 'lodash/get';
 import { MonacoServices, MonacoLanguageClient } from 'monaco-languageclient';
+import { EditorDidMount, Monaco } from '@monaco-editor/react';
 
 import { registerLULanguage } from './languages';
 import { createUrl, createWebSocket, createLanguageClient } from './utils/lspUtil';
-import { RichEditor, RichEditorProps } from './RichEditor';
+import { BaseEditor, BaseEditorProps, OnInit } from './BaseEditor';
 
 const LU_HELP = 'https://aka.ms/lu-file-format';
 const placeholder = `> To learn more about the LU file format, read the documentation at
@@ -22,7 +21,7 @@ export interface LUOption {
   sectionId?: string;
 }
 
-export interface LULSPEditorProps extends RichEditorProps {
+export interface LULSPEditorProps extends BaseEditorProps {
   luOption?: LUOption;
   languageServer?:
     | {
@@ -73,37 +72,37 @@ async function initializeDocuments(luOption: LUOption | undefined, uri: string)
   }
 }
 
-export function LuEditor(props: LULSPEditorProps) {
-  const options: monacoEditor.editor.IEditorConstructionOptions = {
+const LuEditor: React.FC<LULSPEditorProps> = props => {
+  const monacoRef = useRef<Monaco>();
+  const options = {
     quickSuggestions: true,
-    wordBasedSuggestions: false,
     formatOnType: true,
-    lineNumbers: 'on',
-    minimap: {
-      enabled: true,
-    },
+    lineNumbers: 'on' as const,
     lineDecorationsWidth: undefined,
     glyphMargin: true,
-    autoClosingBrackets: 'always',
-    autoIndent: true,
+    autoClosingBrackets: 'always' as const,
+    autoIndent: 'full' as const,
     lightbulb: {
       enabled: true,
     },
     ...props.options,
   };
 
-  const { luOption, languageServer, ...restProps } = props;
+  const { luOption, languageServer, onInit: onInitProp, ...restProps } = props;
   const luServer = languageServer || defaultLUServer;
 
-  const editorWillMount = (monaco: typeof monacoEditor) => {
+  const onInit: OnInit = monaco => {
     registerLULanguage(monaco);
-    if (typeof props.editorWillMount === 'function') {
-      return props.editorWillMount(monaco);
+    monacoRef.current = monaco;
+
+    if (typeof onInitProp === 'function') {
+      onInitProp(monaco);
     }
   };
-  const editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor) => {
+
+  const editorDidMount: EditorDidMount = (_getValue, editor) => {
     if (!window.monacoServiceInstance) {
-      window.monacoServiceInstance = MonacoServices.install(editor as monacoCore.editor.IStandaloneCodeEditor | any);
+      window.monacoServiceInstance = MonacoServices.install(editor as any);
     }
 
     if (!window.monacoLUEditorInstance) {
@@ -118,10 +117,13 @@ export function LuEditor(props: LULSPEditorProps) {
             window.monacoLUEditorInstance = languageClient;
           }
 
-          editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function() {
-            const position = editor.getPosition();
-            languageClient.sendRequest('labelingExperienceRequest', { uri, position });
-          });
+          const m = monacoRef.current;
+          if (m) {
+            editor.addCommand(m.KeyMod.Shift | m.KeyCode.Enter, function() {
+              const position = editor.getPosition();
+              languageClient.sendRequest('labelingExperienceRequest', { uri, position });
+            });
+          }
           initializeDocuments(luOption, uri);
           languageClient.onReady().then(() =>
             languageClient.onNotification('addUnlabelUtterance', result => {
@@ -141,20 +143,22 @@ export function LuEditor(props: LULSPEditorProps) {
     }
 
     if (typeof props.editorDidMount === 'function') {
-      return props.editorDidMount(editor, monaco);
+      return props.editorDidMount(_getValue, editor);
     }
   };
 
   return (
-    <RichEditor
+    <BaseEditor
       placeholder={placeholder}
       helpURL={LU_HELP}
       {...restProps}
-      theme={'lu'}
-      language={'lu'}
+      onInit={onInit}
+      theme="lu"
+      language="lu"
       options={options}
-      editorWillMount={editorWillMount}
       editorDidMount={editorDidMount}
     />
   );
-}
+};
+
+export { LuEditor };
diff --git a/Composer/packages/lib/code-editor/src/RichEditor.tsx b/Composer/packages/lib/code-editor/src/RichEditor.tsx
deleted file mode 100644
index ea23bbe8c5..0000000000
--- a/Composer/packages/lib/code-editor/src/RichEditor.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { Fragment, useState, useEffect, useMemo } from 'react';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
-import { SharedColors, NeutralColors } from '@uifabric/fluent-theme';
-import formatMessage from 'format-message';
-import { EditorDidMount } from '@bfcomposer/react-monaco-editor';
-import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
-import { Diagnostic, findErrors, findWarnings, combineSimpleMessage } from '@bfc/indexers';
-
-import { BaseEditor, BaseEditorProps } from './BaseEditor';
-import { processSize } from './utils/common';
-
-export interface RichEditorProps extends BaseEditorProps {
-  hidePlaceholder?: boolean; // default false
-  placeholder?: string; // empty placeholder
-  errorMsg?: string; // error text show below editor
-  warningMsg?: string; // warning text show below editor
-  diagnostics?: Diagnostic[]; // indexer generic diagnostic
-  helpURL?: string; //  help link show below editor
-  height?: number | string;
-}
-
-export function RichEditor(props: RichEditorProps) {
-  const {
-    errorMsg,
-    warningMsg,
-    diagnostics = [],
-    helpURL,
-    placeholder,
-    hidePlaceholder = false,
-    height,
-    editorDidMount,
-    ...rest
-  } = props;
-
-  const [editor, setEditor] = useState<monacoEditor.editor.IStandaloneCodeEditor | null>(null);
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-
-  const errorMsgFromDiagnostics = useMemo(() => {
-    const errors = findErrors(diagnostics);
-    return errors.length ? combineSimpleMessage(errors) : '';
-  }, [diagnostics]);
-
-  const warningMsgFromDiagnostics = useMemo(() => {
-    const warnings = findWarnings(diagnostics);
-    return warnings.length ? combineSimpleMessage(warnings) : '';
-  }, [diagnostics]);
-
-  const hasError = !!errorMsg || !!errorMsgFromDiagnostics;
-  const hasWarning = !!warningMsg || !!warningMsgFromDiagnostics;
-
-  const onEditorMount: EditorDidMount = (editor, monaco) => {
-    setEditor(editor);
-
-    if (typeof editorDidMount === 'function') {
-      editorDidMount(editor, monaco);
-    }
-  };
-
-  useEffect(() => {
-    if (editor) {
-      const onFocusListener = editor.onDidFocusEditorWidget(() => {
-        setFocused(true);
-      });
-
-      const onBlurListener = editor.onDidBlurEditorWidget(() => {
-        setFocused(false);
-      });
-
-      return () => {
-        onFocusListener.dispose();
-        onBlurListener.dispose();
-      };
-    }
-  }, [editor]);
-
-  const messageHelp = formatMessage.rich('{msg}. Refer to the syntax documentation<a>here</a>.', {
-    msg: errorMsg || errorMsgFromDiagnostics || warningMsg || warningMsgFromDiagnostics,
-    a: ({ children }) => (
-      <a key="a" href={helpURL} target="_blank" rel="noopener noreferrer">
-        {children}
-      </a>
-    ),
-  });
-
-  const getHeight = () => {
-    if (height === null || height === undefined) {
-      return '100%';
-    }
-
-    return processSize(height);
-  };
-
-  let borderColor = NeutralColors.gray120;
-
-  if (hovered) {
-    borderColor = NeutralColors.gray160;
-  }
-
-  if (focused) {
-    borderColor = SharedColors.cyanBlue10;
-  }
-
-  if (hasWarning) {
-    borderColor = SharedColors.yellow10;
-  }
-
-  if (hasError) {
-    borderColor = SharedColors.red20;
-  }
-
-  return (
-    <Fragment>
-      <div
-        style={{
-          height: `calc(${getHeight()} - 40px)`,
-          borderWidth: focused ? '2px' : '1px',
-          padding: focused ? 0 : '1px',
-          borderStyle: 'solid',
-          borderColor,
-          transition: 'border-color 0.1s linear',
-          boxSizing: 'border-box',
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      >
-        <BaseEditor {...rest} editorDidMount={onEditorMount} placeholder={hidePlaceholder ? undefined : placeholder} />
-      </div>
-      {(hasError || hasWarning) && (
-        <MessageBar
-          messageBarType={hasError ? MessageBarType.error : hasWarning ? MessageBarType.warning : MessageBarType.info}
-          isMultiline={false}
-          dismissButtonAriaLabel={formatMessage('Close')}
-          truncated
-          overflowButtonAriaLabel={formatMessage('See more')}
-        >
-          {messageHelp}
-        </MessageBar>
-      )}
-    </Fragment>
-  );
-}
diff --git a/Composer/packages/lib/code-editor/src/index.ts b/Composer/packages/lib/code-editor/src/index.ts
index b5a5ed4a21..71dfe2decd 100644
--- a/Composer/packages/lib/code-editor/src/index.ts
+++ b/Composer/packages/lib/code-editor/src/index.ts
@@ -1,8 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { monaco } from '@monaco-editor/react';
+
+// initialize moanco api as early as possible
+monaco.init();
+
+export { EditorDidMount } from '@monaco-editor/react';
 export * from './BaseEditor';
 export * from './JsonEditor';
 export * from './LgEditor';
 export * from './LuEditor';
-export * from './RichEditor';
diff --git a/Composer/packages/lib/code-editor/src/languages/lg.ts b/Composer/packages/lib/code-editor/src/languages/lg.ts
index 126d0e509e..5693670b7a 100644
--- a/Composer/packages/lib/code-editor/src/languages/lg.ts
+++ b/Composer/packages/lib/code-editor/src/languages/lg.ts
@@ -2,9 +2,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
+import { Monaco } from '@monaco-editor/react';
 
-function createKeywordsProposals(range) {
+function createKeywordsProposals(monaco: Monaco, range) {
   // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
   // here you could do a server side lookup
   return [
@@ -35,7 +35,7 @@ function createKeywordsProposals(range) {
   ];
 }
 
-export function registerLGLanguage(monaco: typeof monacoEditor) {
+export function registerLGLanguage(monaco: Monaco) {
   monaco.languages.setMonarchTokensProvider('botbuilderlg', {
     ignoreCase: true,
     brackets: [
@@ -165,7 +165,7 @@ export function registerLGLanguage(monaco: typeof monacoEditor) {
         endColumn: word.endColumn,
       };
       return {
-        suggestions: createKeywordsProposals(range),
+        suggestions: createKeywordsProposals(monaco, range),
       };
     },
   });
diff --git a/Composer/packages/lib/code-editor/src/languages/lu.ts b/Composer/packages/lib/code-editor/src/languages/lu.ts
index 69c845192b..7738d8157e 100644
--- a/Composer/packages/lib/code-editor/src/languages/lu.ts
+++ b/Composer/packages/lib/code-editor/src/languages/lu.ts
@@ -1,9 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
+import { Monaco } from '@monaco-editor/react';
 
-export function registerLULanguage(monaco: typeof monacoEditor) {
+export function registerLULanguage(monaco: Monaco) {
   monaco.languages.setMonarchTokensProvider('lu', {
     tokenizer: {
       root: [
diff --git a/Composer/packages/lib/indexers/jest.config.js b/Composer/packages/lib/indexers/jest.config.js
index 01191b6597..3253b1f0ef 100644
--- a/Composer/packages/lib/indexers/jest.config.js
+++ b/Composer/packages/lib/indexers/jest.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  displayName: 'indexers',
   preset: 'ts-jest/presets/js-with-babel',
   testPathIgnorePatterns: ['/node_modules/'],
   watchPathIgnorePatterns: ['<rootDir>/__tests__/mocks'],
diff --git a/Composer/packages/lib/indexers/src/dialogIndexer.ts b/Composer/packages/lib/indexers/src/dialogIndexer.ts
index ad09f89503..90df04290d 100644
--- a/Composer/packages/lib/indexers/src/dialogIndexer.ts
+++ b/Composer/packages/lib/indexers/src/dialogIndexer.ts
@@ -3,14 +3,21 @@
 
 import has from 'lodash/has';
 import uniq from 'lodash/uniq';
-import { extractLgTemplateRefs, SDKTypes } from '@bfc/shared';
+import {
+  extractLgTemplateRefs,
+  SDKTypes,
+  ITrigger,
+  DialogInfo,
+  FileInfo,
+  LgTemplateJsonPath,
+  Diagnostic,
+  ReferredLuIntents,
+} from '@bfc/shared';
 
 import { createPath } from './dialogUtils/dialogChecker';
 import { checkerFuncs } from './dialogUtils/dialogChecker';
-import { ITrigger, DialogInfo, FileInfo, LgTemplateJsonPath, ReferredLuIntents } from './type';
 import { JsonWalk, VisitorFunc } from './utils/jsonWalk';
 import { getBaseName } from './utils/help';
-import { Diagnostic } from './diagnostic';
 import ExtractMemoryPaths from './dialogUtils/extractMemoryPaths';
 import ExtractIntentTriggers from './dialogUtils/extractIntentTriggers';
 // find out all lg templates given dialog
diff --git a/Composer/packages/lib/indexers/src/dialogUtils/dialogChecker.ts b/Composer/packages/lib/indexers/src/dialogUtils/dialogChecker.ts
index 518fabb749..72fbfc7997 100644
--- a/Composer/packages/lib/indexers/src/dialogUtils/dialogChecker.ts
+++ b/Composer/packages/lib/indexers/src/dialogUtils/dialogChecker.ts
@@ -2,15 +2,14 @@
 // Licensed under the MIT License.
 
 import get from 'lodash/get';
-import { FieldNames } from '@bfc/shared';
+import { FieldNames, Diagnostic } from '@bfc/shared';
 import values from 'lodash/values';
 
-import { Diagnostic } from '../diagnostic';
-
 import { ExpressionType } from './validation';
-import { CheckerFunc } from './types';
 import { validate } from './validation';
 
+type CheckerFunc = (path: string, value: any, type: string, schema: any) => Diagnostic[] | null; // error msg
+
 export const createPath = (path: string, type: string): string => {
   let list = path.split('.');
   const matches = list.filter(x => {
diff --git a/Composer/packages/lib/indexers/src/dialogUtils/extractIntentTriggers.ts b/Composer/packages/lib/indexers/src/dialogUtils/extractIntentTriggers.ts
index ff5e4bf01d..d9d52bd499 100644
--- a/Composer/packages/lib/indexers/src/dialogUtils/extractIntentTriggers.ts
+++ b/Composer/packages/lib/indexers/src/dialogUtils/extractIntentTriggers.ts
@@ -1,11 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { SDKTypes } from '@bfc/shared';
+import { SDKTypes, IIntentTrigger } from '@bfc/shared';
 
 import { VisitorFunc, JsonWalk } from '../utils/jsonWalk';
 
-import { IIntentTrigger } from './types';
-
 // find out all properties from given dialog
 function ExtractIntentTriggers(value: any): IIntentTrigger[] {
   const triggers: IIntentTrigger[] = [];
diff --git a/Composer/packages/lib/indexers/src/dialogUtils/index.ts b/Composer/packages/lib/indexers/src/dialogUtils/index.ts
index 22a1c7528f..a12588127e 100644
--- a/Composer/packages/lib/indexers/src/dialogUtils/index.ts
+++ b/Composer/packages/lib/indexers/src/dialogUtils/index.ts
@@ -2,4 +2,3 @@
 // Licensed under the MIT License.
 
 export * from './dialogChecker';
-export * from './types';
diff --git a/Composer/packages/lib/indexers/src/dialogUtils/validation.ts b/Composer/packages/lib/indexers/src/dialogUtils/validation.ts
index ffe6f2a873..0b973ef4dc 100644
--- a/Composer/packages/lib/indexers/src/dialogUtils/validation.ts
+++ b/Composer/packages/lib/indexers/src/dialogUtils/validation.ts
@@ -2,8 +2,7 @@
 // Licensed under the MIT License.
 import { ExpressionEngine, ReturnType } from 'adaptive-expressions';
 import formatMessage from 'format-message';
-
-import { Diagnostic } from '../diagnostic';
+import { Diagnostic } from '@bfc/shared';
 
 export const ExpressionType = {
   number: 'number',
diff --git a/Composer/packages/lib/indexers/src/index.ts b/Composer/packages/lib/indexers/src/index.ts
index 73ee8f3d0a..fe0abfe3a1 100644
--- a/Composer/packages/lib/indexers/src/index.ts
+++ b/Composer/packages/lib/indexers/src/index.ts
@@ -4,7 +4,5 @@
 export * from './dialogIndexer';
 export * from './lgIndexer';
 export * from './luIndexer';
-export * from './type';
-export * from './diagnostic';
 export * from './dialogUtils';
 export * from './utils';
diff --git a/Composer/packages/lib/indexers/src/lgIndexer.ts b/Composer/packages/lib/indexers/src/lgIndexer.ts
index 58f53f8c65..426ac6ee3c 100644
--- a/Composer/packages/lib/indexers/src/lgIndexer.ts
+++ b/Composer/packages/lib/indexers/src/lgIndexer.ts
@@ -3,10 +3,9 @@
 
 import { LGParser, Diagnostic as LGDiagnostic, ImportResolverDelegate } from 'botbuilder-lg';
 import get from 'lodash/get';
+import { LgTemplate, LgFile, FileInfo, Diagnostic, Position, Range } from '@bfc/shared';
 
 import { getBaseName } from './utils/help';
-import { LgTemplate, LgFile, FileInfo } from './type';
-import { Diagnostic, Position, Range } from './diagnostic';
 
 const { defaultFileResolver } = LGParser;
 
diff --git a/Composer/packages/lib/indexers/src/luIndexer.ts b/Composer/packages/lib/indexers/src/luIndexer.ts
index 187a5a2d74..ccfe88e69c 100644
--- a/Composer/packages/lib/indexers/src/luIndexer.ts
+++ b/Composer/packages/lib/indexers/src/luIndexer.ts
@@ -3,11 +3,19 @@
 
 import { sectionHandler } from '@microsoft/bf-lu/lib/parser/composerindex';
 import get from 'lodash/get';
-import { LuIntentSection } from '@bfc/shared';
+import {
+  FileInfo,
+  LuFile,
+  LuParsed,
+  LuSectionTypes,
+  LuIntentSection,
+  Diagnostic,
+  Position,
+  Range,
+  DiagnosticSeverity,
+} from '@bfc/shared';
 
-import { FileInfo, LuFile, LuParsed, LuSectionTypes } from './type';
 import { getBaseName } from './utils/help';
-import { Diagnostic, Position, Range, DiagnosticSeverity } from './diagnostic';
 import { FileExtensions } from './utils/fileExtensions';
 
 const { luParser } = sectionHandler;
diff --git a/Composer/packages/lib/indexers/src/utils/diagnosticUtil.ts b/Composer/packages/lib/indexers/src/utils/diagnosticUtil.ts
index b430ff972c..16840c8ecd 100644
--- a/Composer/packages/lib/indexers/src/utils/diagnosticUtil.ts
+++ b/Composer/packages/lib/indexers/src/utils/diagnosticUtil.ts
@@ -1,10 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { LuIntentSection } from '@bfc/shared';
-
-import { Diagnostic, DiagnosticSeverity, Range, Position } from '../diagnostic';
-import { CodeRange } from '../type';
+import { LuIntentSection, Diagnostic, DiagnosticSeverity, Range, Position, CodeRange } from '@bfc/shared';
 
 export function createSingleMessage(d: Diagnostic): string {
   let msg = `${d.message}\n`;
diff --git a/Composer/packages/lib/indexers/src/utils/lgUtil.ts b/Composer/packages/lib/indexers/src/utils/lgUtil.ts
index 5845a9c61d..1d60b8d74f 100644
--- a/Composer/packages/lib/indexers/src/utils/lgUtil.ts
+++ b/Composer/packages/lib/indexers/src/utils/lgUtil.ts
@@ -8,8 +8,7 @@
  */
 
 import { LGParser } from 'botbuilder-lg';
-
-import { LgTemplate } from '../type';
+import { LgTemplate } from '@bfc/shared';
 
 export interface Template {
   name: string;
diff --git a/Composer/packages/lib/indexers/src/utils/luUtil.ts b/Composer/packages/lib/indexers/src/utils/luUtil.ts
index e0075472b8..addfa7e7ed 100644
--- a/Composer/packages/lib/indexers/src/utils/luUtil.ts
+++ b/Composer/packages/lib/indexers/src/utils/luUtil.ts
@@ -9,13 +9,12 @@
 
 import { sectionHandler } from '@microsoft/bf-lu/lib/parser/composerindex';
 import isEmpty from 'lodash/isEmpty';
-import { LuIntentSection } from '@bfc/shared';
+import { LuIntentSection, LuSectionTypes, Diagnostic } from '@bfc/shared';
 
-import { LuSectionTypes } from '../type';
 import { luIndexer } from '../luIndexer';
-import { Diagnostic } from '../diagnostic';
 
 import { buildNewlineText, splitNewlineText } from './help';
+
 const { parse } = luIndexer;
 
 const { luParser, sectionOperator } = sectionHandler;
diff --git a/Composer/packages/lib/shared/jest.config.js b/Composer/packages/lib/shared/jest.config.js
index c1f7a38283..d5e0809871 100644
--- a/Composer/packages/lib/shared/jest.config.js
+++ b/Composer/packages/lib/shared/jest.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  displayName: 'shared',
   preset: 'ts-jest/presets/js-with-babel',
   testPathIgnorePatterns: ['/node_modules/', '/jestMocks/'],
   watchPathIgnorePatterns: ['<rootDir>/__tests__/mocks'],
diff --git a/Composer/packages/lib/shared/package.json b/Composer/packages/lib/shared/package.json
index 73e55bf6e9..7c844c4512 100644
--- a/Composer/packages/lib/shared/package.json
+++ b/Composer/packages/lib/shared/package.json
@@ -22,8 +22,8 @@
   },
   "peerDependencies": {
     "format-message": "^6.2.1",
-    "react": "16.9.0",
-    "react-dom": "16.9.0"
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -33,15 +33,15 @@
     "@babel/preset-react": "^7.0.0",
     "@types/jest": "^24.0.11",
     "@types/nanoid": "^2.1.0",
-    "@types/react": "16.9.0",
-    "@types/react-dom": "16.9.0",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
     "autoprefixer": "^9.5.1",
     "copyfiles": "^2.1.0",
     "jest": "24.0.0",
     "jest-dom": "^3.1.3",
-    "office-ui-fabric-react": "7.62.0",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
+    "office-ui-fabric-react": "^7.88.1",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
     "react-testing-library": "^6.0.2",
     "rimraf": "^2.6.3",
     "ts-jest": "^24.1.0"
diff --git a/Composer/packages/lib/shared/src/generateUniqueId.ts b/Composer/packages/lib/shared/src/generateUniqueId.ts
new file mode 100644
index 0000000000..69142d7b8e
--- /dev/null
+++ b/Composer/packages/lib/shared/src/generateUniqueId.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import nanoid from 'nanoid';
+
+export function generateUniqueId(size = 6) {
+  return nanoid(size);
+}
diff --git a/Composer/packages/lib/shared/src/index.ts b/Composer/packages/lib/shared/src/index.ts
index fbf24c6f41..3d1dd3a167 100644
--- a/Composer/packages/lib/shared/src/index.ts
+++ b/Composer/packages/lib/shared/src/index.ts
@@ -5,14 +5,16 @@ import formatMessage from 'format-message';
 
 formatMessage.setup({ missingTranslation: 'ignore' });
 
-export * from './labelMap';
-export * from './viewUtils';
-export * from './dialogFactory';
-export * from './promptTabs';
 export * from './appschema';
-export * from './types';
 export * from './constant';
+export * from './copyUtils';
+export * from './dialogFactory';
+export * from './generateUniqueId';
+export * from './labelMap';
 export * from './lgUtils';
+export * from './promptTabs';
+export * from './types';
+export * from './viewUtils';
 export * from './walkerUtils';
 export * from './copyUtils';
 export * from './resolverFactory';
diff --git a/Composer/packages/lib/indexers/src/diagnostic.ts b/Composer/packages/lib/shared/src/types/diagnostic.ts
similarity index 100%
rename from Composer/packages/lib/indexers/src/diagnostic.ts
rename to Composer/packages/lib/shared/src/types/diagnostic.ts
diff --git a/Composer/packages/lib/indexers/src/dialogUtils/types.ts b/Composer/packages/lib/shared/src/types/dialogUtils.ts
similarity index 74%
rename from Composer/packages/lib/indexers/src/dialogUtils/types.ts
rename to Composer/packages/lib/shared/src/types/dialogUtils.ts
index 974ccef47f..2ff5cac284 100644
--- a/Composer/packages/lib/indexers/src/dialogUtils/types.ts
+++ b/Composer/packages/lib/shared/src/types/dialogUtils.ts
@@ -1,8 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Diagnostic } from '../diagnostic';
-
 export interface ISearchTarget {
   type: string;
   value: string;
@@ -27,5 +25,3 @@ export interface IIntentTrigger {
   intent: string;
   dialogs: string[];
 }
-
-export type CheckerFunc = (path: string, value: any, type: string, schema: any) => Diagnostic[] | null; // error msg
diff --git a/Composer/packages/lib/shared/src/types/index.ts b/Composer/packages/lib/shared/src/types/index.ts
index edb17bbaaf..be1b5f8fde 100644
--- a/Composer/packages/lib/shared/src/types/index.ts
+++ b/Composer/packages/lib/shared/src/types/index.ts
@@ -1,6 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+export * from './diagnostic';
+export * from './dialogUtils';
+export * from './indexers';
 export * from './schema';
 export * from './sdk';
 export * from './server';
diff --git a/Composer/packages/lib/indexers/src/type.ts b/Composer/packages/lib/shared/src/types/indexers.ts
similarity index 91%
rename from Composer/packages/lib/indexers/src/type.ts
rename to Composer/packages/lib/shared/src/types/indexers.ts
index 9068f16ddb..6438de08f0 100644
--- a/Composer/packages/lib/indexers/src/type.ts
+++ b/Composer/packages/lib/shared/src/types/indexers.ts
@@ -1,10 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { LuIntentSection } from '@bfc/shared';
-
 import { Diagnostic } from './diagnostic';
-import { IIntentTrigger } from './dialogUtils/types';
+import { IIntentTrigger } from './dialogUtils';
 
 export interface FileInfo {
   name: string;
@@ -58,6 +56,14 @@ export interface Utterance {
   text: string;
 }
 
+export interface LuIntentSection {
+  Name: string;
+  Body: string;
+  Entities?: LuEntity[];
+  Children?: LuIntentSection[];
+  range?: CodeRange;
+}
+
 export interface LuParsed {
   intents: LuIntentSection[];
   diagnostics: Diagnostic[];
diff --git a/Composer/packages/lib/shared/src/types/schema.ts b/Composer/packages/lib/shared/src/types/schema.ts
index b3d2cd54c2..940697515e 100644
--- a/Composer/packages/lib/shared/src/types/schema.ts
+++ b/Composer/packages/lib/shared/src/types/schema.ts
@@ -50,7 +50,6 @@ export enum SDKTypes {
   HttpRequest = 'Microsoft.HttpRequest',
   IfCondition = 'Microsoft.IfCondition',
   IpEntityRecognizer = 'Microsoft.IpEntityRecognizer',
-  LanguagePolicy = 'Microsoft.LanguagePolicy',
   LogAction = 'Microsoft.LogAction',
   LuisRecognizer = 'Microsoft.LuisRecognizer',
   MentionEntityRecognizer = 'Microsoft.MentionEntityRecognizer',
@@ -102,6 +101,31 @@ export enum SDKTypes {
   TraceActivity = 'Microsoft.TraceActivity',
   TrueSelector = 'Microsoft.TrueSelector',
   UrlEntityRecognizer = 'Microsoft.UrlEntityRecognizer',
+
+  /** Kinds */
+
+  IActivityTemplate = 'Microsoft.IActivityTemplate',
+  Recognizer = 'Microsoft.Recognizer',
+  ILanguageGenerator = 'Microsoft.ILanguageGenerator',
+  ITriggerSelector = 'Microsoft.ITriggerSelector',
+  IDialog = 'Microsoft.IDialog',
+  LanguagePolicy = 'Microsoft.LanguagePolicy',
+}
+
+export enum SDKKinds {
+  IActivityTemplate = 'Microsoft.IActivityTemplate',
+  Recognizer = 'Microsoft.Recognizer',
+  ILanguageGenerator = 'Microsoft.ILanguageGenerator',
+  ITriggerSelector = 'Microsoft.ITriggerSelector',
+  IDialog = 'Microsoft.IDialog',
+  LanguagePolicy = 'Microsoft.LanguagePolicy',
+}
+
+export enum SDKRoles {
+  expression = 'expression',
+  // TODO
+  // union = 'union',
+  // union_*_ = 'union(*)',
 }
 
 export interface OBISchema extends JSONSchema6 {
diff --git a/Composer/packages/lib/shared/src/types/shell.ts b/Composer/packages/lib/shared/src/types/shell.ts
index 07d71b01b2..2183a9682b 100644
--- a/Composer/packages/lib/shared/src/types/shell.ts
+++ b/Composer/packages/lib/shared/src/types/shell.ts
@@ -1,28 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { LGTemplate as LgTemplate } from 'botbuilder-lg';
-
-export interface LuIntentSection {
-  Name: string;
-  Body: string;
-  Entities?: LuEntity[];
-  Children?: LuIntentSection[];
-  range?: CodeRange;
-}
-
-export interface CodeRange {
-  startLineNumber: number;
-  endLineNumber: number;
-}
-
-export interface LuEntity {
-  Name: string;
-}
+import { DialogInfo, LuFile, LgFile, LuIntentSection, LgTemplate } from './indexers';
 
 export interface EditorSchema {
   content?: {
-    fieldTemplateOverrides?: any;
+    fieldTemplateOverrides: any;
     SDKOverrides?: any;
   };
 }
@@ -36,14 +20,15 @@ export interface BotSchemas {
 export interface ShellData {
   locale: string;
   botName: string;
+  currentDialog: DialogInfo;
   projectId: string;
-  currentDialog: any;
   data: {
-    $type?: string;
+    $type: string;
     [key: string]: any;
   };
+  designerId: string;
   dialogId: string;
-  dialogs: any[];
+  dialogs: DialogInfo[];
   focusedEvent: string;
   focusedActions: string[];
   focusedSteps: string[];
@@ -51,8 +36,9 @@ export interface ShellData {
   focusPath: string;
   clipboardActions: any[];
   hosted: boolean;
-  lgFiles: any[];
-  luFiles: any[];
+  lgFiles: LgFile[];
+  luFiles: LuFile[];
+  // TODO: remove
   schemas: BotSchemas;
 }
 
diff --git a/Composer/packages/server/__tests__/models/bot/botProject.test.ts b/Composer/packages/server/__tests__/models/bot/botProject.test.ts
index 3d4f9263c9..96ae7565d4 100644
--- a/Composer/packages/server/__tests__/models/bot/botProject.test.ts
+++ b/Composer/packages/server/__tests__/models/bot/botProject.test.ts
@@ -4,8 +4,7 @@
 import fs from 'fs';
 
 import rimraf from 'rimraf';
-import { seedNewDialog } from '@bfc/shared';
-import { DialogInfo } from '@bfc/indexers';
+import { seedNewDialog, DialogInfo } from '@bfc/shared';
 
 import { Path } from '../../../src/utility/path';
 import { BotProject } from '../../../src/models/bot/botProject';
diff --git a/Composer/packages/server/assets/projects/TodoSample/dialogs/addtodo/addtodo.dialog b/Composer/packages/server/assets/projects/TodoSample/dialogs/addtodo/addtodo.dialog
index eefa69a225..f27dd209f5 100644
--- a/Composer/packages/server/assets/projects/TodoSample/dialogs/addtodo/addtodo.dialog
+++ b/Composer/packages/server/assets/projects/TodoSample/dialogs/addtodo/addtodo.dialog
@@ -1,7 +1,8 @@
 {
   "$type": "Microsoft.AdaptiveDialog",
   "$designer": {
-    "id": "808722"
+    "id": "808722",
+    "name": "addtodo"
   },
   "autoEndDialog": true,
   "defaultResultProperty": "dialog.result",
@@ -45,4 +46,4 @@
   ],
   "generator": "addtodo.lg",
   "$schema": "https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema"
-}
\ No newline at end of file
+}
diff --git a/Composer/packages/server/assets/projects/TodoSample/dialogs/cleartodos/cleartodos.dialog b/Composer/packages/server/assets/projects/TodoSample/dialogs/cleartodos/cleartodos.dialog
index 2eabd0fde2..7e443dbd2e 100644
--- a/Composer/packages/server/assets/projects/TodoSample/dialogs/cleartodos/cleartodos.dialog
+++ b/Composer/packages/server/assets/projects/TodoSample/dialogs/cleartodos/cleartodos.dialog
@@ -1,7 +1,8 @@
 {
   "$type": "Microsoft.AdaptiveDialog",
   "$designer": {
-    "id": "316336"
+    "id": "316336",
+    "name": "cleartodos"
   },
   "autoEndDialog": true,
   "defaultResultProperty": "dialog.result",
@@ -51,4 +52,4 @@
   ],
   "generator": "cleartodos.lg",
   "$schema": "https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema"
-}
\ No newline at end of file
+}
diff --git a/Composer/packages/server/assets/projects/TodoSample/dialogs/deletetodo/deletetodo.dialog b/Composer/packages/server/assets/projects/TodoSample/dialogs/deletetodo/deletetodo.dialog
index 8826676c85..bca12c33b0 100644
--- a/Composer/packages/server/assets/projects/TodoSample/dialogs/deletetodo/deletetodo.dialog
+++ b/Composer/packages/server/assets/projects/TodoSample/dialogs/deletetodo/deletetodo.dialog
@@ -1,7 +1,8 @@
 {
   "$type": "Microsoft.AdaptiveDialog",
   "$designer": {
-    "id": "114909"
+    "id": "114909",
+    "name": "deletetodo"
   },
   "autoEndDialog": true,
   "defaultResultProperty": "dialog.result",
@@ -64,4 +65,4 @@
   ],
   "generator": "deletetodo.lg",
   "$schema": "https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema"
-}
\ No newline at end of file
+}
diff --git a/Composer/packages/server/assets/projects/TodoSample/dialogs/showtodos/showtodos.dialog b/Composer/packages/server/assets/projects/TodoSample/dialogs/showtodos/showtodos.dialog
index 84097b38d4..9384caf1b2 100644
--- a/Composer/packages/server/assets/projects/TodoSample/dialogs/showtodos/showtodos.dialog
+++ b/Composer/packages/server/assets/projects/TodoSample/dialogs/showtodos/showtodos.dialog
@@ -1,7 +1,8 @@
 {
   "$type": "Microsoft.AdaptiveDialog",
   "$designer": {
-    "id": "709692"
+    "id": "709692",
+    "name": "showtodos"
   },
   "autoEndDialog": true,
   "defaultResultProperty": "dialog.result",
@@ -44,4 +45,4 @@
   ],
   "generator": "showtodos.lg",
   "$schema": "https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema"
-}
\ No newline at end of file
+}
diff --git a/Composer/packages/server/assets/projects/TodoSample/todosample.dialog b/Composer/packages/server/assets/projects/TodoSample/todosample.dialog
index 6ab4919d20..e6ff009cbd 100644
--- a/Composer/packages/server/assets/projects/TodoSample/todosample.dialog
+++ b/Composer/packages/server/assets/projects/TodoSample/todosample.dialog
@@ -7,7 +7,7 @@
   "autoEndDialog": false,
   "defaultResultProperty": "dialog.result",
   "recognizer": {
-    "$kind": "Microsoft.RegexRecognizer",
+    "$type": "Microsoft.RegexRecognizer",
     "id": "regex",
     "intents": [
       {
@@ -181,4 +181,4 @@
     }
   ],
   "$schema": "https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema"
-}
\ No newline at end of file
+}
diff --git a/Composer/packages/server/jest.config.js b/Composer/packages/server/jest.config.js
index 7726f4fe84..9e77b7648d 100644
--- a/Composer/packages/server/jest.config.js
+++ b/Composer/packages/server/jest.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  displayName: 'server',
   preset: 'ts-jest/presets/js-with-babel',
   testPathIgnorePatterns: ['/node_modules/'],
   watchPathIgnorePatterns: ['<rootDir>/__tests__/mocks'],
diff --git a/Composer/packages/server/schemas/sdk.schema b/Composer/packages/server/schemas/sdk.schema
index f119e60e55..ff6607eb42 100644
--- a/Composer/packages/server/schemas/sdk.schema
+++ b/Composer/packages/server/schemas/sdk.schema
@@ -1808,16 +1808,17 @@
                     "$role": "expression",
                     "oneOf": [
                         {
+                            "title": "Array of strings",
                             "type": "array",
                             "items": [
                                 {
                                     "type": "string",
                                     "title": "string"
                                 }
-                            ],
-                            "title": "array"
+                            ]
                         },
                         {
+                            "title": "Array of choice objects",
                             "type": "array",
                             "items": [
                                 {
@@ -1845,8 +1846,7 @@
                                         }
                                     }
                                 }
-                            ],
-                            "title": "array"
+                            ]
                         },
                         {
                             "type": "string",
@@ -2280,6 +2280,7 @@
                     "$role": "expression",
                     "oneOf": [
                         {
+                            "title": "Array of confirm choices",
                             "type": "array",
                             "items": [
                                 {
@@ -2307,8 +2308,7 @@
                                     },
                                     "title": "object"
                                 }
-                            ],
-                            "title": "array"
+                            ]
                         },
                         {
                             "type": "string",
diff --git a/Composer/packages/server/src/models/bot/botProject.ts b/Composer/packages/server/src/models/bot/botProject.ts
index cc57d05afd..c85d529004 100644
--- a/Composer/packages/server/src/models/bot/botProject.ts
+++ b/Composer/packages/server/src/models/bot/botProject.ts
@@ -4,19 +4,8 @@
 import fs from 'fs';
 
 import has from 'lodash/has';
-import { getNewDesigner, importResolverGenerator } from '@bfc/shared';
-import {
-  FileInfo,
-  DialogInfo,
-  LgFile,
-  LuFile,
-  dialogIndexer,
-  lgIndexer,
-  luIndexer,
-  createSingleMessage,
-  JsonWalk,
-  VisitorFunc,
-} from '@bfc/indexers';
+import { getNewDesigner, importResolverGenerator, FileInfo, DialogInfo, LgFile, LuFile } from '@bfc/shared';
+import { dialogIndexer, lgIndexer, luIndexer, createSingleMessage, JsonWalk, VisitorFunc } from '@bfc/indexers';
 
 import { Path } from '../../utility/path';
 import { copyDir } from '../../utility/storage';
@@ -626,7 +615,7 @@ export class BotProject {
         /language-understanding
             /[locale]
                  [dialog].[locale].lu
-  * 
+  *
   */
   private _reformProjectStructure = async () => {
     let isOldBotStructure = false;
diff --git a/Composer/packages/server/src/models/bot/luPublisher.ts b/Composer/packages/server/src/models/bot/luPublisher.ts
index b0aa189e78..d4a29a97eb 100644
--- a/Composer/packages/server/src/models/bot/luPublisher.ts
+++ b/Composer/packages/server/src/models/bot/luPublisher.ts
@@ -3,7 +3,7 @@
 
 import isEqual from 'lodash/isEqual';
 import keys from 'lodash/keys';
-import { LuFile, DialogInfo } from '@bfc/indexers';
+import { LuFile, DialogInfo } from '@bfc/shared';
 
 import { Path } from './../../utility/path';
 import { IFileStorage } from './../storage/interface';
diff --git a/Composer/packages/tools/language-servers/language-generation/jest.config.js b/Composer/packages/tools/language-servers/language-generation/jest.config.js
index 347f13c8a5..47e70a4027 100644
--- a/Composer/packages/tools/language-servers/language-generation/jest.config.js
+++ b/Composer/packages/tools/language-servers/language-generation/jest.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  displayName: 'lsp-lg',
   preset: 'ts-jest/presets/js-with-babel',
   testPathIgnorePatterns: ['/node_modules/', '/helpers/', '/mocks/'],
   watchPathIgnorePatterns: ['<rootDir>/__tests__/mocks'],
diff --git a/Composer/packages/tools/language-servers/language-generation/src/LGServer.ts b/Composer/packages/tools/language-servers/language-generation/src/LGServer.ts
index a2b2837431..c87eea51c0 100644
--- a/Composer/packages/tools/language-servers/language-generation/src/LGServer.ts
+++ b/Composer/packages/tools/language-servers/language-generation/src/LGServer.ts
@@ -18,7 +18,8 @@ import {
 } from 'vscode-languageserver-types';
 import { TextDocumentPositionParams } from 'vscode-languageserver-protocol';
 import get from 'lodash/get';
-import { filterTemplateDiagnostics, isValid, MemoryResolver } from '@bfc/indexers';
+import { filterTemplateDiagnostics, isValid } from '@bfc/indexers';
+import { MemoryResolver } from '@bfc/shared';
 import { ImportResolverDelegate, LGParser } from 'botbuilder-lg';
 
 import { buildInfunctionsMap } from './builtinFunctionsMap';
diff --git a/Composer/packages/tools/language-servers/language-generation/src/utils.ts b/Composer/packages/tools/language-servers/language-generation/src/utils.ts
index 05865ff96f..2dd0c17a5a 100644
--- a/Composer/packages/tools/language-servers/language-generation/src/utils.ts
+++ b/Composer/packages/tools/language-servers/language-generation/src/utils.ts
@@ -3,7 +3,8 @@
 
 import { TextDocument, Range, Position, DiagnosticSeverity, Diagnostic } from 'vscode-languageserver-types';
 import { DiagnosticSeverity as LGDiagnosticSeverity, Diagnostic as LGDiagnostic, LGParser } from 'botbuilder-lg';
-import { LgTemplate, Diagnostic as BFDiagnostic, offsetRange, LgFile, LgParsed } from '@bfc/indexers';
+import { LgTemplate, Diagnostic as BFDiagnostic, LgFile, LgParsed } from '@bfc/shared';
+import { offsetRange } from '@bfc/indexers';
 
 // state should map to tokenizer state
 export enum LGCursorState {
diff --git a/Composer/packages/tools/language-servers/language-understanding/jest.config.js b/Composer/packages/tools/language-servers/language-understanding/jest.config.js
index 20a62c0671..8a4767e72c 100644
--- a/Composer/packages/tools/language-servers/language-understanding/jest.config.js
+++ b/Composer/packages/tools/language-servers/language-understanding/jest.config.js
@@ -4,6 +4,7 @@
 const path = require('path');
 
 module.exports = {
+  displayName: 'lsp-lu',
   preset: 'ts-jest/presets/js-with-babel',
   testPathIgnorePatterns: ['/node_modules/', '/helpers/', '/mocks/'],
   watchPathIgnorePatterns: ['<rootDir>/__tests__/mocks'],
diff --git a/Composer/packages/tools/language-servers/language-understanding/package.json b/Composer/packages/tools/language-servers/language-understanding/package.json
index 3f5267ffb7..147b09b1bc 100644
--- a/Composer/packages/tools/language-servers/language-understanding/package.json
+++ b/Composer/packages/tools/language-servers/language-understanding/package.json
@@ -22,7 +22,6 @@
         "@microsoft/bf-lu": "^4.9.0-preview.115707",
         "@types/node": "^12.0.4",
         "express": "^4.15.2",
-        "monaco-editor-core": "^0.17.0",
         "monaco-languageclient": "^0.10.0",
         "normalize-url": "^2.0.1",
         "reconnecting-websocket": "^3.2.2",
diff --git a/Composer/packages/tools/language-servers/language-understanding/src/utils.ts b/Composer/packages/tools/language-servers/language-understanding/src/utils.ts
index 34b396f9f9..ac2833b12a 100644
--- a/Composer/packages/tools/language-servers/language-understanding/src/utils.ts
+++ b/Composer/packages/tools/language-servers/language-understanding/src/utils.ts
@@ -2,7 +2,8 @@
 // Licensed under the MIT License.
 
 import { TextDocument, Range, Position, DiagnosticSeverity, Diagnostic } from 'vscode-languageserver-types';
-import { DiagnosticSeverity as BFDiagnosticSeverity, Diagnostic as BFDiagnostic, offsetRange } from '@bfc/indexers';
+import { offsetRange } from '@bfc/indexers';
+import { DiagnosticSeverity as BFDiagnosticSeverity, Diagnostic as BFDiagnostic } from '@bfc/shared';
 
 export interface LUOption {
   projectId: string;
diff --git a/Composer/packages/ui-plugins/example/.eslintrc.js b/Composer/packages/ui-plugins/example/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/example/.gitignore b/Composer/packages/ui-plugins/example/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/example/jest.config.js b/Composer/packages/ui-plugins/example/jest.config.js
new file mode 100644
index 0000000000..e4e295f0af
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: '<plugin-name>',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/example/package.json b/Composer/packages/ui-plugins/example/package.json
new file mode 100644
index 0000000000..6c79e72933
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "plugin-name",
+  "version": "0.0.0",
+  "private": true,
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/extension": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@bfc/extension": "*",
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/ui-plugins/example/src/index.ts b/Composer/packages/ui-plugins/example/src/index.ts
new file mode 100644
index 0000000000..26e7ffd710
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/src/index.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+
+import uiSchema from './uiSchema';
+
+const config: PluginConfig = {
+  uiSchema,
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/example/src/uiSchema.ts b/Composer/packages/ui-plugins/example/src/uiSchema.ts
new file mode 100644
index 0000000000..77f887a7bf
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/src/uiSchema.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema } from '@bfc/extension';
+
+const uiSchema: UISchema = {};
+
+export default uiSchema;
diff --git a/Composer/packages/ui-plugins/example/tsconfig.build.json b/Composer/packages/ui-plugins/example/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/example/tsconfig.json b/Composer/packages/ui-plugins/example/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/example/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/expressions/.eslintrc.js b/Composer/packages/ui-plugins/expressions/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/expressions/.gitignore b/Composer/packages/ui-plugins/expressions/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/expressions/jest.config.js b/Composer/packages/ui-plugins/expressions/jest.config.js
new file mode 100644
index 0000000000..681bcd9d4f
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin-expressions',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/expressions/package.json b/Composer/packages/ui-plugins/expressions/package.json
new file mode 100644
index 0000000000..8cbee630c2
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@bfc/ui-plugin-expressions",
+  "version": "0.0.0",
+  "private": true,
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/code-editor": "*",
+    "@bfc/extension": "*",
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/ui-plugins/expressions/src/ExpressionEditor.tsx b/Composer/packages/ui-plugins/expressions/src/ExpressionEditor.tsx
new file mode 100644
index 0000000000..e30eae7e92
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/src/ExpressionEditor.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+
+const ExpressionEditor: React.FC<FieldProps> = props => {
+  const { id, value = '', onChange, disabled, placeholder, readonly, error } = props;
+
+  const handleChange = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+    onChange(newValue);
+  };
+
+  return (
+    <TextField
+      disabled={disabled}
+      errorMessage={error}
+      id={id}
+      placeholder={placeholder}
+      readOnly={readonly}
+      styles={{
+        root: { width: '100%' },
+        errorMessage: { display: 'none' },
+      }}
+      value={value}
+      onChange={handleChange}
+      onRenderPrefix={() => {
+        return <Icon iconName="Variable" />;
+      }}
+    />
+  );
+};
+
+export { ExpressionEditor };
diff --git a/Composer/packages/ui-plugins/expressions/src/ExpressionField.tsx b/Composer/packages/ui-plugins/expressions/src/ExpressionField.tsx
new file mode 100644
index 0000000000..17b5a6a1ef
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/src/ExpressionField.tsx
@@ -0,0 +1,233 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React, { useMemo, useState } from 'react';
+import { FieldProps, JSONSchema7 } from '@bfc/extension';
+import { FieldLabel, resolveRef, resolveFieldWidget, usePluginConfig } from '@bfc/adaptive-form';
+import { Dropdown, IDropdownOption, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
+import { JsonEditor } from '@bfc/code-editor';
+import formatMessage from 'format-message';
+
+import { ExpressionEditor } from './ExpressionEditor';
+
+const styles = {
+  container: css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    label: ExpressionField;
+  `,
+  field: css`
+    min-height: 66px;
+  `,
+};
+
+const getOptions = (schema: JSONSchema7, definitions): IDropdownOption[] => {
+  const { type, oneOf, enum: enumOptions } = schema;
+
+  const expressionOption = {
+    key: 'expression',
+    text: 'expression',
+    data: { schema: { ...schema, type: 'string' } },
+  };
+
+  if (type && Array.isArray(type)) {
+    const options: IDropdownOption[] = type.map(t => ({
+      key: t,
+      text: t,
+      data: { schema: { ...schema, type: t } },
+    }));
+
+    type.length > 2 && options.push(expressionOption);
+
+    options.sort(({ text: t1 }, { text: t2 }) => (t1 > t2 ? 1 : -1));
+
+    return options;
+  }
+
+  if (oneOf && Array.isArray(oneOf)) {
+    return oneOf
+      .map(s => {
+        if (typeof s === 'object') {
+          const resolved = resolveRef(s, definitions);
+
+          return {
+            key: resolved.title?.toLowerCase() || resolved.type,
+            text: resolved.title?.toLowerCase() || resolved.type,
+            data: { schema: resolved },
+          } as IDropdownOption;
+        }
+      })
+      .filter(Boolean) as IDropdownOption[];
+  }
+
+  // this could either be an expression or an enum value
+  if (Array.isArray(enumOptions)) {
+    return [
+      {
+        key: 'dropdown',
+        text: 'dropdown',
+        data: { schema: { ...schema, $role: undefined } },
+      },
+      expressionOption,
+    ];
+  }
+
+  return [expressionOption];
+};
+
+const getSelectedOption = (value: any | undefined, options: IDropdownOption[]): IDropdownOption | undefined => {
+  const expressionOption = options.find(({ key }) => key === 'expression');
+  const valueType = Array.isArray(value) ? 'array' : typeof value;
+
+  // if its an array, we know it's not an expression
+  if (valueType === 'array') {
+    const item = value[0];
+    const firstArrayOption = options.find(o => o.data.schema.type === 'array');
+
+    // if there is nothing in the array, default to the first array type
+    if (!item) {
+      return firstArrayOption;
+    }
+
+    // else, find the option with an item schema that matches item type
+    return (
+      options.find(o => {
+        const {
+          data: { schema },
+        } = o;
+
+        const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
+        return itemSchema && typeof item === itemSchema.type;
+      }) || firstArrayOption
+    );
+  }
+
+  // if the value if undefined, either default to expression or the first option
+  if (!value) {
+    return options.length > 2 ? expressionOption : options[0];
+    // else if the value is a string and starts with '=' it is an expression
+  } else if (
+    expressionOption &&
+    valueType === 'string' &&
+    (value.startsWith('=') || !options.find(({ key }) => key === 'string'))
+  ) {
+    return expressionOption;
+  }
+
+  // lastly, attempt to find the option based on value type
+  return options.find(({ data, key }) => data.schema.type === valueType && key !== 'expression') || options[0];
+};
+
+const ExpressionField: React.FC<FieldProps> = props => {
+  const { id, value = '', label, description, schema, uiOptions, definitions } = props;
+  const { $role, ...expressionSchema } = schema;
+  const pluginConfig = usePluginConfig();
+
+  const options = useMemo(() => getOptions(expressionSchema, definitions), []);
+  const initialSelectedOption = useMemo(
+    () => getSelectedOption(value, options) || ({ key: '', data: { schema: undefined } } as IDropdownOption),
+    []
+  );
+
+  const [
+    {
+      key: selectedKey,
+      data: { schema: selectedSchema },
+    },
+    setSelectedOption,
+  ] = useState<IDropdownOption>(initialSelectedOption);
+
+  const handleTypeChange = (_e: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
+    if (option) {
+      setSelectedOption(option);
+      props.onChange(undefined);
+    }
+  };
+
+  const renderTypeTitle = (options?: IDropdownOption[]) => {
+    const option = options && options[0];
+    return option ? <React.Fragment>{option.text}</React.Fragment> : null;
+  };
+
+  const renderField = () => {
+    if (!selectedSchema || Array.isArray(selectedSchema.type) || !selectedSchema.type) {
+      return null;
+    }
+
+    if (selectedKey === 'expression') {
+      return <ExpressionEditor {...props} />;
+    }
+
+    // return a json editor for open ended obejcts
+    if (
+      (selectedSchema.type === 'object' && !selectedSchema.properties) ||
+      (selectedSchema.type === 'array' && !selectedSchema.items)
+    ) {
+      const defaultValue = selectedSchema.type === 'object' ? {} : [];
+      return (
+        <JsonEditor
+          key={selectedSchema.type}
+          id={props.id}
+          onChange={props.onChange}
+          value={value || defaultValue}
+          height={100}
+          schema={selectedSchema}
+        />
+      );
+    }
+
+    const Field = resolveFieldWidget(selectedSchema, uiOptions, pluginConfig);
+    return (
+      <Field
+        key={selectedSchema.type}
+        {...props}
+        schema={selectedSchema}
+        // allow object fields to render their labels
+        label={selectedSchema.type !== 'object' ? false : undefined}
+        css={{ label: 'ExpressionFieldValue' }}
+        transparentBorder={false}
+      />
+    );
+  };
+
+  const shouldRenderContainer = label || (options && options.length > 1);
+  const dropdownWidth = useMemo(
+    () => (options.reduce((maxLength, { text }) => Math.max(maxLength, text.length), 0) > 'expression'.length ? -1 : 0),
+    [options]
+  );
+
+  return (
+    <React.Fragment>
+      {shouldRenderContainer && (
+        <div css={styles.container}>
+          <FieldLabel id={id} label={label} description={description} helpLink={uiOptions?.helpLink} />
+          {options && options.length > 1 && (
+            <Dropdown
+              id={`${props.id}-type`}
+              dropdownWidth={dropdownWidth}
+              options={options}
+              responsiveMode={ResponsiveMode.large}
+              selectedKey={selectedKey}
+              onChange={handleTypeChange}
+              onRenderTitle={renderTypeTitle}
+              styles={{
+                caretDownWrapper: { height: '24px', lineHeight: '24px' },
+                root: { flexBasis: 'auto', padding: '5px 0', minWidth: '110px' },
+                title: { height: '24px', lineHeight: '20px' },
+              }}
+              data-testid={`expression-type-dropdown-${label}`}
+              ariaLabel={formatMessage('select property type')}
+            />
+          )}
+        </div>
+      )}
+      {renderField()}
+    </React.Fragment>
+  );
+};
+
+export { ExpressionField };
diff --git a/Composer/packages/ui-plugins/expressions/src/index.ts b/Composer/packages/ui-plugins/expressions/src/index.ts
new file mode 100644
index 0000000000..991521568b
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/src/index.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+import { SDKRoles } from '@bfc/shared';
+
+import { ExpressionField } from './ExpressionField';
+
+const config: PluginConfig = {
+  roleSchema: {
+    [SDKRoles.expression]: {
+      field: ExpressionField,
+    },
+  },
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/expressions/tsconfig.build.json b/Composer/packages/ui-plugins/expressions/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/expressions/tsconfig.json b/Composer/packages/ui-plugins/expressions/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/expressions/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/json/.eslintrc.js b/Composer/packages/ui-plugins/json/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/json/.gitignore b/Composer/packages/ui-plugins/json/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/json/jest.config.js b/Composer/packages/ui-plugins/json/jest.config.js
new file mode 100644
index 0000000000..e49925b192
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/json',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/json/package.json b/Composer/packages/ui-plugins/json/package.json
new file mode 100644
index 0000000000..b1639ba2d1
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@bfc/ui-plugin-json",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer plugin that adds json editor capibility using the Monaco editor.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@bfc/shared": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@bfc/shared": "*",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "@types/vscode": "^1.40.0",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@bfc/code-editor": "*",
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/ui-plugins/json/src/JsonField.tsx b/Composer/packages/ui-plugins/json/src/JsonField.tsx
new file mode 100644
index 0000000000..7a59996dbf
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/src/JsonField.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import { FieldLabel } from '@bfc/adaptive-form';
+import { JsonEditor } from '@bfc/code-editor';
+
+const fieldStyle = css`
+  height: 300px;
+
+  label: JsonField;
+`;
+
+const JsonField: React.FC<FieldProps> = props => {
+  const { onChange, value, id, label, description, uiOptions } = props;
+
+  return (
+    <React.Fragment>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <div css={fieldStyle}>
+        <JsonEditor value={value} onChange={onChange} />
+      </div>
+    </React.Fragment>
+  );
+};
+
+export { JsonField };
diff --git a/Composer/packages/ui-plugins/json/src/index.ts b/Composer/packages/ui-plugins/json/src/index.ts
new file mode 100644
index 0000000000..26e7ffd710
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/src/index.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+
+import uiSchema from './uiSchema';
+
+const config: PluginConfig = {
+  uiSchema,
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/json/src/uiSchema.ts b/Composer/packages/ui-plugins/json/src/uiSchema.ts
new file mode 100644
index 0000000000..8b322381ba
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/src/uiSchema.ts
@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+
+import { JsonField } from './JsonField';
+
+const uiSchema: UISchema = {
+  [SDKTypes.HttpRequest]: {
+    properties: {
+      body: {
+        field: JsonField,
+      },
+    },
+  },
+};
+
+export default uiSchema;
diff --git a/Composer/packages/ui-plugins/json/tsconfig.build.json b/Composer/packages/ui-plugins/json/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/json/tsconfig.json b/Composer/packages/ui-plugins/json/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/json/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/lg/.eslintrc.js b/Composer/packages/ui-plugins/lg/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/lg/.gitignore b/Composer/packages/ui-plugins/lg/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/lg/jest.config.js b/Composer/packages/ui-plugins/lg/jest.config.js
new file mode 100644
index 0000000000..e49925b192
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/json',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/lg/package.json b/Composer/packages/ui-plugins/lg/package.json
new file mode 100644
index 0000000000..69649a0f40
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@bfc/ui-plugin-lg",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer plugin that adds lg editor capibility using the Monaco editor.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@bfc/shared": "*",
+    "@bfc/indexers": "*",
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/LgEditorWidget.tsx b/Composer/packages/ui-plugins/lg/src/LgField.tsx
similarity index 55%
rename from Composer/packages/extensions/obiformeditor/src/Form/widgets/LgEditorWidget.tsx
rename to Composer/packages/ui-plugins/lg/src/LgField.tsx
index 2e01928ed5..19e808ccfb 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/LgEditorWidget.tsx
+++ b/Composer/packages/ui-plugins/lg/src/LgField.tsx
@@ -1,20 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
 import { LgEditor } from '@bfc/code-editor';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import { FieldLabel } from '@bfc/adaptive-form';
 import { LgMetaData, LgTemplateRef } from '@bfc/shared';
 import { filterTemplateDiagnostics } from '@bfc/indexers';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 
-import { FormContext } from '../types';
-
 const lspServerPath = '/lg-language-server';
 
-const LG_HELP =
-  'https://github.com/microsoft/BotBuilder-Samples/blob/master/experimental/language-generation/docs/lg-file-format.md';
-
 const tryGetLgMetaDataType = (lgText: string): string | null => {
   const lgRef = LgTemplateRef.parse(lgText);
   if (lgRef === null) return null;
@@ -35,27 +32,18 @@ const getInitialTemplate = (fieldName: string, formData?: string): string => {
   return lgText.startsWith('-') ? lgText : `- ${lgText}`;
 };
 
-interface LgEditorWidgetProps {
-  formContext: FormContext;
-  name: string;
-  value?: string;
-  height?: number | string;
-  onChange: (template?: string) => void;
-}
-
-export const LgEditorWidget: React.FC<LgEditorWidgetProps> = props => {
-  const { formContext, name, value, height = 250 } = props;
-  // refered lgTemplateId may not equal to dialogId. find in value at first.
-  const singleLgRefMatched = value?.match(`@\\{([A-Za-z_][-\\w]+)(\\([^\\)]*\\))?\\}`);
-  const lgName = singleLgRefMatched
-    ? singleLgRefMatched[1]
-    : new LgMetaData(name, formContext.dialogId || '').toString();
-  const lgFileId = `${formContext.currentDialog.lgFile}.${formContext.locale}`;
-  const lgFile = formContext.lgFiles && formContext.lgFiles.find(file => file.id === lgFileId);
+const LgField: React.FC<FieldProps<string>> = props => {
+  const { label, id, description, value, name, uiOptions } = props;
+  const { designerId, currentDialog, lgFiles, shellApi, projectId, locale } = useShellApi();
+
+  const singleLgRefMatched = value && value.match(`@\\{([A-Za-z_][-\\w]+)(\\([^\\)]*\\))?\\}`);
+  const lgName = singleLgRefMatched ? singleLgRefMatched[1] : new LgMetaData(name, designerId || '').toString();
+  const lgFileId = `${currentDialog.lgFile}.${locale}`;
+  const lgFile = lgFiles && lgFiles.find(file => file.id === lgFileId);
 
   const updateLgTemplate = useCallback(
     (body: string) => {
-      formContext.shellApi.updateLgTemplate(lgFileId, lgName, body).catch(() => {});
+      shellApi.updateLgTemplate(lgFileId, lgName, body).catch(() => {});
     },
     [lgName, lgFileId]
   );
@@ -74,8 +62,11 @@ export const LgEditorWidget: React.FC<LgEditorWidgetProps> = props => {
     },
   };
 
-  const diagnostics = lgFile ? filterTemplateDiagnostics(lgFile.diagnostics, template) : [];
+  const diagnostic = lgFile && filterTemplateDiagnostics(lgFile.diagnostics, template)[0];
 
+  const errorMsg = diagnostic
+    ? diagnostic.message.split('error message: ')[diagnostic.message.split('error message: ').length - 1]
+    : '';
   const [localValue, setLocalValue] = useState(template.body);
   const sync = useRef(
     debounce((shellData: any, localData: any) => {
@@ -94,38 +85,40 @@ export const LgEditorWidget: React.FC<LgEditorWidgetProps> = props => {
   }, [template.body]);
 
   const lgOption = {
-    projectId: formContext.projectId,
+    projectId,
     fileId: lgFileId,
     templateId: lgName,
   };
 
   const onChange = (body: string) => {
     setLocalValue(body);
-    if (formContext.dialogId) {
+    if (designerId) {
       if (body) {
         updateLgTemplate(body);
         props.onChange(new LgTemplateRef(lgName).toString());
       } else {
-        formContext.shellApi.removeLgTemplate(lgFileId, lgName);
+        shellApi.removeLgTemplate(lgFileId, lgName);
         props.onChange();
       }
     }
   };
 
   return (
-    <LgEditor
-      onChange={onChange}
-      value={localValue}
-      lgOption={lgOption}
-      diagnostics={diagnostics}
-      hidePlaceholder={true}
-      helpURL={LG_HELP}
-      languageServer={{
-        path: lspServerPath,
-      }}
-      height={height}
-    />
+    <React.Fragment>
+      <FieldLabel id={id} label={label} description={description} helpLink={uiOptions?.helpLink} />
+      <LgEditor
+        height={100}
+        value={localValue}
+        onChange={onChange}
+        errorMessage={errorMsg}
+        hidePlaceholder
+        languageServer={{
+          path: lspServerPath,
+        }}
+        lgOption={lgOption}
+      />
+    </React.Fragment>
   );
 };
 
-export default LgEditorWidget;
+export { LgField };
diff --git a/Composer/packages/ui-plugins/lg/src/index.ts b/Composer/packages/ui-plugins/lg/src/index.ts
new file mode 100644
index 0000000000..317f8787a5
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/src/index.ts
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+
+import { LgField } from './LgField';
+
+const config: PluginConfig = {
+  uiSchema: {
+    [SDKTypes.SendActivity]: {
+      properties: {
+        activity: {
+          label: 'Language Generation',
+          description:
+            'What your bot says to the user. This is a template used to create the outgoing message. It can include language generation rules, properties from memory, and other features.\n\nFor example, to define variations that will be chosen at random, write:\n- hello\n- hi',
+          helpLink: 'https://aka.ms/lg-file-format',
+        },
+      },
+    },
+    [SDKTypes.IActivityTemplate]: {
+      field: LgField,
+    },
+  },
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/lg/tsconfig.build.json b/Composer/packages/ui-plugins/lg/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/lg/tsconfig.json b/Composer/packages/ui-plugins/lg/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/lg/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/luis/.eslintrc.js b/Composer/packages/ui-plugins/luis/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/luis/.gitignore b/Composer/packages/ui-plugins/luis/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/luis/jest.config.js b/Composer/packages/ui-plugins/luis/jest.config.js
new file mode 100644
index 0000000000..7d70674e34
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/luis',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/luis/package.json b/Composer/packages/ui-plugins/luis/package.json
new file mode 100644
index 0000000000..b34dc3042f
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@bfc/ui-plugin-luis",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer plugin that adds lu editor capibility using the Monaco editor.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@bfc/shared": "*",
+    "@bfc/indexers": "*",
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/ui-plugins/luis/src/LuisIntentEditor.tsx b/Composer/packages/ui-plugins/luis/src/LuisIntentEditor.tsx
new file mode 100644
index 0000000000..2f82e93c9a
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/src/LuisIntentEditor.tsx
@@ -0,0 +1,73 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { useState } from 'react';
+import { LuEditor } from '@bfc/code-editor';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import { filterSectionDiagnostics } from '@bfc/indexers';
+import { LuIntentSection } from '@bfc/shared';
+
+const LuisIntentEditor: React.FC<FieldProps<string>> = props => {
+  const { onChange, value, schema } = props;
+  const { currentDialog, designerId, luFiles, shellApi, locale } = useShellApi();
+  const luFile = luFiles.find(f => f.id === `${currentDialog.id}.${locale}`);
+
+  let intentName = value;
+  if (typeof intentName === 'object') {
+    const { $kind }: any = schema?.properties || {};
+    const [, promptType] = $kind.const.split('.');
+    promptType && (intentName = `${promptType}.response-${designerId}`);
+  }
+
+  const [luIntent, setLuIntent] = useState<LuIntentSection>(
+    (luFile && luFile.intents.find(intent => intent.Name === intentName)) ||
+      ({
+        Name: intentName,
+        Body: '',
+      } as LuIntentSection)
+  );
+
+  if (!luFile || !intentName) {
+    return null;
+  }
+
+  const commitChanges = newValue => {
+    if (!intentName) {
+      return;
+    }
+
+    const newIntent = { Name: intentName, Body: newValue };
+    setLuIntent(newIntent);
+    shellApi.updateLuIntent(luFile.id, intentName, newIntent);
+    onChange(intentName);
+  };
+
+  const diagnostic = luFile && filterSectionDiagnostics(luFile.diagnostics, luIntent)[0];
+
+  const errorMsg = diagnostic
+    ? diagnostic.message.split('error message: ')[diagnostic.message.split('error message: ').length - 1]
+    : '';
+
+  return (
+    <LuEditor
+      height={150}
+      luOption={{ fileId: luFile.id, sectionId: luIntent.Name }}
+      value={luIntent.Body}
+      onChange={commitChanges}
+      errorMessage={errorMsg}
+      options={{
+        lineNumbers: 'off',
+        minimap: {
+          enabled: false,
+        },
+        lineDecorationsWidth: 10,
+        lineNumbersMinChars: 0,
+        glyphMargin: false,
+        folding: false,
+        renderLineHighlight: 'none',
+      }}
+    />
+  );
+};
+
+export { LuisIntentEditor };
diff --git a/Composer/packages/ui-plugins/luis/src/index.ts b/Composer/packages/ui-plugins/luis/src/index.ts
new file mode 100644
index 0000000000..cf6abe7f92
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/src/index.ts
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+
+import { LuisIntentEditor } from './LuisIntentEditor';
+
+const config: PluginConfig = {
+  recognizers: [
+    {
+      id: SDKTypes.LuisRecognizer,
+      displayName: 'LUIS',
+      editor: LuisIntentEditor,
+      isSelected: data => {
+        return typeof data === 'string' && data.endsWith('.lu');
+      },
+      handleRecognizerChange: (props, shellData) => {
+        const { luFiles, currentDialog, locale } = shellData;
+        const luFile = luFiles.find(f => f.id === `${currentDialog.id}.${locale}`);
+
+        if (luFile) {
+          props.onChange(`${luFile.id}.lu`);
+        } else {
+          alert(`NO LU FILE WITH NAME ${currentDialog.id}`);
+        }
+      },
+    },
+  ],
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/luis/tsconfig.build.json b/Composer/packages/ui-plugins/luis/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/luis/tsconfig.json b/Composer/packages/ui-plugins/luis/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/luis/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/prompts/.eslintrc.js b/Composer/packages/ui-plugins/prompts/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/prompts/.gitignore b/Composer/packages/ui-plugins/prompts/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/prompts/jest.config.js b/Composer/packages/ui-plugins/prompts/jest.config.js
new file mode 100644
index 0000000000..e57dadcf2a
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/prompts',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/prompts/package.json b/Composer/packages/ui-plugins/prompts/package.json
new file mode 100644
index 0000000000..bdc2a42ace
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@bfc/ui-plugin-prompts",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer plugin that adds a custom form UI for prompts.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/extension": "*",
+    "@bfc/adaptive-form": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "format-message": "^6.2.3",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/extension": "*",
+    "@bfc/adaptive-form": "*",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "format-message": "^6.2.3",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/BotAsks.tsx b/Composer/packages/ui-plugins/prompts/src/PromptField/BotAsks.tsx
new file mode 100644
index 0000000000..d8f79cb000
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/BotAsks.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { MicrosoftInputDialog } from '@bfc/shared';
+import { SchemaField } from '@bfc/adaptive-form';
+
+import { PromptFieldProps } from './types';
+
+const BotAsks: React.FC<PromptFieldProps<MicrosoftInputDialog>> = props => {
+  const { onChange, getSchema, uiOptions, value, getError, definitions, depth, id } = props;
+
+  return (
+    <SchemaField
+      id={`${id}.prompt`}
+      name="prompt"
+      definitions={definitions}
+      depth={depth}
+      value={value?.prompt}
+      schema={getSchema('prompt')}
+      uiOptions={uiOptions.properties?.prompt || {}}
+      onChange={onChange('prompt')}
+      rawErrors={getError('prompt')}
+    />
+  );
+};
+
+export { BotAsks };
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/ChoiceInputSettings.tsx b/Composer/packages/ui-plugins/prompts/src/PromptField/ChoiceInputSettings.tsx
new file mode 100644
index 0000000000..9e6457bfcb
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/ChoiceInputSettings.tsx
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React, { Fragment } from 'react';
+import formatMessage from 'format-message';
+import { ChoiceInput, ConfirmInput } from '@bfc/shared';
+import { SchemaField } from '@bfc/adaptive-form';
+
+import { PromptFieldProps } from './types';
+
+const styles = {
+  choiceOptions: css`
+    margin-left: 0;
+    margin-right: 0;
+
+    label: ChoiceOptions;
+  `,
+};
+
+interface ChoiceInputSettingsProps extends PromptFieldProps<ChoiceInput | ConfirmInput> {
+  choiceProperty: 'choices' | 'confirmChoices';
+}
+
+const ChoiceInputSettings: React.FC<ChoiceInputSettingsProps> = props => {
+  const { choiceProperty, getSchema, value, id, onChange, uiOptions, getError, definitions, depth } = props;
+
+  return (
+    <Fragment>
+      <SchemaField
+        id={`${id}.${choiceProperty}`}
+        name={choiceProperty}
+        definitions={definitions}
+        depth={depth}
+        schema={getSchema(choiceProperty)}
+        uiOptions={uiOptions.properties?.[choiceProperty] || {}}
+        value={value?.[choiceProperty]}
+        onBlur={() => {}}
+        onChange={onChange(choiceProperty)}
+        onFocus={() => {}}
+        rawErrors={getError(choiceProperty)}
+      />
+      <SchemaField
+        css={styles.choiceOptions}
+        definitions={definitions}
+        depth={depth}
+        id={`${id}.choiceOptions`}
+        name="choiceOptions"
+        schema={getSchema('choiceOptions')}
+        uiOptions={uiOptions.properties?.choiceOptions || {}}
+        value={value?.choiceOptions || {}}
+        onBlur={() => {}}
+        onChange={onChange('choiceOptions')}
+        onFocus={() => {}}
+        rawErrors={getError('choiceOptions')}
+      />
+      {getSchema('appendChoices') && (
+        <SchemaField
+          id={`${id}.appendChoices`}
+          name="appendChoices"
+          definitions={definitions}
+          depth={depth}
+          label={formatMessage('Append choices')}
+          schema={getSchema('appendChoices')}
+          uiOptions={uiOptions.properties?.appendChoices || {}}
+          value={((value as unknown) as ChoiceInput)?.appendChoices}
+          onChange={onChange('appendChoices')}
+          rawErrors={getError('appendChoices')}
+        />
+      )}
+    </Fragment>
+  );
+};
+
+export { ChoiceInputSettings };
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx b/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx
new file mode 100644
index 0000000000..c255fdd2e2
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx
@@ -0,0 +1,116 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
+import { SDKTypes, MicrosoftInputDialog, ChoiceInput, ConfirmInput } from '@bfc/shared';
+import { FieldLabel, recognizerType, SchemaField, usePluginConfig } from '@bfc/adaptive-form';
+import { JSONSchema7, useShellApi } from '@bfc/extension';
+import formatMessage from 'format-message';
+
+import { PromptFieldProps } from './types';
+import { ChoiceInputSettings } from './ChoiceInputSettings';
+
+const getOptions = (enumSchema: JSONSchema7) => {
+  if (!enumSchema || !enumSchema.enum || !Array.isArray(enumSchema.enum)) {
+    return [];
+  }
+
+  return enumSchema.enum.map(o => o as string);
+};
+
+const UserInput: React.FC<PromptFieldProps<MicrosoftInputDialog>> = props => {
+  const { onChange, getSchema, value, id, uiOptions, getError, definitions, depth, schema = {} } = props;
+  const { currentDialog, designerId } = useShellApi();
+  const { recognizers } = usePluginConfig();
+
+  const { const: kind } = (schema?.properties?.['$kind'] as any) || {};
+  const [, promptType] = ((kind as string) || '').split('.');
+  const intentName = `${promptType}.response-${designerId}`;
+
+  const type = recognizerType(currentDialog);
+  const Editor: any = type === SDKTypes.LuisRecognizer && recognizers.find(r => r.id === type)?.editor;
+  const intentLabel = formatMessage('Expected responses (intent: #{intentName})', { intentName });
+
+  return (
+    <Fragment>
+      <SchemaField
+        name="property"
+        definitions={definitions}
+        depth={depth}
+        id={`${id}.property`}
+        schema={getSchema('property')}
+        uiOptions={uiOptions.properties?.property || {}}
+        value={value?.property}
+        onChange={onChange('property')}
+        rawErrors={getError('property')}
+      />
+      {getSchema('outputFormat') && (
+        <SchemaField
+          name="outputFormat"
+          definitions={definitions}
+          depth={depth}
+          id={`${id}.outputFormat`}
+          schema={getSchema('outputFormat')}
+          uiOptions={uiOptions.properties?.outputFormat || {}}
+          value={value?.outputFormat}
+          onChange={onChange('outputFormat')}
+          rawErrors={getError('outputFormat')}
+        />
+      )}
+      <SchemaField
+        name="value"
+        definitions={definitions}
+        depth={depth}
+        id={`${id}.value`}
+        schema={getSchema('value')}
+        uiOptions={uiOptions.properties?.value || {}}
+        value={value?.value}
+        onChange={onChange('value')}
+        rawErrors={getError('value')}
+      />
+      {Editor && kind !== SDKTypes.AttachmentInput && (
+        <React.Fragment>
+          <FieldLabel id={`${id}.intent`} label={intentLabel} />
+          <Editor {...props} onChange={() => {}} />
+        </React.Fragment>
+      )}
+      {getSchema('defaultLocale') && (
+        <SchemaField
+          name="defaultLocale"
+          definitions={definitions}
+          depth={depth}
+          id={`${id}.defaultLocale`}
+          schema={getSchema('defaultLocale')}
+          uiOptions={uiOptions.properties?.defaultLocale || {}}
+          value={((value as unknown) as ChoiceInput).defaultLocale}
+          onChange={onChange('defaultLocale')}
+          rawErrors={getError('defaultLocale')}
+        />
+      )}
+      {getSchema('style') && (
+        <SchemaField
+          name="style"
+          definitions={definitions}
+          depth={depth}
+          enumOptions={getOptions(getSchema('style'))}
+          id={`${id}.style`}
+          schema={getSchema('style')}
+          uiOptions={uiOptions.properties?.style || {}}
+          value={((value as unknown) as ChoiceInput).style}
+          onChange={onChange('style')}
+          rawErrors={getError('style')}
+        />
+      )}
+      {value?.$type === SDKTypes.ChoiceInput && (
+        <ChoiceInputSettings {...props} value={(value as unknown) as ChoiceInput} choiceProperty="choices" />
+      )}
+      {value?.$type === SDKTypes.ConfirmInput && (
+        <ChoiceInputSettings {...props} value={(value as unknown) as ConfirmInput} choiceProperty="confirmChoices" />
+      )}
+    </Fragment>
+  );
+};
+
+export { UserInput };
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/index.tsx b/Composer/packages/ui-plugins/prompts/src/PromptField/index.tsx
new file mode 100644
index 0000000000..a4a809093d
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/index.tsx
@@ -0,0 +1,82 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import formatMessage from 'format-message';
+import { Pivot, PivotLinkSize, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import get from 'lodash/get';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import { SchemaField } from '@bfc/adaptive-form';
+import { PromptTab } from '@bfc/shared';
+
+import { tabs } from './styles';
+import { BotAsks } from './BotAsks';
+import { UserInput } from './UserInput';
+import { GetSchema, PromptFieldChangeHandler, InputDialogKeys } from './types';
+
+const OTHER_FIELDS: InputDialogKeys[] = [
+  'unrecognizedPrompt',
+  'validations',
+  'invalidPrompt',
+  'defaultValueResponse',
+  'maxTurnCount',
+  'defaultValue',
+  'allowInterruptions',
+  'alwaysPrompt',
+];
+
+const PromptField: React.FC<FieldProps> = props => {
+  const { shellApi, focusedSteps, focusedTab } = useShellApi();
+
+  const getSchema: GetSchema = field => {
+    const fieldSchema = get(props.schema, ['properties', field]);
+
+    return fieldSchema;
+  };
+
+  const getError = field => {
+    if (typeof props.rawErrors === 'object') {
+      return props.rawErrors[field];
+    }
+  };
+
+  const updateField: PromptFieldChangeHandler = field => data => {
+    props.onChange({ ...props.value, [field]: data });
+  };
+
+  const handleTabChange = (item?: PivotItem) => {
+    if (item) {
+      shellApi.onFocusSteps(focusedSteps, item.props.itemKey);
+    }
+  };
+
+  return (
+    <div>
+      <Pivot linkSize={PivotLinkSize.large} selectedKey={focusedTab} styles={tabs} onLinkClick={handleTabChange}>
+        <PivotItem headerText={formatMessage('Bot Asks')} itemKey={PromptTab.BOT_ASKS}>
+          <BotAsks {...props} getSchema={getSchema} onChange={updateField} getError={getError} />
+        </PivotItem>
+        <PivotItem headerText={formatMessage('User Input')} itemKey={PromptTab.USER_INPUT}>
+          <UserInput {...props} getSchema={getSchema} onChange={updateField} getError={getError} />
+        </PivotItem>
+        <PivotItem headerText={formatMessage('Other')} itemKey={PromptTab.OTHER}>
+          {OTHER_FIELDS.filter(f => getSchema(f)).map(f => (
+            <SchemaField
+              key={f}
+              depth={props.depth}
+              id={`${props.id}.${f}`}
+              name={f}
+              rawErrors={getError(f)}
+              schema={getSchema(f)}
+              uiOptions={props.uiOptions.properties?.[f] || {}}
+              value={props.value?.[f]}
+              onChange={updateField(f)}
+            />
+          ))}
+        </PivotItem>
+      </Pivot>
+    </div>
+  );
+};
+
+export { PromptField };
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/styles.ts b/Composer/packages/ui-plugins/prompts/src/PromptField/styles.ts
new file mode 100644
index 0000000000..5baeb898ab
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/styles.ts
@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IPivotStyles } from 'office-ui-fabric-react/lib/Pivot';
+import { css } from '@emotion/core';
+
+export const tabs: Partial<IPivotStyles> = {
+  root: {
+    display: 'flex',
+    padding: '0 18px',
+  },
+  link: {
+    flex: 1,
+  },
+  linkIsSelected: {
+    flex: 1,
+  },
+  itemContainer: {
+    padding: '12px 18px',
+  },
+};
+
+export const settingsFields = css`
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: flex-end;
+
+  label: SettingsField;
+`;
+
+export const settingsFieldHalf = css`
+  flex: 1;
+  overflow: hidden;
+
+  label: SettingsFieldHalf;
+
+  & + & {
+    margin-left: 16px;
+  }
+`;
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/types.ts b/Composer/packages/ui-plugins/prompts/src/PromptField/types.ts
new file mode 100644
index 0000000000..7165e20ddf
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/types.ts
@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { FieldProps, JSONSchema7 } from '@bfc/extension';
+import { MicrosoftInputDialog, ChoiceInput, ConfirmInput } from '@bfc/shared';
+
+export type InputDialogKeys = keyof MicrosoftInputDialog | keyof ChoiceInput | keyof ConfirmInput;
+export type PromptFieldChangeHandler = (field: InputDialogKeys) => (data: any) => void;
+export type GetSchema = (field: InputDialogKeys) => JSONSchema7;
+export type GetError = (field: InputDialogKeys) => string | string[] | undefined;
+
+export interface PromptFieldProps<T = any> extends Omit<FieldProps<T>, 'onChange'> {
+  onChange: PromptFieldChangeHandler;
+  getSchema: GetSchema;
+  getError: GetError;
+}
diff --git a/Composer/packages/ui-plugins/prompts/src/index.ts b/Composer/packages/ui-plugins/prompts/src/index.ts
new file mode 100644
index 0000000000..26e7ffd710
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/index.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+
+import uiSchema from './uiSchema';
+
+const config: PluginConfig = {
+  uiSchema,
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/prompts/src/uiSchema.ts b/Composer/packages/ui-plugins/prompts/src/uiSchema.ts
new file mode 100644
index 0000000000..c1c2c8a130
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/src/uiSchema.ts
@@ -0,0 +1,119 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+import { EditableField } from '@bfc/adaptive-form';
+import formatMessage from 'format-message';
+
+import { PromptField } from './PromptField';
+
+const choiceSchema = {
+  hidden: ['action'],
+  properties: {
+    value: {
+      label: () => formatMessage('Choice Name'),
+      field: EditableField,
+      placeholder: () => formatMessage('Add new option here'),
+    },
+    synonyms: {
+      label: () => formatMessage('Synonyms (Optional)'),
+      field: EditableField,
+      serializer: {
+        get: value => (Array.isArray(value) ? value.join(', ') : value),
+        set: value => (typeof value === 'string' ? value.split(', ') : value),
+      },
+      placeholder: () => formatMessage('Add multiple comma-separated synonyms'),
+    },
+  },
+};
+
+const uiSchema: UISchema = {
+  [SDKTypes.AttachmentInput]: {
+    field: PromptField,
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+    properties: {
+      prompt: {
+        label: () => formatMessage('Prompt for Attachment'),
+      },
+      validations: {
+        label: () => formatMessage('Validation Rules'),
+        placeholder: () => formatMessage('Add new validation rule here'),
+      },
+    },
+  },
+  [SDKTypes.ChoiceInput]: {
+    field: PromptField,
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+    properties: {
+      prompt: {
+        label: () => formatMessage('Prompt with multi-choice'),
+      },
+      validations: {
+        label: () => formatMessage('Validation Rules'),
+        placeholder: () => formatMessage('Add new validation rule here'),
+      },
+      choices: {
+        placeholder: () => formatMessage('Expression'),
+        ...choiceSchema,
+      },
+    },
+  },
+  [SDKTypes.ConfirmInput]: {
+    field: PromptField,
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+    properties: {
+      prompt: {
+        label: () => formatMessage('Prompt for confirmation'),
+      },
+      validations: {
+        label: () => formatMessage('Validation Rules'),
+        placeholder: () => formatMessage('Add new validation rule here'),
+      },
+      confirmChoices: {
+        label: () => formatMessage('Confirm Choices'),
+        ...choiceSchema,
+      },
+    },
+  },
+  [SDKTypes.DateTimeInput]: {
+    field: PromptField,
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+    properties: {
+      prompt: {
+        label: () => formatMessage('Prompt for a date'),
+      },
+      validations: {
+        label: () => formatMessage('Validation Rules'),
+        placeholder: () => formatMessage('Add new validation rule here'),
+      },
+    },
+  },
+  [SDKTypes.NumberInput]: {
+    field: PromptField,
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+    properties: {
+      prompt: {
+        label: () => formatMessage('Prompt for a number'),
+      },
+      validations: {
+        label: () => formatMessage('Validation Rules'),
+        placeholder: () => formatMessage('Add new validation rule here'),
+      },
+    },
+  },
+  [SDKTypes.TextInput]: {
+    field: PromptField,
+    helpLink: 'https://aka.ms/bfc-ask-for-user-input',
+    properties: {
+      prompt: {
+        label: () => formatMessage('Prompt for text'),
+      },
+      validations: {
+        label: () => formatMessage('Validation Rules'),
+        placeholder: () => formatMessage('Add new validation rule here'),
+      },
+    },
+  },
+};
+
+export default uiSchema;
diff --git a/Composer/packages/ui-plugins/prompts/tsconfig.build.json b/Composer/packages/ui-plugins/prompts/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/prompts/tsconfig.json b/Composer/packages/ui-plugins/prompts/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/prompts/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/select-dialog/.eslintrc.js b/Composer/packages/ui-plugins/select-dialog/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/select-dialog/.gitignore b/Composer/packages/ui-plugins/select-dialog/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/select-dialog/jest.config.js b/Composer/packages/ui-plugins/select-dialog/jest.config.js
new file mode 100644
index 0000000000..52bcc6b4c8
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/select-dialog',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/select-dialog/package.json b/Composer/packages/ui-plugins/select-dialog/package.json
new file mode 100644
index 0000000000..1b6a40409d
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@bfc/ui-plugin-select-dialog",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer plugin that adds a custom form UI for selecting a dialog.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "v-thdurn@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/extension": "*",
+    "@bfc/adaptive-form": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "format-message": "^6.2.3",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/extension": "*",
+    "@bfc/adaptive-form": "*",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "format-message": "^6.2.3",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/DialogSelectWidget.tsx b/Composer/packages/ui-plugins/select-dialog/src/SelectDialog.tsx
similarity index 50%
rename from Composer/packages/extensions/obiformeditor/src/Form/widgets/DialogSelectWidget.tsx
rename to Composer/packages/ui-plugins/select-dialog/src/SelectDialog.tsx
index 95a4ef22a7..2dc1e061c2 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/DialogSelectWidget.tsx
+++ b/Composer/packages/ui-plugins/select-dialog/src/SelectDialog.tsx
@@ -1,42 +1,48 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useState, useEffect } from 'react';
-import { SelectableOptionMenuItemType, ComboBox, IComboBoxOption } from 'office-ui-fabric-react/lib/ComboBox';
-import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
-import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption';
+import React, { useState } from 'react';
+import { ComboBox, IComboBoxOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/ComboBox';
+import { FieldLabel } from '@bfc/adaptive-form';
+import { FieldProps, useShellApi } from '@bfc/extension';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption';
+import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
 import formatMessage from 'format-message';
 
-import { BFDWidgetProps } from '../types';
-
-import { WidgetLabel } from './WidgetLabel';
-
 const ADD_DIALOG = 'ADD_DIALOG';
 
-export const DialogSelectWidget: React.FC<BFDWidgetProps> = props => {
-  const { formContext, onChange, onFocus, onBlur, value, id, placeholder, label, schema } = props;
-  const { description } = schema;
+export const SelectDialog: React.FC<FieldProps> = ({
+  description,
+  id,
+  label,
+  onBlur,
+  onChange,
+  onFocus,
+  value = '',
+  uiOptions,
+}) => {
+  const {
+    currentDialog: { id: currentDialogId },
+    dialogs,
+    shellApi,
+  } = useShellApi();
+  const { createDialog, navTo } = shellApi;
   const [comboboxTitle, setComboboxTitle] = useState<string | null>(null);
-
-  useEffect(() => {
-    // We have to wait until props get full updtated (value and dialogOptions) before
-    // letting the combobox be controlled by value.
-    if (comboboxTitle && comboboxTitle === value && (formContext.dialogOptions || []).find(d => d.value === value)) {
-      setComboboxTitle(null);
-    }
-  }, [comboboxTitle, value, formContext.dialogOptions]);
-
-  const options: IComboBoxOption[] = (formContext.dialogOptions || [])
-    .filter(d => d.value !== formContext.currentDialog.id)
-    .map(d => ({
-      key: d.value,
-      text: d.label,
-      isSelected: value === d.value,
+  const options: IComboBoxOption[] = dialogs
+    .filter(({ id }) => id !== currentDialogId)
+    .map(({ displayName, id }) => ({
+      key: id,
+      text: displayName,
+      isSelected: value === displayName,
     }));
 
   options.push(
-    { key: 'separator', itemType: SelectableOptionMenuItemType.Divider, text: '' },
+    {
+      key: 'separator',
+      itemType: SelectableOptionMenuItemType.Divider,
+      text: '',
+    },
     { key: ADD_DIALOG, text: formatMessage('Create a new dialog') }
   );
 
@@ -44,14 +50,14 @@ export const DialogSelectWidget: React.FC<BFDWidgetProps> = props => {
     options.push({ key: 'customTitle', text: comboboxTitle });
   }
 
-  const handleChange = (e, option) => {
+  const handleChange = (_, option) => {
     if (option) {
       if (option.key === ADD_DIALOG) {
         setComboboxTitle(formatMessage('Create a new dialog'));
-        formContext.shellApi.createDialog({ actions: [] }).then(newDialog => {
+        createDialog([]).then(newDialog => {
           if (newDialog) {
             onChange(newDialog);
-            setTimeout(() => formContext.shellApi.navTo(newDialog), 500);
+            setTimeout(() => navTo(newDialog), 500);
           } else {
             setComboboxTitle(null);
           }
@@ -64,40 +70,32 @@ export const DialogSelectWidget: React.FC<BFDWidgetProps> = props => {
     }
   };
 
-  const onRenderOption: IRenderFunction<ISelectableOption> = option => {
-    if (!option) {
-      return null;
-    }
-
-    return (
+  const onRenderOption: IRenderFunction<ISelectableOption> = option =>
+    option ? (
       <div>
         <Icon
+          aria-hidden="true"
           iconName={option.key === ADD_DIALOG ? 'Add' : 'OpenSource'}
           style={{ marginRight: '8px' }}
-          aria-hidden="true"
         />
         <span>{option.text}</span>
       </div>
-    );
-  };
+    ) : null;
 
-  // Using a Combobox allows us more control over invoking props.onChange via
-  // onItemClick prop.
   return (
-    <>
-      <WidgetLabel label={label} description={description} id={id} />
+    <React.Fragment>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
       <ComboBox
+        autoComplete="off"
         id={id}
-        placeholder={placeholder}
+        options={options}
+        selectedKey={comboboxTitle ? 'customTitle' : value}
+        useComboBoxAsMenuWidth
         onBlur={() => onBlur && onBlur(id, value)}
         onFocus={() => onFocus && onFocus(id, value)}
-        options={options}
-        selectedKey={comboboxTitle ? 'customTitle' : value || ''}
         onItemClick={handleChange}
         onRenderOption={onRenderOption}
-        autoComplete="off"
-        useComboBoxAsMenuWidth
       />
-    </>
+    </React.Fragment>
   );
 };
diff --git a/Composer/packages/ui-plugins/select-dialog/src/__tests__/selectDialog.test.tsx b/Composer/packages/ui-plugins/select-dialog/src/__tests__/selectDialog.test.tsx
new file mode 100644
index 0000000000..ef5a1f8dfa
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/src/__tests__/selectDialog.test.tsx
@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// @ts-nocheck
+
+import React from 'react';
+import { cleanup, fireEvent, getAllByRole, render } from 'react-testing-library';
+import { Extension } from '@bfc/extension';
+
+import { SelectDialog } from '../SelectDialog';
+
+const flushPromises = () => Promise.resolve();
+
+const renderSelectDialog = ({ createDialog, navTo, onChange } = {}) => {
+  const props = {
+    description: 'Name of the dialog to call.',
+    id: 'select.dialog',
+    label: 'Dialog name',
+    onChange,
+  };
+
+  const shell = {
+    navTo,
+    createDialog,
+  };
+
+  const shellData = {
+    currentDialog: { id: 'dialog1' },
+    dialogs: [
+      { id: 'dialog1', displayName: 'dialog1' },
+      { id: 'dialog2', displayName: 'dialog2' },
+      { id: 'dialog3', displayName: 'dialog3' },
+    ],
+  };
+  return render(
+    <Extension shell={shell} shellData={shellData}>
+      <SelectDialog {...props} />
+    </Extension>
+  );
+};
+
+describe('Select Dialog', () => {
+  afterEach(cleanup);
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  it('should create a new dialog', async () => {
+    const createDialog = jest.fn().mockResolvedValue('newDialog');
+    const navTo = jest.fn().mockResolvedValue();
+    const onChange = jest.fn();
+
+    const { baseElement, findByRole } = renderSelectDialog({ createDialog, navTo, onChange });
+    const combobox = await findByRole('combobox');
+    fireEvent.click(combobox);
+
+    const dialogs = await getAllByRole(baseElement, 'option');
+    fireEvent.click(dialogs[dialogs.length - 1]);
+
+    await flushPromises();
+    jest.advanceTimersByTime(1000);
+
+    expect(createDialog);
+    expect(onChange).toHaveBeenCalledWith('newDialog');
+    expect(navTo).toHaveBeenCalledWith('newDialog');
+  });
+
+  it('should select dialog', async () => {
+    const onChange = jest.fn();
+
+    const { baseElement, findByRole } = renderSelectDialog({ onChange });
+    const combobox = await findByRole('combobox');
+    fireEvent.click(combobox);
+
+    const [dialog] = await getAllByRole(baseElement, 'option');
+    fireEvent.click(dialog);
+
+    expect(onChange).toHaveBeenCalledWith('dialog2');
+  });
+
+  it('should display label', async () => {
+    const { findByText } = await renderSelectDialog();
+    await findByText('Dialog name');
+  });
+});
diff --git a/Composer/packages/ui-plugins/select-dialog/src/index.ts b/Composer/packages/ui-plugins/select-dialog/src/index.ts
new file mode 100644
index 0000000000..26e7ffd710
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/src/index.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+
+import uiSchema from './uiSchema';
+
+const config: PluginConfig = {
+  uiSchema,
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/select-dialog/src/uiSchema.ts b/Composer/packages/ui-plugins/select-dialog/src/uiSchema.ts
new file mode 100644
index 0000000000..41fe2b16b5
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/src/uiSchema.ts
@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { UISchema } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+
+import { SelectDialog } from './SelectDialog';
+
+const uiSchema: UISchema = {
+  [SDKTypes.BeginDialog]: {
+    properties: {
+      dialog: {
+        field: SelectDialog,
+      },
+    },
+  },
+  [SDKTypes.ReplaceDialog]: {
+    properties: {
+      dialog: {
+        field: SelectDialog,
+      },
+    },
+  },
+};
+
+export default uiSchema;
diff --git a/Composer/packages/ui-plugins/select-dialog/tsconfig.build.json b/Composer/packages/ui-plugins/select-dialog/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/select-dialog/tsconfig.json b/Composer/packages/ui-plugins/select-dialog/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/select-dialog/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/tsconfig.base.json b/Composer/tsconfig.base.json
index 3cc0193fbd..75a28734fc 100644
--- a/Composer/tsconfig.base.json
+++ b/Composer/tsconfig.base.json
@@ -13,7 +13,17 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "target": "es5",
+    "plugins": [
+      {
+        "name": "typescript-styled-plugin",
+        "lint": {
+          "validProperties": [
+            "label"
+          ]
+        }
+      }
+    ]
   },
   "exclude": [
     "node_modules"
diff --git a/Composer/yarn.lock b/Composer/yarn.lock
index 479ac661e9..1ca251168f 100644
--- a/Composer/yarn.lock
+++ b/Composer/yarn.lock
@@ -2120,38 +2120,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@bfcomposer/monaco-editor-webpack-plugin@^1.7.2":
-  version "1.7.2"
-  resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/@bfcomposer/monaco-editor-webpack-plugin/-/@bfcomposer/monaco-editor-webpack-plugin-1.7.2.tgz#f00ac5cec496dc3d44713d9142956b3336033eab"
-  integrity sha1-8ArFzsSW3D1EcT2RQpVrMzYDPqs=
-  dependencies:
-    "@types/webpack" "^4.4.19"
-
-"@bfcomposer/monaco-editor@0.18.4":
-  version "0.18.4"
-  resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/@bfcomposer/monaco-editor/-/@bfcomposer/monaco-editor-0.18.4.tgz#2263c2b836dac1098f94dfa476545b5fe5314513"
-  integrity sha1-ImPCuDbawQmPlN+kdlRbX+UxRRM=
-
-"@bfcomposer/react-jsonschema-form@1.6.5":
-  version "1.6.5"
-  resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/@bfcomposer/react-jsonschema-form/-/@bfcomposer/react-jsonschema-form-1.6.5.tgz#afd08049270eb00afe305cc756fd200011e12b4c"
-  integrity sha1-r9CASScOsAr+MFzHVv0gABHhK0w=
-  dependencies:
-    ajv "^6.7.0"
-    babel-runtime "^6.26.0"
-    core-js "^2.5.7"
-    lodash.topath "^4.5.2"
-    prop-types "^15.5.8"
-
-"@bfcomposer/react-monaco-editor@0.30.12":
-  version "0.30.12"
-  resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/@bfcomposer/react-monaco-editor/-/@bfcomposer/react-monaco-editor-0.30.12.tgz#426afb854d7965ca33f4657b925b395f5918174d"
-  integrity sha1-Qmr7hU15Zcoz9GV7kls5X1kYF00=
-  dependencies:
-    "@bfcomposer/monaco-editor" "0.18.4"
-    "@types/react" "16.9.0"
-    prop-types "^15.7.2"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -2222,16 +2190,6 @@
     "@emotion/babel-plugin-jsx-pragmatic" "^0.1.3"
     babel-plugin-emotion "^10.0.17"
 
-"@emotion/cache@^10.0.17":
-  version "10.0.19"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
-  integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==
-  dependencies:
-    "@emotion/sheet" "0.9.3"
-    "@emotion/stylis" "0.8.4"
-    "@emotion/utils" "0.11.2"
-    "@emotion/weak-memoize" "0.2.4"
-
 "@emotion/cache@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.27.tgz#7895db204e2c1a991ae33d51262a3a44f6737303"
@@ -2252,18 +2210,6 @@
     "@emotion/utils" "0.11.1"
     "@emotion/weak-memoize" "0.2.2"
 
-"@emotion/core@^10.0.17":
-  version "10.0.17"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.17.tgz#3367376709721f4ee2068cff54ba581d362789d8"
-  integrity sha512-gykyjjr0sxzVuZBVTVK4dUmYsorc2qLhdYgSiOVK+m7WXgcYTKZevGWZ7TLAgTZvMelCTvhNq8xnf8FR1IdTbg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.17"
-    "@emotion/css" "^10.0.14"
-    "@emotion/serialize" "^0.11.10"
-    "@emotion/sheet" "0.9.3"
-    "@emotion/utils" "0.11.2"
-
 "@emotion/core@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc"
@@ -2287,15 +2233,6 @@
     "@emotion/sheet" "0.9.2"
     "@emotion/utils" "0.11.1"
 
-"@emotion/css@^10.0.14":
-  version "10.0.14"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139"
-  integrity sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==
-  dependencies:
-    "@emotion/serialize" "^0.11.8"
-    "@emotion/utils" "0.11.2"
-    babel-plugin-emotion "^10.0.14"
-
 "@emotion/css@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
@@ -2368,7 +2305,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/serialize@^0.11.10", "@emotion/serialize@^0.11.11", "@emotion/serialize@^0.11.8":
+"@emotion/serialize@^0.11.11":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.11.tgz#c92a5e5b358070a7242d10508143306524e842a4"
   integrity sha512-YG8wdCqoWtuoMxhHZCTA+egL0RSGdHEc+YCsmiSBPBEDNuVeMWtjEWtGrhUterSChxzwnWBXvzSxIFQI/3sHLw==
@@ -2417,11 +2354,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4"
   integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==
 
-"@emotion/sheet@0.9.3":
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
-  integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
-
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
@@ -2450,11 +2382,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246"
   integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==
 
-"@emotion/stylis@0.8.4":
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
-  integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
-
 "@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
@@ -2495,16 +2422,22 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
   integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
 
-"@emotion/weak-memoize@0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
-  integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
-
 "@emotion/weak-memoize@0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@fluentui/react-focus@^7.1.9":
+  version "7.1.9"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-focus/-/react-focus-7.1.9.tgz#0161c9485b95e3184a590d25eceef5cfc23194c7"
+  integrity sha512-kmium2M7GR5IKgapIwYfM9fAlV5EkiNl7yNJBR+SZAjJ/5wJM6BhG683MJp1Z8q1ulHPxIbkxbcJ3hispmXbuA==
+  dependencies:
+    "@uifabric/merge-styles" "^7.8.9"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/styling" "^7.10.22"
+    "@uifabric/utilities" "^7.15.2"
+    tslib "^1.10.0"
+
 "@hapi/address@2.x.x":
   version "2.1.2"
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/@hapi/address/-/@hapi/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222"
@@ -2547,6 +2480,15 @@
     chalk "^2.0.1"
     slash "^2.0.0"
 
+"@jest/console@^24.7.1", "@jest/console@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
+  dependencies:
+    "@jest/source-map" "^24.9.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
 "@jest/core@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.5.0.tgz#2cefc6a69e9ebcae1da8f7c75f8a257152ba1ec0"
@@ -2580,6 +2522,40 @@
     rimraf "^2.5.4"
     strip-ansi "^5.0.0"
 
+"@jest/core@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
+  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.9.0"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-resolve-dependencies "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    jest-watcher "^24.9.0"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    slash "^2.0.0"
+    strip-ansi "^5.0.0"
+
 "@jest/environment@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.5.0.tgz#a2557f7808767abea3f9e4cc43a172122a63aca8"
@@ -2591,6 +2567,16 @@
     "@types/node" "*"
     jest-mock "^24.5.0"
 
+"@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
 "@jest/fake-timers@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.5.0.tgz#4a29678b91fd0876144a58f8d46e6c62de0266f0"
@@ -2601,6 +2587,15 @@
     jest-message-util "^24.5.0"
     jest-mock "^24.5.0"
 
+"@jest/fake-timers@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+
 "@jest/reporters@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.5.0.tgz#9363a210d0daa74696886d9cb294eb8b3ad9b4d9"
@@ -2627,6 +2622,33 @@
     source-map "^0.6.0"
     string-length "^2.0.0"
 
+"@jest/reporters@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
+  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.1"
+    istanbul-reports "^2.2.6"
+    jest-haste-map "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    node-notifier "^5.4.2"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
 "@jest/source-map@^24.3.0":
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.3.0.tgz#563be3aa4d224caf65ff77edc95cd1ca4da67f28"
@@ -2636,6 +2658,15 @@
     graceful-fs "^4.1.15"
     source-map "^0.6.0"
 
+"@jest/source-map@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
 "@jest/test-result@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.5.0.tgz#ab66fb7741a04af3363443084e72ea84861a53f2"
@@ -2645,6 +2676,25 @@
     "@jest/types" "^24.5.0"
     "@types/istanbul-lib-coverage" "^1.1.0"
 
+"@jest/test-result@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
+"@jest/test-sequencer@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+
 "@jest/transform@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.5.0.tgz#6709fc26db918e6af63a985f2cc3c464b4cf99d9"
@@ -2666,6 +2716,28 @@
     source-map "^0.6.1"
     write-file-atomic "2.4.1"
 
+"@jest/transform@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.9.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.9.0"
+    jest-regex-util "^24.9.0"
+    jest-util "^24.9.0"
+    micromatch "^3.1.10"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
 "@jest/types@^24.5.0":
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.5.0.tgz#feee214a4d0167b0ca447284e95a57aa10b3ee95"
@@ -2700,6 +2772,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
+  integrity sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
 "@microsoft/bf-cli-command@https://botbuilder.myget.org/F/botbuilder-declarative/npm/@microsoft/bf-cli-command/-/@microsoft/bf-cli-command-1.0.1.tgz":
   version "1.0.1"
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/@microsoft/bf-cli-command/-/@microsoft/bf-cli-command-1.0.1.tgz#5c7f650015f839d80a7739bc70f8cd5fa90a1e48"
@@ -2736,6 +2818,11 @@
     semver "^5.5.1"
     tslib "^1.10.0"
 
+"@microsoft/load-themed-styles@^1.10.26":
+  version "1.10.39"
+  resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.39.tgz#23024bfa264a01ab2f05a9fda9c97c1f90ef80d8"
+  integrity sha512-KKeQSM0FMTR7VtvkVF+D488zUmO3YoImxJ3O2xyLDEu9GqxqthF3Zvv1GddC2Jyoj2vuAJ0RGGgrI/T+MxLLDg==
+
 "@microsoft/load-themed-styles@^1.7.13":
   version "1.9.5"
   resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.9.5.tgz#b9f063bafa568e356b4d99a5b522d0bab60bda85"
@@ -2746,6 +2833,11 @@
   resolved "https://registry.yarnpkg.com/@microsoft/recognizers-text-data-types-timex-expression/-/recognizers-text-data-types-timex-expression-1.1.4.tgz#623453ae65e8df212d8156f6a314675c30696c1d"
   integrity sha512-2vICaEJfV9EpaDKs5P1PLAEs+WpNqrtpkl7CLsmc5gKmxgpQtsojG4tk6km5JRKg1mYuLV5ZzJ/65oOEeyTMvQ==
 
+"@monaco-editor/react@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-3.1.2.tgz#e2292f5b7905cbcd389d7fb06d886070fac68a23"
+  integrity sha512-V0ymTf5ClGh2zaWOXyrEC9gpF1B9YSZGRMpiobs3FixYdODwLbQS8Yqr9VGY1xc2riPFtXMzz9IPYxLGwmVszg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3052,17 +3144,10 @@
     "@types/connect" "*"
     "@types/node" "*"
 
-"@types/classnames@^2.2.9":
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
-  integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
-
-"@types/codemirror@^0.0.74":
-  version "0.0.74"
-  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.74.tgz#7ca146f7f3414166e7501000d691b2f18d978d10"
-  integrity sha512-pjc14HE6KCCk3SYoC49k/gJJHkredJy4GdSK+lGRMIBfG+Uq6vT8oZiKToFH2J7pZ5pUd69UGD6CgmFG1V17wA==
-  dependencies:
-    "@types/tern" "*"
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
 "@types/compression@^1.0.1":
   version "1.0.1"
@@ -3095,11 +3180,6 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
-"@types/estree@*":
-  version "0.0.39"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
-  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
-
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -3228,16 +3308,26 @@
   dependencies:
     "@types/jest-diff" "*"
 
+"@types/jest@^24.0.25":
+  version "24.9.1"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.9.1.tgz#02baf9573c78f1b9974a5f36778b366aa77bd534"
+  integrity sha512-Fb38HkXSVA4L8fGKEZ6le5bB8r6MRWlOCZbVuWZcmOMSCd2wCYOwN1ibj8daIoV9naq7aaOZjrLCoCMptKU/4Q==
+  dependencies:
+    jest-diff "^24.3.0"
+
+"@types/jest@^25.1.3":
+  version "25.1.4"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.1.4.tgz#9e9f1e59dda86d3fd56afce71d1ea1b331f6f760"
+  integrity sha512-QDDY2uNAhCV7TMCITrxz+MRk1EizcsevzfeS6LykIlq2V1E5oO4wXG8V2ZEd9w7Snxeeagk46YbMgZ8ESHx3sw==
+  dependencies:
+    jest-diff "^25.1.0"
+    pretty-format "^25.1.0"
+
 "@types/json-schema@^7.0.3":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
   integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
 
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
-
 "@types/jsonwebtoken@^8.3.3":
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-8.3.3.tgz#eafeea8239c74b02263d204c0e1175d5cd0bb85f"
@@ -3255,6 +3345,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.146.tgz#de0d2c8610012f12a6a796455054cbc654f8fecf"
   integrity sha512-JzJcmQ/ikHSv7pbvrVNKJU5j9jL9VLf3/gqs048CEnBVVVEv4kve3vLxoPHGvclutS+Il4SBIuQQ087m1eHffw==
 
+"@types/lodash@^4.14.149":
+  version "4.14.149"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
+  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+
 "@types/lru-cache@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.0.tgz#57f228f2b80c046b4a1bd5cac031f81f207f4f03"
@@ -3291,13 +3386,6 @@
   dependencies:
     "@types/express" "*"
 
-"@types/nanoid@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/nanoid/-/nanoid-1.2.1.tgz#995bd0538ef04c4751d88d2fa15a97f0b85dd848"
-  integrity sha512-G3fQNcOYPHLXigI5nxpmSCCJIAEqgd+DP3p1IaxcdXJRJxdoeIZi/MGt58j/lI0AIsgajwG10Vs6J2xzkGZfEQ==
-  dependencies:
-    "@types/node" "*"
-
 "@types/nanoid@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/nanoid/-/nanoid-2.1.0.tgz#41edfda78986e9127d0dc14de982de766f994020"
@@ -3358,17 +3446,17 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-dom@16.9.0":
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.0.tgz#ba6ddb00bf5de700b0eb91daa452081ffccbfdea"
-  integrity sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA==
+"@types/react-dom@16.9.5":
+  version "16.9.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.5.tgz#5de610b04a35d07ffd8f44edad93a71032d9aaa7"
+  integrity sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.9.0":
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.0.tgz#27434f16d889a335eb4626d1f1e67eda54039e5b"
-  integrity sha512-eOct1hyZI9YZf/eqNlYu7jxA9qyTw1EGXruAJhHhBDBpc00W0C1vwlnh+hkOf7UFZkNK+UxnFBpwAZe3d7XJhQ==
+"@types/react@*", "@types/react@16.9.23":
+  version "16.9.23"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c"
+  integrity sha512-SsGVT4E7L2wLN3tPYLiF20hmZTPGuzaayVunfgXzUn1x4uHVsKH6QDJQ/TdpHqwsTLd4CwrmQ2vOgxN7gE24gw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -3409,13 +3497,6 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
   integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
 
-"@types/tern@*":
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.2.tgz#4f2657832e4e69345ae2afb1f7d72ebb9bbd25d2"
-  integrity sha512-OtEnzdjKJqQ5URz4DKvVkHDiPcjXKXc+NbqXsFb3rughaN4R7JVtoSRAvuoiDIA4Ev4mxX3u56WvPBpEac5ULA==
-  dependencies:
-    "@types/estree" "*"
-
 "@types/testing-library__cypress@^5.0.2":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@types/testing-library__cypress/-/testing-library__cypress-5.0.3.tgz#94969b7c1eea96e09d8e023a1d225590fa75a1fe"
@@ -3488,7 +3569,7 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@^4.4.19", "@types/webpack@^4.4.31":
+"@types/webpack@^4.4.31":
   version "4.39.1"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.39.1.tgz#d76cd551cc851198f67f75ff3e26551d204530e9"
   integrity sha512-rgO9ihNu/l72Sjx3shqwc9r6gi+tOMsqxhMEZhOEVIZt82GFOeUyEdpTk1BO2HqEHLS/XJW8ldUTIIfIMMyYFQ==
@@ -3522,6 +3603,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^15.0.0":
+  version "15.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
+  integrity sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@2.10.0":
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.10.0.tgz#c4cb103275e555e8a7e9b3d14c5951eb6d431e70"
@@ -3565,54 +3653,28 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
-"@uifabric/example-data@^7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/example-data/-/example-data-7.0.1.tgz#8d5104ffbfa5c5b2589fa60f753932e536fd1003"
-  integrity sha512-HWw2lAbF5Fn1NhmxxEpzgWrprEsQ7+Ut71zpAHdCJoVCVeesHl03gY/obBIz8ogrufW0RIlkrNSredy6uRzYDQ==
-  dependencies:
-    tslib "^1.7.1"
-
-"@uifabric/fluent-theme@7.1.4":
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/@uifabric/fluent-theme/-/fluent-theme-7.1.4.tgz#73f3cb5ce6df26ccd9f9df4d155a4b9f79e72214"
-  integrity sha512-WQA6AuScDq1+fDMQH7zeJJnU7wR9mBj54ZentkqKKiYC7r0i4q9odDvCuw3MIVpD2LLcp5+r8el8A4JkUt0CRA==
-  dependencies:
-    "@uifabric/merge-styles" "^7.5.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.6.2"
-    "@uifabric/variants" "^7.0.5"
-    office-ui-fabric-react "^7.29.2"
-    tslib "^1.7.1"
-
-"@uifabric/foundation@^7.4.1":
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.4.1.tgz#fc94fa20ddc876ce77b4f74009bf8bde6cb83023"
-  integrity sha512-JO31EbOhLtI1ugX5VcoW0HQTrdcDmR75nd3TG7dQqo1E7XjnQg1O/1jC8nFiPfC0L8rX4E3MrTib3f/ju0BSMA==
-  dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.6.2"
-    "@uifabric/utilities" "^7.0.9"
-    tslib "^1.7.1"
-
-"@uifabric/foundation@^7.5.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.5.0.tgz#d36f15ef59edeaa8219f2b7d34f74c6d756f6622"
-  integrity sha512-eymMyV3e+MFCkcfC1AFIAzVP/h6/QvDcYb1l6K3IaG1QG47ZwijJJXseEvNDjimfUiJhez9H7cSsRZPIIJ5MaQ==
+"@uifabric/fluent-theme@^7.1.13", "@uifabric/fluent-theme@^7.1.4":
+  version "7.1.42"
+  resolved "https://registry.yarnpkg.com/@uifabric/fluent-theme/-/fluent-theme-7.1.42.tgz#b8a8bdc3517388ad13635f9ccccbbba88ab2bac7"
+  integrity sha512-/9ardEJQm5LNUzuDiN0rNVlVEZ4oEasAMgi9f79sjPkxB1qbE1jjRvKqnB9G4j9it/4OMUb0d0BNa/V7kAZX6g==
   dependencies:
-    "@uifabric/merge-styles" "^7.8.0"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.7.2"
-    "@uifabric/utilities" "^7.5.0"
-    tslib "^1.7.1"
+    "@uifabric/merge-styles" "^7.8.9"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/styling" "^7.10.22"
+    "@uifabric/variants" "^7.1.33"
+    office-ui-fabric-react "^7.105.2"
+    tslib "^1.10.0"
 
-"@uifabric/icons@^7.2.1":
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-7.2.1.tgz#b41f52c3c8443d66c2947f3a0368a8e45f469f9f"
-  integrity sha512-KRxg6wpUaWKiEmVpjXsSF5KcwzCNDMD72n7dL9oG4UuEouT+vENDQjOh/Pw2jmPWkBmBVwpnqXrNJa8hlKQ7pQ==
+"@uifabric/foundation@^7.5.22":
+  version "7.5.22"
+  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.5.22.tgz#6ccc9ce55499dbaf60c42ff61cd4c3d472cce39e"
+  integrity sha512-eZ1Ee52WumH+tUYL+cJg8O6pmoP9Yp1o7uX21H8zBhfKLLu0Rrc07du2c5uEZA2huIGhL3hRHdKbT0Bf2Miy4A==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.6.2"
-    tslib "^1.7.1"
+    "@uifabric/merge-styles" "^7.8.9"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/styling" "^7.10.22"
+    "@uifabric/utilities" "^7.15.2"
+    tslib "^1.10.0"
 
 "@uifabric/icons@^7.3.0":
   version "7.3.0"
@@ -3623,13 +3685,14 @@
     "@uifabric/styling" "^7.7.1"
     tslib "^1.7.1"
 
-"@uifabric/merge-styles@^7.5.1", "@uifabric/merge-styles@^7.5.2":
-  version "7.5.2"
-  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.5.2.tgz#78a0196d701b9e5444b2a51e2e55c780ce2d4967"
-  integrity sha512-/YvYO45NSLpf85nxHaLVP4XrOC+yolSwrMewjcAyCNoTZcx70j4h69xSAWxCIijyebWndE5Yujklluby+8aAwA==
+"@uifabric/icons@^7.3.21", "@uifabric/icons@^7.3.4":
+  version "7.3.21"
+  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-7.3.21.tgz#5370fa782c15f7d90145d95e8d1a416dec15e202"
+  integrity sha512-x3xfwGxS9ysE8DvdbGnxoCxqr3FszNJPqnJkKQlVRzWQJElT8pFQxeIdyYyu/8o7csSKJSkbirx3chyG7kUQGA==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/styling" "^7.10.22"
+    tslib "^1.10.0"
 
 "@uifabric/merge-styles@^7.6.0":
   version "7.6.0"
@@ -3639,22 +3702,22 @@
     "@uifabric/set-version" "^7.0.2"
     tslib "^1.7.1"
 
-"@uifabric/merge-styles@^7.8.0", "@uifabric/merge-styles@^7.8.1":
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.8.1.tgz#b3973eb6942bf5fd1653fb8c2ae349343bacd30d"
-  integrity sha512-DJBXNsYfrYQ3wCjOE197JqXTkqwfPlGJhQkhYMBwO76ovKBQyJxT8m6NL8og5F9blnIBdCJPrvRUz/21/WlUGg==
+"@uifabric/merge-styles@^7.8.9":
+  version "7.8.9"
+  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.8.9.tgz#0abb3a0248c504f9643f544026fd7130b0239ed3"
+  integrity sha512-k+Imlki6j0TnlwI4RV3+QAaC+hi7an834aZCTUwhUgb3BTf7SY9Vq3vpFybkrEgshO3Etj5tI2MM0JH0pretkg==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.8"
+    tslib "^1.10.0"
 
-"@uifabric/react-hooks@^7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/react-hooks/-/react-hooks-7.0.1.tgz#aa0e9f17e13def6763de7671bd82210261222591"
-  integrity sha512-cIr/ToLvc48D7A+XJrH/rHmSa/YmonvyFGHykFqHKiFSYiGKvc50GIyRJ/gkOUDuaaYVThWRwBQNOIMr3iFCYA==
+"@uifabric/react-hooks@^7.0.23":
+  version "7.0.23"
+  resolved "https://registry.yarnpkg.com/@uifabric/react-hooks/-/react-hooks-7.0.23.tgz#56cc4d71b72c91f21b2aefaa657b577f3c89386d"
+  integrity sha512-5BzidQD/bqSQCH7lCxLWBIRvHjSqbPHm7c+N9InqR/KvYnsCQGx+np0ChDfn9xT+ZlXof4dfbjFzsTHtm+FijQ==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/utilities" "^7.0.10"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/utilities" "^7.15.2"
+    tslib "^1.10.0"
 
 "@uifabric/set-version@^7.0.2":
   version "7.0.2"
@@ -3663,7 +3726,25 @@
   dependencies:
     tslib "^1.7.1"
 
-"@uifabric/styling@7.7.1", "@uifabric/styling@^7.7.1":
+"@uifabric/set-version@^7.0.8":
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-7.0.8.tgz#9989bd3165189a52fa27c0ce66d27954293c6400"
+  integrity sha512-wSg8L88kUmvvwmB4o/YB7xZFohi+f4TejX7cO0D6hPM7pvFm2AC/l661uUFbkR7fZIzw4i+fFA7oEybyRtbynw==
+  dependencies:
+    tslib "^1.10.0"
+
+"@uifabric/styling@^7.10.22", "@uifabric/styling@^7.10.4", "@uifabric/styling@^7.7.4":
+  version "7.10.22"
+  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.10.22.tgz#8740a6a3565b22545a18ea581efd5d974ee61fdd"
+  integrity sha512-PC+wx8gigK10nMd+OSF2oOEZ4acT67w+I8EosUsCVCCe/tbyOk37ma7if+R7mU8PkLyFLhLfJuobYEjw95yx1w==
+  dependencies:
+    "@microsoft/load-themed-styles" "^1.10.26"
+    "@uifabric/merge-styles" "^7.8.9"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/utilities" "^7.15.2"
+    tslib "^1.10.0"
+
+"@uifabric/styling@^7.7.1":
   version "7.7.1"
   resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.7.1.tgz#d554a22b92a6166e5fa04eae6a8228ec5bd9a175"
   integrity sha512-w2Kd0aTdqGi6O8z3srsQgaIMwGwllQG1/HOoFiqtDR6jXj8oFKKpjnlFFhRG5Wu4CAVftBPo4gn5Cfh3+JR2Bw==
@@ -3674,38 +3755,6 @@
     "@uifabric/utilities" "^7.1.0"
     tslib "^1.7.1"
 
-"@uifabric/styling@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.6.2.tgz#b9aa18715558473cb789bb4dbfb96c2465652f9c"
-  integrity sha512-2l4N8dpHk4kHj+EKRuLrguLJcgwrXWsn3W5cbP34C9q6xrN8ShmZE3ce8TBzT1kLPtjkrUpiJXtV5qqfc/uNXg==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/merge-styles" "^7.5.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/utilities" "^7.0.9"
-    tslib "^1.7.1"
-
-"@uifabric/styling@^7.7.2", "@uifabric/styling@^7.7.3":
-  version "7.7.3"
-  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.7.3.tgz#593dd308dbf4425c1baa9678a553c8494d884448"
-  integrity sha512-peAAXEfqIXHD1a4GnAA5hs4rv/jgevN2EwJKdlmGv0ecK9kaXl/sgEQEcniV0iBlJffy2OnWRdi8YlZygUxFmA==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/merge-styles" "^7.8.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/utilities" "^7.5.0"
-    tslib "^1.7.1"
-
-"@uifabric/utilities@^7.0.10", "@uifabric/utilities@^7.0.9":
-  version "7.0.10"
-  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.0.10.tgz#cadbc6689c417ec01afc029a2894027bd80215dc"
-  integrity sha512-M5phvmW+cfy/IEPVWR7mWqNj4qzCtRMW1Xj84rxjHdL6ReNcW35kCvlvH7X3Ygid1En7e/jWK/f0fssUsh9EIA==
-  dependencies:
-    "@uifabric/merge-styles" "^7.5.2"
-    "@uifabric/set-version" "^7.0.2"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
-
 "@uifabric/utilities@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.1.0.tgz#5590663039316e05979421c6a1e448b7090a418e"
@@ -3716,24 +3765,24 @@
     prop-types "^15.5.10"
     tslib "^1.7.1"
 
-"@uifabric/utilities@^7.5.0", "@uifabric/utilities@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.6.0.tgz#e0a7be2969792f7ef15907744e72bdebbf5ff024"
-  integrity sha512-umIN2M4Ue1FjqmRv2JVvzXljA/eG5QwoyNi8u2BVfJKXSi2qZ82ey3btV4lCdL2kUo25oXRM1qvaK7416Stdrg==
+"@uifabric/utilities@^7.15.2":
+  version "7.15.2"
+  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.15.2.tgz#5a138152b211eb9f1fb719b5d952ccb39799bd91"
+  integrity sha512-Oag13b000gRpe5/9EhkvSyHtYWtCD9n5wmjLwl8ncKo6pcP75iByGLBleVALYQbjdV1fGJEg6wr7JlCsWVviKw==
   dependencies:
-    "@uifabric/merge-styles" "^7.8.1"
-    "@uifabric/set-version" "^7.0.2"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
+    "@uifabric/merge-styles" "^7.8.9"
+    "@uifabric/set-version" "^7.0.8"
+    prop-types "^15.7.2"
+    tslib "^1.10.0"
 
-"@uifabric/variants@^7.0.5":
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/@uifabric/variants/-/variants-7.0.5.tgz#67a5301a8c36bcb2e46c7d86929d58184e37cc2d"
-  integrity sha512-EqjNymAipTuwvsfS3dEU3+brVz0wyBUa2LQsc+L8gU/MNj4lCnrTi34pHRZrbw6L6Lus/YUg8lCGuXZ5hIHj5Q==
+"@uifabric/variants@^7.1.33":
+  version "7.1.33"
+  resolved "https://registry.yarnpkg.com/@uifabric/variants/-/variants-7.1.33.tgz#4f740315b18e9c23d178ed0b933b07a9db6c061b"
+  integrity sha512-fXQ7nipIOvy1alDasbog2zC1sKa7Q8MlZAK1ziVGam5gOyRXwvr/9qz2qMCNZkC/LRMK56G9m2uxgTVpqWV6Sw==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    office-ui-fabric-react "^7.29.2"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.8"
+    office-ui-fabric-react "^7.105.2"
+    tslib "^1.10.0"
 
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
@@ -3924,11 +3973,6 @@ accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-dynamic-import@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
-  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
-
 acorn-globals@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.0.tgz#e3b6f8da3c1552a95ae627571f7dd6923bb54103"
@@ -3952,7 +3996,7 @@ acorn@^5.5.3:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.1, acorn@^6.0.5:
+acorn@^6.0.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
   integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==
@@ -4034,7 +4078,7 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@^6.1.0, ajv@^6.5.5, ajv@^6.7.0, ajv@^6.9.1:
+ajv@^6.1.0, ajv@^6.5.5, ajv@^6.9.1:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
   integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==
@@ -4133,6 +4177,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 ansicolors@~0.3.2:
   version "0.3.2"
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
@@ -4569,6 +4621,19 @@ babel-jest@^24.5.0:
     chalk "^2.4.2"
     slash "^2.0.0"
 
+babel-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
+  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+  dependencies:
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.9.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
+
 babel-loader@8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
@@ -4683,6 +4748,13 @@ babel-plugin-jest-hoist@^24.3.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-jest-hoist@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
+  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
+
 babel-plugin-macros@2.5.0, babel-plugin-macros@^2.0.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.0.tgz#01f4d3b50ed567a67b80a30b9da066e94f4097b6"
@@ -4737,6 +4809,14 @@ babel-preset-jest@^24.0.0, babel-preset-jest@^24.3.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.3.0"
 
+babel-preset-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
+  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
+  dependencies:
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^24.9.0"
+
 babel-preset-react-app@^7.0.1:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-7.0.2.tgz#d01ae973edc93b9f1015cb0236dd55889a584308"
@@ -4870,7 +4950,7 @@ bluebird@^3.5.0:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
   integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
 
-bluebird@^3.5.1, bluebird@^3.5.3:
+bluebird@^3.5.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
   integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
@@ -5205,26 +5285,6 @@ bytes@3.1.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
-cacache@^11.0.2:
-  version "11.3.2"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
-  integrity sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==
-  dependencies:
-    bluebird "^3.5.3"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
-    glob "^7.1.3"
-    graceful-fs "^4.1.15"
-    lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.2"
-    ssri "^6.0.1"
-    unique-filename "^1.1.1"
-    y18n "^4.0.0"
-
 cacache@^12.0.2:
   version "12.0.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
@@ -5461,6 +5521,14 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -5548,13 +5616,6 @@ chownr@^1.1.2:
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
   integrity sha1-Qtg31SOWiNVfMDADpQgjD6ZycUI=
 
-chrome-trace-event@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
-  integrity sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==
-  dependencies:
-    tslib "^1.9.0"
-
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -5770,11 +5831,6 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
-codemirror@^5.44.0:
-  version "5.45.0"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.45.0.tgz#db5ebbb3bf44028c684053f3954d011efcec27ad"
-  integrity sha512-c19j644usCE8gQaXa0jqn2B/HN9MnB2u6qPIrrhrMkB+QAP42y8G4QnTwuwbVSoUS1jEl7JU9HZMGhCDL0nsAw==
-
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -5790,12 +5846,19 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -6139,7 +6202,7 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.4.0, core-js@^2.5.7:
+core-js@^2.4.0:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
   integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
@@ -7241,11 +7304,6 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^2.0.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -7398,6 +7456,16 @@ diff-sequences@^24.3.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
   integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw==
 
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+
+diff-sequences@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.1.0.tgz#fd29a46f1c913fd66c22645dc75bffbe43051f32"
+  integrity sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw==
+
 diff@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -7965,7 +8033,7 @@ eslint-scope@3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-scope@^4.0.0, eslint-scope@^4.0.3:
+eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
   integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
@@ -8217,6 +8285,18 @@ expect@^24.5.0:
     jest-message-util "^24.5.0"
     jest-regex-util "^24.3.0"
 
+expect@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
+  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-styles "^3.2.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.9.0"
+
 express-session@^1.17.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/express-session/-/express-session-1.17.0.tgz#9b50dbb5e8a03c3537368138f072736150b7f9b3"
@@ -8645,16 +8725,6 @@ findup-sync@3.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
-findup-sync@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
-  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
-  dependencies:
-    detect-file "^1.0.0"
-    is-glob "^3.1.0"
-    micromatch "^3.0.4"
-    resolve-dir "^1.0.1"
-
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -9323,6 +9393,11 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-symbol-support-x@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
@@ -9508,6 +9583,11 @@ html-entities@^1.2.1:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
+html-escaper@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.1.tgz#beed86b5d2b921e92533aa11bce6d8e3b583dee7"
+  integrity sha512-hNX23TjWwD3q56HpWjUHOKj1+4KKlnjv9PcmBUYKVpga+2cnb9nDx/B1o0yO4n+RZXZdiNxzx6B24C9aNMTkkQ==
+
 html-minifier@^3.2.3:
   version "3.5.21"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
@@ -9827,11 +9907,6 @@ indexes-of@^1.0.1:
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
-  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
-
 infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@@ -9913,7 +9988,7 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-interpret@1.2.0, interpret@^1.1.0:
+interpret@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
@@ -10421,6 +10496,13 @@ istanbul-reports@^2.1.1:
   dependencies:
     handlebars "^4.1.0"
 
+istanbul-reports@^2.2.6:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
+  integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
+  dependencies:
+    html-escaper "^2.0.0"
+
 isurl@^1.0.0-alpha5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
@@ -10438,6 +10520,15 @@ jest-changed-files@^24.5.0:
     execa "^1.0.0"
     throat "^4.0.0"
 
+jest-changed-files@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    execa "^1.0.0"
+    throat "^4.0.0"
+
 jest-cli@^24.0.0, jest-cli@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.5.0.tgz#598139d3446d1942fb7dc93944b9ba766d756d4b"
@@ -10457,6 +10548,25 @@ jest-cli@^24.0.0, jest-cli@^24.5.0:
     realpath-native "^1.1.0"
     yargs "^12.0.2"
 
+jest-cli@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
+  dependencies:
+    "@jest/core" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^13.3.0"
+
 jest-config@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.5.0.tgz#404d1bc6bb81aed6bd1890d07e2dca9fbba2e121"
@@ -10479,6 +10589,29 @@ jest-config@^24.5.0:
     pretty-format "^24.5.0"
     realpath-native "^1.1.0"
 
+jest-config@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    babel-jest "^24.9.0"
+    chalk "^2.0.1"
+    glob "^7.1.1"
+    jest-environment-jsdom "^24.9.0"
+    jest-environment-node "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.9.0"
+    realpath-native "^1.1.0"
+
 jest-diff@^24.0.0, jest-diff@^24.7.0:
   version "24.7.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.7.0.tgz#5d862899be46249754806f66e5729c07fcb3580f"
@@ -10489,6 +10622,16 @@ jest-diff@^24.0.0, jest-diff@^24.7.0:
     jest-get-type "^24.3.0"
     pretty-format "^24.7.0"
 
+jest-diff@^24.3.0, jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-diff@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.5.0.tgz#a2d8627964bb06a91893c0fbcb28ab228c257652"
@@ -10499,6 +10642,16 @@ jest-diff@^24.5.0:
     jest-get-type "^24.3.0"
     pretty-format "^24.5.0"
 
+jest-diff@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.1.0.tgz#58b827e63edea1bc80c1de952b80cec9ac50e1ad"
+  integrity sha512-nepXgajT+h017APJTreSieh4zCqnSHEJ1iT8HDlewu630lSJ4Kjjr9KNzm+kzGwwcpsDE6Snx1GJGzzsefaEHw==
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.1.0"
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
+
 jest-docblock@^24.3.0:
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.3.0.tgz#b9c32dac70f72e4464520d2ba4aec02ab14db5dd"
@@ -10545,6 +10698,17 @@ jest-each@^24.5.0:
     jest-util "^24.5.0"
     pretty-format "^24.5.0"
 
+jest-each@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
+  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-environment-jsdom@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.5.0.tgz#1c3143063e1374100f8c2723a8b6aad23b6db7eb"
@@ -10557,6 +10721,18 @@ jest-environment-jsdom@^24.5.0:
     jest-util "^24.5.0"
     jsdom "^11.5.1"
 
+jest-environment-jsdom@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
+  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+    jsdom "^11.5.1"
+
 jest-environment-node@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.5.0.tgz#763eebdf529f75b60aa600c6cf8cb09873caa6ab"
@@ -10568,6 +10744,17 @@ jest-environment-node@^24.5.0:
     jest-mock "^24.5.0"
     jest-util "^24.5.0"
 
+jest-environment-node@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
+  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+
 jest-get-type@^24.3.0:
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.3.0.tgz#582cfd1a4f91b5cdad1d43d2932f816d543c65da"
@@ -10578,6 +10765,16 @@ jest-get-type@^24.8.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.8.0.tgz#a7440de30b651f5a70ea3ed7ff073a32dfe646fc"
   integrity sha512-RR4fo8jEmMD9zSz2nLbs2j0zvPpk/KCEz3a62jJWbd2ayNo0cb+KFRxPHVhE4ZmgGJEQp0fosmNz84IfqM8cMQ==
 
+jest-get-type@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
+
+jest-get-type@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.1.0.tgz#1cfe5fc34f148dc3a8a3b7275f6b9ce9e2e8a876"
+  integrity sha512-yWkBnT+5tMr8ANB6V+OjmrIJufHtCAqI5ic2H40v+tRqxDmE0PGnIiTyvRWFOMtmVHYpwRqyazDbTnhpjsGvLw==
+
 jest-haste-map@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.5.0.tgz#3f17d0c548b99c0c96ed2893f9c0ccecb2eb9066"
@@ -10593,6 +10790,25 @@ jest-haste-map@^24.5.0:
     micromatch "^3.1.10"
     sane "^4.0.3"
 
+jest-haste-map@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    anymatch "^2.0.0"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.9.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
 jest-jasmine2@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.5.0.tgz#e6af4d7f73dc527d007cca5a5b177c0bcc29d111"
@@ -10615,6 +10831,28 @@ jest-jasmine2@^24.5.0:
     pretty-format "^24.5.0"
     throat "^4.0.0"
 
+jest-jasmine2@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    co "^4.6.0"
+    expect "^24.9.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+    throat "^4.0.0"
+
 jest-junit@^6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-6.4.0.tgz#23e15c979fa6338afde46f2d2ac2a6b7e8cf0d9e"
@@ -10632,6 +10870,14 @@ jest-leak-detector@^24.5.0:
   dependencies:
     pretty-format "^24.5.0"
 
+jest-leak-detector@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
+  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
+  dependencies:
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-matcher-utils@^24.0.0:
   version "24.7.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.7.0.tgz#bbee1ff37bc8b2e4afcaabc91617c1526af4bcd4"
@@ -10652,6 +10898,16 @@ jest-matcher-utils@^24.5.0:
     jest-get-type "^24.3.0"
     pretty-format "^24.5.0"
 
+jest-matcher-utils@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-message-util@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.5.0.tgz#181420a65a7ef2e8b5c2f8e14882c453c6d41d07"
@@ -10666,6 +10922,20 @@ jest-message-util@^24.5.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^2.0.1"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
+    stack-utils "^1.0.1"
+
 jest-mock@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.5.0.tgz#976912c99a93f2a1c67497a9414aa4d9da4c7b76"
@@ -10673,6 +10943,13 @@ jest-mock@^24.5.0:
   dependencies:
     "@jest/types" "^24.5.0"
 
+jest-mock@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
+  dependencies:
+    "@jest/types" "^24.9.0"
+
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
@@ -10683,6 +10960,11 @@ jest-regex-util@^24.3.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.3.0.tgz#d5a65f60be1ae3e310d5214a0307581995227b36"
   integrity sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg==
 
+jest-regex-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
+
 jest-resolve-dependencies@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.5.0.tgz#1a0dae9cdd41349ca4a84148b3e78da2ba33fd4b"
@@ -10692,6 +10974,15 @@ jest-resolve-dependencies@^24.5.0:
     jest-regex-util "^24.3.0"
     jest-snapshot "^24.5.0"
 
+jest-resolve-dependencies@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
+  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.9.0"
+
 jest-resolve@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.5.0.tgz#8c16ba08f60a1616c3b1cd7afb24574f50a24d04"
@@ -10703,6 +10994,17 @@ jest-resolve@^24.5.0:
     jest-pnp-resolver "^1.2.1"
     realpath-native "^1.1.0"
 
+jest-resolve@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
+  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    browser-resolve "^1.11.3"
+    chalk "^2.0.1"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
 jest-runner@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.5.0.tgz#9be26ece4fd4ab3dfb528b887523144b7c5ffca8"
@@ -10728,6 +11030,31 @@ jest-runner@^24.5.0:
     source-map-support "^0.5.6"
     throat "^4.0.0"
 
+jest-runner@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
+  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.4.2"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-leak-detector "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    source-map-support "^0.5.6"
+    throat "^4.0.0"
+
 jest-runtime@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.5.0.tgz#3a76e0bfef4db3896d5116e9e518be47ba771aa2"
@@ -10757,11 +11084,45 @@ jest-runtime@^24.5.0:
     strip-bom "^3.0.0"
     yargs "^12.0.2"
 
+jest-runtime@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
+  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^13.3.0"
+
 jest-serializer@^24.4.0:
   version "24.4.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.4.0.tgz#f70c5918c8ea9235ccb1276d232e459080588db3"
   integrity sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q==
 
+jest-serializer@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
+
 jest-snapshot@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.5.0.tgz#e5d224468a759fd19e36f01217aac912f500f779"
@@ -10780,6 +11141,25 @@ jest-snapshot@^24.5.0:
     pretty-format "^24.5.0"
     semver "^5.5.0"
 
+jest-snapshot@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    expect "^24.9.0"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^24.9.0"
+    semver "^6.2.0"
+
 jest-util@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.5.0.tgz#9d9cb06d9dcccc8e7cc76df91b1635025d7baa84"
@@ -10799,6 +11179,24 @@ jest-util@^24.5.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
+jest-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/source-map" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    callsites "^3.0.0"
+    chalk "^2.0.1"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+
 jest-validate@^24.0.0:
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.8.0.tgz#624c41533e6dfe356ffadc6e2423a35c2d3b4849"
@@ -10823,6 +11221,18 @@ jest-validate@^24.5.0:
     leven "^2.1.0"
     pretty-format "^24.5.0"
 
+jest-validate@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    camelcase "^5.3.1"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    leven "^3.1.0"
+    pretty-format "^24.9.0"
+
 jest-watcher@^24.5.0:
   version "24.5.0"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.5.0.tgz#da7bd9cb5967e274889b42078c8f501ae1c47761"
@@ -10837,6 +11247,19 @@ jest-watcher@^24.5.0:
     jest-util "^24.5.0"
     string-length "^2.0.0"
 
+jest-watcher@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    jest-util "^24.9.0"
+    string-length "^2.0.0"
+
 jest-worker@^24.4.0:
   version "24.4.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.4.0.tgz#fbc452b0120bb5c2a70cdc88fa132b48eeb11dd0"
@@ -10846,7 +11269,7 @@ jest-worker@^24.4.0:
     merge-stream "^1.0.1"
     supports-color "^6.1.0"
 
-jest-worker@^24.9.0:
+jest-worker@^24.6.0, jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha1-Xb/bWy0yLphWeJgjipaXvM5ns+U=
@@ -10870,6 +11293,14 @@ jest@^24.5.0:
     import-local "^2.0.0"
     jest-cli "^24.5.0"
 
+jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
+  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
+  dependencies:
+    import-local "^2.0.0"
+    jest-cli "^24.9.0"
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -11243,6 +11674,11 @@ leven@^2.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
   integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA=
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -11405,7 +11841,7 @@ loader-fs-cache@^1.0.2:
     find-cache-dir "^0.1.1"
     mkdirp "0.5.1"
 
-loader-runner@^2.3.0, loader-runner@^2.4.0:
+loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
@@ -11595,11 +12031,6 @@ lodash.toarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
   integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
-
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -11878,7 +12309,7 @@ memoize-one@^4.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
   integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
 
-memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
@@ -12158,7 +12589,7 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
-mkdirp@0.5.1, mkdirp@0.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@0.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -12218,10 +12649,10 @@ moment@2.24.0, "moment@>= 2.9.0", moment@>=2.14.0:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
-monaco-editor-core@0.17.0, monaco-editor-core@^0.17.0:
-  version "0.17.0"
-  resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/monaco-editor-core/-/monaco-editor-core-0.17.0.tgz#8d2b7f7e02ac68f68eecc881d7a26457cbc09b49"
-  integrity sha1-jSt/fgKsaPaO7MiB16JkV8vAm0k=
+monaco-editor@^0.19.0:
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.19.3.tgz#1c994b3186c00650dbcd034d5370d46bf56c0663"
+  integrity sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg==
 
 monaco-languageclient@^0.10.0:
   version "0.10.2"
@@ -12294,11 +12725,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nanoid@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.0.1.tgz#deb55cac196e3f138071911dabbc3726eb048864"
-  integrity sha512-k1u2uemjIGsn25zmujKnotgniC/gxQ9sdegdezeDiKdkDW56THUMqlz3urndKCXJxA6yPzSZbXx/QCMe/pxqsA==
-
 nanoid@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.6.tgz#0665418f692e54cf44f34d4010761f3240a03314"
@@ -12385,35 +12811,6 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
-node-libs-browser@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.0.tgz#c72f60d9d46de08a940dedbb25f3ffa2f9bbaa77"
-  integrity sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.0"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "0.0.4"
-
 node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
@@ -12459,6 +12856,17 @@ node-notifier@^5.2.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
+node-notifier@^5.4.2:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
 node-pre-gyp@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
@@ -12758,55 +13166,22 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
-office-ui-fabric-react@7.37.1:
-  version "7.37.1"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.37.1.tgz#0d8ffeb93bb7d2cfa2c0bddb2c68fa8594a8e814"
-  integrity sha512-yZM0Qz3DIItmagUwxrXwY9HZSBRbymjj3rBpwGoN1JyCzvSuhayV2GeibRva8Jw6ucICPzFFPAtld15GMjlTYA==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/example-data" "^7.0.1"
-    "@uifabric/foundation" "^7.4.1"
-    "@uifabric/icons" "^7.3.0"
-    "@uifabric/merge-styles" "^7.6.0"
-    "@uifabric/react-hooks" "^7.0.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.7.1"
-    "@uifabric/utilities" "^7.1.0"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
-
-office-ui-fabric-react@7.62.0:
-  version "7.62.0"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.62.0.tgz#3260eaf43d5bfbdefc53fc9ade0470dc51b37412"
-  integrity sha512-d3UoiBIAdjQeVgxOXCTg97cS8RfasXg5xXgbZBYPv8xv7HxsZ1zabsVqXMl+5TA/vX7rb9hSn6JMscaVWwWaUA==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/foundation" "^7.5.0"
-    "@uifabric/icons" "^7.3.0"
-    "@uifabric/merge-styles" "^7.8.1"
-    "@uifabric/react-hooks" "^7.0.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.7.3"
-    "@uifabric/utilities" "^7.6.0"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
-
-office-ui-fabric-react@^7.29.2:
-  version "7.35.0"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.35.0.tgz#7132cf94bffcf9a9da310bff0e48f63717ae00d9"
-  integrity sha512-0pk3nYxEyzVl/kATmTxVrnBiUSYT1c/0yEl3R+xzguwEU+lqvWT7gT5YyesX5LuDGCQ+GFMhnKCTveZayt4ktQ==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/example-data" "^7.0.1"
-    "@uifabric/foundation" "^7.4.1"
-    "@uifabric/icons" "^7.2.1"
-    "@uifabric/merge-styles" "^7.5.2"
-    "@uifabric/react-hooks" "^7.0.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.6.2"
-    "@uifabric/utilities" "^7.0.10"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
+office-ui-fabric-react@^7.105.2, office-ui-fabric-react@^7.71.0, office-ui-fabric-react@^7.88.1:
+  version "7.105.2"
+  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.105.2.tgz#98df96f1b08d2eb61d640856313a807373837a63"
+  integrity sha512-SkSaCKSBHd1/SjeQ0UWQaa1Y3uHqSIis67xFNi5WKOeELMvYG+a/4FkosSPJNtSXcRFgZGEK2f0N6MD8zXAnCA==
+  dependencies:
+    "@fluentui/react-focus" "^7.1.9"
+    "@microsoft/load-themed-styles" "^1.10.26"
+    "@uifabric/foundation" "^7.5.22"
+    "@uifabric/icons" "^7.3.21"
+    "@uifabric/merge-styles" "^7.8.9"
+    "@uifabric/react-hooks" "^7.0.23"
+    "@uifabric/set-version" "^7.0.8"
+    "@uifabric/styling" "^7.10.22"
+    "@uifabric/utilities" "^7.15.2"
+    prop-types "^15.7.2"
+    tslib "^1.10.0"
 
 on-finished@~2.3.0:
   version "2.3.0"
@@ -13220,11 +13595,6 @@ password-prompt@^1.0.7:
     ansi-escapes "^3.1.0"
     cross-spawn "^6.0.5"
 
-path-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
-  integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
-
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
@@ -13448,7 +13818,7 @@ pnp-webpack-plugin@1.5.0:
   dependencies:
     ts-pnp "^1.1.2"
 
-portfinder@^1.0.24, portfinder@^1.0.25:
+portfinder@^1.0.25:
   version "1.0.25"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
   integrity sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==
@@ -14203,6 +14573,16 @@ pretty-format@^24.8.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty-format@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
+  integrity sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==
+  dependencies:
+    "@jest/types" "^25.1.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -14255,7 +14635,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -14503,11 +14883,6 @@ react-app-polyfill@^0.2.1:
     raf "3.4.1"
     whatwg-fetch "3.0.0"
 
-react-codemirror2@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-5.1.0.tgz#62de4460178adea40eb52eabf7491669bf3794b8"
-  integrity sha512-Cksbgbviuf2mJfMyrKmcu7ycK6zX/ukuQO8dvRZdFWqATf5joalhjFc6etnBdGCcPA2LbhIwz+OPnQxLN/j1Fw==
-
 react-dev-utils@^7.0.3:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-7.0.5.tgz#cb95375d01ae71ca27b3c7616006ef7a77d14e8e"
@@ -14538,15 +14913,15 @@ react-dev-utils@^7.0.3:
     strip-ansi "5.0.0"
     text-table "0.2.0"
 
-react-dom@16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
-  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
+react-dom@16.13.0:
+  version "16.13.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
+  integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.15.0"
+    scheduler "^0.19.0"
 
 react-error-boundary@^1.2.5:
   version "1.2.5"
@@ -14563,6 +14938,11 @@ react-frame-component@^4.0.2:
   resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.0.tgz#bef04039c6af687314f27b20ef9893d85eefe3e6"
   integrity sha512-2HkO0iccSjd+xRA+aOxq7Mm50WUmCjdmhbQhOiG6gQTChaW//Y3mdkGeUfVA3YkXvDVbigRDvJd/VTUlqaZWSw==
 
+react-is@^16.12.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-is@^16.6.0, react-is@^16.8.4:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
@@ -14609,10 +14989,10 @@ react-timeago@^4.4.0:
   resolved "https://botbuilder.myget.org/F/botbuilder-tools-daily/npm/react-timeago/-/react-timeago-4.4.0.tgz#4520dd9ba63551afc4d709819f52b14b9343ba2b"
   integrity sha1-RSDdm6Y1Ua/E1wmBn1KxS5NDuis=
 
-react@16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
-  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
+react@16.13.0:
+  version "16.13.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
+  integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -15267,10 +15647,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
-  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
+scheduler@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -15336,7 +15716,7 @@ semver@^6.1.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b"
   integrity sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==
 
-semver@^6.1.2, semver@^6.3.0:
+semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -15379,11 +15759,6 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-javascript@^1.4.0:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
-  integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==
-
 serialize-javascript@^1.7.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
@@ -15715,14 +16090,6 @@ source-map-support@^0.5.6:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@~0.5.10:
-  version "0.5.11"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.11.tgz#efac2ce0800355d026326a0ca23e162aeac9a4e2"
-  integrity sha512-//sajEx/fGL3iw6fltKMdPvy8kL3kJ2O3iuYlRoT3k9Kb4BjOoZ+BZzaNHeuaruSt+Kf3Zk9tnfAQg9/AJqUVQ==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -16193,6 +16560,13 @@ supports-color@^4.5.0:
   dependencies:
     has-flag "^2.0.0"
 
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-hyperlinks@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz#71daedf36cc1060ac5100c351bb3da48c29c0ef7"
@@ -16256,11 +16630,6 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tapable@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"
-  integrity sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==
-
 tar-stream@^1.5.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
@@ -16315,20 +16684,6 @@ terser-webpack-plugin@2.2.1:
     terser "^4.3.9"
     webpack-sources "^1.4.3"
 
-terser-webpack-plugin@^1.1.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz#3f98bc902fac3e5d0de730869f50668561262ec8"
-  integrity sha512-GOK7q85oAb/5kE12fMuLdn2btOS9OBZn4VsecpHDywoUC/jLhSAKOiYo0ezx7ss2EXPMzyEWFoE0s1WLE+4+oA==
-  dependencies:
-    cacache "^11.0.2"
-    find-cache-dir "^2.0.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^1.4.0"
-    source-map "^0.6.1"
-    terser "^3.16.1"
-    webpack-sources "^1.1.0"
-    worker-farm "^1.5.2"
-
 terser-webpack-plugin@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
@@ -16344,15 +16699,6 @@ terser-webpack-plugin@^1.4.1:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^3.16.1:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
-  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
-  dependencies:
-    commander "^2.19.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.10"
-
 terser@^4.1.2:
   version "4.3.9"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.9.tgz#e4be37f80553d02645668727777687dad26bbca8"
@@ -16597,6 +16943,22 @@ ts-jest@^24.1.0:
     semver "^5.5"
     yargs-parser "10.x"
 
+ts-jest@^24.2.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.3.0.tgz#b97814e3eab359ea840a1ac112deae68aa440869"
+  integrity sha512-Hb94C/+QRIgjVZlJyiWwouYUF+siNJHJHknyspaOcZ+OQAIdFG/UrdQVXw/0B8Z3No34xkUXZJpOTy9alOWdVQ==
+  dependencies:
+    bs-logger "0.x"
+    buffer-from "1.x"
+    fast-json-stable-stringify "2.x"
+    json5 "2.x"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    mkdirp "0.x"
+    resolve "1.x"
+    semver "^5.5"
+    yargs-parser "10.x"
+
 ts-loader@^5.3.3:
   version "5.4.5"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-5.4.5.tgz#a0c1f034b017a9344cef0961bfd97cc192492b8b"
@@ -16657,26 +17019,6 @@ ts-pnp@^1.1.2:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"
   integrity sha512-1J/vefLC+BWSo+qe8OnJQfWTYRS6ingxjwqmHMqaMxXMj7kFtKLgAaYW3JeX3mktjgUL+etlU8/B4VUAUI9QGw==
 
-tsconfig-paths-webpack-plugin@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.2.0.tgz#6e70bd42915ad0efb64d3385163f0c1270f3e04d"
-  integrity sha512-S/gOOPOkV8rIL4LurZ1vUdYCVgo15iX9ZMJ6wx6w2OgcpT/G4wMyHB6WM+xheSqGMrWKuxFul+aXpCju3wmj/g==
-  dependencies:
-    chalk "^2.3.0"
-    enhanced-resolve "^4.0.0"
-    tsconfig-paths "^3.4.0"
-
-tsconfig-paths@^3.4.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.8.0.tgz#4e34202d5b41958f269cf56b01ed95b853d59f72"
-  integrity sha512-zZEYFo4sjORK8W58ENkRn9s+HmQFkkwydDG7My5s/fnfr2YYCaiyXe/HBUcIgU8epEKOXwiahOO+KZYjiXlWyQ==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    deepmerge "^2.0.1"
-    json5 "^1.0.1"
-    minimist "^1.2.0"
-    strip-bom "^3.0.0"
-
 tslib@^1.10.0, tslib@^1.9.2, tslib@^1.9.3, tslib@~1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@@ -17104,11 +17446,6 @@ v8-compile-cache@2.0.3:
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
   integrity sha1-APdJTSritojP4omd9u0sVL75Hb4=
 
-v8-compile-cache@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.2.tgz#a428b28bb26790734c4fc8bc9fa106fccebf6a6c"
-  integrity sha512-1wFuMUIM16MDJRCrpbpuEPTUGmM5QMUg0cr3KFwra2XgOgFcPGDQHDh3CszSCD2Zewc/dh/pamNEW8CbfDebUw==
-
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
@@ -17168,13 +17505,6 @@ vfile@^3.0.0, vfile@^3.0.1:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
-vm-browserify@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
-  integrity sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=
-  dependencies:
-    indexof "0.0.1"
-
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -17300,7 +17630,7 @@ wait-for-expect@^3.0.0:
   resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.1.tgz#ec204a76b0038f17711e575720aaf28505ac7185"
   integrity sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==
 
-walker@~1.0.5:
+walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
   integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
@@ -17314,7 +17644,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^1.5.0, watchpack@^1.6.0:
+watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
   integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
@@ -17340,23 +17670,6 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-cli@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.0.tgz#55c8a74cae1e88117f9dda3a801c7272e93ca318"
-  integrity sha512-t1M7G4z5FhHKJ92WRKwZ1rtvi7rHc0NZoZRbSkol0YKl4HvcC8+DsmGDmK7MmZxHSAetHagiOsjOB6MmzC2TUw==
-  dependencies:
-    chalk "^2.4.1"
-    cross-spawn "^6.0.5"
-    enhanced-resolve "^4.1.0"
-    findup-sync "^2.0.0"
-    global-modules "^1.0.0"
-    import-local "^2.0.0"
-    interpret "^1.1.0"
-    loader-utils "^1.1.0"
-    supports-color "^5.5.0"
-    v8-compile-cache "^2.0.2"
-    yargs "^12.0.5"
-
 webpack-cli@^3.3.2, webpack-cli@^3.3.8:
   version "3.3.10"
   resolved "https://botbuilder.myget.org/F/botbuilder-declarative/npm/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
@@ -17463,45 +17776,6 @@ webpack-dev-server@^3.8.0:
     ws "^6.2.1"
     yargs "12.0.5"
 
-webpack-dev-server@^3.8.2:
-  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.8.2.tgz#3292427bf6510da9a3ac2d500b924a4197667ff9"
-  integrity sha512-0xxogS7n5jHDQWy0WST0q6Ykp7UGj4YvWh+HVN71JoE7BwPxMZrwgraBvmdEMbDVMBzF0u+mEzn8TQzBm5NYJQ==
-  dependencies:
-    ansi-html "0.0.7"
-    bonjour "^3.5.0"
-    chokidar "^2.1.8"
-    compression "^1.7.4"
-    connect-history-api-fallback "^1.6.0"
-    debug "^4.1.1"
-    del "^4.1.1"
-    express "^4.17.1"
-    html-entities "^1.2.1"
-    http-proxy-middleware "0.19.1"
-    import-local "^2.0.0"
-    internal-ip "^4.3.0"
-    ip "^1.1.5"
-    is-absolute-url "^3.0.3"
-    killable "^1.0.1"
-    loglevel "^1.6.4"
-    opn "^5.5.0"
-    p-retry "^3.0.1"
-    portfinder "^1.0.24"
-    schema-utils "^1.0.0"
-    selfsigned "^1.10.7"
-    semver "^6.3.0"
-    serve-index "^1.9.1"
-    sockjs "0.3.19"
-    sockjs-client "1.4.0"
-    spdy "^4.0.1"
-    strip-ansi "^3.0.1"
-    supports-color "^6.1.0"
-    url "^0.11.0"
-    webpack-dev-middleware "^3.7.2"
-    webpack-log "^2.0.0"
-    ws "^6.2.1"
-    yargs "12.0.5"
-
 webpack-log@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
@@ -17526,7 +17800,7 @@ webpack-merge@^4.2.2:
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@^1.1.0, webpack-sources@^1.3.0:
+webpack-sources@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
   integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
@@ -17571,36 +17845,6 @@ webpack@4.41.2:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-webpack@^4.30.0:
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.30.0.tgz#aca76ef75630a22c49fcc235b39b4c57591d33a9"
-  integrity sha512-4hgvO2YbAFUhyTdlR4FNyt2+YaYBYHavyzjCMbZzgglo02rlKi/pcsEzwCuCpsn1ryzIl1cq/u8ArIKu8JBYMg==
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-module-context" "1.8.5"
-    "@webassemblyjs/wasm-edit" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-    acorn "^6.0.5"
-    acorn-dynamic-import "^4.0.0"
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-    chrome-trace-event "^1.0.0"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.0"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.3.0"
-    loader-utils "^1.1.0"
-    memory-fs "~0.4.1"
-    micromatch "^3.1.8"
-    mkdirp "~0.5.0"
-    neo-async "^2.5.0"
-    node-libs-browser "^2.0.0"
-    schema-utils "^1.0.0"
-    tapable "^1.1.0"
-    terser-webpack-plugin "^1.1.0"
-    watchpack "^1.5.0"
-    webpack-sources "^1.3.0"
-
 webpack@^4.39.3:
   version "4.41.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.0.tgz#db6a254bde671769f7c14e90a1a55e73602fc70b"
@@ -17869,13 +18113,6 @@ workbox-window@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-worker-farm@^1.5.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
-  integrity sha512-6w+3tHbM87WnSWnENBUvA2pxJPLhQUg5LKwUQHq3r+XPhIM+Gh2R5ycbwPCyuGbNg+lPgdcnQUhuC02kJCvffQ==
-  dependencies:
-    errno "~0.1.7"
-
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
@@ -18080,6 +18317,14 @@ yargs-parser@^13.1.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^15.0.0:
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
@@ -18095,7 +18340,7 @@ yargs-parser@^9.0.2:
   dependencies:
     camelcase "^4.1.0"
 
-yargs@12.0.5, yargs@^12.0.1, yargs@^12.0.2, yargs@^12.0.5:
+yargs@12.0.5, yargs@^12.0.1, yargs@^12.0.2:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
   integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
@@ -18166,6 +18411,22 @@ yargs@^11.1.1:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
+yargs@^13.3.0:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
+
 yargs@^14.0.0:
   version "14.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.0.tgz#f116a9242c4ed8668790b40759b4906c276e76c3"
diff --git a/docs/internal/schemas.md b/docs/internal/schemas.md
index a2a7b5754e..e8dfcf0b89 100644
--- a/docs/internal/schemas.md
+++ b/docs/internal/schemas.md
@@ -5,5 +5,3 @@ When we take new schema, the following needs to be considered:
 1. Update `Composer/packages/server/schemas/sdk.schema` with the updated, merged schema
 2. Update `Composer/packages/lib/shared/src/labelMap.ts` with new Entity labels
 3. Update `Composer/packages/lib/shared/src/viewUtils.ts` with new SDKTypes & DialogGroups
-4. Update `Composer/packages/lib/shared/src/appschema.ts` with the new schema, make changes as appropriate.
-5. If necessary, update `Composer/packages/extensions/obiformeditor/src/schema/uischema.ts` for form template configuration.