Divide TS configs to base and react versions

Author: rozsival

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: require.resolve('./ts/eslint.js'),
+  extends: require.resolve('./ts/eslint/base'),
 };

README.md

@@ -72,18 +72,26 @@ Following config examples can be further extended and customized according to pr
 
 ```javascript
 module.exports = {
-  presets: ['@wavevision/coding-standard/ts/babel'],
+  presets: ['@wavevision/coding-standard/ts/babel/base'],
 };
 ```
 
+> **React version:** `@wavevision/coding-standard/ts/babel/react`.
+
 #### `.eslintrc.js`
 
 ```javascript
 module.exports = {
-  extends: require.resolve('@wavevision/coding-standard/ts/eslint'),
+  extends: require.resolve('@wavevision/coding-standard/ts/eslint/base'),
+  parserOptions: {
+    project: '**/tsconfig.json',
+    tsconfigRootDir: '.',
+  },
 };
 ```
 
+> **React version:** `@wavevision/coding-standard/ts/eslint/react`.
+
 #### `postcss.config.js`
 
 ```javascript

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavevision/coding-standard",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "The Wavevision SCSS and TypeScript coding standard.",
   "repository": {
     "type": "git",

ts/babel/base.js

@@ -0,0 +1,16 @@
+const presets = [
+  ['@babel/preset-env', { corejs: 3, useBuiltIns: 'usage' }],
+  '@babel/preset-typescript',
+];
+const plugins = [
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-object-rest-spread',
+];
+
+exports.presets = presets;
+exports.plugins = plugins;
+
+module.exports = () => ({
+  presets,
+  plugins,
+});

ts/babel.js ts/babel/react.jsts/babel.js renamed to ts/babel/react.js

@@ -1,12 +1,5 @@
-const presets = [
-  ['@babel/preset-env', { corejs: 3, useBuiltIns: 'usage' }],
-  '@babel/preset-typescript',
-  '@babel/preset-react',
-];
-const plugins = [
-  '@babel/plugin-proposal-class-properties',
-  '@babel/plugin-proposal-object-rest-spread',
-];
+/* eslint @typescript-eslint/no-var-requires: 'off' */
+const { presets, plugins } = require('./base');
 
 if (process.env.NODE_ENV === 'production') {
   plugins.concat([
@@ -19,6 +12,6 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 module.exports = () => ({
-  presets,
+  presets: presets.concat('@babel/preset-react'),
   plugins,
 });

ts/eslint.js ts/eslint/base.jsts/eslint.js renamed to ts/eslint/base.js

@@ -1,3 +1,6 @@
+/* eslint @typescript-eslint/no-var-requires: 'off' */
+const configs = require('./configs');
+
 const productionError =
   process.env.NODE_ENV === 'production' ? 'error' : 'warn';
 
@@ -7,16 +10,7 @@ module.exports = {
     node: true,
     'jest/globals': true,
   },
-  extends: [
-    'airbnb',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:import/typescript',
-    'plugin:jest/recommended',
-    'plugin:prettier/recommended',
-    'prettier',
-    'prettier/@typescript-eslint',
-    'prettier/react',
-  ],
+  extends: configs.concat('airbnb-base'),
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2018,
@@ -25,9 +19,8 @@ module.exports = {
       jsx: true,
       modules: true,
     },
-    project: './tsconfig.json',
   },
-  plugins: ['@typescript-eslint', 'import', 'jest', 'react-hooks'],
+  plugins: ['@typescript-eslint', 'import', 'jest'],
   globals: {
     window: true,
     document: true,
@@ -62,45 +55,24 @@ module.exports = {
       },
     ],
     'import/prefer-default-export': 'off',
-    'jsx-a11y/interactive-supports-focus': 'off',
-    'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/label-has-associated-control': 'off',
-    'jsx-a11y/label-has-for': [
-      'error',
-      {
-        required: {
-          every: ['id'],
-        },
-      },
-    ],
     'no-nested-ternary': 'off',
     'no-param-reassign': 'off',
     'no-plusplus': 'off',
     'no-restricted-syntax': 'off',
     'no-shadow': 'off',
     'no-underscore-dangle': 'off',
     'spaced-comment': 'off',
-    'react/destructuring-assignment': 'off',
-    'react/jsx-boolean-value': 'off',
-    'react/jsx-curly-brace-presence': [
-      'error',
-      { props: 'never', children: 'never' },
-    ],
-    'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
-    'react/jsx-uses-vars': 'error',
-    'react/no-danger': 'off',
-    'react/no-unused-prop-types': 'off',
-    'react/prop-types': 'off',
-    'react/require-default-props': 'off',
     'no-console': productionError,
     'no-debugger': productionError,
+    'operator-linebreak': [
+      'error',
+      'after',
+      { overrides: { '?': 'before', ':': 'before' } },
+    ],
   },
   settings: {
     'import/resolver': {
       typescript: {},
     },
-    react: {
-      version: 'detect',
-    },
   },
 };

ts/eslint/configs.js

@@ -0,0 +1,8 @@
+module.exports = [
+  'plugin:@typescript-eslint/recommended',
+  'plugin:import/typescript',
+  'plugin:jest/recommended',
+  'plugin:prettier/recommended',
+  'prettier',
+  'prettier/@typescript-eslint',
+];

ts/eslint/react.js

@@ -0,0 +1,41 @@
+/* eslint @typescript-eslint/no-var-requires: 'off' */
+const base = require('./base');
+const configs = require('./configs');
+
+module.exports = {
+  ...base,
+  extends: configs.concat('airbnb', 'prettier/react'),
+  plugins: base.plugins.concat('react-hooks'),
+  rules: {
+    ...base.rules,
+    'jsx-a11y/interactive-supports-focus': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/label-has-for': [
+      'error',
+      {
+        required: {
+          every: ['id'],
+        },
+      },
+    ],
+    'react/destructuring-assignment': 'off',
+    'react/jsx-boolean-value': 'off',
+    'react/jsx-curly-brace-presence': [
+      'error',
+      { props: 'never', children: 'never' },
+    ],
+    'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
+    'react/jsx-uses-vars': 'error',
+    'react/no-danger': 'off',
+    'react/no-unused-prop-types': 'off',
+    'react/prop-types': 'off',
+    'react/require-default-props': 'off',
+  },
+  settings: {
+    ...base.settings,
+    react: {
+      version: 'detect',
+    },
+  },
+};