@pob/eslint-config-typescript-react/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [55.0.0](https://github.com/christophehurpeau/eslint-config-pob/compare/v54.0.2...v55.0.0) (2024-04-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove config eslint-config-airbnb as dependency
+
+### Features
+
+* remove config eslint-config-airbnb as dependency ([5fc0e37](https://github.com/christophehurpeau/eslint-config-pob/commit/5fc0e378d61343d3a0f0ea8b994183d60353a3a0))
+
+Version bump for dependency: eslint-config
+
+
 ## [54.0.2](https://github.com/christophehurpeau/eslint-config-pob/compare/v54.0.1...v54.0.2) (2024-04-07)
 
 Note: no notable changes

@pob/eslint-config-typescript-react/lib/index.js

@@ -1,14 +1,9 @@
 'use strict';
 
 module.exports = {
-  extends: [
-    'eslint-config-airbnb/rules/react',
-    'eslint-config-airbnb/rules/react-a11y',
-    'eslint-config-airbnb/rules/react-hooks',
-    '@pob/eslint-config/prettier', // reapply prettier
-    '@pob/eslint-config/rules/expert', // reapply expert: eslint-config-airbnb/rules/react modifies no-underscore-dangle
-    './rules/react',
-  ].map(require.resolve),
+  extends: ['./rules/react', './rules/react-hooks', './rules/jsx-a11y'].map(
+    require.resolve,
+  ),
 
   settings: {
     'import/resolver': {

@pob/eslint-config-typescript-react/lib/rules/jsx-a11y.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  plugins: ['jsx-a11y'],
+  extends: ['plugin:jsx-a11y/strict'],
+};

@pob/eslint-config-typescript-react/lib/rules/react-hooks.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  plugins: ['react-hooks'],
+
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+  },
+};

@pob/eslint-config-typescript-react/lib/rules/react.js

@@ -1,11 +1,9 @@
 'use strict';
 
 module.exports = {
-  extends: ['plugin:react/jsx-runtime'],
+  extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
 
   rules: {
-    /* added rules */
-
     // https://github.com/airbnb/javascript/issues/2829
     'func-names': 'error',
 
@@ -23,41 +21,123 @@ module.exports = {
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md
     'react/no-direct-mutation-state': 'error',
 
-    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
-    'react/jsx-sort-props': [
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md
+    'react/button-has-type': 'error',
+
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
+    'react/destructuring-assignment': [
+      'error',
+      'always',
+      { ignoreClassFields: false, destructureInSignature: 'always' },
+    ],
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
+    'react/display-name': 'off',
+
+    'react/function-component-definition': [
       'error',
       {
-        noSortAlphabetically: true,
-        reservedFirst: true,
-        shorthandFirst: true,
-        callbacksLast: true,
+        namedComponents: ['function-declaration'],
+        // https://github.com/airbnb/javascript/issues/2829
+        unnamedComponents: ['function-expression'],
       },
     ],
 
-    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
-    'react/sort-prop-types': [
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md
+    'react/hook-use-state': 'error',
+
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
+    'react/jsx-boolean-value': ['error', 'never', { always: [] }],
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md
+    'react/jsx-curly-brace-presence': [
+      'error',
+      { props: 'never', children: 'never' },
+    ],
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md
+    'react/jsx-curly-newline': [
       'error',
       {
-        noSortAlphabetically: true,
-        requiredFirst: false,
-        callbacksLast: true,
+        multiline: 'consistent',
+        singleline: 'consistent',
       },
     ],
 
-    'react/function-component-definition': [
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md
+    'react/jsx-fragments': ['error', 'syntax'],
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/e2eaadae316f9506d163812a09424eb42698470a/docs/rules/jsx-no-constructed-context-values.md
+    'react/jsx-no-constructed-context-values': 'error',
+
+    // Prevent usage of `javascript:` URLs
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md
+    'react/jsx-no-script-url': [
+      'error',
+      [
+        {
+          name: 'Link',
+          props: ['to'],
+        },
+      ],
+    ],
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md
+    'react/jsx-no-undef': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md
+    'react/jsx-no-useless-fragment': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md
+    'react/jsx-pascal-case': [
       'error',
       {
-        namedComponents: ['function-declaration'],
-        // https://github.com/airbnb/javascript/issues/2829
-        unnamedComponents: ['function-expression'],
+        allowAllCaps: true,
+        ignore: [],
       },
     ],
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
+    'react/jsx-sort-props': [
+      'error',
+      {
+        noSortAlphabetically: true,
+        reservedFirst: true,
+        shorthandFirst: true,
+        callbacksLast: true,
+      },
+    ],
+    // https://github.com/yannickcr/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-arrow-function-lifecycle.md
+    'react/no-arrow-function-lifecycle': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
+    'react/no-array-index-key': 'error',
 
-    /* changed rules */
+    // https://github.com/yannickcr/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-invalid-html-attribute.md
+    'react/no-invalid-html-attribute': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/8785c169c25b09b33c95655bf508cf46263bc53f/docs/rules/no-namespace.md
+    'react/no-namespace': 'error',
+
+    // entities does not need to be escaped as color syntaxing makes it clear when it's a body or it's a property.
+    'react/no-unescaped-entities': 'off',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/c2a790a3472eea0f6de984bdc3ee2a62197417fb/docs/rules/no-unstable-nested-components.md
+    'react/no-unstable-nested-components': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/8785c169c25b09b33c95655bf508cf46263bc53f/docs/rules/prefer-exact-props.md
+    'react/prefer-exact-props': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md
+    'react/prefer-es6-class': ['error', 'always'],
+
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
+    'react/prefer-stateless-function': [
+      'error',
+      { ignorePureComponents: true },
+    ],
 
-    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
-    // don't ignore case
-    'react/jsx-no-duplicate-props': 'error',
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
+    'react/self-closing-comp': 'error',
 
     // https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/sort-comp.md
     'react/sort-comp': [
@@ -98,27 +178,14 @@ module.exports = {
       },
     ],
 
-    // use class fields
-    'react/state-in-constructor': ['error', 'never'],
-
-    // use static public field
-    'react/static-property-placement': ['error', 'static public field'],
-
-    /* disabled rules */
-
-    // https://github.com/yannickcr/eslint-plugin-react/issues/1009
-    'react/require-default-props': 'off',
-
-    // disable force destructuring for state and props
-    'react/destructuring-assignment': 'off',
-
-    // project should use babel-plugin-transform-react-remove-prop-types
-    'react/forbid-foreign-prop-types': 'off',
-
-    // allow props spreading
-    'react/jsx-props-no-spreading': 'off',
-
-    // entities does not need to be escaped as color syntaxing makes it clear when it's a body or it's a property.
-    'react/no-unescaped-entities': 'off',
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
+    'react/sort-prop-types': [
+      'error',
+      {
+        noSortAlphabetically: true,
+        requiredFirst: false,
+        callbacksLast: true,
+      },
+    ],
   },
 };

@pob/eslint-config-typescript-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pob/eslint-config-typescript-react",
-  "version": "54.0.2",
+  "version": "55.0.0",
   "description": "eslint config files",
   "keywords": [],
   "author": "Christophe Hurpeau <christophe@hurpeau.com> (http://christophe.hurpeau.com/)",
@@ -39,9 +39,9 @@
   "peerDependencies": {
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0"
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0"
   },
   "peerDependenciesMeta": {
     "eslint-plugin-import": {
@@ -58,14 +58,14 @@
     }
   },
   "dependencies": {
-    "@pob/eslint-config": "54.0.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0"
+    "@pob/eslint-config": "55.0.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "4.6.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.74"
+    "@types/react": "18.2.79",
+    "react": "18.2.0"
   }
 }

@pob/eslint-config-typescript-react/test/.eslintrc.json

@@ -9,7 +9,13 @@
       "extends": [
         "../../eslint-config-typescript/lib/index.js",
         "../lib/index.js"
-      ]
+      ],
+      "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          { "devDependencies": true }
+        ]
+      }
     }
   ]
 }

