Update linting, testing, @types/* dependencies

[chihsuan]

Fixes #8425 and woocommerce/woocommerce#32153

This PR updates the linting, testing, and @types/* dependencies to the latest version with major/breaking changes.

Most of breaking changes:

• Dropped support for Node 10 and the Minimum version is now v12. -> Our minimum version is already v12.
• Migrated to (Pure) ESM. -> We can build ESM modules properly.

Changes made due to dependencies upgrade:

• After updating eslint and stylelint, some new rules are now enabled by default. I've fixed a few lint errors and added TODO comments for the other rules. I'll create follow-up issues for them.
  • Fix lint errors after updating eslint-plugin-testing-library.
  • Removed duplicate @mixin break-small block.
  • Added .scss for @import commands to fix at-import-partial-extension.
  • Renamed .stylelintrc.json to stylelint.config.js to add comments.
• Migrated husky config with husky-4-to-7 CLI.

husky 4 to 7

v7.0.0

• Improve .husky/ directory structure. .husky/.gitignore is now unnecessary and can be removed.
• Improve error output (shorter)
• Update husky-init CLI
• Update husky-4-to-7 CLI
• Drop Node 10 support

@types/jest 26 to 27

We have already upgraded to jest v27.

babel-jest 26 to 27

• [babel-jest] [BREAKING] Migrate to ESM (feat: support transpiled transformers jestjs/jest#11193)

lint-staged 10 to 12

Node version and ESM modules breaking changes only.

v12

• Since v12.0.0 lint-staged is a pure ESM module, so make sure your Node.js version is at least 12.20.0, 14.13.1, or 16.0.0. Read more about ESM modules from the official Node.js Documentation site here.

v11

• Node.js 12 LTS 'Erbium' is now the minimum required version

@typescript-eslint/eslint-plugin, @typescript-eslint/parser 4 to 5

These packages are required by@wordpress/eslint-plugin and we've also updated the @wordpress/eslint-plugin to the latest version in this PR.

CHANGELOG.md

• eslint-plugin: ban-types no longer reports object by default

chalk 4 to 5

We don't use the properties that changed from v4 to v5.

• v5.0.0

• This package is now pure ESM. Please read this.

If you use TypeScript, you will want to stay on Chalk 4 until TypeScript 4.6 is out. https://github.com/microsoft/TypeScript/issues/46452
If you use a bundler, make sure it supports ESM and that you have correctly configured it for ESM.
The Chalk issue tracker is not a support channel for your favorite build/bundler tool.
It's totally fine to stay on Chalk v4. It's been stable for years.

• Require Node.js 12.20 chalk/chalk@fa16f4e
• Move some properties off the default export to individual named exports:

chalk.Instance → Chalk
chalk.supportsColor → supportsColor
chalk.stderr → chalkStderr
chalk.stderr.supportsColor → supportsColorStderr

• Remove .keyword(), .hsl(), .hsv(), .hwb(), and .ansi() coloring methods (Add overline style and remove keyword, hsl, hsv, hwb and ansi color spaces chalk/chalk#433) chalk/chalk@4cf2e40

Concurrently 5 to 7

We only use Concurrently CLI so concurrently() API changes don't affect us.

v7.0.0

• Dropped support for Node 10. Minimum version is now 12.20.
• concurrently() API now has a different return value. Please refer to the docs.

v6.0.0

• BREAKING CHANGE: Dropped support for Node 8 (feat: upgrade yargs (requires node 8) open-cli-tools/concurrently#244)

@wordpress/prettier-config to v1

CHANGELOG.md

• Increase the minimum Node.js version to 12.

Update stylelint 9 to 14

We use this with @wordpress/stylelint-config and it has supported stylelint 14 in the latest version.

CHANGELOG.md

stylelint-config-wordpress 13 to @wordpress/stylelint-config 20

CHANGELOG.md

Breaking Change

• Increased minimum peer dependency of stylelint to 14.2.0. See official migration guide to v14 for details.
• Increase the minimum Node.js version to 12

eslint 7 to 8

@wordpress/eslint-plugin@v10 is compatible with eslint v8 and I don't see anything breaking our @woocommerce/eslint-plugin.

Migrating to v8.0.0

• Node.js 10, 13, and 15 are no longer supported
• Removed codeframe and table formatters
• comma-dangle rule schema is stricter
• Unused disable directives are now fixable
• eslint:recommended has been updated

@wordpress/eslint-plugin 8 to 10

• Disabled some new rules for now to ignore new lint errors.
• Another PR Fix jsdoc/check-line-alignment eslint warnings #8484 to fix jsdoc/check-line-alignment eslint warnings

CHANGELOG.md

Breaking Changes:

• The integration with Prettier is now optional and gets activated when the prettier package is installed in the project
• The peer dependency constraint for ESLint has been updated from ^6 || ^7 to ^8.
• The bundled @typescript-eslint/eslint-plugin dependency has been updated from requiring ^4.31.0 to requiring ^5.3.0
• The bundled @typescript-eslint/parser dependency has been updated from requiring ^4.31.0 to requiring ^5.3.0
• The bundled eslint-config-prettier dependency has been updated from requiring ^7.1.0 to requiring ^8.3.0
• The bundled eslint-plugin-jest dependency has been updated from requiring ^24.1.3 to requiring ^25.2.3
• The bundled eslint-plugin-jsdoc dependency has been updated from requiring ^36.0.8 to requiring ^37.0.3
• The bundled globals dependency has been updated from requiring ^12.0.0 to requiring ^13.12.0
• The gutenberg-phase rule has been deprecated and replaced by the is-gutenberg-plugin rule.
• Add support and configuration for TypeScript files.

eslint-plugin-testing-library 3 to 5

• Recommended Shareable Config has been renamed: 'plugin:testing-library/recommended'->'plugin:testing-library/react'`
• Disabled some new rules for now to ignore new lint errors.

• Support for ESLint v8
• Drop support for Node v10. Required node version is now ^12.22.0 || ^14.17.0 || >=16.0.0. Node v10 was EOL'd in April 2021, and ESLint v8 dropped support for it too.
• Update dependencies
• Guide: migrating to v4
• Guide: migrating to v5

Remove @wordpress/e2e-test-utils

We don't use this directly and it's included in @woocommerce/e2e* dependencies.

> pnpm why @wordpress/e2e-test-utils

dependencies:
@woocommerce/e2e-environment 0.3.0
├─┬ @automattic/puppeteer-utils 0.0.1
│ └── @wordpress/e2e-test-utils 3.0.0
└── @wordpress/e2e-test-utils 4.16.1
@woocommerce/e2e-utils 0.2.0
└── @wordpress/e2e-test-utils 4.16.1

devDependencies:
@wordpress/e2e-test-utils 4.16.1

Update storybook config

We've already upgraded storybook to v6 but it seems that our config didn't update.

• Deprecated addParameters and addDecorator. Instead, use export const parameters = {}; and export const decorators = [];
• Removed unnecessary withA11y
• Update <List/> story to import directly from '@storybook/addon-docs'

Importing from '@storybook/addon-docs/blocks' is deprecated, import directly from '@storybook/addon-docs' instead: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-scoped-blocks-imports

Migrate @storybook/addon-knobs to @storybook/addon-controls

@storybook/addon-knobs has been deprecated, in favor of @storybook/addon-controls.

I've converted most of the stories to use @storybook/addon-controls. However, I found @storybook/addon-controls have trouble with <Timeline />. It seems that we cannot have jsx elements in props.

Therefore, I still have @storybook/addon-knob in our dependencies.

puppeteer & @wordpress/scripts

I'll create a follow-up issue for them because @wordpress/scripts requires the changes in #8476. And puppeteer need to be compatible with @wordpress/scripts.

Test Instructions

1. Checkout this branch
2. pnpm install
3. Check thatpnpm run lint & pnpm run test & pnpm run build still work
4. Checkout to a tmp branch
5. Modify a js file and commit it to confirm lint-staged, husky work

✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ lint-staged.config.js — 1 file
    ↓ *.scss — no files [SKIPPED]
    ❯ client/**/*.(t|j)s?(x) — 1 file
      ✔ wp-scripts format-js
      ✔ wp-scripts lint-js
      ⠙ pnpm run test-staged
    ↓ packages/**/*.(t|j)s?(x) — no files [SKIPPED]
    ↓ *.php — no files [SKIPPED]
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...

no changelog

[adrianduffell]

This tested well and LGTM, thank you @chihsuan! 🚀