feat: Visual Editor as an extension

Composer/packages/client/src/pages/design/VisualEditor.tsx

@@ -79,12 +79,7 @@ const VisualEditor: React.FC<VisualEditorProps> = props => {
         data-testid="VisualEditor"
       >
         <Extension shell={shellApi} shellData={shellData} plugins={plugins}>
-          <VisualDesigner
-            {...shellData}
-            onChange={shellApi.saveData}
-            shellApi={shellApi as any}
-            schema={schemas.sdk?.content}
-          />
+          <VisualDesigner schema={schemas.sdk?.content} />
         </Extension>
       </div>
       {!selected && onRenderBlankVisual(triggerButtonVisible, openNewTriggerModal)}

Composer/packages/extensions/adaptive-form/src/PluginContext.ts

@@ -5,7 +5,8 @@ import React from 'react';
 import { PluginConfig } from '@bfc/extension';
 
 const PluginContext = React.createContext<Required<PluginConfig>>({
-  uiSchema: {},
+  formSchema: {},
+  visualSchema: {},
   roleSchema: {},
   // kindSchema: {},
   recognizers: [],

Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/index.tsx

@@ -52,7 +52,7 @@ export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(p
   }, []);
 
   const $uiSchema = useMemo(() => {
-    return getUISchema($schema, pluginConfig.uiSchema);
+    return getUISchema($schema, pluginConfig.formSchema);
   }, [$schema, pluginConfig]);
 
   const errors = useMemo(() => {

Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx

@@ -40,7 +40,7 @@ const SchemaField: React.FC<FieldProps> = props => {
   const pluginConfig = usePluginConfig();
   const schema = resolveRef(baseSchema, definitions);
   const uiOptions = {
-    ...getUISchema(schema, pluginConfig.uiSchema),
+    ...getUISchema(schema, pluginConfig.formSchema),
     ...baseUIOptions,
   };
 

Composer/packages/extensions/adaptive-form/src/utils/__tests__/mergePluginConfigs.test.ts

@@ -11,15 +11,15 @@ import DefaultRecognizers from '../../defaultRecognizers';
 describe('mergePluginConfigs', () => {
   it('returns default ui schema when no overrides', () => {
     expect(mergePluginConfigs()).toEqual({
-      uiSchema: DefaultUISchema,
+      formSchema: DefaultUISchema,
       roleSchema: DefaultRoleSchema,
       recognizers: DefaultRecognizers,
     });
   });
 
   it('merges overrides into the defaults', () => {
     const overrides = {
-      uiSchema: {
+      formSchema: {
         [SDKKinds.AdaptiveDialog]: {
           hidden: ['recognizer'],
           properties: {
@@ -38,27 +38,7 @@ describe('mergePluginConfigs', () => {
 
     expect(mergePluginConfigs(overrides)).toMatchInlineSnapshot(`
 Object {
-  "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 {
+  "formSchema": Object {
     "Microsoft.AdaptiveDialog": Object {
       "description": [Function],
       "helpLink": "https://aka.ms/botframework",
@@ -506,6 +486,26 @@ Object {
       "label": [Function],
     },
   },
+  "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",
+    },
+  },
 }
 `);
   });

Composer/packages/extensions/adaptive-form/src/utils/__tests__/resolveFieldWidget.test.ts

@@ -34,7 +34,7 @@ describe('resolveFieldWidget', () => {
             field: DefaultFields.StringField,
           },
         },
-        uiSchema: {},
+        formSchema: {},
         recognizers: [],
       };
 
@@ -51,7 +51,7 @@ describe('resolveFieldWidget', () => {
 
       const globalSchema = {
         roleSchema: {},
-        uiSchema: {
+        formSchema: {
           'Microsoft.Recognizer': {
             field: DefaultFields.RecognizerField,
           },

Composer/packages/extensions/adaptive-form/src/utils/mergePluginConfigs.ts

@@ -12,7 +12,7 @@ import DefaultRoleSchema from '../defaultRoleSchema';
 import DefaultRecognizers from '../defaultRecognizers';
 
 const defaults: PluginConfig = {
-  uiSchema: DefaultUISchema,
+  formSchema: DefaultUISchema,
   roleSchema: DefaultRoleSchema,
   recognizers: DefaultRecognizers,
 };

Composer/packages/extensions/adaptive-form/src/utils/resolveFieldWidget.ts

@@ -29,7 +29,7 @@ export function resolveFieldWidget(
         return RoleOverride;
       }
 
-      const KindOverride = schema.$kind && globalConfig?.uiSchema[schema.$kind]?.field;
+      const KindOverride = schema.$kind && globalConfig?.formSchema[schema.$kind]?.field;
 
       if (KindOverride) {
         return KindOverride;

Composer/packages/extensions/extension/src/types/extension.ts

@@ -1,10 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { UISchema, RoleSchema, RecognizerSchema } from './uiSchema';
+import { UISchema, RoleSchema, RecognizerSchema } from './formSchema';
+import { FlowEditorConfig } from './flowSchema';
 
 export interface PluginConfig {
-  uiSchema?: UISchema;
+  formSchema?: UISchema;
   roleSchema?: RoleSchema;
   recognizers?: RecognizerSchema[];
+  visualSchema?: FlowEditorConfig;
 }

Composer/packages/extensions/extension/src/types/flowSchema.ts

@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { FC, ComponentClass } from 'react';
+import { BaseSchema, SDKKinds } from '@bfc/shared';
+
+export interface FlowEditorConfig {
+  widgets?: FlowEditorWidgetMap;
+  schema?: FlowSchema;
+}
+
+export type FlowEditorWidgetMap = { [widgetName: string]: WidgetComponent<any> };
+export enum FlowSchemaBuiltinKeys {
+  default = 'default',
+}
+
+/** schema */
+export type FlowSchema = {
+  [key in SDKKinds | FlowSchemaBuiltinKeys]?: FlowWidget;
+};
+
+export interface FlowWidget {
+  /** Widget implementation (React Class) or Widget name (string) */
+  widget: string | WidgetComponent<any>;
+
+  /** If set to true, output widget will be borderless (usually applied to IfCondition, SwitchCondition) */
+  nowrap?: boolean;
+
+  [propKey: string]: FlowWidgetProp;
+}
+
+export type WidgetComponent<T extends WidgetContainerProps> = FC<T> | ComponentClass<T, any>;
+
+export type WidgetEventHandler = (eventName: string, eventData?: any) => void;
+
+export interface WidgetContainerProps {
+  id: string;
+  data: BaseSchema;
+  onEvent: WidgetEventHandler;
+  [propKey: string]: any;
+}
+
+export type FlowWidgetProp = Value | PropGenerator | FlowWidget;
+type Value = string | number | boolean | undefined | { [key: string]: any };
+type PropGenerator = (data: any) => string | number | object | JSX.Element;

Composer/packages/extensions/extension/src/types/form.ts

@@ -3,7 +3,7 @@
 import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
 import React from 'react';
 
-import { UIOptions } from './uiSchema';
+import { UIOptions } from './formSchema';
 
 declare module 'json-schema' {
   interface JSONSchema7 {

Composer/packages/extensions/extension/src/types/index.ts

@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+
 export * from './extension';
 export * from './form';
-export * from './uiSchema';
+export * from './formSchema';
+export * from './flowSchema';

Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js

@@ -3,19 +3,19 @@ import { DialogFactory, dialogGroups, DialogGroup } from '@bfc/shared';
 
 import { EdgeMenu } from '../../../src/components/menus/EdgeMenu';
 import { JsonBlock } from '../components/json-block';
-import { renderUIWidget } from '../../../src/schema/uischemaRenderer';
-import { UISchemaProvider } from '../../../src/schema/uischemaProvider';
-import { uiSchema } from '../../../src/schema/uischema';
+import { renderUIWidget } from '../../../src/schema/flowSchemaRenderer';
+import { FlowSchemaProvider } from '../../../src/schema/flowSchemaProvider';
+import { defaultFlowSchema } from '../../../src/schema/defaultFlowSchema';
 
 import './story.css';
 
-const uiSchemaPrivider = new UISchemaProvider(uiSchema);
+const uiSchemaPrivider = new FlowSchemaProvider(defaultFlowSchema);
+const actionFactory = new DialogFactory({});
 
 export class VisualSDKDemo extends Component {
   state = {
     actions: this.seedInitialActions(),
   };
-  factory = new DialogFactory({});
 
   seedInitialActions() {
     const initialTypes = [
@@ -27,7 +27,7 @@ export class VisualSDKDemo extends Component {
       ...dialogGroups[DialogGroup.CODE].types,
       ...dialogGroups[DialogGroup.LOG].types,
     ];
-    const initalActions = initialTypes.map(t => this.factory.create(t));
+    const initalActions = initialTypes.map(t => actionFactory.create(t));
     return initalActions;
   }
 

Composer/packages/extensions/visual-designer/demo/webpack.config.demo.js

@@ -49,10 +49,6 @@ module.exports = {
         use: [
           {
             loader: 'style-loader',
-            options: {
-              hmr: true,
-              sourceMap: true,
-            },
           },
           { loader: 'css-loader', options: { importLoaders: 1 } },
           {
@@ -73,10 +69,6 @@ module.exports = {
         use: [
           {
             loader: 'style-loader',
-            options: {
-              hmr: true,
-              sourceMap: true,
-            },
           },
           { loader: 'css-loader', options: { importLoaders: 1 } },
           {

Composer/packages/extensions/visual-designer/package.json

@@ -23,7 +23,9 @@
     "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
+    "@bfc/extension": "*",
     "@bfc/shared": "*",
+    "@bfc/ui-shared": "*",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
     "classnames": "^2.2.6",
@@ -59,7 +61,8 @@
     "react-dom": "16.13.0",
     "react-testing-library": "^6.0.2",
     "ts-jest": "^24.1.0",
-    "ts-loader": "^6.0.3"
+    "ts-loader": "^6.0.3",
+    "tsconfig-paths-webpack-plugin": "^3.2.0"
   },
   "author": "",
   "homepage": "",

Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx

@@ -4,11 +4,11 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import { FC, ReactNode } from 'react';
+import { TextDiv } from '@bfc/ui-shared';
 
 import { StandardNodeWidth, HeaderHeight, StandardSectionHeight } from '../../../constants/ElementSizes';
 import { ObiColors } from '../../../constants/ElementColors';
 import { ArrowLine } from '../../lib/ArrowLine';
-import { TextDiv } from '../../elements/styledComponents';
 
 const containerCSS = css`
   font-size: 12px;

Composer/packages/extensions/visual-designer/src/components/renderers/StepRenderer.tsx

@@ -4,38 +4,23 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { FC, useContext } from 'react';
-import { SDKKinds } from '@bfc/shared';
 import get from 'lodash/get';
 
 import { NodeProps, defaultNodeProps } from '../nodes/nodeProps';
-import { renderUIWidget } from '../../schema/uischemaRenderer';
-import { UISchemaContext } from '../../store/UISchemaContext';
+import { renderUIWidget } from '../../schema/flowSchemaRenderer';
+import { FlowSchemaContext } from '../../store/FlowSchemaContext';
 
 import { ElementWrapper } from './ElementWrapper';
 import { ElementMeasurer } from './ElementMeasurer';
 
-/** TODO: (zeye) integrate this array into UISchema */
-const TypesWithoutWrapper = [
-  SDKKinds.IfCondition,
-  SDKKinds.SwitchCondition,
-  SDKKinds.Foreach,
-  SDKKinds.ForeachPage,
-  SDKKinds.AttachmentInput,
-  SDKKinds.ConfirmInput,
-  SDKKinds.DateTimeInput,
-  SDKKinds.NumberInput,
-  SDKKinds.TextInput,
-  SDKKinds.ChoiceInput,
-];
-
 export const StepRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize }): JSX.Element => {
-  const schemaProvider = useContext(UISchemaContext);
+  const { widgets, schemaProvider } = useContext(FlowSchemaContext);
 
   const $kind = get(data, '$kind', '');
   const widgetSchema = schemaProvider.get($kind);
 
-  const content = renderUIWidget(widgetSchema, { id, data, onEvent, onResize });
-  if (TypesWithoutWrapper.some(x => $kind === x)) {
+  const content = renderUIWidget(widgetSchema, widgets, { id, data, onEvent, onResize });
+  if (widgetSchema.nowrap) {
     return content;
   }
   return (