Merge pull request #911 from storybooks/eslint-strict

Set ESlint rules more strict 🚑

Author: ndelangen

.eslintignore

@@ -2,4 +2,11 @@ dist
 build
 coverage
 node_modules
+**/example/**
+**/demo/**
 docs/public
+
+!.remarkrc.js
+!.eslintrc.js
+!.eslintrc-markdown.js
+!.jest.config.js

.eslintrc-markdown.js

@@ -0,0 +1,56 @@
+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,
+  },
+  globals: {
+    storiesOf: true,
+    addonAPI: true,
+    __DEV__: true,
+    fetch: true,
+  },
+  rules: {
+    strict: [error, 'never'],
+    'prettier/prettier': [
+      warn,
+      {
+        printWidth: 100,
+        tabWidth: 2,
+        bracketSpacing: true,
+        trailingComma: 'es5',
+        singleQuote: true,
+      },
+    ],
+    'no-console': ignore,
+    'global-require': ignore,
+    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/prop-types': ignore,
+    'react/jsx-wrap-multilines': ignore,
+    'react/jsx-uses-react': error,
+    'react/jsx-uses-vars': error,
+    'react/react-in-jsx-scope': ignore,
+    'react/jsx-filename-extension': ignore,
+    'jsx-a11y/accessible-emoji': ignore,
+    'react/no-unescaped-entities': ignore,
+  },
+};

.eslintrc.js

@@ -1,29 +1,68 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
 module.exports = {
   root: true,
-  extends: [
-    './node_modules/eslint-config-airbnb-base/rules/es6.js',
-  ],
-  plugins: [
-    'prettier',
-  ],
+  extends: ['eslint-config-airbnb', 'plugin:jest/recommended', 'prettier'],
+  plugins: ['prettier', 'jest', 'react', 'json'],
   parser: 'babel-eslint',
   parserOptions: {
     sourceType: 'module',
   },
   env: {
     es6: true,
     node: true,
+    'jest/globals': true,
   },
   rules: {
-    strict: 0,
-    'prettier/prettier': ['warn', {
-      printWidth: 100,
-      tabWidth: 2,
-      bracketSpacing: true,
-      trailingComma: 'es5',
-      singleQuote: true,
-    }],
-    quotes: ['warn', 'single'],
-    'arrow-parens': ['warn', 'as-needed'],
+    strict: [error, 'never'],
+    'prettier/prettier': [
+      warn,
+      {
+        printWidth: 100,
+        tabWidth: 2,
+        bracketSpacing: true,
+        trailingComma: 'es5',
+        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/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

@@ -0,0 +1,25 @@
+module.exports = {
+  plugins: [
+    'remark-preset-lint-recommended',
+    ['remark-lint-list-item-indent', false],
+    [
+      'remark-lint-code',
+      {
+        js: {
+          module: 'node_modules/remark-lint-code-eslint',
+          options: {
+            fix: true,
+            configFile: '.eslintrc-markdown.js',
+          },
+        },
+      },
+    ],
+    [
+      'remark-toc',
+      {
+        tight: true,
+        maxDepth: 3,
+      },
+    ],
+  ],
+};

.remarkrc.js

@@ -57,7 +57,7 @@ Storybook 3.0 is our first fully community-driven release! Notable changes:
 -   FIX addon info and addon storyshots incompatibility [#1129](https://github.com/storybooks/storybook/pull/1129)
 -   FIX postcss options missing in default webpack config && UPDATE dependencies [#1087](https://github.com/storybooks/storybook/pull/1087)
 -   Fix CLI had a package version from storybook hardcoded - now queries npm registry [#1079](https://github.com/storybooks/storybook/pull/1079)
--   Fix semi broken __docgenInfo integration in addon info [#1030](https://github.com/storybooks/storybook/pull/1030)
+-   Fix semi broken \_\_docgenInfo integration in addon info [#1030](https://github.com/storybooks/storybook/pull/1030)
 -   Fix: build-storybook no longer supports relative paths [#1058](https://github.com/storybooks/storybook/pull/1058)
 -   Fix for types `number` for addon knobs [#1001](https://github.com/storybooks/storybook/pull/1001)
 -   Fix webpack overriding && Add an example with local file dependencies [#965](https://github.com/storybooks/storybook/pull/965)
@@ -116,12 +116,12 @@ Storybook 3.0 is our first fully community-driven release! Notable changes:
 -   Added an upgrade mode to getstorybook [#1146](https://github.com/storybooks/storybook/pull/1146)
 -   Update link to Storyshots addon [#1074](https://github.com/storybooks/storybook/pull/1074)
 -   Added error message for missing or invalid storyName [#747](https://github.com/storybooks/storybook/pull/747)
--   Opened an Open Collective Account https://opencollective.com/storybook [#1065](https://github.com/storybooks/storybook/pull/1065)
+-   Opened an Open Collective Account <https://opencollective.com/storybook> [#1065](https://github.com/storybooks/storybook/pull/1065)
 -   Add propTablesExclude option [#924](https://github.com/storybooks/storybook/pull/924)
 -   addon-info: make the info overlay be fixed  [#914](https://github.com/storybooks/storybook/pull/914)
 -   Handle null elements in getData [#926](https://github.com/storybooks/storybook/pull/926)
--   add description field from __docgenInfo for prop table for info plugin [#929](https://github.com/storybooks/storybook/pull/929)
--   #959 add a max-height and center element with alignItems: center [#961](https://github.com/storybooks/storybook/pull/961)
+-   add description field from \_\_docgenInfo for prop table for info plugin [#929](https://github.com/storybooks/storybook/pull/929)
+-   \#959 add a max-height and center element with alignItems: center [#961](https://github.com/storybooks/storybook/pull/961)
 -   Switch to the only prepublish script [#903](https://github.com/storybooks/storybook/pull/903)
 -   PR review policy [#923](https://github.com/storybooks/storybook/pull/923)
 -   Add typescript definitions for getStorybook() [#753](https://github.com/storybooks/storybook/pull/753)

CHANGELOG.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`
 

README.md

@@ -18,6 +18,7 @@ This addon works with Storybook for:
 ## Getting Started
 
 Install:
+
 ```sh
 npm i -D @storybook/addon-actions
 ```
@@ -27,8 +28,10 @@ Import the `action` function and use it to create actions handlers. When creatin
 > _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)_
 
 ```js
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Button from './button';
 
 storiesOf('Button', module)
   .add('default view', () => (
@@ -47,6 +50,8 @@ If you wish to process action data before sending them over to the logger, you c
 ```js
 import { action, decorateAction } from '@storybook/addon-actions'
 
+import Button from './button';
+
 const firstArgAction = decorateAction([
   args => args.slice(0, 1)
 ]);

addons/actions/README.md

@@ -2,29 +2,23 @@
   "name": "@storybook/addon-actions",
   "version": "3.0.1",
   "description": "Action Logger addon for storybook",
-  "main": "dist/index.js",
-  "scripts": {
-    "deploy-storybook": "storybook-to-ghpages",
-    "prepublish": "node ../../scripts/prepublish.js",
-    "storybook": "start-storybook -p 9001"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
-  },
   "keywords": [
     "storybook"
   ],
-  "license": "MIT",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },
-  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
-  "devDependencies": {
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
-    "shelljs": "^0.7.7"
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "deploy-storybook": "storybook-to-ghpages",
+    "prepublish": "node ../../scripts/prepublish.js",
+    "storybook": "start-storybook -p 9001"
   },
   "dependencies": {
     "@storybook/addons": "^3.0.0",
@@ -33,6 +27,12 @@
     "prop-types": "^15.5.8",
     "react-inspector": "^2.0.0"
   },
+  "devDependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
+    "shelljs": "^0.7.7"
+  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"

addons/actions/package.json

@@ -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;