eslint: Remove eslint-plugin-wpcalypso, add more @wordpress rules…

…, and clean up (#38436)

It turns out we're not making very much use of `eslint-plugin-wpcalypso`:

* Three of its rules we disable as being redundant to `@wordpress`
  rules.
* We already disable four more of its rules as not being applicable to
  Jetpack.
* Of the seven still enabled,
  * `wpcalypso/i18n-no-this-translate` is apparently obsolete, see
	Automattic/i18n-calypso#59.
  * `wpcalypso/i18n-named-placeholders`, `wpcalypso/i18n-mismatched-placeholders`,
	and `wpcalypso/i18n-no-placeholders-only` only work with Calypso's
	`translate()` function (which we don't use), not `@wordpress/i18n`.
  * We don't use `@wordpress/react-i18n` anywhere so
	`wpcalypso/i18n-translate-identifier` has nothing to check.

So let's drop it, and one of its dependencies that we're not using
either.

Dropping wpcalypso leaves us without configuration of various other
eslint plugins we have been using. To make up the difference, let's also
enable the "recommended-with-formatting" config from `@wordpress/eslint-plugin`.

After adding back a few rules and removing some redundant overrides,
this results in the following changes:

New rules:
* no-caller
* no-eval
* no-multi-str
* no-useless-constructor
* react/jsx-equals-spacing
* react/jsx-indent
* react/jsx-indent-props
* react/jsx-no-comment-textnodes
* react/jsx-uses-react
* react/no-danger-with-children
* react/no-render-return-value
* react/require-render-return

Removed rules:
* no-negated-in-lhs (which is deprecated anyway)

Neutral changes:
* A bunch of checks switched between "warn" and "error". Since we don't
  differentiate in CI, this shouldn't make any difference.
* `.parserOptions.sourceType` and `.parserOptions.babelOptions` get set.
  Since we always use TypeScript's parser, these options have no effect.

Note none of the above are failing on our current codebase!

To avoid this PR getting too big, the following changes that do fail on
our current codebase are temporarily overridden. We'll either fix these
in future PRs, or "promote" them to non-temporary overrides.

Temporarily not added:
* array-callback-return
* jsdoc/check-line-alignment
* no-alert
* no-bitwise
* no-fallthrough
* no-prototype-builtins
* no-undef-init
* no-unused-expressions
* no-useless-computed-key
* no-useless-return
* object-shorthand
* react/jsx-key
* react/no-direct-mutation-state
* react/no-find-dom-node
* react/no-unescaped-entities
* react/no-unknown-property

Changed rule configurations overridden:
* eqeqeq: No longer allows non-strict comparison with `null`.
* jsdoc now prefers `@return` and `@yield` rather than `@returns` and
  `@yields`.
* jsx-a11y/label-has-associated-control: `assert` is now "htmlFor",
  formerly defaulted to "either".
* no-empty: No longer allows empty `catch`.
* react-hooks/exhaustive-deps: Applies to `useSelect` and
  `useSuspenseSelect` too.

projects/js-packages/publicize-components/changelog/remove-calypso-eslint

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Replace eslint disable of `wpcalypso/no-unsafe-wp-apis` with `@wordpress/no-unsafe-wp-apis`. No change to functionality.
+
+

projects/js-packages/publicize-components/src/components/connection-management/disconnect.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@automattic/jetpack-components';
-// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createInterpolateElement, useCallback, useReducer } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';

projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx

@@ -2,8 +2,7 @@ import { Button, useGlobalNotices } from '@automattic/jetpack-components';
 import {
 	BaseControl,
 	FlexBlock,
-	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
-	__experimentalHStack as HStack,
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';

projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js

@@ -1,10 +1,9 @@
-/* eslint-disable wpcalypso/no-unsafe-wp-apis */
 import { useGlobalNotices } from '@automattic/jetpack-components';
 import {
 	PanelBody,
 	ToggleControl,
 	Button,
-	__experimentalHStack as HStack,
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { useCallback, useState, Fragment } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';

projects/packages/forms/changelog/remove-calypso-eslint

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Replace eslint disable of `wpcalypso/no-unsafe-wp-apis` with `@wordpress/no-unsafe-wp-apis`. No change to functionality.
+
+

projects/packages/forms/changelog/remove-calypso-eslint#2

@@ -0,0 +1,5 @@
+Significance: patch
+Type: removed
+Comment: Remove `wpcalypso/jsx-classname-namespace` from eslint config, eslint-plugin-wpcalypso is being removed.
+
+

projects/packages/forms/src/blocks/.eslintrc.js

@@ -23,7 +23,6 @@ module.exports = {
 		'react/react-in-jsx-scope': 0,
 		'space-unary-ops': 0,
 		'space-before-function-paren': 0,
-		'wpcalypso/jsx-classname-namespace': 0,
 
 		// eslint 6.x migration
 		'react-hooks/rules-of-hooks': 1,

projects/packages/forms/src/blocks/contact-form/edit.js

@@ -9,8 +9,8 @@ import {
 	InnerBlocks,
 	InspectorControls,
 	URLInput,
-	__experimentalBlockVariationPicker as BlockVariationPicker, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
-	__experimentalBlockPatternSetup as BlockPatternSetup, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalBlockVariationPicker as BlockVariationPicker, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalBlockPatternSetup as BlockPatternSetup, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { createBlock, registerBlockVariation } from '@wordpress/blocks';
 import {

projects/packages/jetpack-mu-wpcom/changelog/remove-calypso-eslint

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Replace eslint disable of `wpcalypso/no-unsafe-wp-apis` with `@wordpress/no-unsafe-wp-apis`. No change to functionality.
+
+

projects/packages/jetpack-mu-wpcom/src/features/block-inserter-modifications/index.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
-import { __unstableInserterMenuExtension as InserterMenuExtension } from '@wordpress/block-editor';
+import { __unstableInserterMenuExtension as InserterMenuExtension } from '@wordpress/block-editor'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useState } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import { debounce } from 'lodash';

projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/event-countdown/edit.js

@@ -1,8 +1,7 @@
 import { useBlockProps } from '@wordpress/block-editor';
 import { Button, DateTimePicker, Dropdown, Placeholder } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
-import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
+import { dateI18n, __experimentalGetSettings } from '@wordpress/date'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import moment from 'moment';

projects/packages/search/changelog/remove-calypso-eslint

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Replace eslint disable of `wpcalypso/no-unsafe-wp-apis` with `@wordpress/no-unsafe-wp-apis`. No change to functionality.
+
+

projects/packages/search/src/customberg/components/sidebar/color-control.jsx

@@ -1,5 +1,5 @@
 // NOTE: Expect this import to break when the exported value is renamed!
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor'; // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 

projects/packages/videopress/changelog/remove-calypso-eslint

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Replace eslint disable of `wpcalypso/no-unsafe-wp-apis` with `@wordpress/no-unsafe-wp-apis`. No change to functionality.
+
+

projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx

@@ -5,8 +5,7 @@ import { PanelColorSettings } from '@wordpress/block-editor';
 import {
 	PanelRow,
 	ToggleControl,
-	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
-	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalToolsPanelItem as ToolsPanelItem, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import { useCallback, useState } from '@wordpress/element';

projects/packages/videopress/src/client/components/timestamp-control/index.tsx

@@ -2,8 +2,7 @@
  * External dependencies
  */
 import {
-	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
-	__experimentalNumberControl,
+	__experimentalNumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	TextControl,
 	RangeControl,
 	BaseControl,

projects/plugins/jetpack/changelog/remove-calypso-eslint

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Replace eslint disable of `wpcalypso/no-unsafe-wp-apis` with `@wordpress/no-unsafe-wp-apis`. No change to functionality.
+
+

projects/plugins/jetpack/changelog/remove-calypso-eslint#2

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Remove `wpcalypso/jsx-classname-namespace` from eslintrc and `eslint-disable` comments, `eslint-plugin-wpcalypso` is being removed.
+
+

projects/plugins/jetpack/changelog/remove-calypso-eslint#3

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Change one `@return` comment to `@returns`, which we'll probably change back soon while doing the same across the monorepo but it's not worth the effort of avoiding now.
+
+

projects/plugins/jetpack/extensions/.eslintrc.js

@@ -23,7 +23,6 @@ module.exports = {
 		'react/react-in-jsx-scope': 0,
 		'space-unary-ops': 0,
 		'space-before-function-paren': 0,
-		'wpcalypso/jsx-classname-namespace': 0,
 
 		// eslint 6.x migration
 		'react-hooks/rules-of-hooks': 1,

projects/plugins/jetpack/extensions/blocks/button/button-colors-panel.js

@@ -1,7 +1,7 @@
 import {
 	ContrastChecker,
 	PanelColorSettings,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalPanelColorGradientSettings as PanelColorGradientSettings, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 

projects/plugins/jetpack/extensions/blocks/button/constants.js

@@ -1,4 +1,4 @@
-import { __experimentalUseGradient as useGradient } from '@wordpress/block-editor'; // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+import { __experimentalUseGradient as useGradient } from '@wordpress/block-editor'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 
 export const IS_GRADIENT_AVAILABLE = !! useGradient;
 

projects/plugins/jetpack/extensions/blocks/button/edit.js

@@ -1,7 +1,7 @@
 import {
 	InspectorControls,
 	RichText,
-	__experimentalUseGradient as useGradient, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalUseGradient as useGradient, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	withColors,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';

projects/plugins/jetpack/extensions/blocks/button/save.js

@@ -1,6 +1,6 @@
 import {
 	getColorClassName,
-	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	RichText,
 } from '@wordpress/block-editor';
 import clsx from 'clsx';

projects/plugins/jetpack/extensions/blocks/button/test/edit.js

@@ -1,5 +1,5 @@
 import { render, screen, within } from '@testing-library/react';
-import { __experimentalUseGradient } from '@wordpress/block-editor'; // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+import { __experimentalUseGradient } from '@wordpress/block-editor'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { ButtonEdit } from '../edit';
 
 const defaultAttributes = {

projects/plugins/jetpack/extensions/blocks/markdown/renderer.js

@@ -1,4 +1,4 @@
-import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor'; // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import MarkdownIt from 'markdown-it';

projects/plugins/jetpack/extensions/blocks/payments-intro/pattern-picker.js

@@ -1,5 +1,5 @@
 import {
-	__experimentalBlockPatternSetup as BlockPatternSetup, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalBlockPatternSetup as BlockPatternSetup, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { Button, Modal } from '@wordpress/components';
 import { useState } from '@wordpress/element';

projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/deprecated/v1/index.js

@@ -70,7 +70,6 @@ export default {
 	},
 
 	save: () => (
-		// eslint-disable-next-line wpcalypso/jsx-classname-namespace
 		<div className="wp-block-premium-content-logged-out-view">
 			<InnerBlocks.Content />
 		</div>

projects/plugins/jetpack/extensions/blocks/premium-content/login-button/edit.js

@@ -44,7 +44,6 @@ function LoginButtonEdit( props ) {
 
 	return (
 		<>
-			{ /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ }
 			<div { ...blockProps }>
 				<RichText
 					placeholder={ __( 'Add text…', 'jetpack' ) }

projects/plugins/jetpack/extensions/blocks/premium-content/login-button/save.js

@@ -24,7 +24,6 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		// eslint-disable-next-line wpcalypso/jsx-classname-namespace
 		<div { ...blockProps }>
 			<RichText.Content
 				tagName="a"

projects/plugins/jetpack/extensions/blocks/recipe/details/edit.js

@@ -1,5 +1,5 @@
 import { InnerBlocks } from '@wordpress/block-editor';
-import { TextControl, __experimentalUnitControl as UnitControl } from '@wordpress/components'; // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+import { TextControl, __experimentalUnitControl as UnitControl } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import './editor.scss';
 
 const units = [

projects/plugins/jetpack/extensions/blocks/sharing-buttons/components/inspector-controls.js

@@ -2,8 +2,8 @@ import {
 	InspectorControls,
 	ContrastChecker,
 	withColors,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { PanelBody, MenuItemsChoice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js

@@ -5,7 +5,7 @@ import {
 	ContrastChecker,
 	PanelColorSettings,
 	FontSizePicker,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalPanelColorGradientSettings as PanelColorGradientSettings, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody, RangeControl, TextareaControl } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js

@@ -1,6 +1,6 @@
 import {
 	getColorClassName,
-	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js

@@ -1,6 +1,6 @@
 import {
 	getColorClassName,
-	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v6/save.js

@@ -1,6 +1,6 @@
 import {
 	getColorClassName,
-	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/save.js

@@ -1,6 +1,6 @@
 import {
 	getColorClassName,
-	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';

projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js

@@ -7,7 +7,7 @@ import {
 	withColors,
 	withFontSizes,
 	useBlockProps,
-	__experimentalUseGradient as useGradient, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	__experimentalUseGradient as useGradient, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { TextControl, Toolbar, withFallbackStyles } from '@wordpress/components';
 import { compose, usePrevious } from '@wordpress/compose';