Separate components into their own packages (#48)

* Separate components for base, jest, playwright, react, and typescript into their own packages

* add deprecation note

---------

Co-authored-by: jwilliamson-acquia <[email protected]>
Co-authored-by: Joseph Phelan <[email protected]>

.changeset/purple-coins-dream.md

@@ -0,0 +1,10 @@
+---
+'eslint-config-widen-playwright': major
+'eslint-config-widen-typescript': major
+'eslint-config-widen-react': major
+'eslint-config-widen-base': major
+'eslint-config-widen-jest': major
+---
+
+Create separate packages for each component. Allows users to import only the
+dependencies that they need, rather than all of them.

packages/eslint-config-widen-base/README.md

@@ -0,0 +1,29 @@
+# eslint-config-widen-base
+
+Widen's shared ESLint config base module
+
+## Installation
+
+```bash
+yarn add -D eslint eslint-plugin-widen eslint-config-widen-base eslint-plugin-sort @babel/{core,eslint-parser}
+```
+
+## Usage
+
+In your `eslint.config.mjs` file, add the following entries to your extends
+list.
+
+```js
+import base from 'eslint-config-widen-base'
+
+export default [
+  ...base,
+  ...[
+    // you can specify what to ignore by using the `ignores` key before any other rule
+    // this will filter out things we dont want this to run on
+    { ignores: ['*.test.*'] },
+    // you can also override rules by specifying the rule and the new value
+    { files: ['*.spec.js'], rules: { 'no-unused-vars': 'off' } },
+  ],
+]
+```

packages/eslint-config-widen-base/package.json

@@ -0,0 +1,29 @@
+{
+  "author": "Widen",
+  "dependencies": {
+    "eslint-config-prettier": "^9.1.0"
+  },
+  "description": "Widen's shared ESLint base config.",
+  "exports": {
+    ".": "./lib/base.js"
+  },
+  "files": [
+    "lib"
+  ],
+  "type": "module",
+  "homepage": "https://github.com/Widen/eslint-config/tree/master/packages/eslint-config-widen-base#readme",
+  "license": "ISC",
+  "name": "eslint-config-widen-base",
+  "peerDependencies": {
+    "@babel/eslint-parser": "^7.22.15",
+    "eslint": ">= 9",
+    "eslint-plugin-sort": ">= 3",
+    "eslint-plugin-widen": ">=3.0.0"
+  },
+  "repository": {
+    "directory": "packages/eslint-config-widen-base",
+    "type": "git",
+    "url": "https://github.com/Widen/eslint-config"
+  },
+  "version": "1.0.0"
+}

packages/eslint-config-widen-base/src/base.ts

@@ -0,0 +1,96 @@
+import babelParser from '@babel/eslint-parser'
+import js from '@eslint/js'
+import prettier from 'eslint-plugin-prettier'
+import sort from 'eslint-plugin-sort'
+import widen from 'eslint-plugin-widen'
+import sharedGlobals from './sharedGlobals.js'
+
+export default [
+  {
+    languageOptions: {
+      globals: sharedGlobals,
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false,
+      },
+    },
+    plugins: {
+      prettier,
+      sort,
+      widen,
+    },
+    rules: {
+      'default-param-last': 'error',
+      'dot-notation': 'error',
+      eqeqeq: [
+        'error',
+        'always',
+        {
+          null: 'ignore',
+        },
+      ],
+      'no-console': ['error', { allow: ['error'] }],
+      'no-dupe-args': 'error',
+      'no-duplicate-imports': 'error',
+      'no-else-return': 'error',
+      'no-empty': ['error', { allowEmptyCatch: true }],
+      'no-extra-bind': 'error',
+      'no-param-reassign': 'error',
+      'no-return-await': 'error',
+      'no-template-curly-in-string': 'error',
+      'no-unneeded-ternary': 'error',
+      'no-unused-expressions': 'off',
+      'no-unused-vars': [
+        'error',
+        {
+          ignoreRestSiblings: true,
+          varsIgnorePattern: '^_',
+        },
+      ],
+      'no-useless-computed-key': 'error',
+      'no-var': 'error',
+      'object-shorthand': 'error',
+      'prefer-const': [
+        'error',
+        {
+          destructuring: 'all',
+        },
+      ],
+      'require-await': 'error',
+      'sort/exports': [
+        'warn',
+        {
+          groups: [
+            { order: 6, type: 'default' },
+            { order: 5, type: 'sourceless' },
+            { order: 2, regex: '^@widen\\/' },
+            { order: 4, regex: '^\\.+' },
+            { order: 1, type: 'dependency' },
+            { order: 3, type: 'other' },
+          ],
+        },
+      ],
+      'sort/imports': [
+        'warn',
+        {
+          groups: [
+            { order: 1, type: 'side-effect' },
+            { order: 3, regex: '^@widen\\/' },
+            { order: 5, regex: '^\\.+' },
+            { order: 2, type: 'dependency' },
+            { order: 4, type: 'other' },
+          ],
+        },
+      ],
+    },
+  },
+  js.configs.recommended,
+  {
+    plugins: {
+      prettier,
+    },
+    rules: {
+      ...prettier.configs.recommended.rules,
+    },
+  },
+]

