Add Editor Package with Editor Webcomponent and Tree Renderer (#925)

* The Ecore demo was removed and moved to its own repo.
* A new more simple example based on tasks was added.

* Fixed the materialize CSS of the tree and the toolbar of the example
editor by copying the needed parts of materialize.css (mainly buttons
and nav).

* Tree master detail runs as react component in jsoneditor:
  * Drag and Drop in the editor's tree renderer using React Dnd
  * Lists recognize and highlight whether a dragged element can be dropped
  * Move data on hover over other suitable list items (reorders lists)
  * List items are drag sources and drop targets to allow sortable behavior

* The editor now allows to register detail schemata that are stored in a newly introduced editor property in the jsonforms store:
  * The path of the ui schemata in the store is jsonforms/editor/uischemata.
  * The schemata are stored as an object whose keys are the Json Schema IDs. The values are the detail UI schemata.
  * Added a reducer for the editor part of the jsonforms store

* Add editor configuration  to store
  * image, label, and model mappings
  * identifying Property
  * resources (no add resource action yet)

* Example reuses JsonForms webcomponent
  * Define an Json Editor IDE wrapper that configures the web component and registers the toolbar buttons
  * Use IDE Wrapper for Ecore example
  * Extend JsonFormsElement to allow configuring the inner component (in the editor case the TreeRenderer)

package.json

@@ -6,7 +6,9 @@
 	},
 	"devDependencies": {
 		"@types/jest": "^22.2.0",
-		"@types/react": "^16.0.27",
+		"@types/lodash": "^4.14.104",
+		"@types/react": "^16.0.40",
+		"@types/react-dnd": "^2.0.36",
 		"ava": "^0.24.0",
 		"babel-loader": "^7.1.2",
 		"coveralls": "^3.0.0",

packages/editor/README.md

@@ -0,0 +1,33 @@
+# JSONForms - More Forms. Less Code
+### Complex Forms in the blink of an eye
+
+JSONForms eliminates the tedious task of writing fully-featued forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+
+# Editor Package
+This repository contains a re-usable tree component that renders a tree-master-detail JSON editor.
+The repository contains an IDE webcomponent that additionally configures 3 buttons to access the data shown in the tree:
+- A download button
+- An export button that shows the data in a dialog
+- A load button that opens a native file selection dialog to load a file from the user's harddrive
+
+Additionally, the package contains a small runtime demo showing an editor for users and tasks.
+
+## Build
+Run `npm install` to install dependencies.
+Run `npm run build` to build the module. The build results are located in `/dist/`.
+
+## Run Demo
+Run `npm run dev` to start the standalone editor. It is available at http://localhost:8080/
+
+# License
+The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.
+
+# Roadmap
+Our current roadmap is available [here](https://github.com/eclipsesource/jsonforms/blob/master/ROADMAP.md).
+
+# Development
+JSONForms is developed by [EclipseSource](https://eclipsesource.com).
+We are always very happy to have contributions, whether for trivial cleanups or big new features.
+
+# Migration
+If you are already using JSONForms 1, check our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md).

packages/editor/example/config.ts

@@ -0,0 +1,28 @@
+import { taskView, userGroupView, userView } from './uischemata';
+
+export const labelProvider = {
+  '#user': 'name',
+  '#userGroup': 'label',
+  '#task': 'name',
+};
+
+export const imageProvider = {
+  '#task': 'task',
+  '#user': 'user',
+  '#userGroup': 'userGroup'
+};
+
+export const modelMapping = {
+  'attribute': '_type',
+  'mapping': {
+    'task': '#task',
+    'user': '#user',
+    'userGroup': '#userGroup'
+  }
+};
+
+export const detailSchemata = {
+  '#task': taskView,
+  '#user': userView,
+  '#userGroup': userGroupView,
+};

packages/editor/example/example.css

@@ -0,0 +1,12 @@
+.icon {
+  background-repeat: no-repeat;
+}
+.icon.user {
+  background-image: url('./User.png');
+}
+.icon.userGroup {
+  background-image: url('./UserGroup.png');
+}
+.icon.task {
+  background-image: url('./Task.png');
+}

packages/editor/example/example.materialize.css

@@ -0,0 +1,157 @@
+/*
+ * Materialize that provides styling for buttons and the navigation bar.
+ * This is needed as long as the demo and ide features are not a React Components and use Material UI.
+ *
+ * Taken from Materialize v0.100.2 (http://materializecss.com)
+ * Copyright 2014-2017 Materialize
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
+*/
+
+a {
+    text-decoration: none;
+  }
+
+  nav {
+    color: #fff;
+    background-color: #ee6e73;
+    width: 100%;
+    height: 56px;
+    line-height: 56px;
+  }
+
+  nav a {
+    color: #fff;
+  }
+
+  nav .nav-wrapper {
+    position: relative;
+    height: 100%;
+  }
+
+  nav .brand-logo {
+    position: absolute;
+    color: #fff;
+    display: inline-block;
+    font-size: 2.1rem;
+    padding: 0;
+  }
+
+  .right {
+    float: right !important;
+  }
+
+  .btn, .btn-large,
+  .btn-flat {
+    border: none;
+    border-radius: 2px;
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 2rem;
+    text-transform: uppercase;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .btn, .btn-large {
+    text-decoration: none;
+    color: #fff;
+    background-color: #26a69a;
+    text-align: center;
+    letter-spacing: .5px;
+    -webkit-transition: .2s ease-out;
+    transition: .2s ease-out;
+    cursor: pointer;
+  }
+
+  .btn, .btn-large,
+  .btn-floating,
+  .btn-large,
+  .btn-flat {
+    font-size: 1rem;
+    outline: 0;
+  }
+
+  .btn:focus, .btn-large:focus,
+  .btn-floating:focus {
+    background-color: #1d7d74;
+  }
+
+  .btn:hover, .btn-large:hover {
+    background-color: #2bbbad;
+  }
+
+  .z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
+    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  }
+
+  .z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {
+    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
+  }
+
+  @media only screen and (max-width: 992px) {
+    .hide-on-med-and-down {
+      display: none !important;
+    }
+  }
+
+  /*
+   * Waves Effects taken from:
+   *
+   * Waves v0.6.0
+   * http://fian.my.id/Waves
+   *
+   * Copyright 2014 Alfiana E. Sibuea and other contributors
+   * Released under the MIT license
+   * https://github.com/fians/Waves/blob/master/LICENSE
+   */
+   .waves-effect {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    vertical-align: middle;
+    z-index: 1;
+    -webkit-transition: .3s ease-out;
+    transition: .3s ease-out;
+  }
+
+  .waves-effect .waves-ripple {
+    position: absolute;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    opacity: 0;
+    background: rgba(0, 0, 0, 0.2);
+    -webkit-transition: all 0.7s ease-out;
+    transition: all 0.7s ease-out;
+    -webkit-transition-property: opacity, -webkit-transform;
+    transition-property: opacity, -webkit-transform;
+    transition-property: transform, opacity;
+    transition-property: transform, opacity, -webkit-transform;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    pointer-events: none;
+  }
+
+  .waves-effect.waves-light .waves-ripple {
+    background-color: rgba(255, 255, 255, 0.45);
+  }
+
+  .waves-effect input[type="button"], .waves-effect input[type="reset"], .waves-effect input[type="submit"] {
+    border: 0;
+    font-style: normal;
+    font-size: inherit;
+    text-transform: inherit;
+    background: none;
+  }
+

packages/editor/example/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>User and Task Editor</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="example.css">
+  <script src="assets/native-shim.js"></script>
+
+  <link href="assets/jsoneditor.css" rel="stylesheet">
+  <link href="assets/example.materialize.css" rel="stylesheet">
+</head>
+<body>
+<nav>
+  <div class="nav-wrapper" id="toolbar">
+    <a href="#" class="brand-logo"><strong>User and Task</strong> Editor</a>
+    <div id="nav-mobile" class="right hide-on-med-and-down">
+      <button
+              id="upload-data-button"
+              class="btn">
+        Open Data File
+      </button>
+      <button
+              id="export-data-button"
+              class="btn"
+      >
+        Export Model
+      </button>
+      <button id="download-data-button" class="btn">Download Model</button>
+    </div>
+  </div>
+</nav>
+<div id="editor"></div>
+</body>
+<script src="assets/bundle.js"></script>
+</html>

packages/editor/example/index.ts

@@ -0,0 +1,23 @@
+import '../src/ide';
+import { JsonEditorIde } from '../src/ide';
+import { createEditorStore } from '../src/helpers/util';
+import { detailSchemata, imageProvider, labelProvider, modelMapping } from './config';
+import { taskSchema } from './schema';
+import { materialFields, materialRenderers } from '@jsonforms/material-renderers';
+
+window.onload = () => {
+  const ide = document.createElement('json-editor-ide') as JsonEditorIde;
+
+  const uischema = {
+    'type': 'MasterDetailLayout',
+    'scope': '#'
+  };
+
+  const store = createEditorStore({}, taskSchema, uischema, materialFields,
+                                  materialRenderers, imageProvider, labelProvider, modelMapping,
+                                  detailSchemata);
+
+  ide.store = store;
+
+  document.getElementById('editor').appendChild(ide);
+};

packages/editor/example/schema.ts

@@ -0,0 +1,84 @@
+export const taskSchema = {
+  'type': 'object',
+  'id': '#userGroup',
+  'properties': {
+    '_type': {
+      'type': 'string',
+      'default': 'userGroup'
+    },
+    'label': {
+      'type': 'string'
+    },
+    'users': {
+      'type': 'array',
+      'items': {
+        '$ref': '#/definitions/user'
+      }
+    }
+  },
+  'additionalProperties': false,
+  'definitions': {
+    'task': {
+      'type': 'object',
+      'id': '#task',
+      'properties': {
+        '_type': {
+          'type': 'string',
+          'default': 'task'
+        },
+        'name': {
+          'type': 'string'
+        },
+        'dueDate': {
+          'type': 'string',
+          'format': 'date'
+        },
+        'done': {
+          'type': 'boolean'
+        },
+        'priority': {
+          'type': 'string',
+          'enum': ['High', 'Medium', 'Low'],
+          'default': 'Medium'
+        },
+        'subTasks': {
+          'type': 'array',
+          'items': {
+            '$ref': '#/definitions/task'
+          }
+        }
+      },
+      'required': [ 'name', 'priority' ],
+      'additionalProperties': false
+    },
+    'user': {
+      'type': 'object',
+      'id': '#user',
+      'properties': {
+        '_type': {
+          'type': 'string',
+          'default': 'user'
+        },
+        'name': {
+          'type': 'string'
+        },
+        'birthday': {
+          'type': 'string',
+          'format': 'date'
+        },
+        'nationality': {
+          'type': 'string',
+          'enum': ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
+        },
+        'tasks': {
+          'type': 'array',
+          'items': {
+            '$ref': '#/definitions/task'
+          }
+        }
+      },
+      'required': [ 'name' ],
+      'additionalProperties': false
+    }
+  }
+};