Set ESlint rules more strict 🚑

.eslintignore

@@ -2,4 +2,6 @@ dist
 build
 coverage
 node_modules
+**/example/**
+**/demo/**
 docs/public

.eslintrc-markdown.js

@@ -0,0 +1,52 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
+module.exports = {
+  root: true,
+  extends: [
+    'eslint-config-airbnb',
+    'plugin:jest/recommended',
+    'prettier',
+  ],
+  plugins: [
+    'prettier',
+    'jest',
+    'react',
+  ],
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  env: {
+    es6: true,
+    node: true,
+    'jest/globals': true,
+  },
+  rules: {
+    strict: [error, 'never'],
+    'prettier/prettier': [warn, {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+    }],
+    quotes: [warn, 'single'],
+    'no-unused-vars': ignore,
+    'class-methods-use-this': ignore,
+    'arrow-parens': [warn, 'as-needed'],
+    'space-before-function-paren': ignore,
+    'import/no-unresolved': ignore,
+    'import/extensions': ignore,
+    'import/no-extraneous-dependencies': ignore,
+    'import/prefer-default-export': ignore,
+    'react/jsx-wrap-multilines': ignore,
+    'react/jsx-uses-react': error,
+    'react/jsx-uses-vars': error,
+    'react/react-in-jsx-scope': error,
+    'react/jsx-filename-extension': ignore,
+    'jsx-a11y/accessible-emoji': ignore,
+    'react/no-unescaped-entities': ignore,
+  },
+}

.eslintrc.js

@@ -1,10 +1,18 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
 module.exports = {
   root: true,
   extends: [
-    './node_modules/eslint-config-airbnb-base/rules/es6.js',
+    'eslint-config-airbnb',
+    'plugin:jest/recommended',
+    'prettier',
   ],
   plugins: [
     'prettier',
+    'jest',
+    'react',
   ],
   parser: 'babel-eslint',
   parserOptions: {
@@ -13,17 +21,44 @@ module.exports = {
   env: {
     es6: true,
     node: true,
+    'jest/globals': true,
   },
   rules: {
-    strict: 0,
-    'prettier/prettier': ['warn', {
+    strict: [error, 'never'],
+    'prettier/prettier': [warn, {
       printWidth: 100,
       tabWidth: 2,
       bracketSpacing: true,
       trailingComma: 'es5',
       singleQuote: true,
     }],
-    quotes: ['warn', 'single'],
-    'arrow-parens': ['warn', 'as-needed'],
+    quotes: [warn, 'single'],
+    'class-methods-use-this': ignore,
+    'arrow-parens': [warn, 'as-needed'],
+    'space-before-function-paren': ignore,
+    'import/no-unresolved': warn,
+    'import/extensions': [warn, {
+      js: 'never',
+      json: 'always',
+    }],
+    'import/no-extraneous-dependencies': [warn, {
+      devDependencies: [
+        '**/*.test.js',
+        '**/scripts/*.js',
+        '**/stories/*.js',
+        '**/__tests__/*.js'
+      ],
+      peerDependencies: true
+    }],
+    'import/prefer-default-export': ignore,
+    'react/jsx-wrap-multilines': 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,
   },
 }

.remarkrc

@@ -5,7 +5,8 @@
     ["remark-lint-code", {"js": {
       "module": "node_modules/remark-lint-code-eslint",
       "options": {
-        "fix": true
+        "fix": true,
+        "configFile": "/Users/dev/Projects/GitHub/storybook/react-storybook/.eslintrc-markdown.js"
       }
     }}],
     ["remark-toc", {

README.md

@@ -93,10 +93,10 @@ We welcome contributions to Storybook!
 > boolean check if code conforms to linting rules - uses remark & eslint
 
 -   `npm run lint:js` - will check js
--   `npm run lint:markdown` - will check markdown + code samples
+-   `npm run lint:md` - will check markdown + code samples
 
 -   `npm run lint:js -- --fix` - will automatically fix js
--   `npm run lint:markdown -- -o` - will automatically fix markdown
+-   `npm run lint:md -- -o` - will automatically fix markdown
 
 #### `npm run test`
 

addons/actions/README.md

@@ -18,6 +18,7 @@ This addon works with Storybook for:
 ## Getting Started
 
 Install:
+
 ```sh
 npm i -D @storybook/addon-actions
 ```

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, { strict: true })) {
-      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/index.js

@@ -1,5 +1,5 @@
 // addons, panels and events get unique names using a prefix
-export const ADDON_ID = 'storybook/addon-actions';
+export const ADDON_ID = 'storybook/actions';
 export const PANEL_ID = `${ADDON_ID}/actions-panel`;
 export const EVENT_ID = `${ADDON_ID}/action-event`;
 

addons/actions/src/manager.js

@@ -4,7 +4,7 @@ import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, PANEL_ID } from './';
 
 export function register() {
-  addons.register(ADDON_ID, api => {
+  addons.register(ADDON_ID, () => {
     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

@@ -7,5 +7,8 @@
     "prepublish": "node ../../scripts/prepublish.js"
   },
   "author": "Muhammed Thanish <[email protected]>",
-  "license": "MIT"
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*"
+  }
 }

addons/comments/manager.js

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

addons/comments/package.json

@@ -27,6 +27,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

@@ -10,16 +10,20 @@ const buttonStyles = {
   padding: '3px 10px',
 };
 
-const Button = ({ children, onClick, style = {} }) => (
+const Button = ({ children, onClick, style = {} }) =>
   <button style={{ ...buttonStyles, ...style }} onClick={onClick}>
     {children}
-  </button>
-);
+  </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;