packages/eslint-config-widen-base/src/sharedGlobals.ts

@@ -0,0 +1,14 @@
+import globals from 'globals'
+
+// delete an invalid global that causes error because of the trailing space
+const browser = globals.browser
+delete browser['AudioWorkletGlobalScope ']
+
+const sharedGlobals = {
+  ...browser,
+  ...globals.es6,
+  ...globals.node,
+  ...globals.jest,
+}
+
+export default sharedGlobals

packages/eslint-config-widen-base/src/types.d.ts

@@ -0,0 +1,3 @@
+declare module 'globals'
+declare module 'eslint-plugin-widen'
+declare module 'eslint-plugin-prettier'

packages/eslint-config-widen-base/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "target": "es2016"
+  },
+  "paths": {
+    "@/*": ["./src/*"]
+  }
+}

packages/eslint-config-widen-jest/README.md

@@ -0,0 +1,30 @@
+# eslint-config-widen-jest
+
+Widen's shared ESLint config for Jest.
+
+## Installation
+
+```bash
+yarn add -D eslint eslint-config-widen-jest eslint-plugin-jest
+```
+
+## Usage
+
+In your `eslint.config.mjs` file, add the following four entries to your extends
+list. If you don't need a specific configuration, simply remove it from the
+list.
+
+```js
+import jest from 'eslint-config-widen-jest'
+
+export default [
+  ...[
+    // you can specify what to ignore by using the `ignores` key before any other rule
+    // this will filter out things we dont want this to run on
+    { ignores: ['*.test.*'] },
+    ...jest,
+    // you can also override rules by specifying the rule and the new value
+    { files: ['*.spec.js'], rules: { 'jest/expect-expect': 'off' } },
+  ],
+]
+```

packages/eslint-config-widen-jest/package.json

@@ -0,0 +1,27 @@
+{
+  "author": "Widen",
+  "dependencies": {
+    "eslint-config-prettier": "^9.1.0"
+  },
+  "description": "Widen's shared ESLint config for Jest.",
+  "exports": {
+    ".": "./lib/jest.js"
+  },
+  "files": [
+    "lib"
+  ],
+  "type": "module",
+  "homepage": "https://github.com/Widen/eslint-config/tree/master/packages/eslint-config-widen-jest#readme",
+  "license": "ISC",
+  "name": "eslint-config-widen-jest",
+  "peerDependencies": {
+    "eslint": ">= 9",
+    "eslint-plugin-jest": ">= 28"
+  },
+  "repository": {
+    "directory": "packages/eslint-config-widen-jest",
+    "type": "git",
+    "url": "https://github.com/Widen/eslint-config"
+  },
+  "version": "1.0.0"
+}

packages/eslint-config-widen-jest/src/jest.ts

