Fix new page wizard element add Component class

Issue: #66
Problem: Page wizard element was created by using CEv0 API
Solution: - Rewrite Page Wizard components to CEv1
	  - Remove unnecessery files
	  - Add Component Element class (which will replace Dress
Element)

Signed-off-by: Kornelia Kobiela <k.kobiela@samsung.com>

.eslintrc.json

@@ -40,6 +40,7 @@
         "complexity":"error"
         },
         "parserOptions": {
-            "sourceType": "module"
+            "sourceType": "module",
+            "ecmaVersion": 2018
         }
 }

design-editor/src/brackets/brackets-editor.js

@@ -9,7 +9,7 @@ import closetComponents from 'closet-component-packages';
 import {BracketsPreferenceManager} from './brackets-preference-manager';
 import {PreferenceManager} from '../preference-manager';
 import bracketsDefaultConfig from '../package-config';
-import {BracketsStatusBarElement} from './brackets-status-bar';
+import {BracketsStatusBar} from './brackets-status-bar';
 import {ConfigurationDesignAreaElement} from '../panel/configuration-design-area-element';
 import {stageManager} from '../system/stage-manager';
 import {appManager} from '../app-manager';
@@ -43,7 +43,7 @@ class BracketsEditor {
 		BracketsPreferenceManager.initialize();
 
 		element = new DesignEditorElement();
-		statusBarElement = new BracketsStatusBarElement();
+		statusBarElement = new BracketsStatusBar();
 		configurationDesignAreaElement = new ConfigurationDesignAreaElement();
 
 		modelManager = ModelManager.getInstance();

design-editor/src/brackets/brackets-status-bar.js

@@ -1,25 +1,26 @@
 'use babel';
 
-import {DressElement} from '../utils/dress-element';
+import Component from '../utils/component-element';
 
 /**
  * Class map API of Atom StatusBar
  */
-class BracketsStatusBar extends DressElement {
-    /**
-     * Add item to statub bar at left part
-     * @param item
-     * @returns {Tile}
-     */
-    addItem(item) {
-        var tile = {
-            item: item
-        };
-        this.$el.append(item);
-        return tile;
-    }
+class BracketsStatusBar extends Component {
+	constructor() {
+		super();
+	}
+
+	/**
+	 * Add item to statub bar at left part
+	 * @param item
+	 * @returns {Tile}
+	 */
+	addItem(item) {
+		this.appendChild(item);
+		return {item};
+	}
 }
 
-const BracketsStatusBarElement = document.registerElement('brackets-status-bar', BracketsStatusBar);
+customElements.define('brackets-status-bar', BracketsStatusBar);
 
-export {BracketsStatusBar, BracketsStatusBarElement};
+export {BracketsStatusBar};

design-editor/src/panel/toolbar-element.js

@@ -6,7 +6,7 @@ import path from 'path';
 import {appManager as AppManager} from '../app-manager';
 import {StateManager} from '../system/state-manager';
 import {DressElement} from '../utils/dress-element';
-import {PageWizardElement} from './wizards/page-wizard-element';
+import {PageWizard} from './wizards/page-wizard-element';
 import {EVENTS, eventEmitter} from '../events-emitter';
 import {ViewType} from '../static';
 
@@ -196,7 +196,7 @@ class Toolbar extends DressElement {
      */
 	_initialize() {
 		this._appPath = AppManager.getAppPath();
-		this._pageWizard = new PageWizardElement();
+		this._pageWizard = new PageWizard();
 	}
 
 	/**

design-editor/src/panel/wizards/components/thumbnail-element.js

@@ -65,25 +65,24 @@ class Thumbnail extends HTMLElement {
 
 	/**
 	 * Render
-	 * @returns {*}
+	 * @returns {Object}
 	 */
 	render() {
 		// difference between atom and brackets
 		const projectDirPath = appManager ? appManager.getAppPath().src : '/design-editor/closet';
-
-		$.ajax({
-			url: path.join(projectDirPath, TEMPLATE_FILE_PATH)
-		}).done((templateString) => {
-			const templateRendered = Mustache.render(templateString, {
-				templates: this._thumbnailMetaData,
-				getThumbnailPath() {
-					return path.join(this.path, this.thumbnail.replace(/(\.\/)/g, '/'));
-				}
-			});
-
-			$(this).empty().append(templateRendered);
-			this.selectedIndex = 0;
-		});
+		fetch(path.join(projectDirPath, TEMPLATE_FILE_PATH))
+			.then((data) => data.text())
+			.then((templateString) => {
+				const templateRendered = Mustache.render(templateString, {
+					templates: this._thumbnailMetaData,
+					getThumbnailPath() {
+						return path.join(this.path, this.thumbnail.replace(/(\.\/)/g, '/'));
+					}
+				});
+
+				$(this).empty().append(templateRendered);
+				this.selectedIndex = 0;
+			}).catch((err) => {throw err;});
 
 		return this;
 	}