Update editor application

package.json

@@ -5,10 +5,10 @@
   "bugs": "https://github.com/eclipsesource/jsonforms-ui-schema-editor/issues",
   "homepage": "https://AhmetTanakol.github.io/jsonforms-ui-schema-editor/",
   "dependencies": {
-    "@jsonforms/core": "file:jsonforms-core-2.0.2.tgz",
-    "@jsonforms/editor": "file:jsonforms-editor-2.0.2.tgz",
-    "@jsonforms/material-renderers": "file:jsonforms-material-renderers-2.0.2.tgz",
-    "@jsonforms/react": "file:jsonforms-react-2.0.2.tgz",
+    "@jsonforms/core": "^2.0.6",
+    "@jsonforms/material-renderers": "^2.0.6",
+    "@jsonforms/material-tree-renderer": "^2.0.6",
+    "@jsonforms/react": "^2.0.6",
     "@material-ui/core": "^1.2.1",
     "@material-ui/icons": "^1.0.0",
     "@types/lodash": "^4.14.106",
@@ -43,7 +43,8 @@
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
     "testPathIgnorePatterns": [
       "/node_modules/"
-    ]
+    ],
+    "testURL": "http://localhost/"
   },
   "devDependencies": {
     "@types/jest": "^22.2.2",

src/App.tsx

@@ -8,16 +8,12 @@ import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 
 const theme = createMuiTheme({
   palette: {
-    type: 'dark',
-    primary: {
-      main: '#FFFFFF'
-    },
     secondary: {
       main: '#ee6e73',
       dark: '#26a69a'
     },
     background: {
-      'default': '#1e1e1e'
+      'default': '#3748AC'
     }
   },
   typography: {

src/editor/JsonEditorIde.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { TreeRenderer } from '@jsonforms/editor';
-import './jsoneditor.css';
+import { TreeWithDetailRenderer } from '@jsonforms/material-tree-renderer';
 import './example.css';
 
 const JsonFormsEditorIde = props => {
   const { imageProvider, labelProvider, uischema, schema, filterPredicate} = props;
 
   return (
     <div>
-      <TreeRenderer
+      <TreeWithDetailRenderer
         uischema={uischema}
         schema={schema}
         filterPredicate={filterPredicate}

src/editor/app-bar/EditorBar.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'recompose';
 import * as _ from 'lodash';
-import * as AJV from 'ajv';
 import {
   StyleRulesCallback,
   withStyles,
@@ -19,8 +18,7 @@ import FolderOpen from '@material-ui/icons/FolderOpen';
 import ImportExport from '@material-ui/icons/ImportExport';
 import ModelSchemaDialog from './dialogs/ModelSchemaDialog';
 import { Actions } from '@jsonforms/core';
-
-const ajv = new AJV({allErrors: true, verbose: true});
+import { validate } from '../../validation';
 
 const styles:
   StyleRulesCallback<'root' | 'flex' | 'rightIcon' | 'button' | 'appBar'> = theme => ({
@@ -37,8 +35,7 @@ const styles:
     marginLeft: theme.spacing.unit
   },
   button: {
-    margin: theme.spacing.unit,
-    color: theme.palette.text.primary
+    margin: theme.spacing.unit
   }
 });
 
@@ -138,8 +135,9 @@ class EditorBar extends
         return;
       }
       if (!_.isEmpty(readData)) {
-        const valid = ajv.validate(schema, readData);
-        if (valid) {
+        const validator = validate(schema);
+        const errors = validator(readData);
+        if (_.isEmpty(errors)) {
           this.props.updateRootData(readData);
         } else {
           alert('Loaded data does not adhere to the specified schema.');
@@ -159,10 +157,10 @@ class EditorBar extends
       <div className={classes.root}>
         <AppBar className={classes.appBar} position='static'>
           <Toolbar>
-            <Typography variant='title' color='primary' className={classes.flex}>
+            <Typography variant='title' color='inherit' className={classes.flex}>
               UI Schema Editor
             </Typography>
-            <Button className={classes.button} color='primary' onClick={this.handleModelSchemaOpen}>
+            <Button className={classes.button} color='inherit' onClick={this.handleModelSchemaOpen}>
               Upload Schema Model/Domain
               <FileUpload className={classes.rightIcon} />
             </Button>
@@ -171,7 +169,7 @@ class EditorBar extends
               readOnly={false}
               onClose={this.handleModelSchemaClose}
             />
-            <Button component='label' className={classes.button} color='primary'>
+            <Button component='label' className={classes.button} color='inherit'>
               Open UI Schema File
               <FolderOpen className={classes.rightIcon} />
               <input
@@ -182,7 +180,7 @@ class EditorBar extends
             </Button>
             <Button
               className={classes.button}
-              color='primary'
+              color='inherit'
               onClick={this.handleExportDialogOpen}
             >
               Export UI Schema
@@ -193,7 +191,7 @@ class EditorBar extends
               readOnly={true}
               onClose={this.handleExportDialogClose}
             />
-            <Button className={classes.button} color='primary' onClick={this.handleDownload}>
+            <Button className={classes.button} color='inherit' onClick={this.handleDownload}>
               Download UI Schema
               <FileDownload className={classes.rightIcon} />
             </Button>