@pob/eslint-config-typescript-react/test/Hello.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+
+export function Hello(props: { name: string }): ReactNode {
+  // eslint-disable-next-line react/destructuring-assignment
+  return <div>Hello, {props.name}.</div>;
+}

@pob/eslint-config-typescript-react/test/a11y/aria-props.tsx

@@ -0,0 +1,4 @@
+export const div1 = <div id="address_label">Enter your address</div>;
+
+// eslint-disable-next-line jsx-a11y/aria-props, react/no-unknown-property
+export const div2 = <input aria-labeledby="address_label" />;

@pob/eslint-config-typescript-react/test/a11y/aria-role.tsx

@@ -0,0 +1,4 @@
+export const Valid = <div role="button" />;
+
+// eslint-disable-next-line jsx-a11y/aria-role
+export const Invalid = <div role="foo" />;

@pob/eslint-config-typescript-react/test/a11y/aria-unsupported-elements.tsx

@@ -0,0 +1,3 @@
+// eslint-disable-next-line jsx-a11y/aria-unsupported-elements
+export const bad = <meta charSet="utf8" aria-hidden="false" />;
+//

@pob/eslint-config-typescript-react/test/components.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-unresolved
 import { forwardRef, memo, type ReactNode } from 'react';
 
 // eslint-disable-next-line react/function-component-definition

@pob/eslint-config-typescript-react/test/react-hooks/exhaustive-deps.tsx

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+
+export function useHook(name: string): void {
+  useEffect(() => {
+    localStorage.setItem('formData', name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

@pob/eslint-config-typescript-react/test/react-hooks/rules-of-hooks.tsx

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+export function useHook(name: string): void {
+  if (name !== '') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      localStorage.setItem('formData', name);
+    });
+  }
+}

@pob/eslint-config-typescript-react/test/react/button-has-type.tsx

@@ -0,0 +1,6 @@
+// eslint-disable-next-line react/button-has-type
+export const Invalid = <button>Hello</button>;
+// eslint-disable-next-line react/button-has-type
+export const InvalidType = <button type="foo">Hello</button>;
+
+export const ValidType = <button type="button">Hello</button>;

@pob/eslint-config-typescript-react/test/react/destructuring-assignment.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+
+export function MyComponent(props: { id: string | undefined }): ReactNode {
+  // eslint-disable-next-line react/destructuring-assignment
+  return <div id={props.id} />;
+}

@pob/eslint-config-typescript-react/test/react/jsx-boolean-value.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+
+function Hello({ personal }: { personal: boolean }): ReactElement {
+  return personal ? <div>Hello, World!</div> : <div>Hello, World!</div>;
+}
+
+// eslint-disable-next-line react/jsx-boolean-value
+export const Incorrect = <Hello personal={true} />;
+
+export const Valid = <Hello personal />;

@pob/eslint-config-typescript-react/test/react/jsx-fragments.tsx

@@ -0,0 +1,17 @@
+import { Fragment as Fragment2 } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+
+export const fragment1 = (
+  <Fragment>
+    <div />
+    <div />
+  </Fragment>
+);
+
+export const fragment2 = (
+  // eslint-disable-next-line react/jsx-fragments
+  <Fragment2>
+    <div />
+    <div />
+  </Fragment2>
+);