#26: Use eslint-config-buildo (closes #26)

.eslintrc

@@ -1,38 +1,3 @@
 {
-  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "plugins": [
-    "react"
-  ],
-  "ecmaFeatures": {
-    "modules": true,
-    "jsx": true
-  },
-  "rules": {
-    "eol-last": 0,
-    "new-cap": 0,
-    "no-use-before-define": 0,
-    "no-shadow": 0,
-    "no-process-exit": 0,
-    "strict": [2, "global"],
-    "no-underscore-dangle": 0,
-    "quotes": [2, "single"],
-    "comma-dangle": [2, "never"],
-    "react/jsx-boolean-value": 1,
-    "react/jsx-quotes": 1,
-    "react/jsx-no-undef": 1,
-    "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 1,
-    "react/no-unknown-property": 1,
-    "react/react-in-jsx-scope": 1,
-    "react/self-closing-comp": 1,
-    "react/wrap-multilines": 1
-  }
+  "extends": "buildo"
 }

package.json

@@ -41,11 +41,11 @@
   },
   "devDependencies": {
     "babel": "^5.8.12",
-    "babel-eslint": "^4.0.5",
+    "babel-eslint": "^7.0.0",
     "babel-loader": "^5.3.2",
-    "eslint": "^1.9.0",
+    "eslint": "^3.7.1",
+    "eslint-config-buildo": "buildo/eslint-config",
     "eslint-loader": "^1.1.1",
-    "eslint-plugin-react": "^3.8.0",
     "expect": "^1.6.0",
     "isparta-loader": "^0.2.0",
     "karma": "^0.13.15",

src/CookieBanner.js

@@ -46,7 +46,8 @@ const Props = {
  * @param cookie - cookie-key used to save user's decision about you cookie-policy
  * @param cookieExpiration - used to set the cookie expiration
  * @param dismissOnScroll - whether the cookie banner should be dismissed on scroll or not
- * @param dismissOnScrollThreshold - amount of pixel the user need to scroll to dismiss the cookie banner
+ * @param dismissOnScrollThreshold -
+ *   amount of pixel the user need to scroll to dismiss the cookie banner
  * @param closeIcon - className passed to close-icon
  * @param disableStyle - pass `true` if you want to disable default style
  * @param styles - object with custom styles used to overwrite default ones
@@ -71,12 +72,12 @@ export default class CookieBanner extends React.Component {
   }
 
   addOnScrollListener = (props) => {
-    props = props || this.props;
-    if (!this.state.listeningScroll && !this.hasAcceptedCookies() && props.dismissOnScroll) {
+    const _props = props || this.props;
+    if (!this.state.listeningScroll && !this.hasAcceptedCookies() && _props.dismissOnScroll) {
       if (window.attachEvent) {
         //Internet Explorer
         window.attachEvent('onscroll', this.onScroll);
-      } else if(window.addEventListener) {
+      } else if (window.addEventListener) {
         window.addEventListener('scroll', this.onScroll, false);
       }
       this.setState({ listeningScroll: true });
@@ -88,7 +89,7 @@ export default class CookieBanner extends React.Component {
       if (window.detachEvent) {
         //Internet Explorer
         window.detachEvent('onscroll', this.onScroll);
-      } else if(window.removeEventListener) {
+      } else if (window.removeEventListener) {
         window.removeEventListener('scroll', this.onScroll, false);
       }
       this.setState({ listeningScroll: false });
@@ -162,7 +163,8 @@ export default class CookieBanner extends React.Component {
           href={link.url}
           target={link.target}
           className='cookie-link'
-          style={this.getStyle('link')}>
+          style={this.getStyle('link')}
+        >
             {link.msg || 'Learn more'}
         </a>
       );
@@ -179,8 +181,9 @@ export default class CookieBanner extends React.Component {
     }
 
     const props = omit(this.props, Object.keys(Props));
+    const computedClassName = cx('react-cookie-banner', className);
     return (
-      <div {...props} className={cx('react-cookie-banner', className)} style={this.getStyle('banner')}>
+      <div {...props} className={computedClassName} style={this.getStyle('banner')}>
         <span className='cookie-message' style={this.getStyle('message')}>
           {message}
           {this.getLink()}

src/index.js

@@ -1,3 +1,3 @@
 import CookieBanner from './CookieBanner.js';
 export default CookieBanner;
-export {cookie} from 'browser-cookie-lite';
+export { cookie } from 'browser-cookie-lite';

src/styleUtils.js

@@ -52,4 +52,4 @@ const styles = {
 
 const getStyle = (style) => styles[style];
 
-export default {getStyle};
+export default { getStyle };

test/.eslintrc

@@ -1,4 +1,10 @@
 {
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true
+  },
   "rules": {
     "react/no-multi-comp": 0
   }

test/tests/CookieBanner-test.js

@@ -3,15 +3,14 @@ const TestUtils = React.addons.TestUtils;
 import expect from 'expect';
 import CookieBanner from '../../src/CookieBanner';
 
-const resetCookies = function () {
+const resetCookies = function() {
   const cookies = document.cookie.split(';');
 
-  for (let i = 0; i < cookies.length; i++) {
-    const cookie = cookies[i];
+  cookies.forEach(cookie => {
     const eqPos = cookie.indexOf('=');
     const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
     document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
-  }
+  });
 };
 
 const renderBanner = (props) => {
@@ -61,7 +60,10 @@ describe('CookieBanner', () => {
     TestUtils.Simulate.click(closeButton);
 
     const banner2 = renderBanner().banner[0];
-    const cookieBanner2 = TestUtils.scryRenderedDOMComponentsWithClass(banner2, 'react-cookie-banner');
+    const cookieBanner2 = TestUtils.scryRenderedDOMComponentsWithClass(
+      banner2,
+      'react-cookie-banner'
+    );
     expect(cookieBanner2.length).toBe(0, 'cookie banner is displayed');
   });
 
@@ -70,7 +72,10 @@ describe('CookieBanner', () => {
     const closeButton = TestUtils.findRenderedDOMComponentWithClass(banner[0], 'button-close');
     TestUtils.Simulate.click(closeButton);
 
-    const cookieBanners = TestUtils.scryRenderedDOMComponentsWithClass(wrapper, 'react-cookie-banner');
+    const cookieBanners = TestUtils.scryRenderedDOMComponentsWithClass(
+      wrapper,
+      'react-cookie-banner'
+    );
     expect(cookieBanners.length).toBe(0, 'cookie banner is displayed');
   });
 
@@ -81,18 +86,21 @@ describe('CookieBanner', () => {
       </div>
     );
 
-    const messageWrapper = TestUtils.findRenderedDOMComponentWithClass(cookieWrapper, 'cookie-message');
+    const messageWrapper = TestUtils.findRenderedDOMComponentWithClass(
+      cookieWrapper,
+      'cookie-message'
+    );
     const message = messageWrapper.getDOMNode().firstChild;
     expect(message.innerHTML).toBe('cookie message', 'wrong message displayed');
   });
 
   it('should be replaced with custom child component', () => {
 
-    const MyComponent = React.createClass({
+    class MyComponent extends React.Component {
       render() {
         return <div className='my-component'/>;
       }
-    });
+    }
 
     const component = (
       <div>
@@ -104,36 +112,52 @@ describe('CookieBanner', () => {
 
     const cookieWrapper = TestUtils.renderIntoDocument(component);
 
-    const banner = TestUtils.scryRenderedDOMComponentsWithClass(cookieWrapper, 'react-cookie-banner');
+    const banner = TestUtils.scryRenderedDOMComponentsWithClass(
+      cookieWrapper,
+      'react-cookie-banner'
+    );
     expect(banner.length).toBe(0, 'cookie banner is being displayed');
 
-    const _myComponent = TestUtils.scryRenderedDOMComponentsWithClass(cookieWrapper, 'my-component');
+    const _myComponent = TestUtils.scryRenderedDOMComponentsWithClass(
+      cookieWrapper,
+      'my-component'
+    );
     expect(_myComponent.length).toBe(1, 'cookie banner is not displaying custom child component');
   });
 
   it('should be replaced with custom child component using function', () => {
 
-    const MyOtherComponent = React.createClass({
+    class MyOtherComponent extends React.Component {
       render() {
         return <div className='my-other-component' onClick={this.props.onAccept}/>;
       }
-    });
+    }
+
+    const customTrigger = onAccept => <MyOtherComponent onAccept={onAccept} />;
 
     const component = (
       <div>
         <CookieBanner>
-          {onAccept => <MyOtherComponent onAccept={onAccept} />}
+          {customTrigger}
         </CookieBanner>
       </div>
     );
 
     const cookieWrapper = TestUtils.renderIntoDocument(component);
 
-    const banner = TestUtils.scryRenderedDOMComponentsWithClass(cookieWrapper, 'react-cookie-banner');
+    const banner = TestUtils.scryRenderedDOMComponentsWithClass(
+      cookieWrapper,
+      'react-cookie-banner'
+    );
     expect(banner.length).toBe(0, 'cookie banner is being displayed');
 
-    const _myComponent = TestUtils.scryRenderedDOMComponentsWithClass(cookieWrapper, 'my-other-component');
-    expect(_myComponent.length).toBe(1, 'cookie banner is not displaying custom child component using function');
+    const _myComponent = TestUtils.scryRenderedDOMComponentsWithClass(
+      cookieWrapper,
+      'my-other-component'
+    );
+    expect(_myComponent.length).toBe(1,
+      'cookie banner is not displaying custom child component using function'
+    );
   });
 
 });