React Hooks support and entry point (#18)

All React based "Arctic Ice Studio" projects using at least React
version 16.8 (1) that introduced the awesome "Hooks" (2). Since this
comes with an entire new API (3) that follows new design/usage pattern,
the React team created an official "Hooks" ESLint plugin (4) to help to
adhere to the "Rules of Hooks" (5).

Since the `@arcticicestudio/eslint-config` package already includes
support for React and "JSX A11Y", support for "Hooks" have also been
added through a new shareable configuration entry point that

- enables the `react-hooks` plugin.
- configures both currently available rules `react-hooks/rules-of-hooks`
  and `react-hooks/exhaustive-deps` rule to `error` level.

Since "Hooks" make more use of arrow functions the
`react/jsx-no-bind` rule (6) has been adjusted to prevent compatibility
problems by setting the `ignoreDOMComponents` and
`allowArrowFunctions` options to `true`.
Also the `react/display-name` rule has been disabled in order to prevent
problems due to missing "display names" for "functional components" that
make use of "Hooks" instead of being declared as a class component.

The new entry point is available as
`@arcticicestudio/eslint-config/react-hooks` and can be composed with
all other available entry points (7) to inherit their rules.

This feature adds the `eslint-plugin-react-hooks` package as new peer
dependency for `@arcticicestudio/eslint-config`.

References:
  (1) https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
  (2) https://reactjs.org/docs/hooks-intro.html
  (3) https://reactjs.org/docs/hooks-reference.html
  (4) https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
  (5) https://reactjs.org/docs/hooks-rules.html
  (6) https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
  (7) https://github.com/arcticicestudio/styleguide-javascript/blob/develop/packages/%40arcticicestudio/eslint-config/README.md#entry-points

Resolves GH-17

packages/@arcticicestudio/eslint-config/README.md

@@ -8,7 +8,7 @@
 
 <p align="center"><a href="https://circleci.com/gh/arcticicestudio/styleguide-javascript" target="_blank"><img src="https://img.shields.io/circleci/project/github/arcticicestudio/styleguide-javascript/develop.svg?style=flat-square&label=Build&logo=circleci&logoColor=eceff4&colorA=4c566a"/></a></p>
 
-This project implements the rules of the [“Arctic Ice Studio JavaScript Style Guide”][gh-stg-repo] as an extensible shared [ESLint][] configuration including plugin support for [React][gh-esl-p-react] and [JSX A11Y][gh-esl-p-jsx-a11y] as well as compatibility integrations for other projects like [Prettier][].
+This project implements the rules of the [“Arctic Ice Studio JavaScript Style Guide”][gh-stg-repo] as an extensible shared [ESLint][] configuration including plugin support for [React][gh-esl-p-react] with [Hooks][gh-esl-p-react-hooks], [JSX A11Y][gh-esl-p-jsx-a11y] as well as compatibility integrations for other projects like [Prettier][].
 
 ## Getting Started
 
@@ -89,7 +89,11 @@ module.exports = {
     /* Provides all base rules and specific rules for "React" and "JSX A11Y". */
     "@arcticicestudio/eslint-config"
     /*
-     * Provides support for projects using Prettier.
+     * Optional entry point to enable support for projects using React Hooks.
+     */
+    "@arcticicestudio/eslint-config/react-hooks",
+    /*
+     * Optional entry point to enable support for projects using Prettier.
      * Note that this must always be placed after the `@arcticicestudio/eslint-config` preset to take precedence,
      * otherwise it won't prevent errors due to useless and possibly conflicting rules!
      */
@@ -103,7 +107,8 @@ module.exports = {
 This package provides multiple entry points that can be composed especially for the projects they are used in:
 
 - `@arcticicestudio/eslint-config` — The default entry point that includes the base rules of the [@arcticicestudio/eslint-config-base][gh-t-pkg-esl-base] package as well as additional rules from the [eslint-plugin-react][gh-esl-p-react] and [eslint-plugin-jsx-a11y][gh-esl-p-jsx-a11y] packages.
-- `@arcticicestudio/eslint-config/prettier` — Entry point with support for [Prettier][] through [eslint-plugin-prettier][gh-esl-p-prettier] and the officially recommended Prettier ESLint configuration through the [eslint-config-prettier][gh-esl-c-prettier] package. It disables possibly conflicting rules and rules that definitely not needed when using _Prettier_ for code formatting. There is also additional support when _Prettier_ is used for React based projects by extending the special `prettier/react` configuration that also disables specific `react/` and JSX rules. Note that this configuration **should always be placed after `@arcticicestudio/eslint-config`** in order to override conflicting rules, otherwise the `@arcticicestudio/eslint-config` preset will take precedence leaving conflicting rules untouched!
+- `@arcticicestudio/eslint-config/prettier` — Entry point to enable support for [Prettier][] through [eslint-plugin-prettier][gh-esl-p-prettier] and the officially recommended Prettier ESLint configuration using the [eslint-config-prettier][gh-esl-c-prettier] package. It disables possibly conflicting rules and rules that definitely not needed when using _Prettier_ for code formatting. There is also additional support when _Prettier_ is used for React based projects by extending the special `prettier/react` configuration that also disables specific `react/` and JSX rules. Note that this configuration **should always be placed after `@arcticicestudio/eslint-config`** in order to override conflicting rules, otherwise the `@arcticicestudio/eslint-config` preset will take precedence leaving conflicting rules untouched!
+- `@arcticicestudio/eslint-config/react-hooks` — Entry point to enable support for [React _Hooks_][react-d-hooks] through [eslint-plugin-react-hooks][gh-esl-p-react-hooks].
 
 ## Contributing
 
@@ -122,6 +127,7 @@ Please read the [contribution guidelines][gh-stg-b-readme#contrib] of the [“Ar
 [gh-esl-p-import]: https://github.com/benmosher/eslint-plugin-import
 [gh-esl-p-jsx-a11y]: https://github.com/evcohen/eslint-plugin-jsx-a11y
 [gh-esl-p-prettier]: https://github.com/prettier/eslint-plugin-prettier
+[gh-esl-p-react-hooks]: https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
 [gh-esl-p-react]: https://github.com/yannickcr/eslint-plugin-react
 [gh-eslint]: https://github.com/eslint/eslint
 [gh-prettier]: https://github.com/prettier/prettier
@@ -134,4 +140,5 @@ Please read the [contribution guidelines][gh-stg-b-readme#contrib] of the [“Ar
 [npm-npx]: https://www.npmjs.com/package/npx
 [npm]: https://npmjs.com
 [prettier]: https://prettier.io
+[react-d-hooks]: https://reactjs.org/docs/hooks-intro.html
 [yarn]: https://yarnpkg.com

packages/@arcticicestudio/eslint-config/package.json

@@ -38,24 +38,27 @@
     "test:unused-rules": "eslint-find-rules --unused --deprecated --no-error"
   },
   "dependencies": {
-    "@arcticicestudio/eslint-config-base": ">=0.7.0 <1.0.0",
-    "eslint-config-prettier": "6.0.0"
+    "@arcticicestudio/eslint-config-base": ">=0.7.0 <1.0.0"
   },
   "devDependencies": {
     "eslint": "^6.2.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-find-rules": "3.4.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "prettier": "^1.18.2"
   },
   "peerDependencies": {
     "eslint": "^6.2.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "prettier": "^1.18.2"
   }
 }

packages/@arcticicestudio/eslint-config/react-hooks.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ice Studio ESLint Configuration
+ * Repository: https://github.com/arcticicestudio/styleguide-javascript
+ * License:    MIT
+ */
+
+/**
+ * Entry point for the React Hooks plugin integration.
+ *
+ * @since 0.8.0
+ * @see https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
+ * @see https://reactjs.org/docs/hooks-rules.html
+ * @see https://reactjs.org/docs/hooks-intro.html
+ */
+module.exports = {
+  extends: ["./rules/react-hooks"].map(require.resolve)
+};

packages/@arcticicestudio/eslint-config/rules/react-hooks/index.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Arctic Ice Studio ESLint Configuration
+ * Repository: https://github.com/arcticicestudio/styleguide-javascript
+ * License:    MIT
+ */
+
+/**
+ * React Hook plugin rules.
+ * @since 0.8.0
+ * @see https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
+ * @see https://reactjs.org/docs/hooks-rules.html
+ * @see https://reactjs.org/docs/hooks-intro.html
+ */
+module.exports = {
+  plugins: ["react-hooks"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    /**
+     * Enforce Rules of Hooks.
+     * @see https://reactjs.org/docs/hooks-rules.html
+     * @see https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+     */
+    "react-hooks/rules-of-hooks": "error",
+    /**
+     * EVerify the list of the dependencies for Hooks like `useEffect` and similar.
+     * @see https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+     */
+    "react-hooks/exhaustive-deps": "error"
+  }
+};

packages/@arcticicestudio/eslint-config/rules/react/index.js

@@ -89,7 +89,7 @@ module.exports = {
      * Prevent missing `displayName` in a React component definition.
      * @see https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
      */
-    "react/display-name": ["warn", { ignoreTranspilerName: false }],
+    "react/display-name": ["off", { ignoreTranspilerName: false }],
     /**
      * Forbid certain props on components.
      * @see https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md

packages/@arcticicestudio/eslint-config/rules/react/jsx.js

@@ -118,8 +118,10 @@ module.exports = {
     "react/jsx-no-bind": [
       "error",
       {
+        ignoreDOMComponents: true,
         ignoreRefs: true,
-        allowArrowFunctions: false,
+        allowArrowFunctions: true,
+        allowFunctions: false,
         allowBind: false
       }
     ],

yarn.lock

@@ -1255,10 +1255,10 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-eslint-config-prettier@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#f429a53bde9fc7660e6353910fd996d6284d3c25"
-  integrity sha512-vDrcCFE3+2ixNT5H83g28bO/uYAwibJxerXPj+E7op4qzBCsAV36QfvdAyVOoNxKAH2Os/e01T/2x++V0LPukA==
+eslint-config-prettier@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.1.0.tgz#e6f678ba367fbd1273998d5510f76f004e9dce7b"
+  integrity sha512-k9fny9sPjIBQ2ftFTesJV21Rg4R/7a7t7LCtZVrYQiHEp8Nnuk3EGaDmsKSAnsPj0BYcgB2zxzHa2NTkIxcOLg==
   dependencies:
     get-stdin "^6.0.0"
 
@@ -1330,6 +1330,11 @@ eslint-plugin-prettier@^3.1.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+  integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
+
 eslint-plugin-react@^7.14.3:
   version "7.14.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"