@@ -0,0 +1,22 @@
+import jest from 'eslint-plugin-jest'
+
+export default [
+  {
+    files: [
+      '*.spec.js',
+      '*.test.js',
+      '*.spec.jsx',
+      '*.test.jsx',
+      '*.spec.ts',
+      '*.test.ts',
+      '*.spec.tsx',
+      '*.test.tsx',
+    ],
+    plugins: {
+      jest,
+    },
+    rules: {
+      ...jest.configs.recommended.rules,
+    },
+  },
+]

packages/eslint-config-widen-jest/src/types.d.ts

@@ -0,0 +1 @@
+declare module 'eslint-plugin-jest'

packages/eslint-config-widen-jest/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "target": "es2016"
+  },
+  "paths": {
+    "@/*": ["./src/*"]
+  }
+}

packages/eslint-config-widen-playwright/README.md

@@ -0,0 +1,20 @@
+# eslint-config-widen-playwright
+
+Widen's shared ESLint config for Playwright.
+
+## Installation
+
+```bash
+yarn add -D eslint eslint-config-widen-playwright eslint-plugin-playwright
+```
+
+## Usage
+
+In your `eslint.config.mjs` file, add the following four entries to your extends
+list.
+
+```js
+import playwright from 'eslint-config-widen-playwright'
+
+export default [...[{ files: ['e2e/**'] }, ...playwright]]
+```

packages/eslint-config-widen-playwright/package.json

@@ -0,0 +1,27 @@
+{
+  "author": "Widen",
+  "dependencies": {
+    "eslint-config-prettier": "^9.1.0"
+  },
+  "description": "Widen's shared ESLint config for Playwright.",
+  "exports": {
+    ".": "./lib/playwright.js"
+  },
+  "files": [
+    "lib"
+  ],
+  "type": "module",
+  "homepage": "https://github.com/Widen/eslint-config/tree/master/packages/eslint-config-widen-playwright#readme",
+  "license": "ISC",
+  "name": "eslint-config-widen-playwright",
+  "peerDependencies": {
+    "eslint": ">= 9",
+    "eslint-plugin-playwright": ">= 1"
+  },
+  "repository": {
+    "directory": "packages/eslint-config-widen-playwright",
+    "type": "git",
+    "url": "https://github.com/Widen/eslint-config"
+  },
+  "version": "1.0.0"
+}

packages/eslint-config-widen-playwright/src/playwright.ts

@@ -0,0 +1,43 @@
+import playwright from 'eslint-plugin-playwright'
+
+delete playwright.configs['playwright-test'].env
+
+export default [
+  {
+    plugins: {
+      playwright,
+    },
+    rules: {
+      'playwright/missing-playwright-await': [
+        'error',
+        { customMatchers: ['toBeAccessible', 'toPassAxe'] },
+      ],
+      'playwright/no-restricted-matchers': [
+        'warn',
+        {
+          toEqualValue: 'Use `toHaveValue` instead.',
+          toHaveSelector: 'Use `toBeVisible` instead.',
+          toHaveSelectorCount: 'Use `toHaveCount` instead.',
+          toMatchAttribute: 'Use `toHaveAttribute` instead.',
+          toMatchText: 'Use `toHaveText` instead.',
+          toMatchURL: 'Use `toHaveURL` instead.',
+          toMatchValue: 'Use `toHaveValue` instead.',
+        },
+      ],
+      'playwright/prefer-lowercase-title': [
+        'warn',
+        { ignoreTopLevelDescribe: true },
+      ],
+      'playwright/prefer-strict-equal': 'warn',
+      'playwright/prefer-to-be': 'warn',
+      'playwright/prefer-to-have-length': 'warn',
+      'playwright/require-top-level-describe': 'warn',
+    },
+  },
+  {
+    ...playwright.configs['playwright-test'],
+    plugins: {
+      playwright,
+    },
+  },
+]

packages/eslint-config-widen-playwright/src/types.d.ts

@@ -0,0 +1 @@
+declare module 'eslint-plugin-playwright'