Add linting to demo, fix style issues

Author: Brandon Dail

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
         "browser": true,
         "es6": true,
         "node": true,
-        "jest": true
+        "jest": true,
     },
     "extends": [
       "eslint:recommended",

demo/.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

demo/app.js

@@ -1,8 +1,7 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import Radium, { Style, StyleRoot } from "radium";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Radium, { Style, StyleRoot } from 'radium';
 import * as animations from '../lib';
-import merge from '../lib/merge';
 
 import Demo from './demo';
 
@@ -11,49 +10,47 @@ const styles = {
     textAlign: 'center',
     paddingTop: 200,
     body: {
-      backgroundColor: 'white',
-      color: 'white',
-      fontFamily: "Whitney SSm A, Whitney SSm B, Helvetica Neue, Helvetica, Arial, sans-serif",
+      backgroundColor: '#e7e5e3',
+      fontFamily: 'Whitney SSm A, Whitney SSm B, Helvetica Neue, Helvetica, Arial, sans-serif',
       lineHeight: 1.5,
       margin: 0,
       transform: 'translate3d(0, 0, 0)',
-   },
-   p: {
-     margin: 0,
-     color: '#242121'
-   },
-   select: {
-     backgroundColor: '#e7e5e3',
-     border: 'none',
-     height: 35,
-     fontSize: 15,
-     fontFamily: 'inherit',
-     width: 155,
-     fontWeight: 'bold',
-   },
-   input: {
-     backgroundColor: '#e7e5e3',
-     height: 35,
-     border: 'none',
-     padding: '0px 5px',
-     borderRadius: 6,
-     fontFamily: 'inherit'
-   },
-   button: {
-     backgroundColor: '#e7e5e3',
-     outline: 'none',
-     backgroundColor: 'white',
-     height: 35,
-     border: 'none',
-     padding: '0px 10px',
-     borderRadius: 6,
-     fontFamily: 'inherit'
-   },
-   label: {
-     position: 'absolute',
-     bottom: 0,
-     fontSize: 10,
-   },
+    },
+    p: {
+      margin: 0,
+      color: '#242121'
+    },
+    select: {
+      border: 'none',
+      height: 35,
+      fontSize: 15,
+      fontFamily: 'inherit',
+      width: 155,
+      fontWeight: 'bold',
+    },
+    input: {
+      height: 35,
+      width: 50,
+      border: 'none',
+      padding: '0px 5px',
+      borderRadius: 6,
+      fontFamily: 'inherit'
+    },
+    button: {
+      backgroundColor: 'white',
+      outline: 'none',
+      height: 35,
+      border: 'none',
+      padding: '0px 10px',
+      borderRadius: 6,
+      fontFamily: 'inherit'
+    },
+    label: {
+      color: '#242121',
+      position: 'absolute',
+      bottom: 0,
+      fontSize: 10,
+    },
   },
   container: {
     position: 'relative',
@@ -95,7 +92,7 @@ class App extends React.Component {
     this.state = {
       animation: 'bounce',
       library: 'Radium',
-    }
+    };
     this.duration = 1;
     this.selectAnimation = this.selectAnimation.bind(this);
     this.onDurationChange = this.onDurationChange.bind(this);
@@ -115,13 +112,12 @@ class App extends React.Component {
   triggerAnimation() {
     const { animation } = this.state;
     this.setState({ animation: '' }, () => {
-      this.setState({ animation })
-    })
+      this.setState({ animation });
+    });
   }
 
   render() {
     const { animation } = this.state;
-    console.log('render')
     return (
       <StyleRoot>
         <div style={styles.global}>
@@ -149,7 +145,7 @@ class App extends React.Component {
           Duration
         </label>
         <input
-          value={this.state.duration}
+          defaultValue='1'
           onChange={this.onDurationChange}
           id='duration'
           style={styles.duration}
@@ -164,10 +160,10 @@ class App extends React.Component {
         </div>
         </div>
       </StyleRoot>
-    )
+    );
   }
 }
 
 const Wrapper = Radium(App);
 
-ReactDOM.render(<Wrapper/>, document.getElementById("content"));
+ReactDOM.render(<Wrapper/>, document.getElementById('content'));

demo/controls.js

@@ -1,13 +1,12 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import Radium, { Style } from "radium";
+import React from 'react';
+import Radium from 'radium';
 
 
 const Demo = ({ styles, duration, animation }) => {
   const headerStyle = {
     ...(styles[animation]),
     animationDuration: `${duration}s`,
-    width: 500,
+    width: 600,
     fontSize: 60,
     margin: '30px auto',
     color: '#c43a31'
@@ -16,7 +15,8 @@ const Demo = ({ styles, duration, animation }) => {
     ...styles.fadeInUp,
     animationDuration: '2s',
     fontSize: 16,
-  }
+    marginBottom: 25,
+  };
 
   // Render a bunch of empty spans so that each keyframe
   // will be available in the DOM.
@@ -31,7 +31,13 @@ const Demo = ({ styles, duration, animation }) => {
     <p style={descriptionStyle}>A collection of animations for CSS-in-JS libraries </p>
     <a href='https://github.com/FormidableLabs/react-animations'>View on Github</a>
     </div>
-  )
-}
+  );
+};
+
+Demo.propTypes = {
+  styles: React.PropTypes.object,
+  duration: React.PropTypes.number,
+  animation: React.PropTypes.string,
+};
 
 export default Radium(Demo);

demo/demo.js

@@ -37,6 +37,7 @@
     "babel-preset-react": "^6.11.1",
     "eslint": "^3.6.0",
     "eslint-plugin-flowtype": "^2.19.0",
+    "eslint-plugin-react": "^6.3.0",
     "flow-bin": "^0.32.0",
     "jest": "^15.1.1",
     "jest-cli": "^15.1.1",