-
Notifications
You must be signed in to change notification settings - Fork 372
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Schema-driven visual editor - migrates 15 simple types (#1811)
* uischema def * uischema v0 def (basic types) * consume uischema * fix demo * add renderSDK demo * fix a title getter bug * better demo page * add contextProps * support DeleteProperties * fix demo page * add specific renderer for ConditonNode * retire ConditionNode from DefaultRenderer * register ForeachDetail & ForeachpageDetail in upper level * move label calculation to new renderer * migrate DefaultRenderer to uischema renderer * fix lint warning * apply `formatMessage` to node lib * let formatMessage receive string literal * move title logic into ActionCard * move `generateSDKTitle` into 'shared' * apply `generateSDKTitle` to all nodes * retire `getFriendlyName` * change title priority * uncheck 'SampleBots' folder
- Loading branch information
1 parent
cb57161
commit 9167702
Showing
19 changed files
with
465 additions
and
206 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import React, { Component } from 'react'; | ||
import { seedNewDialog, SDKTypes } from '@bfc/shared'; | ||
|
||
import { renderSDKType } from '../../../src/schema/uischemaRenderer'; | ||
import { EdgeMenu } from '../../../src/components/menus/EdgeMenu'; | ||
import { JsonBlock } from '../components/json-block'; | ||
|
||
import './story.css'; | ||
|
||
export class VisualSDKDemo extends Component { | ||
state = { | ||
actions: this.seedInitialActions(), | ||
}; | ||
|
||
seedInitialActions() { | ||
const initialTypes = [ | ||
SDKTypes.EditArray, | ||
SDKTypes.InitProperty, | ||
SDKTypes.SetProperties, | ||
SDKTypes.SetProperty, | ||
SDKTypes.DeleteProperties, | ||
SDKTypes.DeleteProperty, | ||
SDKTypes.EndDialog, | ||
SDKTypes.CancelAllDialogs, | ||
SDKTypes.EmitEvent, | ||
]; | ||
const initalActions = initialTypes.map(t => seedNewDialog(t)); | ||
return initalActions; | ||
} | ||
|
||
appendActionPreview($type) { | ||
this.setState({ | ||
actions: [...this.state.actions, seedNewDialog($type)], | ||
}); | ||
} | ||
|
||
renderActionPreview(action, index) { | ||
return ( | ||
<div | ||
className="action-preview" | ||
key={`action-preview-${index}`} | ||
style={{ display: 'flex', flexDirection: 'row', margin: 10 }} | ||
> | ||
<div className="action-preview--raw"> | ||
<JsonBlock | ||
styles={{ | ||
width: '200px', | ||
height: '80px', | ||
fontSize: '8px', | ||
}} | ||
defaultValue={action} | ||
onSubmit={newAction => { | ||
const newActions = [...this.state.actions]; | ||
newActions[index] = newAction; | ||
this.setState({ | ||
actions: newActions, | ||
}); | ||
}} | ||
/> | ||
</div> | ||
<div className="action-preview--visual">{renderSDKType(action)}</div> | ||
</div> | ||
); | ||
} | ||
|
||
renderActionFactory() { | ||
return ( | ||
<div style={{ height: 100, margin: 20 }}> | ||
<h3>Create action by $type</h3> | ||
<EdgeMenu id="visual-sdk-demo" onClick={$type => this.appendActionPreview($type)} /> | ||
</div> | ||
); | ||
} | ||
|
||
render() { | ||
return ( | ||
<div className="story-container"> | ||
<h1 className="story-title">Visual SDK Demo</h1> | ||
<div className="story-content" style={{ display: 'flex', flexFlow: 'wrap' }}> | ||
{this.state.actions.map((action, index) => this.renderActionPreview(action, index))} | ||
{this.renderActionFactory()} | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
21 changes: 21 additions & 0 deletions
21
Composer/packages/extensions/visual-designer/demo/src/stories/story.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
.story-container { | ||
height: 100%; | ||
} | ||
|
||
.story-title { | ||
height: 50px; | ||
margin: 0; | ||
} | ||
|
||
.story-content { | ||
display: flex; | ||
flex-direction: row; | ||
height: calc(100% - 60px); | ||
} | ||
|
||
.block { | ||
border: 1px solid grey; | ||
margin: 10px; | ||
width: 50%; | ||
overflow: auto; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
Composer/packages/extensions/visual-designer/src/components/nodes/steps/ConditionNode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
// Copyright (c) Microsoft Corporation. | ||
// Licensed under the MIT License. | ||
|
||
import React, { FC } from 'react'; | ||
import get from 'lodash/get'; | ||
import formatMessage from 'format-message'; | ||
|
||
import { FormCard } from '../templates/FormCard'; | ||
import { NodeProps } from '../nodeProps'; | ||
import { getElementIcon, getElementColor } from '../../../utils/obiPropertyResolver'; | ||
import { NodeMenu } from '../../menus/NodeMenu'; | ||
import { NodeEventTypes } from '../../../constants/NodeEventTypes'; | ||
|
||
export const ConditionNode: FC<NodeProps> = ({ id, data, onEvent }) => { | ||
const { $type } = data; | ||
|
||
return ( | ||
<FormCard | ||
header={formatMessage('Branch')} | ||
label={get(data, 'condition', '')} | ||
icon={getElementIcon($type)} | ||
corner={<NodeMenu id={id} onEvent={onEvent} />} | ||
nodeColors={getElementColor($type)} | ||
onClick={() => { | ||
onEvent(NodeEventTypes.Focus, { id }); | ||
}} | ||
/> | ||
); | ||
}; |
Oops, something went wrong.