Update linting, testing, @types/* dependencies (#8475)

* Update husky from 4 to 7

* Update @types/jest from 26 to 27

* Update lint-staged from 10 to 12

* Update babel-jest from 26 to 27

* Update @typescript-eslint/eslint-plugin from 4 to 5

* Update @typescript-eslint/parser from 4 to 5

* Update chalk from 4 to 5

* Update concurrently from 5 to 7

* Update stylelint from 9 to 14 and stylelint-config-wordpress from 13 to 17

* Update @wordpress/prettier-config from 0.4 to 1.1

* Update eslint from 7 to 8, @wordpress/eslint-plugin from 8 to 10, eslint-plugin-testing-library to 5

* Fix lint errors after updating eslint-plugin-testing-library

* Fix style lint

* Rename .stylelintrc.json -> stylelint.config.js & add todo comment

Fix stylelint.config.js

* Remove @wordpress/e2e-test-utils

* Add changelogs for eslint-plugin

* Update storybook/preview.js since addDecorator has been deprecated

Remove parameters

* Import directly from @storybook/addon-docs

* Migrate some stories to use @storybook/addon-controls

Add a comment for @storybook/addon-knobs

* Update changelogs

* Update preview.js to fix lint warning

* Update pnpm-lock.yaml

* Fix eslint layout errors (#8484)

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm exec lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+node bin/pre-push-hook.js

client/activity-panel/panels/help.js

@@ -355,9 +355,9 @@ function getListItems( props ) {
 	 * Filter an array of help items for the setup task.
 	 *
 	 * @filter woocommerce_admin_setup_task_help_items
-	 * @param {Array.<Object>} items Array items object based on task.
-	 * @param {('products'|'appearance'|'shipping'|'tax'|'payments'|'marketing')} task url query parameters.
-	 * @param {Object} props React component props.
+	 * @param {Array.<Object>}                                                    items Array items object based on task.
+	 * @param {('products'|'appearance'|'shipping'|'tax'|'payments'|'marketing')} task  url query parameters.
+	 * @param {Object}                                                            props React component props.
 	 */
 	const filteredItems = applyFilters(
 		SETUP_TASK_HELP_ITEMS_FILTER,

client/analytics/components/report-error/index.js

@@ -9,7 +9,7 @@ import { EmptyContent } from '@woocommerce/components';
  * Component to render when there is an error in a report component due to data
  * not being loaded or being invalid.
  *
- * @param {Object} props React props.
+ * @param {Object} props             React props.
  * @param {string} [props.className] Additional class name to style the component.
  */
 function ReportError( { className } ) {

client/analytics/components/report-table/index.js

@@ -162,13 +162,13 @@ const ReportTable = ( props ) => {
 		 * Enables manipulation of data used to create the report CSV.
 		 *
 		 * @filter woocommerce_admin_report_table
-		 * @param {Object} reportTableData - data used to create the table.
+		 * @param {Object} reportTableData          - data used to create the table.
 		 * @param {string} reportTableData.endpoint - table api endpoint.
-		 * @param {Array} reportTableData.headers - table headers data.
-		 * @param {Array} reportTableData.rows - table rows data.
-		 * @param {Object} reportTableData.totals - total aggregates for request.
-		 * @param {Array} reportTableData.summary - summary numbers data.
-		 * @param {Object} reportTableData.items - response from api requerst.
+		 * @param {Array}  reportTableData.headers  - table headers data.
+		 * @param {Array}  reportTableData.rows     - table rows data.
+		 * @param {Object} reportTableData.totals   - total aggregates for request.
+		 * @param {Array}  reportTableData.summary  - summary numbers data.
+		 * @param {Object} reportTableData.items    - response from api requerst.
 		 */
 		return applyFilters( TABLE_FILTER, {
 			endpoint,

client/analytics/report/categories/config.js

@@ -58,8 +58,8 @@ export const charts = applyFilters( CATEGORY_REPORT_CHARTS_FILTER, [
  * Category Report Advanced Filters.
  *
  * @filter woocommerce_admin_category_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/coupons/config.js

@@ -49,8 +49,8 @@ export const charts = applyFilters( COUPON_REPORT_CHARTS_FILTER, [
  * Coupons Report Advanced Filters.
  *
  * @filter woocommerce_admin_coupon_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/customers/config.js

@@ -79,8 +79,8 @@ export const filters = applyFilters( CUSTOMERS_REPORT_FILTERS_FILTER, [
  * Customers Report Advanced Filters.
  *
  * @filter woocommerce_admin_customers_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/downloads/config.js

@@ -69,8 +69,8 @@ export const filters = applyFilters( DOWLOADS_REPORT_FILTERS_FILTER, [
  * Downloads Report Advanced Filters.
  *
  * @filter woocommerce_admin_downloads_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/get-reports.js

@@ -134,10 +134,10 @@ export default () => {
 	 * An object defining a report page.
 	 *
 	 * @typedef {Object} report
-	 * @property {string} report Report slug.
-	 * @property {string} title Report title.
-	 * @property {Node} component React Component to render.
-	 * @property {Object} navArgs Arguments supplied to WooCommerce Navigation.
+	 * @property {string} report    Report slug.
+	 * @property {string} title     Report title.
+	 * @property {Node}   component React Component to render.
+	 * @property {Object} navArgs   Arguments supplied to WooCommerce Navigation.
 	 */
 
 	/**

client/analytics/report/index.js

@@ -25,22 +25,22 @@ import getReports from './get-reports';
  * An object defining a chart.
  *
  * @typedef {Object} chart
- * @property {string} key Chart slug.
- * @property {string} label Chart label.
- * @property {string} order Default way to order the `orderby` property.
- * @property {string} orderby Column by which to order.
- * @property {('number'|'currency')} type Specify the type of number.
+ * @property {string}                key     Chart slug.
+ * @property {string}                label   Chart label.
+ * @property {string}                order   Default way to order the `orderby` property.
+ * @property {string}                orderby Column by which to order.
+ * @property {('number'|'currency')} type    Specify the type of number.
  */
 
 /**
  * An object defining a set of report filters.
  *
  * @typedef {Object} filter
- * @property {string} label Label describing the set of filters.
- * @property {string} param Url query param this set of filters operates on.
+ * @property {string}         label        Label describing the set of filters.
+ * @property {string}         param        Url query param this set of filters operates on.
  * @property {Array.<string>} staticParams Array of `param` that remain constant when other params are manipulated.
- * @property {Function} showFilters A function with url query as an argument returning a Boolean depending on whether or not the filters should be shown.
- * @property {Array} filters An array of filter objects.
+ * @property {Function}       showFilters  A function with url query as an argument returning a Boolean depending on whether or not the filters should be shown.
+ * @property {Array}          filters      An array of filter objects.
  */
 
 /**

client/analytics/report/orders/config.js

@@ -89,8 +89,8 @@ export const filters = applyFilters( ORDERS_REPORT_FILTERS_FILTER, [
  * Orders Report Advanced Filters.
  *
  * @filter woocommerce_admin_orders_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/products/config.js

@@ -183,8 +183,8 @@ const variationsConfig = {
  * Produts Report Advanced Filters.
  *
  * @filter woocommerce_admin_products_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/revenue/config.js

@@ -89,8 +89,8 @@ export const charts = applyFilters( REVENUE_REPORT_CHARTS_FILTER, [
  * Revenue Report Advanced Filters.
  *
  * @filter woocommerce_admin_revenue_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/revenue/table.js

@@ -293,8 +293,8 @@ RevenueReportTable.contextType = CurrencyContext;
  *
  * @param {boolean} isError
  * @param {boolean} isRequesting
- * @param {Object} tableQuery
- * @param {Object} revenueData
+ * @param {Object}  tableQuery
+ * @param {Object}  revenueData
  * @return {Object} formatted tableData prop
  */
 const formatProps = memoize(

client/analytics/report/stock/config.js

@@ -14,8 +14,8 @@ export const showDatePicker = false;
  * Stock Report Advanced Filters.
  *
  * @filter woocommerce_admin_stock_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/taxes/config.js

@@ -65,8 +65,8 @@ export const charts = applyFilters( TAXES_REPORT_CHARTS_FILTER, [
  * Taxes Report Advanced Filters.
  *
  * @filter woocommerce_admin_taxes_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/variations/config.js

@@ -141,8 +141,8 @@ export const filters = applyFilters( VARIATIONS_REPORT_FILTERS_FILTER, [
  * Variations Report Advanced Filters.
  *
  * @filter woocommerce_admin_variations_report_advanced_filters
- * @param {Object} advancedFilters Report Advanced Filters.
- * @param {string} advancedFilters.title Interpolated component string for Advanced Filters title.
+ * @param {Object} advancedFilters         Report Advanced Filters.
+ * @param {string} advancedFilters.title   Interpolated component string for Advanced Filters title.
  * @param {Object} advancedFilters.filters An object specifying a report's Advanced Filters.
  */
 export const advancedFilters = applyFilters(

client/analytics/report/variations/table.js

@@ -211,9 +211,9 @@ class VariationsReportTable extends Component {
 				 *
 				 * @filter experimental_woocommerce_admin_variations_report_table_summary_variations_count_label
 				 *
-				 * @param {string} label Label used for the count.
+				 * @param {string} label           Label used for the count.
 				 * @param {string} variationsCount Number of variations.
-				 * @param {Array} query Query parameters.
+				 * @param {Array}  query           Query parameters.
 				 */
 				label: applyFilters(
 					EXPERIMENTAL_VARIATIONS_REPORT_TABLE_SUMMARY_VARIATIONS_COUNT_LABEL_FILTER,
@@ -305,7 +305,7 @@ class VariationsReportTable extends Component {
 				 * @filter experimental_woocommerce_admin_variations_report_table_title
 				 *
 				 * @param {string} title Title used for the report table.
-				 * @param {Array} query Query parameters.
+				 * @param {Array}  query Query parameters.
 				 */
 				title={ applyFilters(
 					EXPERIMENTAL_VARIATIONS_REPORT_TABLE_TITLE_FILTER,

client/analytics/settings/historical-data/status.js

@@ -14,14 +14,14 @@ function HistoricalDataStatus( { importDate, status } ) {
 	 *
 	 * @filter woocommerce_admin_import_status
 	 *
-	 * @param {Object} statuses Import statuses.
-	 * @param {string} statuses.nothing Nothing to import.
-	 * @param {string} statuses.ready Ready to import.
-	 * @param {Array} statuses.initializing Initializing string and spinner.
-	 * @param {Array} statuses.customers Importing customers string and spinner.
-	 * @param {Array} statuses.orders Importing orders string and spinner.
-	 * @param {Array} statuses.finalizing Finalizing string and spinner.
-	 * @param {string} statuses.finished Message displayed after import.
+	 * @param {Object} statuses              Import statuses.
+	 * @param {string} statuses.nothing      Nothing to import.
+	 * @param {string} statuses.ready        Ready to import.
+	 * @param {Array}  statuses.initializing Initializing string and spinner.
+	 * @param {Array}  statuses.customers    Importing customers string and spinner.
+	 * @param {Array}  statuses.orders       Importing orders string and spinner.
+	 * @param {Array}  statuses.finalizing   Finalizing string and spinner.
+	 * @param {string} statuses.finished     Message displayed after import.
 	 */
 	const statusLabels = applyFilters( HISTORICAL_DATA_STATUS_FILTER, {
 		nothing: __( 'Nothing To Import', 'woocommerce-admin' ),

client/customer-effort-score-tracks/data/actions.js

@@ -11,7 +11,7 @@ import TYPES from './action-types';
 /**
  * Initialize the state
  *
- * @param {Object} queue	initial queue
+ * @param {Object} queue initial queue
  */
 export function setCesSurveyQueue( queue ) {
 	return {
@@ -23,19 +23,19 @@ export function setCesSurveyQueue( queue ) {
 /**
  * Add a new CES track to the state.
  *
- * @param {string} action action name for the survey
- * @param {string} label label for the snackback
- * @param {string} pageNow value of window.pagenow
- * @param {string} adminPage value of window.adminpage
- * @param {string} onsubmit_label label for the snackback onsubmit
- * @param {Object} props object for optional props
+ * @param {string} action        action name for the survey
+ * @param {string} label         label for the snackback
+ * @param {string} pageNow       value of window.pagenow
+ * @param {string} adminPage     value of window.adminpage
+ * @param {string} onsubmitLabel label for the snackback onsubmit
+ * @param {Object} props         object for optional props
  */
 export function addCesSurvey(
 	action,
 	label,
 	pageNow = window.pagenow,
 	adminPage = window.adminpage,
-	onsubmit_label = undefined,
+	onsubmitLabel = undefined,
 	props = {}
 ) {
 	return {
@@ -44,7 +44,7 @@ export function addCesSurvey(
 		label,
 		pageNow,
 		adminPage,
-		onsubmit_label,
+		onsubmit_label: onsubmitLabel,
 		props,
 	};
 }

client/dashboard/components/settings/general/store-address.tsx

@@ -29,7 +29,7 @@ type Option = { key: string; label: string };
  * Check if a given address field is required for the locale.
  *
  * @param {string} fieldName Name of the field to check.
- * @param {Object} locale Locale data.
+ * @param {Object} locale    Locale data.
  * @return {boolean} Field requirement.
  */
 export function isAddressFieldRequired(
@@ -147,7 +147,7 @@ export const normalizeState = ( state: string ): string => {
 /**
  * Get state filter
  *
- * @param {string} isStateAbbreviation Whether to use state abbreviation or not.
+ * @param {string} isStateAbbreviation     Whether to use state abbreviation or not.
  * @param {string} normalizedAutofillState The value of the autofillState field.
  * @return {Function} filter function.
  */
@@ -189,9 +189,9 @@ export const getStateFilter = (
 /**
  * Get the autofill countryState fields and set value from filtered options.
  *
- * @param {Array} options Array of filterable options.
- * @param {string} countryState The value of the countryState field.
- * @param {Function} setValue Set value of the countryState input.
+ * @param {Array}    options      Array of filterable options.
+ * @param {string}   countryState The value of the countryState field.
+ * @param {Function} setValue     Set value of the countryState input.
  * @return {Object} React component.
  */
 export function useGetCountryStateAutofill(
@@ -328,9 +328,9 @@ type StoreAddressProps = {
 /**
  * Store address fields.
  *
- * @param {Object} props Props for input components.
+ * @param {Object}   props               Props for input components.
  * @param {Function} props.getInputProps Get input props.
- * @param {Function} props.setValue Set value of the countryState input.
+ * @param {Function} props.setValue      Set value of the countryState input.
  * @return {Object} -
  */
 export function StoreAddress( {

client/dashboard/default-sections.js

@@ -45,11 +45,11 @@ const DEFAULT_SECTIONS_FILTER = 'woocommerce_dashboard_default_sections';
  * An object defining a dashboard section.
  *
  * @typedef {Object} section
- * @property {string} key Unique identifying string.
- * @property {Node} component React component to render.
- * @property {string} title Title.
- * @property {boolean} isVisible The default visibilty.
- * @property {Node} icon Section icon.
+ * @property {string}         key          Unique identifying string.
+ * @property {Node}           component    React component to render.
+ * @property {string}         title        Title.
+ * @property {boolean}        isVisible    The default visibilty.
+ * @property {Node}           icon         Section icon.
  * @property {Array.<string>} hiddenBlocks Blocks that are hidden by default.
  */