fix linting

package.json

@@ -33,11 +33,11 @@
     "@storybook/react": "^3.3.11",
     "@storybook/storybook-deployer": "^2.2.0",
     "babel-core": "^6.26.0",
-    "eslint": "^3.9.1",
+    "eslint": "^4.16.0",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.1.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.6.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.6.1",
     "react-build-dist": "^0.0.8",
     "react-build-lib": "adrianmcli/react-build-lib"
   },

src/ReactRevealText.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { getRandoms, randomToDelay } from './utils';
 
 class ReactRevealText extends React.Component {
-
   constructor(props) {
     super(props);
     this.getDelays = this.getDelays.bind(this);
@@ -82,6 +81,11 @@ ReactRevealText.defaultProps = {
   delayMin: 200,
   delayMax: 1200,
   threshold: 0.2,
+  text: '',
+  className: '',
+  style: {},
+  show: false,
+  children: undefined,
 };
 
 export default ReactRevealText;

src/TestWrapper.js

@@ -1,8 +1,8 @@
+/* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
 
 class TestWrapper extends React.Component {
-
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);

stories/demo.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-state */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
@@ -7,24 +8,21 @@ import ReactRevealText from '../src/index';
 
 export default () =>
   storiesOf('Demo', module)
-    .add('Revealing Text', withInfo(
-      {
-        propTables: false,
-        inline: true,
-        source: false,
-        text: `
+    .add('Revealing Text', withInfo({
+      propTables: false,
+      inline: true,
+      source: false,
+      text: `
           A simple component for revealing text in a gradual way.
     
           Each letter gets a transition applied to it with a random distribution of delays so that they come into (and out of) view sporadically.
     
           This controlled component is great for landing pages and anywhere you need to show some kind of transition.
     
           Inspired by Adam Schwartz's [Magic of CSS](http://adamschwartz.co/magic-of-css/chapters/6-transitions/).
-        `
-      }
-    )(() => {
+        `,
+    })(() => {
       class Wrapper extends React.Component {
-
         constructor() {
           super();
           this.state = { show: false };
@@ -66,4 +64,4 @@ export default () =>
       return (
         <Wrapper />
       );
-    }))
+    }));

stories/documentation.js

@@ -32,7 +32,7 @@ export default () =>
 
         **style** *(object)*  
         This prop allows you to pass in styles for the div surrounding the text.
-      `
+      `,
     })(() => {
       setOptions({ showDownPanel: true });
       return (
@@ -76,7 +76,7 @@ export default () =>
         The difference between the random numbers generated for each letter compared to the previous letter.
         Setting this higher will force the delays to be very different between each letter, spreading out the effect.
         Setting this lower will allow delays to be similar between letters, sometimes creating a chunking effect.
-      `
+      `,
     })(() => {
       setOptions({ showDownPanel: true });
       const timingFnOptions = {
@@ -114,7 +114,7 @@ export default () =>
         This page has all the properties for you to play with.
 
         Note that you can input \`timingFunction\` as a string on the knobs tab.
-      `
+      `,
     })(() => {
       setOptions({ showDownPanel: true });
       const thresholdOptions = {
@@ -146,4 +146,4 @@ export default () =>
           />
         </TestWrapper>
       );
-    }))
+    }));

stories/examples.js

@@ -42,10 +42,9 @@ export default () =>
           }
         }
         ~~~
-      `
+      `,
     })(() => {
       class Wrapper extends React.Component {
-
         constructor() {
           super();
           this.state = { show: false };
@@ -120,10 +119,9 @@ export default () =>
           }
         }
         ~~~
-      `
+      `,
     })(() => {
       class Wrapper extends React.Component {
-
         constructor() {
           super();
           this.state = { show: false };
@@ -209,10 +207,9 @@ export default () =>
           }
         }
         ~~~
-      `
+      `,
     })(() => {
       class Wrapper extends React.Component {
-
         constructor() {
           super();
           this.state = { show: false };
@@ -251,4 +248,4 @@ export default () =>
       return (
         <Wrapper />
       );
-    }))
+    }));

stories/tutorial.js

@@ -25,7 +25,7 @@ export default () =>
         In this case, it's the \`show\` prop.
 
         Click the "Knobs" tab on the bottom and try changing the state.
-      `
+      `,
     })(() => {
       setOptions({ showDownPanel: true });
       return (
@@ -52,7 +52,7 @@ export default () =>
         Or, you can also pass in a string to the \`className\` prop.
 
         Note that the component only re-renders when the \`show\` prop is changed.
-      `
+      `,
     })(() => {
       setOptions({ showDownPanel: true });
       return (
@@ -86,13 +86,13 @@ export default () =>
         ~~~jsx
         import TestWrapper from 'react-reveal-text/lib/TextWrapper';
         ~~~
-      `
+      `,
     })(() => {
       setOptions({ showDownPanel: true });
-        return (
-          <TestWrapper
-            text={text('text', 'AMAZING TEXT')}
-            style={object('style', {
+      return (
+        <TestWrapper
+          text={text('text', 'AMAZING TEXT')}
+          style={object('style', {
               color: 'tomato',
               fontSize: '24px',
               lineHeight: '36px',
@@ -101,8 +101,8 @@ export default () =>
               letterSpacing: '1.2em',
               paddingLeft: '1.2em', // to compensate for letter spacing
             })}
-          >
-            <ReactRevealText />
-          </TestWrapper>
-        );
-    }))
+        >
+          <ReactRevealText />
+        </TestWrapper>
+      );
+    }));