Merge pull request #43 from tbolis/fix-the-latest-greatest

Fix the latest greatest

Author: tbolis

.babelrc

@@ -1,18 +1,22 @@
 {
   "presets": [
-    [
-      "env",
-      {
-        "modules": false
-      }
-    ],
-    "react",
-    "stage-0"
+    "@babel/preset-env", "@babel/preset-react"
   ],
   "plugins": [
+    "@babel/plugin-transform-runtime",
     "react-hot-loader/babel",
-    "transform-object-assign",
-    "transform-react-display-name",
-    "transform-runtime"
+
+    // Stage 2 https://github.com/babel/babel/tree/master/packages/babel-preset-stage-2
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+
+    // Stage 3
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    "@babel/plugin-proposal-json-strings"
   ]
 }

.eslintrc

@@ -2,36 +2,25 @@
   "parser": "babel-eslint",
   "plugins": [
     "react",
+    "jest",
     "eslint-plugin-react"
   ],
   "env": {
-    "browser": true,
-    "amd": true,
     "es6": true,
-    "node": false
+    "jest": true,
+    "amd": true,
+    "browser": true,
+    "node": true
   },
-  "rules": {
-    "comma-dangle": 1,
-    "quotes": [
-      1,
-      "single"
-    ],
-    "no-undef": 1,
-    "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": [
-      1,
-      {
-        "skipBlankLines": true
-      }
-    ],
-    "no-alert": 0,
-    "no-unreachable": 1,
-    "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 1
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "globals": {
+    "React": true,
+    "document": true,
+    "require": true,
+    "window": true,
+    "localStorage": true
   }
 }

.gitignore

@@ -158,6 +158,7 @@ node_modules
 
 lib/
 build/
+dist/
 
 ### Windows template
 # Windows image file caches

.npmignore

@@ -8,6 +8,8 @@ docs/
 .gitignore
 .karma.config.js
 webpack.*
+yarn.lock
+package.lock
 
 
 ### Linux template
@@ -168,7 +170,6 @@ build/Release
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
 
-lib/
 build/
 
 ### Windows template

.travis.yml

@@ -1,8 +1,12 @@
 language: node_js
 node_js:
+  - "10"
+  - "9"
   - "8"
-  - "7"
-  - "6"
+cache:
+  yarn: true
+  directories:
+    - node_modules
 env:
   - CXX=g++-4.8
 addons:
@@ -13,5 +17,5 @@ addons:
       - g++-4.8
 before_install:
   - sudo apt-get update -qq
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.9.4
   - sudo apt-get install -y -qq libgif-dev libpng-dev libjpeg8-dev libpango1.0-dev libcairo2-dev
-script: 'npm run build && npm run test'

README.md

@@ -16,11 +16,17 @@ A Sketch tool for React based applications, backed-up by [FabricJS](http://fabri
 npm install react-sketch --save
 ```
 
+or with yarn
+
+```sh
+yarn add react-sketch
+```
+
 ### Source installation
 
 In order to build from source, read the [relevant instructions](http://fabricjs.com/fabric-intro-part-4#node) first. 
 
-Tested with node versions 4,5,6,7,8.
+Tested with node versions 6,7,8.
 
 ## Usage
 
@@ -35,7 +41,7 @@ class SketchFieldDemo extends React.Component {
             <SketchField width='1024px' 
                          height='768px' 
                          tool={Tools.Pencil} 
-                         color='black'
+                         lineColor='black'
                          lineWidth={3}/>
         )
      }
@@ -54,10 +60,10 @@ Configuration Options
 | undoSteps         | Number                | 15            | number of undo/redo steps to maintain                             |
 | imageFormat       | String                | png           | image format when calling toDataURL, can be png or jpeg           | 
 | width             | Number                | No Value(null)| Set/control the canvas width, if left empty the sketch will scale to parent element |
-| height            | Number                | 512 | Set/control the canvas height, if left empty the sketch will take a reasonable default height |
-| defaultData       | JSON or data URL      |               | Default initial data, can be json or URL data accroding to configuration option below, in the case of data URL the initial drawing will be imported as an image |
-| defaultDataType   | Enumeration (string)  | json          | The Type of initial data, can be either json or url               | 
-| widthCorrection   | Number                | 2             | Specify some width correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style | 
+| height            | Number                | 512           | Set/control the canvas height, if left empty the sketch will take a reasonable default height |
+| value             | JSON                  |               | Property to utilize and handle the sketch data as controlled component |
+| defaultValue      | JSON                  |               | Default initial data, to load. If value is set then value will be loaded instead |
+| widthCorrection   | Number                | 2             | Specify some width correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style |
 | heightCorrection  | Number                | 0             | Specify some height correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style | 
 
 
@@ -67,6 +73,7 @@ Available tools
 |---                |---          |
 | Pencil            | Free drawing pencil |
 | Line              | Gives you the ability to draw lines |
+| Rectangle         | Create rectangles |
 | Circle            | Create circles |
 | Rectangle         | Create Rectangles |
 | Select            | Disables drawing and gives you the ability to modify existing elements in the canvas |
@@ -79,11 +86,11 @@ The project includes a webpack server for running the examples, just run:
 
 ```sh
 git clone https://github.com/tbolis/react-sketch.git
-npm install
+yarn install
 npm start
 ```
 
-and navigate to http://localhost:9999
+and navigate to http://localhost:23000
 
 You can as well check the live showcase here: http://tbolis.github.io/showcase/react-sketch/
 

examples/base.html

@@ -23,7 +23,7 @@
     };
     (function () {
         var wf = document.createElement('script');
-        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+        wf.src = ('https:' === document.location.protocol ? 'https' : 'http') +
                 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
         wf.type = 'text/javascript';
         wf.async = 'true';

examples/main.css

@@ -15,7 +15,7 @@ body, html {
     min-height: 100%;
     width: 100%;
     height: 100%;
-    background-color: #eeffd3;
+    background-color: #607d8b;
     color: #000000;
 }