feat(fix): add builder-next package and fix builder bugs.

fix(docs): update playground link and fix some bugs

feat(fix): add builder-next package and fix builder bugs

docs: update playground link

docs/SUMMARY.md

@@ -30,4 +30,5 @@
      - [<FormCard/>](./API/FormCard.md)
      - [<FormBlock/>](./API/FormBlock.md)
      - [<FormItemGrid/>](./API/FormItemGrid.md)
-     - [<FormSlot/>](./API/FormSlot.md)
+     - [<FormSlot/>](./API/FormSlot.md)
+- [PlayGround](../packages/builder-next/lib/index.js)

packages/builder-next/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+*.log
+build

packages/builder-next/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/builder-next/README.md

@@ -0,0 +1,2 @@
+# @uform/builder-next
+> UForm 可视化配置 next实现

packages/builder-next/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@uform/builder-next",
+  "version": "0.1.0-beta.15",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/uform.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alibaba/uform/issues"
+  },
+  "homepage": "https://github.com/alibaba/uform#readme",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@alifd/next": "^1.13.1",
+    "@uform/builder": "^0.1.0-beta.14"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "f513fc2dcca781b3f7aa588c4419bce20cba2d8b"
+}

packages/builder-next/src/index.js

@@ -0,0 +1,142 @@
+import React from 'react'
+import SchemaForm, { FormButtonGroup, Submit, Reset } from '@uform/next'
+import Builder from '@uform/builder'
+
+import {
+  Button,
+  Collapse,
+  Message,
+  Upload,
+  Input,
+  Select,
+  DatePicker,
+  Icon,
+  Checkbox,
+  NumberPicker,
+  TimePicker,
+  Radio,
+  Form,
+  Tab
+} from '@alifd/next'
+
+// style
+import '@alifd/next/dist/next.css'
+
+SchemaForm.FormButtonGroup = FormButtonGroup
+SchemaForm.Submit = Submit
+SchemaForm.Reset = Reset
+
+const renderSchema = {}
+
+const props = {
+  UI: {
+    version: '1.x',
+    Button,
+    Accordion: Collapse,
+    Toast: Message,
+    Upload,
+    Input,
+    Select,
+    Icon,
+    DatePicker,
+    TimePicker,
+    Checkbox,
+    NumberPicker,
+    Radio,
+    RadioGroup: Radio.Group,
+    TabPane: Tab.Item,
+    Form,
+    Tab
+  },
+  // 主题： dark/light,默认dark
+  themeStyle: 'dark',
+  // 是否展示布局组件，默认为false
+  showLayoutField: true,
+  // 是否展示预览按钮，默认为true
+  showPreviewBtn: true,
+  // 是否展示源码按钮
+  showSourceCodeBtn: true,
+  // 控制返回按钮点击事件
+  onBackBtnClick: () => {
+    alert('点击了返回')
+  },
+  // 额外全局按钮
+  globalButtonList: [
+    // {
+    //   key: 'submit',
+    //   title: '自定义保存',
+    //   render: (props) => {
+    //     return <Badge dot>{props.children}</Badge>
+    //   },
+    //   props: {
+    //     // loading: true,
+    //   },
+    // }, {
+    //   key: 'cancel',
+    //   title: '取消',
+    //   props: {
+    //     onClick: () => {
+    //       alert('点击取消');
+    //     }
+    //   },
+    // }
+  ],
+  // 是否展示全局配置
+  showGlobalCfg: true,
+  // 全局配置额外项
+  extraGlobalCfgList: [
+    {
+      name: 'labelCol',
+      title: 'label宽度占比',
+      type: 'string'
+    },
+    {
+      name: 'wrapperCol',
+      title: 'wrapper宽度占比',
+      type: 'string'
+    }
+  ],
+  globalCfg: {},
+  supportFieldList: [],
+  includeFieldListKeyList: [
+    'input',
+    'multipleInput',
+    'number',
+    'radio',
+    'checkbox',
+    'date',
+    'month',
+    'daterange',
+    'time'
+  ],
+
+  // 渲染引擎
+  renderEngine: SchemaForm,
+
+  schema: renderSchema,
+  // onChange: (data) => {
+  //   console.info('index onChange data', data);
+  // },
+  onSubmit: data => {
+    console.info('index onSubmit data', data)
+  }
+}
+
+class Component extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      schema: renderSchema
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ marginTop: -20 }}>
+        <Builder {...props} schema={this.state.schema} />
+      </div>
+    )
+  }
+}
+
+export default Component

