react and a11y linting

frontend/.eslintrc

@@ -10,19 +10,90 @@
   },
   "plugins": [
     "babel",
-    "react"
+    "react",
+    "jsx-a11y"
   ],
   "rules": {
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-deprecated": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-find-dom-node": 2,
+    "react/no-is-mounted": 2,
+    "react/no-unknown-property": 2,
+    "react/no-render-return-value": 2,
+    "react/prop-types": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/require-render-return": 2,
+    "react/no-children-prop": 2,
+    "react/no-danger": 2,
+    "react/no-danger-with-children": 2,
+    "react/no-did-mount-set-state": 2,
+    "react/no-did-update-set-state": 2,
+    "react/no-multi-comp": 1,
+    "react/no-string-refs": 2,
+    "react/no-unescaped-entities": 2,
+    "react/no-unused-prop-types": 2,
+    "react/prefer-stateless-function": 2,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 2,
+    "react/sort-prop-types": 2,
+    "react/style-prop-object": 2,
+    "react/jsx-boolean-value": [2, "never"],
+    "react/jsx-closing-bracket-location": 2,
+    "react/jsx-curly-spacing": [2, "never"],
+    "react/jsx-equals-spacing": [2, "never"],
+    "react/jsx-filename-extension": [2, {
+      "extensions": [".js"]
+    }],
+    "react/jsx-first-prop-new-line": [2, "multiline"],
+    "react/jsx-handler-names": 2,
+    "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-key": 2,
+    "react/jsx-max-props-per-line": [2, {
+      "maximum": 2
+    }],
+    "react/jsx-no-bind": 2,
+    "react/jsx-no-comment-textnodes": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-target-blank": 2,
+    "react/jsx-pascal-case": 2,
+    "react/jsx-sort-props": 2,
+    "react/jsx-space-before-closing": 2,
+    "react/jsx-wrap-multilines": 2,
+    "jsx-a11y/anchor-has-content": 2,
+    "jsx-a11y/href-no-hash": 2,
+    "jsx-a11y/aria-props": 2,
+    "jsx-a11y/aria-proptypes": 2,
+    "jsx-a11y/aria-role": 2,
+    "jsx-a11y/aria-unsupported-elements": 2,
+    "jsx-a11y/click-events-have-key-events": 2,
+    "jsx-a11y/mouse-events-have-key-events": 2,
+    "jsx-a11y/heading-has-content": 2,
+    "jsx-a11y/html-has-lang": 2,
+    "jsx-a11y/img-has-alt": 2,
+    "jsx-a11y/img-redundant-alt": 2,
+    "jsx-a11y/label-has-for": 2,
+    "jsx-a11y/lang": 2,
+    "jsx-a11y/no-access-key": 2,
+    "jsx-a11y/no-marquee": 2,
+    "jsx-a11y/no-onchange": 2,
+    "jsx-a11y/no-static-element-interactions": 2,
+    "jsx-a11y/onclick-has-focus": 2,
+    "jsx-a11y/onclick-has-role": 2,
+    "jsx-a11y/role-has-required-aria-props": 2,
+    "jsx-a11y/role-supports-aria-props": 2,
+    "jsx-a11y/scope": 2,
+    "jsx-a11y/tabindex-no-positive": 2,
     "generator-star-spacing": 0,
     "babel/generator-star-spacing": 1,
     "space-before-function-paren": [2, "never"],
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/react-in-jsx-scope": 2,
-    "object-curly-newline": ["error", {
+    "object-curly-newline": [2, {
       "minProperties": 1
     }],
-    "sort-vars": ["error", {
+    "sort-vars": [2, {
       "ignoreCase": true
     }]
   }

frontend/package.json

@@ -62,6 +62,7 @@
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.0",
     "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-promise": "^3.3.0",
     "eslint-plugin-react": "^6.4.1",
     "eslint-plugin-standard": "^2.0.1",

frontend/src/containers/app.js

@@ -20,6 +20,11 @@ const {
 } = ReactRouter;
 
 const App = connect()(React.createClass({
+  propTypes: {
+    children: React.PropTypes.node,
+    dispatch: React.PropTypes.func,
+    router: React.PropTypes.object
+  },
   componentWillMount: function() {
     const {
       router,
@@ -51,8 +56,14 @@ const App = connect()(React.createClass({
 module.exports = (props) => {
   return (
     <App {...props}>
-      <Match exactly pattern='/' component={Home} />
-      <Miss component={NotFound}/>
+      <Match
+        component={Home}
+        exactly
+        pattern='/'
+      />
+      <Miss
+        component={NotFound}
+      />
     </App>
   );
 };

frontend/src/containers/home/index.js

@@ -6,7 +6,7 @@ const {
   FormattedMessage
 } = ReactIntl;
 
-module.exports = () => {
+const Home = () => {
   return (
     <div className={styles.home}>
       <h1>
@@ -15,3 +15,5 @@ module.exports = () => {
     </div>
   );
 };
+
+module.exports = Home;

frontend/src/containers/not-found/index.js

@@ -1,6 +1,6 @@
 const React = require('react');
 
-module.exports = () => {
+const NotFound = () => {
   return (
     <div>
       <h1>404</h1>
@@ -8,3 +8,5 @@ module.exports = () => {
     </div>
   );
 };
+
+module.exports = NotFound;

frontend/yarn.lock

@@ -1928,6 +1928,10 @@ d@^0.1.1, d@~0.1.1:
   dependencies:
     es5-ext "~0.10.2"
 
+damerau-levenshtein@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
+
 dashdash@^1.12.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.0.tgz#29e486c5418bf0f356034a993d51686a33e84141"
@@ -2279,6 +2283,14 @@ eslint-plugin-babel@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-3.3.0.tgz#2f494aedcf6f4aa4e75b9155980837bc1fbde193"
 
+eslint-plugin-jsx-a11y:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-2.2.3.tgz#4e35cb71b8a7db702ac415c806eb8e8d9ea6c65d"
+  dependencies:
+    damerau-levenshtein "^1.0.0"
+    jsx-ast-utils "^1.0.0"
+    object-assign "^4.0.1"
+
 eslint-plugin-promise@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.3.0.tgz#20a1ef58b4243ffdaef82ee9360a02353a7cca89"
@@ -3443,7 +3455,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jsx-ast-utils@^1.3.1:
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.2.tgz#dff658782705352111f9865d40471bc4a955961e"
   dependencies:

ui/.eslintignore

@@ -3,3 +3,4 @@ coverage
 .nyc_output
 docs/static
 static
+webpack/embed-markdown-loader

ui/.eslintrc

@@ -10,19 +10,90 @@
   },
   "plugins": [
     "babel",
-    "react"
+    "react",
+    "jsx-a11y"
   ],
   "rules": {
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-deprecated": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-find-dom-node": 2,
+    "react/no-is-mounted": 2,
+    "react/no-unknown-property": 2,
+    "react/no-render-return-value": 2,
+    "react/prop-types": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/require-render-return": 2,
+    "react/no-children-prop": 2,
+    "react/no-danger": 2,
+    "react/no-danger-with-children": 2,
+    "react/no-did-mount-set-state": 2,
+    "react/no-did-update-set-state": 2,
+    "react/no-multi-comp": 1,
+    "react/no-string-refs": 2,
+    "react/no-unescaped-entities": 2,
+    "react/no-unused-prop-types": 2,
+    "react/prefer-stateless-function": 2,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 2,
+    "react/sort-prop-types": 2,
+    "react/style-prop-object": 2,
+    "react/jsx-boolean-value": [2, "never"],
+    "react/jsx-closing-bracket-location": 2,
+    "react/jsx-curly-spacing": [2, "never"],
+    "react/jsx-equals-spacing": [2, "never"],
+    "react/jsx-filename-extension": [2, {
+      "extensions": [".js"]
+    }],
+    "react/jsx-first-prop-new-line": [2, "multiline"],
+    "react/jsx-handler-names": 2,
+    "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-key": 2,
+    "react/jsx-max-props-per-line": [2, {
+      "maximum": 2
+    }],
+    "react/jsx-no-bind": 2,
+    "react/jsx-no-comment-textnodes": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-target-blank": 2,
+    "react/jsx-pascal-case": 2,
+    "react/jsx-sort-props": 2,
+    "react/jsx-space-before-closing": 2,
+    "react/jsx-wrap-multilines": 2,
+    "jsx-a11y/anchor-has-content": 2,
+    "jsx-a11y/href-no-hash": 2,
+    "jsx-a11y/aria-props": 2,
+    "jsx-a11y/aria-proptypes": 2,
+    "jsx-a11y/aria-role": 2,
+    "jsx-a11y/aria-unsupported-elements": 2,
+    "jsx-a11y/click-events-have-key-events": 2,
+    "jsx-a11y/mouse-events-have-key-events": 2,
+    "jsx-a11y/heading-has-content": 2,
+    "jsx-a11y/html-has-lang": 2,
+    "jsx-a11y/img-has-alt": 2,
+    "jsx-a11y/img-redundant-alt": 2,
+    "jsx-a11y/label-has-for": 2,
+    "jsx-a11y/lang": 2,
+    "jsx-a11y/no-access-key": 2,
+    "jsx-a11y/no-marquee": 2,
+    "jsx-a11y/no-onchange": 2,
+    "jsx-a11y/no-static-element-interactions": 2,
+    "jsx-a11y/onclick-has-focus": 2,
+    "jsx-a11y/onclick-has-role": 2,
+    "jsx-a11y/role-has-required-aria-props": 2,
+    "jsx-a11y/role-supports-aria-props": 2,
+    "jsx-a11y/scope": 2,
+    "jsx-a11y/tabindex-no-positive": 2,
     "generator-star-spacing": 0,
     "babel/generator-star-spacing": 1,
     "space-before-function-paren": [2, "never"],
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/react-in-jsx-scope": 2,
-    "object-curly-newline": ["error", {
+    "object-curly-newline": [2, {
       "minProperties": 1
     }],
-    "sort-vars": ["error", {
+    "sort-vars": [2, {
       "ignoreCase": true
     }]
   }

ui/docs/containers/app/index.js

@@ -7,7 +7,7 @@ const Item = require('../item/');
 
 const {
   Base
-} = require('../../../src');;
+} = require('../../../src');
 
 const {
   Match
@@ -17,8 +17,15 @@ module.exports = () => {
   return (
     <Base>
       <Navigation />
-      <Match exactly pattern='/' component={Home} />
-      <Match pattern='/:parent?/:name' component={Item} />
+      <Match
+        component={Home}
+        exactly
+        pattern='/'
+      />
+      <Match
+        component={Item}
+        pattern='/:parent?/:name'
+      />
     </Base>
   );
 };

ui/docs/containers/app/navigation.js

@@ -39,7 +39,7 @@ const getList = (items, parent) => {
   );
 };
 
-module.exports = () => {
+const Navigation = () => {
   return (
     <div>
       <div className={styles.navigation}>
@@ -50,3 +50,5 @@ module.exports = () => {
     </div>
   );
 };
+
+module.exports = Navigation;

ui/docs/containers/home.js

@@ -1,5 +1,5 @@
 const React = require('react');
 
 module.exports = () => {
-  return (<div></div>);
+  return (<div />);
 };

ui/docs/containers/item/index.js

@@ -6,7 +6,7 @@ const titleCase = require('title-case');
 
 const Docs = require('../../../src/docs');
 
-module.exports = ({
+const Item = ({
   params
 }) => {
   const path = (params.parent !== 'undefined')
@@ -26,3 +26,9 @@ module.exports = ({
     </div>
   );
 };
+
+Item.propTypes = {
+  params: React.PropTypes.object
+};
+
+module.exports = Item;

ui/package.json

@@ -35,6 +35,7 @@
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.0",
     "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-promise": "^3.3.0",
     "eslint-plugin-react": "^6.4.1",
     "eslint-plugin-standard": "^2.0.1",

ui/src/components/base/index.js

@@ -2,10 +2,10 @@ const React = require('react');
 const classNames = require('classnames');
 const styles = require('./style.css');
 
-const Base = module.exports = ({
+const Base = ({
+  children,
   className,
-  style,
-  children
+  style
 }) => {
   const cn = classNames(
     className,
@@ -13,14 +13,16 @@ const Base = module.exports = ({
   );
 
   return (
-    <div style={style} className={cn}>
+    <div className={cn} style={style}>
       {children}
     </div>
   );
 };
 
 Base.propTypes = {
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
-  style: React.PropTypes.object,
-  children: React.PropTypes.node
+  style: React.PropTypes.object
 };
+
+module.exports = Base;

ui/src/components/button/index.js

@@ -1,16 +1,28 @@
 const React = require('react');
 const styles = require('./style.css');
 
-module.exports = ({
+const Button = ({
   disabled = false,
+  className,
+  style,
   children
 }) => {
   return (
     <button
       className={styles.button}
       disabled={disabled}
+      style={style}
     >
       {children}
     </button>
   );
 };
+
+Button.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  style: React.PropTypes.object
+};
+
+module.exports = Button;

ui/src/components/column/index.js

@@ -27,11 +27,11 @@ const getClasses = (props) => {
   })).filter(Boolean);
 };
 
-const Column = module.exports = (props) => {
+const Column = (props) => {
   const {
+    children,
     className,
     reverse,
-    children,
     style
   } = props;
 
@@ -43,20 +43,22 @@ const Column = module.exports = (props) => {
   );
 
   return (
-    <div style={style} className={cn}>
+    <div className={cn} style={style}>
       {children}
     </div>
   );
 };
 
 Column.propTypes = {
-  reverse: React.PropTypes.bool,
-  className: React.PropTypes.string,
-  style: React.PropTypes.object,
   children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  reverse: React.PropTypes.bool,
+  style: React.PropTypes.object,
   ...breakpoints.reduce((all, bp) => ({
     ...all,
     [`${bp}Offset`]: React.PropTypes.number,
     [bp]: React.PropTypes.number
   }), {})
 };
+
+module.exports = Column;

ui/src/components/container/index.js

@@ -7,7 +7,7 @@ const React = require('react');
 const classNames = require('classnames');
 const styles = require('./style.css');
 
-const Container = module.exports = ({
+const Container = ({
   fluid = false,
   className,
   children,
@@ -19,15 +19,17 @@ const Container = module.exports = ({
   );
 
   return (
-    <div style={style} className={cn}>
+    <div className={cn} style={style}>
       {children}
     </div>
   );
 };
 
 Container.propTypes = {
-  fluid: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
-  style: React.PropTypes.object,
-  children: React.PropTypes.node
+  fluid: React.PropTypes.bool,
+  style: React.PropTypes.object
 };
+
+module.exports = Container;

ui/src/components/row/index.js

@@ -52,7 +52,7 @@ const getClasses = (props) => {
   })).filter(Boolean);
 };
 
-const Row = module.exports = (props) => {
+const Row = (props) => {
   const {
     className,
     reverse,
@@ -68,7 +68,7 @@ const Row = module.exports = (props) => {
   );
 
   return (
-    <div style={style} className={cn}>
+    <div className={cn} style={style}>
       {children}
     </div>
   );
@@ -81,12 +81,14 @@ const ModificatorType = React.PropTypes.oneOfType([
 ]);
 
 Row.propTypes = {
-  reverse: React.PropTypes.bool,
-  className: React.PropTypes.string,
-  style: React.PropTypes.object,
   children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  reverse: React.PropTypes.bool,
+  style: React.PropTypes.object,
   ...modifiers.reduce((all, m) => ({
     ...all,
     [m]: ModificatorType
   }), {})
 };
+
+module.exports = Row;

ui/webpack/base.js

@@ -16,13 +16,10 @@ const plugins = {
           require('postcss-modules-values'),
           require('postcss-mixins')(),
           require('postcss-for'),
-          require('postcss-cssnext')(),
+          require('postcss-cssnext')()
         ]
       },
-      'embed-markdown-loader': {
-        // don't detach yet (has a bug in the production config)
-        // webpackConfigFullpath: path.join(__dirname, 'index.js')
-      }
+      'embed-markdown-loader': {}
     }
   })
 };

ui/webpack/production.js

@@ -2,7 +2,6 @@ const WebpackShellPlugin = require('webpack-shell-plugin');
 const base = require('./base.js');
 const webpack = require('webpack');
 const entries = require('./entrypoints');
-const path = require('path');
 
 module.exports = Object.assign(base.config, {
   entry: entries.reduce((all, entry) => {

ui/webpack/test.js

@@ -1,6 +1,4 @@
 const base = require('./base');
-const webpack = require('webpack');
-const path = require('path');
 
 module.exports = {
   output: {

ui/yarn.lock

@@ -1856,6 +1856,10 @@ d@^0.1.1, d@~0.1.1:
   dependencies:
     es5-ext "~0.10.2"
 
+damerau-levenshtein@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
+
 dangerously-set-inner-html@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-2.0.0.tgz#da73f26330c9ef0b6b12ca443091904406ddb73a"
@@ -2249,6 +2253,14 @@ eslint-plugin-babel@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-3.3.0.tgz#2f494aedcf6f4aa4e75b9155980837bc1fbde193"
 
+eslint-plugin-jsx-a11y:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-2.2.3.tgz#4e35cb71b8a7db702ac415c806eb8e8d9ea6c65d"
+  dependencies:
+    damerau-levenshtein "^1.0.0"
+    jsx-ast-utils "^1.0.0"
+    object-assign "^4.0.1"
+
 eslint-plugin-promise@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.3.0.tgz#20a1ef58b4243ffdaef82ee9360a02353a7cca89"
@@ -3328,7 +3340,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jsx-ast-utils@^1.3.1:
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.2.tgz#dff658782705352111f9865d40471bc4a955961e"
   dependencies: