Set ESlint rules more strict 🚑

.eslintignore

@@ -2,3 +2,5 @@ dist
 build
 coverage
 node_modules
+**/example/**
+**/demo/**

.eslintrc.js

@@ -1,9 +1,17 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
 module.exports = {
   extends: [
-    './node_modules/eslint-config-airbnb-base/rules/es6.js',
+    '@ndelangen/eslint-config-airbnb',
+    'prettier',
+    'plugin:jest/recommended'
   ],
   plugins: [
     'prettier',
+    'jest',
+    'react',
   ],
   parser: 'babel-eslint',
   parserOptions: {
@@ -12,9 +20,10 @@ module.exports = {
   env: {
     es6: true,
     node: true,
+    'jest/globals': true,
   },
   rules: {
-    strict: 0,
+    strict: [error, 'never'],
     'prettier/prettier': ['warn', {
       printWidth: 100,
       tabWidth: 2,
@@ -23,6 +32,28 @@ module.exports = {
       singleQuote: true,
     }],
     quotes: ['warn', 'single'],
+    'class-methods-use-this': ignore,
     'arrow-parens': ['warn', 'as-needed'],
+    'space-before-function-paren': ignore,
+    'import/no-unresolved': warn,
+    'import/extentions': warn,
+    'import/no-extraneous-dependencies': [warn, {
+      devDependencies: [
+        '**/*.test.js',
+        '**/scripts/*.js',
+        '**/stories/*.js',
+        '**/__tests__/*.js'
+      ],
+      peerDependencies: true
+    }],
+    'import/prefer-default-export': ignore,
+    'react/jsx-uses-react': error,
+    'react/jsx-uses-vars': error,
+    'react/react-in-jsx-scope': error,
+    'react/jsx-filename-extension': [warn, {
+      extensions: ['.js', '.jsx']
+    }],
+    'jsx-a11y/accessible-emoji': ignore,
+    'react/no-unescaped-entities': ignore,
   },
 }

.travis.yml

@@ -11,6 +11,7 @@ before_install: ./scripts/travis/before_install.sh
 after_success: ./scripts/travis/after_success.sh
 script:
   - npm run bootstrap
+  - npm run examples
   - npm run lint
   - npm run test -- --coverage
   - npm run coverage

addons/actions/src/components/ActionLogger/index.js

@@ -5,7 +5,7 @@ import style from './style';
 
 class ActionLogger extends Component {
   componentDidUpdate() {
-    const latest = this.refs.latest;
+    const latest = this.ref.latest;
     if (latest) {
       const borderLeft = style.action.borderLeft;
       latest.style.borderLeft = 'solid 5px #aaa';
@@ -15,8 +15,12 @@ class ActionLogger extends Component {
     }
   }
 
+  getActionData() {
+    return this.props.actions.map((action, i) => this.renderAction(action, i));
+  }
+
   renderAction(action, i) {
-    const ref = i ? '' : 'latest';
+    const ref = () => (this.ref = i ? '' : 'latest');
     const counter = <div style={style.counter}>{action.count}</div>;
     return (
       <div ref={ref} key={action.id} style={style.action}>
@@ -34,10 +38,6 @@ class ActionLogger extends Component {
     );
   }
 
-  getActionData() {
-    return this.props.actions.map((action, i) => this.renderAction(action, i));
-  }
-
   render() {
     return (
       <div style={style.wrapper}>
@@ -50,7 +50,11 @@ class ActionLogger extends Component {
 
 ActionLogger.propTypes = {
   onClear: PropTypes.func,
-  actions: PropTypes.array,
+  actions: PropTypes.array, // eslint-disable-line react/forbid-prop-types
+};
+ActionLogger.defaultProps = {
+  onClear: () => {},
+  actions: [],
 };
 
 export default ActionLogger;

addons/actions/src/containers/ActionLogger/index.js

@@ -1,5 +1,9 @@
+/* eslint-disable no-underscore-dangle */
+
 import React from 'react';
+import PropTypes from 'prop-types';
 import deepEqual from 'deep-equal';
+
 import ActionLoggerComponent from '../../components/ActionLogger/';
 import { EVENT_ID } from '../../';
 
@@ -10,14 +14,22 @@ export default class ActionLogger extends React.Component {
     this._actionListener = action => this.addAction(action);
   }
 
+  componentDidMount() {
+    this.props.channel.on(EVENT_ID, this._actionListener);
+  }
+
+  componentWillUnmount() {
+    this.props.channel.removeListener(EVENT_ID, this._actionListener);
+  }
+
   addAction(action) {
-    action.data.args = action.data.args.map(arg => JSON.parse(arg));
+    action.data.args = action.data.args.map(arg => JSON.parse(arg)); // eslint-disable-line
     const actions = [...this.state.actions];
     const previous = actions.length && actions[0];
     if (previous && deepEqual(previous.data, action.data)) {
-      previous.count++;
+      previous.count++; // eslint-disable-line
     } else {
-      action.count = 1;
+      action.count = 1; // eslint-disable-line
       actions.unshift(action);
     }
     this.setState({ actions });
@@ -27,14 +39,6 @@ export default class ActionLogger extends React.Component {
     this.setState({ actions: [] });
   }
 
-  componentDidMount() {
-    this.props.channel.on(EVENT_ID, this._actionListener);
-  }
-
-  componentWillUnmount() {
-    this.props.channel.removeListener(EVENT_ID, this._actionListener);
-  }
-
   render() {
     const props = {
       actions: this.state.actions,
@@ -43,3 +47,10 @@ export default class ActionLogger extends React.Component {
     return <ActionLoggerComponent {...props} />;
   }
 }
+
+ActionLogger.propTypes = {
+  channel: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+ActionLogger.defaultProps = {
+  channel: {},
+};

addons/actions/src/manager.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
-import { ADDON_ID, PANEL_ID } from './';
+import { PANEL_ID } from './';
 
 export function register() {
-  addons.register(ADDON_ID, api => {
+  addons.register(() => {
     const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Action Logger',

addons/actions/src/preview.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-underscore-dangle */
+
 import addons from '@storybook/addons';
 import stringify from 'json-stringify-safe';
 import { EVENT_ID } from './';
@@ -10,6 +12,7 @@ function _format(arg) {
 }
 
 export function action(name) {
+  // eslint-disable-next-line no-unused-vars, func-names
   const handler = function(..._args) {
     const args = Array.from(_args).map(_format);
     const channel = addons.getChannel();
@@ -27,13 +30,16 @@ export function action(name) {
   //
   // Ref: https://bocoup.com/weblog/whats-in-a-function-name
   const fnName = name ? name.replace(/\W+/g, '_') : 'action';
+  // eslint-disable-next-line no-eval
   const named = eval(`(function ${fnName}() { return handler.apply(this, arguments) })`);
   return named;
 }
 
 export function decorateAction(decorators) {
+  // eslint-disable-next-line no-unused-vars, func-names
   return function(name) {
     const callAction = action(name);
+    // eslint-disable-next-line no-unused-vars, func-names
     return function(..._args) {
       const decorated = decorators.reduce((args, fn) => fn(args), _args);
       callAction(...decorated);

addons/centered/package.json

@@ -13,5 +13,7 @@
       "babelify"
     ]
   },
-  "devDependencies": {}
+  "peerDependencies": {
+    "react": "*"
+  }
 }

addons/comments/manager.js

@@ -1,2 +1,3 @@
 const manager = require('./dist/manager');
+
 manager.init();

addons/comments/package.json

@@ -26,6 +26,7 @@
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "events": "^1.1.1",
+    "global": "^4.3.2",
     "insert-css": "^1.0.0",
     "marked": "^0.3.6",
     "moment": "^2.18.1",

addons/comments/preview.js

@@ -1,2 +1,3 @@
 const preview = require('./dist/preview');
+
 preview.init();

addons/comments/src/index.js

@@ -16,10 +16,15 @@ const Button = ({ children, onClick, style = {} }) => (
   </button>
 );
 
+Button.defaultProps = {
+  onClick: () => {},
+  style: {},
+};
+
 Button.propTypes = {
   children: PropTypes.string.isRequired,
   onClick: PropTypes.func,
-  style: PropTypes.object,
+  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 export default Button;

addons/comments/src/manager/components/CommentForm/index.js

@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { window } from 'global';
 import Textarea from 'react-textarea-autosize';
 import marked from 'marked';
 import style from './style';
 
 const renderer = new marked.Renderer();
-renderer.heading = function(text) {
-  return text;
-};
+renderer.heading = text => text;
 
 marked.setOptions({
   renderer,
@@ -43,8 +42,8 @@ export default class CommentForm extends Component {
   }
 
   openLogin() {
-    const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`;
-    location.href = signInUrl;
+    const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(window.location.href)}`;
+    window.location.href = signInUrl;
   }
 
   handleKeyDown(e) {
@@ -58,7 +57,7 @@ export default class CommentForm extends Component {
     if (!this.props.user) {
       return (
         <div style={style.wrapper}>
-          <Textarea style={style.input} disabled={true} />
+          <Textarea style={style.input} disabled />
           <button style={style.submitButton} onClick={() => this.openLogin()}>
             Sign in with Storybook Hub
           </button>
@@ -84,6 +83,11 @@ export default class CommentForm extends Component {
   }
 }
 
+CommentForm.defaultProps = {
+  user: null,
+  addComment: () => {},
+};
 CommentForm.propTypes = {
+  user: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   addComment: PropTypes.func,
 };

addons/comments/src/manager/components/CommentItem/index.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { window } from 'global';
 import moment from 'moment';
 import renderHTML from 'react-render-html';
 import insertCss from 'insert-css';
@@ -26,15 +27,15 @@ export default class CommentItem extends Component {
   }
 
   deleteComment() {
-    const confirmDelete = confirm('Are you sure you want to delete this comment?');
+    const confirmDelete = window.confirm('Are you sure you want to delete this comment?');
     if (confirmDelete === true) {
       this.props.deleteComment();
     }
   }
 
   renderDelete() {
     return (
-      <a href="#" style={style.commentDelete} onClick={this.deleteComment}>
+      <a style={style.commentDelete} onClick={this.deleteComment} role="button" tabIndex="0">
         delete
       </a>
     );
@@ -69,8 +70,19 @@ export default class CommentItem extends Component {
   }
 }
 
+CommentItem.defaultProps = {
+  comment: {},
+  deleteComment: () => {},
+  ownComment: false,
+};
+
 CommentItem.propTypes = {
   deleteComment: PropTypes.func,
-  comment: PropTypes.object,
+  comment: PropTypes.shape({
+    user: PropTypes.object,
+    text: PropTypes.string,
+    time: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    loading: PropTypes.bool,
+  }),
   ownComment: PropTypes.bool,
 };

addons/comments/src/manager/components/CommentList/index.js

@@ -37,9 +37,9 @@ export default class CommentList extends Component {
         }}
         style={style.wrapper}
       >
-        {comments.map((comment, idx) => (
+        {comments.map(comment => (
           <CommentItem
-            key={`comment_${idx}`}
+            key={comment.id}
             comment={comment}
             ownComment={comment.userId === (this.props.user && this.props.user.id)}
             deleteComment={() => this.props.deleteComment(comment.id)}
@@ -50,8 +50,16 @@ export default class CommentList extends Component {
   }
 }
 
+CommentList.defaultProps = {
+  comments: [],
+  user: null,
+  deleteComment: () => {},
+};
+
 CommentList.propTypes = {
-  comments: PropTypes.array,
-  user: PropTypes.object,
+  comments: PropTypes.arrayOf(PropTypes.object),
+  user: PropTypes.shape({
+    id: PropTypes.number,
+  }),
   deleteComment: PropTypes.func,
 };