tbolis · tbolis · Apr 26, 2016 · Apr 26, 2016
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,19 @@
 {
-  "stage": 1
-}
+	"presets": [
+		"es2015",
+		"react",
+		"stage-0"
+	],
+	"env": {
+		"development": {
+			"presets": [
+				"react-hmre"
+			]
+		}
+	},
+	"plugins": [
+        "transform-runtime",
+        "transform-object-assign",
+        "transform-react-display-name"
+    ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -1,20 +1,18 @@
 {
   "parser": "babel-eslint",
   "plugins": [
-    "react"
+    "react",
+    "eslint-plugin-react"
   ],
   "ecmaFeatures": {
-    "defaultParams": true,
-    "modules": true,
-    "jsx": true
+    "jsx": true,
+    "modules": true
   },
   "env": {
     "browser": true,
     "amd": true,
     "es6": true,
-    "mocha": true,
-    "phantomjs": true,
-    "node": true
+    "node": false
   },
   "rules": {
     "comma-dangle": 1,
@@ -26,6 +24,7 @@
     "global-strict": 0,
     "no-extra-semi": 1,
     "no-underscore-dangle": 0,
+    "no-extra-parens": 0,
     "no-console": 1,
     "no-unused-vars": 1,
     "no-trailing-spaces": [
@@ -34,8 +33,9 @@
         "skipBlankLines": true
       }
     ],
-    "no-unreachable": 1,
     "no-alert": 0,
-    "react/jsx-uses-react": 1
+    "no-unreachable": 1,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
 ## Changelog
 
 
+* **0.2.3** Upgrading to latest libraries
+    - Major
+        - React 15.0.1
+        - Fabric 1.6.0
+    - Other 
+        - babel
+        - react-color 
+        - etc.           
 * **0.2.2** Minor bug fixes and improvements release
 * **0.2.1** Bundling fabric to the library, to avoid complexity by adding it as external dependency
 * **0.2.0** Adding FabricJS as the core of the sketch field

diff --git a/examples/base.html b/examples/base.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>{%= o.htmlWebpackPlugin.options.title %}</title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="keywords" content="{%= o.htmlWebpackPlugin.options.keywords %}">
     <meta name="description" content="{%= o.htmlWebpackPlugin.options.description %}">

diff --git a/examples/main.jsx b/examples/main.jsx
@@ -2,7 +2,7 @@
 'use strict';
 
 import React from 'react';
-import ColorPicker from 'react-color';
+import {CompactPicker} from 'react-color';
 
 import 'flexboxgrid';
 import './main.css';
@@ -40,7 +40,7 @@ const styles = {
     gridList: {
         width: '100%',
         overflowY: 'auto',
-        marginBottom: 24
+        marginBottom: '24px'
     },
     gridTile: {
         backgroundColor: '#fcfcfc'
@@ -287,16 +287,17 @@ class SketchFieldDemo extends React.Component {
                             <CardTitle title='Colors'/>
                             <CardText>
                                 <label htmlFor='lineColor'>Line</label>
-                                <ColorPicker ref='lineColor' type='compact' color={this.state.lineColor}
-                                             onChange={(color) => this.setState({lineColor:'#'+color.hex})}/>
+                                <CompactPicker
+                                    id='lineColor' color={this.state.lineColor}
+                                    onChange={(color) => this.setState({lineColor:'#'+color.hex})}/>
                                 <br/>
                                 <br/>
                                 <Toggle label="Fill"
                                         defaultToggled={this.state.fillWithColor}
                                         onToggle={(e) => this.setState({fillWithColor:!this.state.fillWithColor})}/>
-                                <ColorPicker type="compact"
-                                             color={this.state.fillColor}
-                                             onChange={(color) => this.setState({fillColor:'#'+color.hex})}/>
+                                <CompactPicker
+                                    color={this.state.fillColor}
+                                    onChange={(color) => this.setState({fillColor:'#'+color.hex})}/>
                             </CardText>
                         </Card>
                     </div>

diff --git a/examples/run.jsx b/examples/run.jsx
@@ -1,9 +1,11 @@
+'use strict';
+
 (function () {
     let React = require('react');
     let ReactDOM = require('react-dom');
     let injectTapEventPlugin = require('react-tap-event-plugin');
 
-    let Demo = require('./main');
+    let Demo = require('./main').default;
 
     // Needed for React Developer Tools (Chrome Extension)
     window.React = React;

diff --git a/karma.config.js b/karma.config.js
@@ -3,6 +3,9 @@ const path = require('path');
 const srcPath = path.join(__dirname, 'src');
 const testPath = path.join(__dirname, 'test');
 
+// Set environment to testing
+process.env.NODE_ENV = 'testing';
+
 module.exports = function (config) {
     config.set({
         basePath: './',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-sketch",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Sketch Element for React based applications, backed-up by fabricjs as its core",
   "keywords": [
     "react",
@@ -39,49 +39,58 @@
     "node": ">0.4.0 <1.0.0"
   },
   "peerDependencies": {
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1"
   },
   "devDependencies": {
-    "babel": "^5.0.0",
-    "babel-core": "^5.0.0",
-    "babel-eslint": "^4.1.6",
-    "babel-loader": "^5.0.0",
+    "babel-cli": "^6.7.7",
+    "babel-core": "^6.7.7",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-object-assign": "^6.5.0",
+    "babel-plugin-transform-react-display-name": "^6.5.0",
+    "babel-plugin-transform-runtime": "^6.7.5",
+    "babel-preset-react-hmre": "^1.0.1",
+    "babel-polyfill": "^6.7.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
     "canvas": "^1.3.12",
-    "chai": "^3.4.1",
-    "core-js": "^2.0.3",
+    "chai": "^3.5.0",
+    "core-js": "^2.3.0",
     "css-loader": "^0.23.1",
-    "eslint": "^1.2.1",
-    "eslint-loader": "^1.0.0",
-    "eslint-plugin-react": "^3.3.0",
-    "fabric": "^1.5.0",
+    "eslint": "^2.8.0",
+    "eslint-loader": "^1.3.0",
+    "eslint-plugin-react": "^5.0.1",
+    "fabric": "^1.6.0",
     "flexboxgrid": "^6.3.0",
-    "html-webpack-plugin": "^1.7.0",
-    "karma": "^0.13.19",
+    "html-webpack-plugin": "^2.16.0",
+    "karma": "^0.13.22",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",
-    "karma-coverage": "^0.5.3",
-    "karma-mocha": "^0.2.1",
-    "karma-mocha-reporter": "^1.1.5",
+    "karma-coverage": "^0.5.5",
+    "karma-mocha": "^0.2.2",
+    "karma-mocha-reporter": "^2.0.2",
     "karma-phantomjs-launcher": "^1.0.0",
-    "karma-phantomjs-shim": "^1.2.0",
+    "karma-phantomjs-shim": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
-    "material-ui": "^0.14.2",
-    "mocha": "^2.3.4",
+    "material-ui": "^0.14.4",
+    "mocha": "^2.4.5",
     "open": "0.0.5",
     "open-browser-webpack-plugin": "0.0.2",
-    "phantomjs": "^1.9.19",
-    "phantomjs-prebuilt": "^2.1.3",
-    "react": "latest",
-    "react-addons-test-utils": "^0.14.6",
-    "react-color": "^1.3.6",
+    "phantomjs": "^2.1.7",
+    "phantomjs-prebuilt": "^2.1.7",
+    "react": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
+    "react-color": "^2.0.0",
     "react-dom": "latest",
     "react-hot-loader": "^1.3.0",
     "react-tap-event-plugin": "latest",
-    "rimraf": "^2.5.1",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.11",
+    "rimraf": "^2.5.2",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1"
   }
 }
diff --git a/src/SketchField.jsx b/src/SketchField.jsx
@@ -400,9 +400,9 @@ class SketchField extends React.Component {
             <div className={className} style={style}>
                 <canvas
                     id={uuid4()}
-                    height={height || 512}
+                    height={(height || 512) + 'px'}
                     ref={(c) => this._canvas = c}
-                    width={width || this.state.parentWidth}>
+                    width={(width || this.state.parentWidth) + 'px'}>
                     Sorry, Canvas HTML5 element is not supported by your browser :(
                 </canvas>
             </div>