refactor(eslint-config): updated to the beta of the config

Author: travi

.editorconfig

@@ -7,21 +7,6 @@ root = true
 charset = utf-8
 trim_trailing_whitespace = true
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 insert_final_newline = true
-
-[*.yml]
-indent_size = 2
-
-[*.scss]
-indent_size = 2
-
-[.eslintrc]
-indent_size = 2
-
-[package.json]
-indent_size = 2
-
-[*.md]
-indent_size = 2

Gruntfile.js

@@ -1,22 +1,22 @@
-/*eslint filenames/match-regex: "off" */
+/* eslint filenames/match-regex: "off" */
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
 require('babel-register');
 
-module.exports = function (grunt) {
-    require('time-grunt')(grunt);
-    require('load-grunt-config')(grunt, {
-        jitGrunt: {
-            staticMappings: {
-                sasslint: 'grunt-sass-lint'
-            }
-        }
-    });
+module.exports = grunt => {
+  require('time-grunt')(grunt);
+  require('load-grunt-config')(grunt, {
+    jitGrunt: {
+      staticMappings: {
+        sasslint: 'grunt-sass-lint'
+      }
+    }
+  });
+
+  grunt.event.on('coverage', (lcov, done) => {
+    require('coveralls').handleInput(lcov, err => {
+      if (err) return done(err);
 
-    grunt.event.on('coverage', (lcov, done) => {
-        require('coveralls').handleInput(lcov, (err) => {
-            if (err) {
-                return done(err);
-            }
-            return done();
-        });
+      return done();
     });
+  });
 };

grunt/rollup.js

@@ -1,53 +1,52 @@
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
 import babel from 'rollup-plugin-babel';
 import glob from 'glob';
 import path from 'path';
 
 module.exports = {
-    es5: {
-        options: {
-            format: 'cjs',
-            sourceMap: true,
-            plugins() {
-                return [
-                    {
-                        transform: (code, id) => {
-                            if ('.scss' === path.extname(id)) {
-                                return {code: 'const styles = {}; export default styles;', map: {mappings: ''}};
-                            }
-                            return null;
-                        }
-                    },
-                    babel({
-                        babelrc: false,
-                        exclude: ['./node_modules/**'],
-                        presets: ['react', 'es2015-rollup']
-                    })
-                ];
+  es5: {
+    options: {
+      format: 'cjs',
+      sourceMap: true,
+      plugins() {
+        return [
+          {
+            transform: (code, id) => {
+              if ('.scss' === path.extname(id)) {
+                return {code: 'const styles = {}; export default styles;', map: {mappings: ''}};
+              }
+              return null;
             }
-        },
-        files: {
-            'lib/main.js': 'src/main.js'
-        }
+          },
+          babel({
+            babelrc: false,
+            exclude: ['./node_modules/**'],
+            presets: ['react', 'es2015-rollup']
+          })
+        ];
+      }
     },
-    browser: {
-        options: {
-            format: 'cjs',
-            sourceMap: true,
-            external: glob.sync('**/*.scss', {cwd: 'src'}).map((file) => {
-                return require.resolve(`${__dirname}/../src/${file}`);
-            }),
-            plugins() {
-                return [
-                    babel({
-                        babelrc: false,
-                        exclude: './node_modules/**',
-                        presets: ['react', 'es2015-rollup']
-                    })
-                ];
-            }
-        },
-        files: {
-            'lib/browser.js': 'src/main.js'
-        }
+    files: {
+      'lib/main.js': 'src/main.js'
+    }
+  },
+  browser: {
+    options: {
+      format: 'cjs',
+      sourceMap: true,
+      external: glob.sync('**/*.scss', {cwd: 'src'}).map(file => require.resolve(`${__dirname}/../src/${file}`)),
+      plugins() {
+        return [
+          babel({
+            babelrc: false,
+            exclude: './node_modules/**',
+            presets: ['react', 'es2015-rollup']
+          })
+        ];
+      }
+    },
+    files: {
+      'lib/browser.js': 'src/main.js'
     }
+  }
 };

package.json

@@ -41,7 +41,7 @@
     "@kadira/react-storybook-addon-info": "3.3.0",
     "@kadira/storybook": "2.35.3",
     "@travi/any": "1.0.2",
-    "@travi/eslint-config-travi": "0.3.0",
+    "@travi/eslint-config-travi": "1.0.0-beta.4",
     "babel-cli": "6.22.2",
     "babel-core": "6.22.1",
     "babel-loader": "6.2.10",
@@ -50,6 +50,7 @@
     "babel-preset-es2015-rollup": "3.0.0",
     "babel-preset-react": "6.22.0",
     "babel-preset-stage-2": "6.22.0",
+    "babel-register": "6.22.0",
     "chai": "3.5.0",
     "cheerio": "0.22.0",
     "coveralls": "2.11.15",
@@ -58,6 +59,7 @@
     "enzyme": "2.7.1",
     "file-loader": "0.9.0",
     "gh-pages": "0.12.0",
+    "glob": "7.1.1",
     "globstar": "1.0.0",
     "greenkeeper-postpublish": "1.0.1",
     "grunt": "1.0.1",

src/atoms/loading-indicators/page.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CircularProgress from 'material-ui/CircularProgress';
 
 export default function PageLoading() {
-    return <CircularProgress color={'#c80000'} style={{margin: '10px auto', display: 'block'}} />;
+  return <CircularProgress color={'#c80000'} style={{margin: '10px auto', display: 'block'}} />;
 }
 
 PageLoading.displayName = 'PageLoading';

src/errors/not-found.js

@@ -2,13 +2,13 @@ import React from 'react';
 import Helmet from 'react-helmet';
 
 export default function NotFound() {
-    return (
-        <div className="jumbotron">
-            <Helmet title="Page Not Found"/>
-            <h2>404</h2>
-            <p>Page Not Found</p>
-        </div>
-    );
+  return (
+    <div className="jumbotron">
+      <Helmet title="Page Not Found" />
+      <h2>404</h2>
+      <p>Page Not Found</p>
+    </div>
+  );
 }
 
 NotFound.displayName = 'NotFound';

src/errors/server-error.js

@@ -2,13 +2,13 @@ import React from 'react';
 import Helmet from 'react-helmet';
 
 export default function ServerError() {
-    return (
-        <div className="jumbotron">
-            <Helmet title="Server Error"/>
-            <h2>500</h2>
-            <p>Server Error</p>
-        </div>
-    );
+  return (
+    <div className="jumbotron">
+      <Helmet title="Server Error" />
+      <h2>500</h2>
+      <p>Server Error</p>
+    </div>
+  );
 }
 
 ServerError.displayName = 'ServerError';

src/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import Helmet from 'react-helmet';
 
 export default function Index() {
-    return (
-        <div className="jumbotron">
-            <Helmet title="Home"/>
-            <h2>Reference API Client</h2>
-            <p>Administration for Travi.org</p>
-        </div>
-    );
+  return (
+    <div className="jumbotron">
+      <Helmet title="Home" />
+      <h2>Reference API Client</h2>
+      <p>Administration for Travi.org</p>
+    </div>
+  );
 }
 
 Index.displayName = 'Index';

src/resources/individual/persons/person.js

@@ -5,39 +5,50 @@ import PageLoading from '../../../../src/atoms/loading-indicators/page';
 import styles from './_h-card.scss';
 
 export default function Person({person, loading}) {
-    const avatar = person.avatar;
+  return (
+    <div>
+      <Helmet title={person ? person.displayName : 'Loading person...'} />
 
-    return (
-        <div>
-            <Helmet title={person.displayName || 'Loading person...'}/>
-
-            {loading && <PageLoading />}
-            {loading ||
-            <div className={`resource h-card panel panel-default ${styles['h-card']}`}>
-                <h3 className="p-name panel-heading">{person.displayName}</h3>
-                <div className="container-fluid panel-body">
-                    <dl className="col-sm-6">
-                        <dt>First Name</dt>
-                        <dd className="p-given-name">{person.name.first}</dd>
-                        <dt>Last Name</dt>
-                        <dd className="p-family-name">{person.name.last}</dd>
-                        <dt>Username</dt>
-                        <dd className="p-nickname">{person.id}</dd>
-                    </dl>
-                    <figure className="col-sm-6">
-                        <img
-                            src={avatar.src}
-                            height={avatar.size}
-                            width={avatar.size}
-                            alt={person.displayName}
-                            className="img-rounded u-photo"
-                        />
-                    </figure>
-                </div>
-            </div>
-            }
+      {loading && <PageLoading />}
+      {loading ||
+      <div className={`resource h-card panel panel-default ${styles['h-card']}`}>
+        <h3 className="p-name panel-heading">{person.displayName}</h3>
+        <div className="container-fluid panel-body">
+          <dl className="col-sm-6">
+            <dt>First Name</dt>
+            <dd className="p-given-name">{person.name.first}</dd>
+            <dt>Last Name</dt>
+            <dd className="p-family-name">{person.name.last}</dd>
+            <dt>Username</dt>
+            <dd className="p-nickname">{person.id}</dd>
+          </dl>
+          <figure className="col-sm-6">
+            <img
+              src={person.avatar.src}
+              height={person.avatar.size}
+              width={person.avatar.size}
+              alt={person.displayName}
+              className="img-rounded u-photo"
+            />
+          </figure>
         </div>
-    );
+      </div>
+      }
+    </div>
+  );
 }
 
 Person.displayName = 'Person';
+
+Person.propTypes = {
+  loading: React.PropTypes.bool,
+  person: React.PropTypes.shape({
+    id: React.PropTypes.string,
+    displayName: React.PropTypes.string,
+    name: React.PropTypes.shape({
+      first: React.PropTypes.string,
+      last: React.PropTypes.string
+    }).isRequired
+  })
+};
+

src/resources/individual/resource.js

@@ -1,14 +1,20 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 import PageLoading from '../../atoms/loading-indicators/page';
+import {resourceShape} from '../resource-shapes';
 
 export default function Resource({resource, loading}) {
-    return (
-        <div>
-            <Helmet title={resource.displayName || 'Loading Resource...'}/>
-            {loading ? <PageLoading /> : <h3>{resource.displayName}</h3>}
-        </div>
-    );
+  return (
+    <div>
+      <Helmet title={resource.displayName || 'Loading Resource...'} />
+      {loading ? <PageLoading /> : <h3>{resource.displayName}</h3>}
+    </div>
+  );
 }
 
 Resource.displayName = 'Resource';
+
+Resource.propTypes = {
+  loading: React.PropTypes.bool.isRequired,
+  resource: resourceShape
+};