Init integration with form-editor (#2)

Composer/packages/client/package.json

@@ -54,7 +54,8 @@
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3",
-    "@composer-extensions/sample-json-editor": "*"
+    "@composer-extensions/sample-json-editor": "*",
+    "@composer-extensions/obieditortest": "*"
   },
   "scripts": {
     "start": "node scripts/start.js",

Composer/packages/client/src/extension-container/EditorMap.js

@@ -1,6 +1,7 @@
 // this is currently hard-coded here
 
 import JsonEditor from '@composer-extensions/sample-json-editor'
+import FormEditor from '@composer-extensions/obieditortest'
 
 
 function getSuffix(fileName) {
@@ -24,6 +25,11 @@ function getSuffix(fileName) {
 //
 
 const EditorRegistration = [
+    {
+        when: (data) => getSuffix(data.name) === ".dialog",
+        pick: FormEditor
+    },
+
     {
         when: (data) => getSuffix(data.name) === ".lu",
         pick: JsonEditor

Composer/packages/extensions/obieditortest/.gitignore

@@ -0,0 +1,7 @@
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*

Composer/packages/extensions/obieditortest/.travis.yml

@@ -0,0 +1,16 @@
+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

Composer/packages/extensions/obieditortest/CONTRIBUTING.md

@@ -0,0 +1,25 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= 6 must be installed.
+
+## Installation
+
+- Running `npm install` in the component's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.

Composer/packages/extensions/obieditortest/README.md

@@ -0,0 +1,16 @@
+# obieditortest
+
+[![Travis][build-badge]][build]
+[![npm package][npm-badge]][npm]
+[![Coveralls][coveralls-badge]][coveralls]
+
+Describe obieditortest 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

Composer/packages/extensions/obieditortest/demo/src/index.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react'
+import {render} from 'react-dom'
+
+import Example from '../../src'
+
+class Demo extends Component {
+  render() {
+    return <div>
+      <h1>obieditortest Demo</h1>
+      <Example/>
+    </div>
+  }
+}
+
+render(<Demo/>, document.querySelector('#demo'))

Composer/packages/extensions/obieditortest/nwb.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  type: 'react-component',
+  npm: {
+    esModules: true,
+    umd: false
+  }
+}

Composer/packages/extensions/obieditortest/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@composer-extensions/obieditortest",
+  "version": "1.0.0",
+  "description": "obieditortest React component",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "css",
+    "es",
+    "lib",
+    "umd"
+  ],
+  "scripts": {
+    "build": "nwb build-react-component --copy-files",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "prepublishOnly": "npm run build",
+    "start": "nwb serve-react-demo",
+    "test": "nwb test-react",
+    "test:coverage": "nwb test-react --coverage",
+    "test:watch": "nwb test-react --server"
+  },
+  "dependencies": {
+    "office-ui-fabric-react": "^6.138.1",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
+    "react-jsonschema-form": "git+https://git@github.com/cwhitten/react-jsonschema-form.git",
+    "react-scripts": "2.1.3"
+  },
+  "peerDependencies": {
+    "react": "16.x"
+  },
+  "devDependencies": {
+    "nwb": "0.23.x",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3"
+  },
+  "author": "",
+  "homepage": "",
+  "license": "MIT",
+  "repository": "",
+  "keywords": [
+    "react-component"
+  ]
+}

Composer/packages/extensions/obieditortest/src/App.css

@@ -0,0 +1,31 @@
+.App {
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

Composer/packages/extensions/obieditortest/src/App.js

@@ -0,0 +1,89 @@
+import React, { Component } from "react";
+import "./App.css";
+import Form from "react-jsonschema-form";
+
+import schema3 from "./appschema.json";
+
+class App extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  onChange = (newValue) => {
+    // call props onChange with respect to the data format recieved
+
+    var newData = {
+      name: this.props.data.name, // this editor should not change file name
+      content: JSON.stringify(newValue.formData)
+    }
+    console.log("new data from form editor");
+    console.log(newData);
+    this.props.onChange(newData)
+  }
+
+  isRootId = id => {
+    return id.indexOf("root") !== -1;
+  };
+
+  isUnecessaryLabel = label => {
+    return (
+      label.indexOf("Microsoft.") === -1 &&
+      label.indexOf("Dialog") === -1 &&
+      label.indexOf("sequence") === -1
+    );
+  };
+
+  fieldTemplate = props => {
+    const { id, classNames, label, required, children } = props;
+
+    return (
+      <React.Fragment>
+        {this.isRootId(id) && (
+          <div className={classNames}>
+            {children.map(c => {
+              if (
+                c &&
+                c.props &&
+                (c.props.name === "$type" ||
+                  c.props.name === "$ref" ||
+                  c.props.name === "$id")
+              ) {
+                return null;
+              }
+              return c;
+            })}
+          </div>
+        )}
+        {!this.isRootId(id) && (
+          <div className={classNames}>
+            {this.isUnecessaryLabel(label) && (
+              <label htmlFor={id}>
+                {label}
+                {required ? "*" : null}
+              </label>
+            )}
+            {children}
+          </div>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  render() {
+    return (
+      <div className="App" style={{ margin: "15px 15px 15px 15px" }}>
+        <Form
+          FieldTemplate={this.fieldTemplate}
+          noValidate
+          className="schemaForm"
+          onChange={this.onChange}
+          formData={JSON.parse(this.props.data.content)}  // the props.data passed in will be a file object: {name: , content}
+          schema={schema3}
+        />
+      </div>
+    );
+  }
+}
+
+export default App;