Upgrade ESLint

.eslintignore

@@ -2,5 +2,4 @@ build/*
 dist/*
 node_modules/*
 
-**/__test__
 **/vendor

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "ascribe",
+    "rules": {
+        "no-console": [2, { "allow": ["error", "logSentry"] }]
+    }
+}

package.json

@@ -23,7 +23,7 @@
   "devDependencies": {
     "autoprefixer": "^6.3.3",
     "babel-cli": "^6.6.5",
-    "babel-eslint": "^4.1.8",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-object-assign": "^6.5.0",
@@ -35,9 +35,11 @@
     "bootstrap-loader": "^1.0.10",
     "css-loader": "^0.23.1",
     "dotenv": "^2.0.0",
-    "eslint": "^1.10.3",
-    "eslint-plugin-babel": "^3.1.0",
-    "eslint-plugin-react": "^3.16.1",
+    "eslint": "^2.10.2",
+    "eslint-config-ascribe": "^1.0.1",
+    "eslint-plugin-import": "^1.8.0",
+    "eslint-plugin-jsx-a11y": "^1.2.2",
+    "eslint-plugin-react": "^5.1.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "html-webpack-plugin": "^2.16.0",
     "image-webpack-loader": "^1.6.3",

server.demo.js

@@ -1,3 +1,5 @@
+/* eslint-disable strict, no-console */
+/* eslint-disable import/no-extraneous-dependencies, import/newline-after-import */
 'use strict';
 const path = require('path');
 
@@ -39,7 +41,8 @@ const server = new WebpackDevServer(compiler, {
 // Start server
 server.listen(PORT, HOST_NAME, (err) => {
     if (err) {
-        console.error(`Demo server ran into ${err} while starting on  ${HOST_NAME}:${PORT}. Shutting down...`);
+        console.error(`Demo server ran into ${err} while starting on  ${HOST_NAME}:${PORT}. ` +
+                      'Shutting down...');
         server.close();
     }
     console.log(`Demo server running on ${HOST_NAME}:${PORT}`);

src/app.js

@@ -5,9 +5,6 @@ import 'core-js/stage/4';
 
 import 'isomorphic-fetch';
 
-// Bootstrap global app dependencies
-import './utils/error_handling';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Bowser from 'bowser';
@@ -17,6 +14,10 @@ import Header from './components/header';
 import BlocksConveyor from './components/blocks/blocks_conveyor';
 import WorkRegistrationContainer from './components/work_registration_container';
 
+// Bootstrap global app dependencies
+// Error logging and Sentry:
+import './utils/error_handling';
+
 // Import global app styles
 import './app_global.scss';
 
@@ -41,7 +42,7 @@ const OnionboardingApp = CssModules(React.createClass({
             selectedFile: file
         });
 
-        //TODO: get hash either from webworker or from server
+        // TODO: get hash either from webworker or from server
     },
 
     render() {
@@ -58,10 +59,12 @@ const OnionboardingApp = CssModules(React.createClass({
             <div className={browserName} styleName="app">
                 <Header hide={hasFile} />
                 <WorkRegistrationContainer
-                    onReset={this.onReset}
                     hasFile={hasFile}
+                    onReset={this.onReset}
                     onSelectFile={this.onSelectFile} />
-                <BlocksConveyor fileHash={fileHash} fileName={selectedFile ? selectedFile.name : null} />
+                <BlocksConveyor
+                    fileHash={fileHash}
+                    fileName={selectedFile ? selectedFile.name : null} />
             </div>
         );
     }

src/components/blocks/block.js

@@ -3,14 +3,25 @@ import CssModules from 'react-css-modules';
 
 import styles from './block.scss';
 
-const Block = ({ front, top, side, ...props}) => (
+
+const { node } = React.PropTypes;
+
+const propTypes = {
+    front: node,
+    side: node,
+    top: node
+};
+
+const Block = ({ front, top, side, ...props }) => (
     <div {...props} styleName="container">
         <div styleName="front">{front}</div>
         <div styleName="top">{top}</div>
         <div styleName="side">{side}</div>
     </div>
 );
 
+Block.propTypes = propTypes;
+
 // Make sure this is in sync with the width in block.scss!
 // Unfortunately there's no way to export the value directly from the stylesheet, and using an
 // inline style here is less than ideal because the transforms used to maniuplate the top and

src/components/blocks/blocks_conveyor.js

@@ -1,63 +1,13 @@
 import React from 'react';
 import CssModules from 'react-css-modules';
-import Dimensions from 'react-dimensions';
 
-import Grouping from 'ascribe-react-components/modules/ui/grouping';
-
-import { default as Block, BLOCK_WIDTH } from './block';
-import BlockDetails from './block_details';
+import BlocksGroup from './blocks_group';
 
 import styles from './blocks_conveyor.scss';
 
 
 const { string } = React.PropTypes;
 
-const BLOCK_MARGIN = 25;
-const BLOCK_GROUP_SHIFT_X = -150;
-
-// We need to define another component for Dimensions to hook into and provide dimension props
-const BlocksGroup = Dimensions()(CssModules(({ blockDetails: { hash, name } = {}, containerWidth }) => {
-    const blocks = [];
-
-    // Somewhat hacky here, since we have no way of querying a non-rendered Block for its width.
-    // We have to make do with taking the magically defined width value by Block and use it to
-    // calculate the number of blocks it'll take to fill up the width of the container.
-    //
-    // We shift the blocks on the x-axis and add margin between each block, so let's take those
-    // into consideration here too.
-    //
-    // And just to be safe, let's render an extra block to add a small buffer in case the browser's
-    // slow at rerendering on resizes.
-    const numBlocks = Math.ceil((containerWidth - BLOCK_GROUP_SHIFT_X) / (145 + BLOCK_MARGIN)) + 1;
-
-    for (let ii = 0; ii < numBlocks; ++ii) {
-        blocks.push(
-            <Block
-                key={ii}
-                front={
-                    // Put the selected file details onto the second block (which should be the
-                    // first fully visible block on the left)
-                    ii === 1 && (hash || name) ? (
-                        <BlockDetails hash={hash} name={name} />
-                    ) : null
-                }
-                style={{ zIndex: ii }} />
-        );
-    }
-
-    return (
-        <Grouping
-            margin={BLOCK_MARGIN}
-            style={{ transform: `translateX(${BLOCK_GROUP_SHIFT_X}px)` }}
-            styleName="blocks-container">
-            {blocks}
-        </Grouping>
-    );
-}, styles));
-
-BlocksGroup.displayName = 'BlocksGroup';
-
-
 const propTypes = {
     fileHash: string,
     fileName: string

src/components/blocks/blocks_conveyor.scss

@@ -13,8 +13,3 @@
     position: absolute;
     width: 100%;
 }
-
-.blocks-container {
-    margin-bottom: 25px;
-    white-space: nowrap;
-}

src/components/blocks/blocks_group.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import CssModules from 'react-css-modules';
+import Dimensions from 'react-dimensions';
+
+import Grouping from 'ascribe-react-components/modules/ui/grouping';
+
+import BlockDetails from './block_details';
+
+import { default as Block, BLOCK_WIDTH } from './block';
+
+import styles from './blocks_group.scss';
+
+
+const { number, shape, string } = React.PropTypes;
+
+const BLOCK_MARGIN = 25; // Spacing between blocks in the conveyor
+const BLOCK_GROUP_SHIFT_X = -150; // X shift for blocks in the conveyor
+
+const propTypes = {
+    blockDetails: shape({
+        hash: string,
+        name: string
+    }),
+    containerWidth: number
+};
+
+// Define a component for Dimensions to hook into and provide dimension props
+const ResponsiveBlocksGroup = ({ blockDetails: { hash, name } = {}, containerWidth }) => {
+    const blocks = [];
+
+    // Somewhat hacky here, since we have no way of querying a non-rendered Block for its width.
+    // We have to make do with taking the magically defined width value by Block and use it to
+    // calculate the number of blocks it'll take to fill up the width of the container.
+    //
+    // We shift the blocks on the x-axis and add margin between each block, so let's take those
+    // into consideration here too.
+    //
+    // And just to be safe, let's render an extra block to add a small buffer in case the browser's
+    // slow at rerendering on resizes.
+    const numBlocks = Math.ceil((containerWidth - BLOCK_GROUP_SHIFT_X) /
+                                (BLOCK_WIDTH + BLOCK_MARGIN)) + 1;
+
+    for (let ii = 0; ii < numBlocks; ++ii) {
+        blocks.push(
+            <Block
+                key={ii}
+                front={
+                    // Put the selected file details onto the second block (which should be the
+                    // first fully visible block on the left)
+                    ii === 1 && (hash || name) ? (
+                        <BlockDetails hash={hash} name={name} />
+                    ) : null
+                }
+                style={{ zIndex: ii }} />
+        );
+    }
+
+    return (
+        <Grouping
+            margin={BLOCK_MARGIN}
+            style={{ transform: `translateX(${BLOCK_GROUP_SHIFT_X}px)` }}
+            styleName="blocks-container">
+            {blocks}
+        </Grouping>
+    );
+};
+
+ResponsiveBlocksGroup.propTypes = propTypes;
+
+const BlocksGroup = Dimensions()(CssModules(ResponsiveBlocksGroup, styles));
+BlocksGroup.displayName = 'BlocksGroup';
+
+export default BlocksGroup;

src/components/blocks/blocks_group.scss

@@ -0,0 +1,4 @@
+.blocks-container {
+    margin-bottom: 25px;
+    white-space: nowrap;
+}

src/components/form/form_submit_button.js

@@ -7,7 +7,7 @@ import styles from './form_submit_button.scss';
 
 
 const FormSubmitButton = (props) => (
-    <Button {...props} classType="form" styles={styles} wide />
+    <Button {...props} wide classType="form" styles={styles} />
 );
 
 export default CssModules(FormSubmitButton, styles);

src/components/header.js

@@ -11,6 +11,12 @@ import { getLangText } from '../utils/lang';
 import styles from './header.scss';
 
 
+const { bool } = React.PropTypes;
+
+const propTypes = {
+    hide: bool
+};
+
 const Header = ({ hide }) => (
     <div style={{ visibility: hide ? 'hidden' : 'visible' }} styleName="header">
         <Grouping className="pull-right" margin={0}>
@@ -24,4 +30,6 @@ const Header = ({ hide }) => (
     </div>
 );
 
+Header.propTypes = propTypes;
+
 export default CssModules(Header, styles);

src/components/spinner.js

@@ -4,18 +4,19 @@ import CssModules from 'react-css-modules';
 import styles from './spinner.scss';
 
 
-const { number, oneOfType, string } = React.PropTypes;
+const { number, object, oneOfType, string } = React.PropTypes;
 
 const propTypes = {
-    size: oneOfType([number, string])
+    size: oneOfType([number, string]),
+    style: object
 };
 
 const defaultProps = {
     size: 20
 };
 
 const Spinner = ({ size, style, ...props }) => (
-    <div {...props} style={Object.assign({ height: size, width: size }, style)} styleName="spinner" />
+    <div {...props} style={{ height: size, width: size, ...style }} styleName="spinner" />
 );
 
 Spinner.propTypes = propTypes;