add paper canvas component

.eslintignore

@@ -1,3 +1,3 @@
 node_modules/*
-build/*
+dist/*
 playground/

package.json

@@ -41,6 +41,7 @@
     "lodash.defaultsdeep": "4.6.0",
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
+    "paper": "^0.11.4",
     "postcss-import": "^10.0.0",
     "postcss-loader": "^2.0.5",
     "postcss-simple-vars": "^4.0.0",

src/components/paint-editor.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
+import PaperCanvas from './paper-canvas.jsx';
 
 export default class PaintEditorComponent extends React.Component {
     render () {
         return (
-            <div className="paint-editor">
-                BANANAS
-            </div>
+            <PaperCanvas />
         );
     }
 }

src/components/paper-canvas.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import paper from 'paper';
+
+class PaperCanvas extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+        };
+    }
+    componentDidMount () {
+        paper.setup('paper-canvas');
+        // Create a Paper.js Path to draw a line into it:
+        var path = new paper.Path();
+        // Give the stroke a color
+        path.strokeColor = 'black';
+        var start = new paper.Point(100, 100);
+        // Move to start and draw a line from there
+        path.moveTo(start);
+        // Note that the plus operator on Point objects does not work
+        // in JavaScript. Instead, we need to call the add() function:
+        path.lineTo(start.add([200, -50]));
+        // Draw the view now:
+        paper.view.draw();
+    }
+    componentWillUnmount () {
+    }
+    render () {
+        return (
+            <canvas id="paper-canvas" />
+        );
+    }
+}
+
+PaperCanvas.propTypes = {};
+
+module.exports = PaperCanvas;