packages/builder/package.json

@@ -43,7 +43,8 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
     "styled-components": "^4.1.2",
-    "uuid": "^3.2.1"
+    "uuid": "^3.2.1",
+    "react-dnd": "^7.4.1"
   },
   "publishConfig": {
     "access": "public"

packages/builder/src/App.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import cls from 'classnames'
 import PropTypes from 'prop-types'
-import { SchemaForm } from './utils/baseForm'
 import { connect } from 'react-redux'
 import {
   changePreview,
@@ -19,17 +18,85 @@ import AppStyle from './style'
 // components
 import FieldList from './components/fields/index'
 import Preview from './components/preview/index'
-import AccordionList from './components/props/accordList'
 import generateGlobalBtnList from './components/globalBtnList/index'
 
+import PropsSetting from './components/props/propsSetting'
+import { SchemaForm, Field } from './utils/baseForm'
+import defaultGlobalCfgList from './configs/supportGlobalCfgList'
+
 const noop = () => {}
 
 class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      systemError: false
+      systemError: false,
+      accordionList: []
+    }
+  }
+
+  generateGlobalCfgList = () => {
+    // Merge custom form global property configuration
+    const globalCfgList = [
+      ...defaultGlobalCfgList,
+      ...this.props.extraGlobalCfgList
+    ]
+    const _globalCfgList = []
+    for (let i = globalCfgList.length - 1; i >= 0; i--) {
+      if (
+        !_globalCfgList.find(cfgItem => cfgItem.name === globalCfgList[i].name)
+      ) {
+        _globalCfgList.unshift(globalCfgList[i])
+      }
+    }
+    return _globalCfgList
+  }
+
+  // global config
+  renderGlobalConfig = () => {
+    const globalCfgList = this.generateGlobalCfgList()
+
+    const content = (
+      <SchemaForm
+        onChange={value => {
+          this.props.changeGbConfig(value)
+        }}
+        defaultValue={this.props.gbConfig}
+        labelAlign='left'
+        labelTextAlign='right'
+      >
+        {globalCfgList.map(props => (
+          <Field {...props} key={props.name} x-item-props={{ labelCol: 10 }} />
+        ))}
+      </SchemaForm>
+    )
+
+    return content
+  }
+
+  getAccordionList = () => {
+    const list = [
+      {
+        title: '组件配置',
+        content: (
+          <PropsSetting
+            supportConfigList={this.props.supportConfigList}
+            renderEngine={this.props.renderEngine}
+            UI={this.props.UI}
+          />
+        ),
+        expanded: true
+      }
+    ]
+
+    if (this.props.showGlobalCfg) {
+      list.unshift({
+        title: '全局配置',
+        content: this.renderGlobalConfig(),
+        expanded: true
+      })
     }
+    return list
   }
 
   componentWillMount() {
@@ -44,6 +111,12 @@ class App extends Component {
     _initSchema(schema)
   }
 
+  componentDidMount() {
+    this.setState({
+      accordionList: this.getAccordionList()
+    })
+  }
+
   componentWillUnmount() {
     // Clear the selected componentId with the selected component
     this.props.changeComponent()
@@ -138,6 +211,7 @@ class App extends Component {
 
   render() {
     const { initSchemaData, renderEngine } = this.props
+    const { Accordion, version: UIVersion } = this.props.UI
 
     const contentHeight = window.innerHeight - 64
 
@@ -169,10 +243,28 @@ class App extends Component {
             />
           </div>
           <div className='content-col content-col-main'>
-            <Preview schema={initSchemaData} renderEngine={renderEngine} />
+            <Preview
+              schema={initSchemaData}
+              renderEngine={renderEngine}
+              UI={this.props.UI}
+            />
           </div>
           <div className='content-col content-col-right'>
-            <AccordionList {...this.props} />
+            {UIVersion === '1.x' ? (
+              <Accordion
+                dataSource={this.state.accordionList}
+                defaultExpandedKeys={['0', '1']}
+              />
+            ) : (
+              <Accordion
+                dataSource={this.state.accordionList}
+                onChange={(status, list) => {
+                  this.setState({
+                    accordionList: list
+                  })
+                }}
+              />
+            )}
           </div>
         </div>
         {this.getEditorTpl()}