feat: let VisualEditor accept dynamic uischema instead of hardcoding

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

@@ -1,12 +1,16 @@
 import React, { Component } from 'react';
 import { seedNewDialog, SDKTypes } from '@bfc/shared';
 
-import { UISchemaRenderer } from '../../../src/schema/uischemaRenderer';
 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 './story.css';
 
+const uiSchemaPrivider = new UISchemaProvider(uiSchema);
+
 export class VisualSDKDemo extends Component {
   state = {
     actions: this.seedInitialActions(),
@@ -63,7 +67,11 @@ export class VisualSDKDemo extends Component {
           />
         </div>
         <div className="action-preview--visual">
-          <UISchemaRenderer id={`actions[${index}]`} data={action} onEvent={() => null} />
+          {renderUIWidget(uiSchemaPrivider.get(action.$type), {
+            id: `actions[${index}]`,
+            data: action,
+            onEvent: () => null,
+          })}
         </div>
       </div>
     );

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

@@ -3,12 +3,13 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { SDKTypes } from '@bfc/shared';
 import get from 'lodash/get';
 
 import { NodeProps, defaultNodeProps } from '../nodes/nodeProps';
-import { UISchemaRenderer } from '../../schema/uischemaRenderer';
+import { renderUIWidget } from '../../schema/uischemaRenderer';
+import { UISchemaContext } from '../../store/UISchemaContext';
 
 import { ElementWrapper } from './ElementWrapper';
 
@@ -27,14 +28,15 @@ const TypesWithoutWrapper = [
 ];
 
 export const StepRenderer: FC<NodeProps> = ({ id, data, onEvent }): JSX.Element => {
-  const $type = get(data, '$type', '');
+  const schemaProvider = useContext(UISchemaContext);
 
-  const content = <UISchemaRenderer id={id} data={data} onEvent={onEvent} />;
+  const $type = get(data, '$type', '');
+  const widgetSchema = schemaProvider.get($type);
 
+  const content = renderUIWidget(widgetSchema, { id, data, onEvent });
   if (TypesWithoutWrapper.some(x => $type === x)) {
     return content;
   }
-
   return (
     <ElementWrapper id={id} onEvent={onEvent}>
       {content}

Composer/packages/extensions/visual-designer/src/index.tsx

@@ -12,6 +12,9 @@ import { ShellData, ShellApi } from '@bfc/shared';
 import { ObiEditor } from './editors/ObiEditor';
 import { NodeRendererContext } from './store/NodeRendererContext';
 import { SelfHostContext } from './store/SelfHostContext';
+import { UISchemaContext } from './store/UISchemaContext';
+import { UISchemaProvider } from './schema/uischemaProvider';
+import { uiSchema } from './schema/uischema';
 
 formatMessage.setup({
   missingTranslation: 'ignore',
@@ -22,6 +25,8 @@ const emotionCache = createCache({
   nonce: window.__nonce__,
 });
 
+const visualEditorSchemaProvider = new UISchemaProvider(uiSchema);
+
 const VisualDesigner: React.FC<VisualDesignerProps> = ({
   dialogId,
   focusedEvent,
@@ -79,24 +84,26 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
     <CacheProvider value={emotionCache}>
       <NodeRendererContext.Provider value={nodeContext}>
         <SelfHostContext.Provider value={hosted}>
-          <div data-testid="visualdesigner-container" css={{ width: '100%', height: '100%', overflow: 'scroll' }}>
-            <ObiEditor
-              key={dialogId}
-              path={dialogId}
-              data={data}
-              focusedSteps={focusedActions}
-              onFocusSteps={onFocusSteps}
-              focusedEvent={focusedEvent}
-              onFocusEvent={onFocusEvent}
-              onClipboardChange={onCopy}
-              onOpen={x => navTo(x)}
-              onChange={x => saveData(x)}
-              onSelect={onSelect}
-              undo={undo}
-              redo={redo}
-              addCoachMarkRef={addCoachMarkRef}
-            />
-          </div>
+          <UISchemaContext.Provider value={visualEditorSchemaProvider}>
+            <div data-testid="visualdesigner-container" css={{ width: '100%', height: '100%', overflow: 'scroll' }}>
+              <ObiEditor
+                key={dialogId}
+                path={dialogId}
+                data={data}
+                focusedSteps={focusedActions}
+                onFocusSteps={onFocusSteps}
+                focusedEvent={focusedEvent}
+                onFocusEvent={onFocusEvent}
+                onClipboardChange={onCopy}
+                onOpen={x => navTo(x)}
+                onChange={x => saveData(x)}
+                onSelect={onSelect}
+                undo={undo}
+                redo={redo}
+                addCoachMarkRef={addCoachMarkRef}
+              />
+            </div>
+          </UISchemaContext.Provider>
         </SelfHostContext.Provider>
       </NodeRendererContext.Provider>
     </CacheProvider>

Composer/packages/extensions/visual-designer/src/schema/uischemaProvider.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import get from 'lodash/get';
+
+import { UIWidget, UISchema } from './uischema.types';
+
+export class UISchemaProvider {
+  schema: UISchema;
+
+  constructor(uiSchema: UISchema) {
+    this.schema = uiSchema;
+  }
+
+  get = ($type: string): UIWidget => {
+    return get(this.schema, $type, this.schema.default);
+  };
+}

Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx

@@ -1,13 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { FC } from 'react';
+import React from 'react';
 import { BaseSchema } from '@bfc/shared';
-import get from 'lodash/get';
 
-import { uiSchema } from './uischema';
 import { UIWidget, UI_WIDGET_KEY, UIWidgetProp, WidgetEventHandler } from './uischema.types';
 
+export interface UIWidgetContext {
+  /** The uniq id of current schema data. Usually a json path. */
+  id: string;
+
+  /** Declarative json with a $type field. */
+  data: BaseSchema;
+
+  /** Handle UI events */
+  onEvent: WidgetEventHandler;
+}
+
 const parseWidgetSchema = (widgetSchema: UIWidget) => {
   const { [UI_WIDGET_KEY]: Widget, ...props } = widgetSchema;
   return {
@@ -16,7 +25,7 @@ const parseWidgetSchema = (widgetSchema: UIWidget) => {
   };
 };
 
-const buildWidgetProp = (rawPropValue: UIWidgetProp, context: UISchemaContext) => {
+const buildWidgetProp = (rawPropValue: UIWidgetProp, context: UIWidgetContext) => {
   if (typeof rawPropValue === 'function') {
     const dataTransformer = rawPropValue;
     const element = dataTransformer(context.data);
@@ -25,14 +34,14 @@ const buildWidgetProp = (rawPropValue: UIWidgetProp, context: UISchemaContext) =
 
   if (typeof rawPropValue === 'object' && rawPropValue[UI_WIDGET_KEY]) {
     const widgetSchema = rawPropValue as UIWidget;
-    return renderUISchema(widgetSchema, context);
+    return renderUIWidget(widgetSchema, context);
   }
 
   return rawPropValue;
 };
 
-const renderUISchema = (schema: UIWidget, context: UISchemaContext): JSX.Element => {
-  const { Widget, props: rawProps } = parseWidgetSchema(schema);
+export const renderUIWidget = (widgetSchema: UIWidget, context: UIWidgetContext): JSX.Element => {
+  const { Widget, props: rawProps } = parseWidgetSchema(widgetSchema);
   const widgetProps = Object.keys(rawProps).reduce((props, propName) => {
     const propValue = rawProps[propName];
     props[propName] = buildWidgetProp(propValue, context);
@@ -41,20 +50,3 @@ const renderUISchema = (schema: UIWidget, context: UISchemaContext): JSX.Element
 
   return <Widget {...context} {...widgetProps} />;
 };
-
-export interface UISchemaContext {
-  /** The uniq id of current schema data. Usually a json path. */
-  id: string;
-
-  /** Declarative json with a $type field. */
-  data: BaseSchema;
-
-  /** Handle UI events */
-  onEvent: WidgetEventHandler;
-}
-
-export const UISchemaRenderer: FC<UISchemaContext> = (props): JSX.Element => {
-  const $type = get(props.data, '$type');
-  const schema = get(uiSchema, $type, uiSchema.default);
-  return renderUISchema(schema, props);
-};

Composer/packages/extensions/visual-designer/src/store/UISchemaContext.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+
+import { UISchemaProvider } from '../schema/uischemaProvider';
+import { uiSchema } from '../schema/uischema';
+
+const defaultProvider = new UISchemaProvider(uiSchema);
+
+export const UISchemaContext = React.createContext<UISchemaProvider>(defaultProvider);