From 9115160c2ff451e0b6475f8648983d0253777dc4 Mon Sep 17 00:00:00 2001
From: Darren Ethier <darren@roughsmootheng.in>
Date: Sun, 20 Sep 2020 19:54:08 -0400
Subject: [PATCH] Enable and fix all jsdoc rule violations
 (https://github.com/woocommerce/woocommerce-blocks/pull/3168)

* add param jsdocs to satisfy jsdoc require-param rule

* Fix jsdoc-checktypes rule violations

* fix jsdoc/require-param-type rule violations

* fix jsdoc/check-param-names violations

* fix jsdoc/require-property-description rule violations

* fix rule violations for jsdoc/valid-types rule

* fix rule violations for jsdoc/require-property rule

* fix jsdoc/no-undefined-types rule violations

* fix jsdoc/check-types rule violations

* fix jsdoc/require-returns-description rule violation

* enable jsdoc/require-returns-type rule

* fix jsdoc/newline-after-description rule violations
---
 plugins/woocommerce-blocks/.eslintrc.js           | 15 +++------------
 .../variable/variation-attributes/index.js        |  4 ++++
 .../add-to-cart/shared/add-to-cart-button.js      | 15 ++++++++++++++-
 .../add-to-cart/shared/quantity-input.js          |  7 +++++++
 .../atomic/blocks/product-elements/price/block.js |  1 -
 .../atomic/blocks/product-elements/title/block.js |  1 -
 .../assets/js/base/components/button/index.js     | 11 ++++++++++-
 .../cart-checkout/address-form/index.js           |  9 +++++++++
 .../cart-checkout/payment-method-icons/index.js   |  5 +++--
 .../payment-method-icons/payment-method-icon.js   |  5 +++++
 .../cart-checkout/product-image/index.js          |  3 +++
 .../product-low-stock-badge/index.js              |  3 +++
 .../cart-checkout/product-summary/index.js        |  5 +++++
 .../cart-checkout/product-variation-data/index.js |  4 ++++
 .../cart-checkout/shipping-location/index.js      |  3 +++
 .../totals/totals-shipping-item/index.js          |  7 +++++++
 .../js/base/components/checkbox-control/index.js  |  8 ++++++++
 .../js/base/components/checkbox-list/index.js     |  9 +++++++++
 .../assets/js/base/components/chip/chip.js        | 11 +++++++++++
 .../js/base/components/chip/removable-chip.js     | 10 ++++++++++
 .../js/base/components/dropdown-selector/index.js | 11 +++++++++++
 .../components/formatted-monetary-amount/index.js |  5 +++++
 .../assets/js/base/components/label/index.js      |  6 ++++++
 .../js/base/components/price-slider/index.js      | 11 +++++++++++
 .../js/base/components/sort-select/index.js       | 11 +++++++++++
 .../assets/js/base/components/summary/utils.js    |  2 +-
 .../assets/js/base/components/title/index.js      |  8 ++++++++
 .../add-to-cart-form/form-state/reducer.js        |  3 +++
 .../cart-checkout/checkout-state/reducer.js       |  5 +++++
 .../cart-checkout/payment-methods/reducer.js      |  5 +++++
 .../base/context/cart-checkout/shipping/index.js  |  3 +++
 .../js/base/context/container-width-context.js    |  5 +++++
 .../js/base/context/shared/event-emit/reducer.js  |  5 +++++
 .../js/base/context/shared/validation/index.js    |  4 ++++
 .../js/base/context/store-notices-context.js      |  7 +++++++
 .../hooks/use-position-relative-to-viewport.js    |  2 ++
 .../assets/js/base/utils/address.js               |  4 ++++
 .../js/base/utils/get-intersection-observer.js    |  6 ++++--
 .../assets/js/base/utils/legacy-events.js         |  4 +++-
 .../get-registered-block-components.js            |  2 --
 .../block-components/register-block-component.js  |  2 --
 .../active-filters/active-attribute-filters.js    |  6 ++++++
 .../assets/js/blocks/active-filters/block.js      |  4 ++++
 .../assets/js/blocks/active-filters/index.js      |  4 +---
 .../assets/js/blocks/attribute-filter/block.js    |  4 ++++
 .../assets/js/blocks/attribute-filter/index.js    |  4 +---
 .../assets/js/blocks/attribute-filter/label.js    |  4 ++++
 .../cart-checkout/cart/checkout-button/index.js   |  3 +++
 .../assets/js/blocks/cart-checkout/cart/edit.js   |  5 +++++
 .../cart-checkout/cart/empty-cart-edit/index.js   |  3 +++
 .../blocks/cart-checkout/cart/full-cart/index.js  |  3 +++
 .../assets/js/blocks/cart-checkout/cart/index.js  |  4 +---
 .../js/blocks/cart-checkout/checkout/block.js     |  3 ++-
 .../checkout/checkout-order-error/index.js        |  9 ++++++---
 .../js/blocks/cart-checkout/checkout/index.js     |  5 ++---
 .../assets/js/blocks/featured-category/block.js   | 12 ++++++++++++
 .../assets/js/blocks/featured-product/block.js    | 13 +++++++++++++
 .../assets/js/blocks/price-filter/block.js        |  2 ++
 .../assets/js/blocks/price-filter/index.js        |  4 +---
 .../assets/js/blocks/product-categories/block.js  |  5 +++++
 .../assets/js/blocks/product-search/block.js      |  9 +++++++++
 .../assets/js/blocks/product-search/edit.js       | 11 +++++++++++
 .../js/blocks/products/all-products/index.js      |  6 +-----
 .../assets/js/blocks/reviews/all-reviews/edit.js  |  4 ++++
 .../assets/js/blocks/reviews/frontend-block.js    |  7 +++++++
 .../js/blocks/reviews/reviews-by-category/edit.js |  5 +++++
 .../js/blocks/reviews/reviews-by-product/edit.js  |  5 +++++
 .../assets/js/blocks/single-product/block.js      |  7 +++++++
 .../js/blocks/single-product/edit/api-error.js    |  5 +++++
 .../single-product/edit/editor-block-controls.js  |  4 ++++
 .../assets/js/blocks/single-product/edit/index.js | 10 ++++++++++
 .../blocks/single-product/edit/layout-editor.js   |  5 +++++
 .../single-product/edit/shared-product-control.js |  4 ++++
 .../js/editor-components/feedback-prompt/index.js |  4 ++++
 .../grid-content-control/index.js                 |  4 ++++
 .../grid-layout-control/index.js                  |  6 ++++++
 .../product-orderby-control/index.js              |  4 ++++
 .../editor-components/products-control/index.js   |  1 +
 .../assets/js/editor-components/utils/index.js    | 10 ++++++----
 .../payment-methods/cod/index.js                  |  7 +++++--
 .../stripe/credit-card/elements.js                | 10 ++++++++++
 .../stripe/stripe-utils/type-defs.js              |  4 ++++
 .../payment-methods/stripe/stripe-utils/utils.js  |  6 +++++-
 .../assets/js/settings/shared/get-setting.js      |  1 -
 .../assets/js/settings/shared/set-setting.js      |  1 -
 .../assets/js/type-defs/contexts.js               | 13 +++++++------
 .../assets/js/type-defs/hooks.js                  |  5 ++++-
 .../type-defs/registered-payment-method-props.js  | 12 ++++++------
 .../rules/feature-flag.js                         |  2 +-
 .../tests/e2e/fixtures/fixture-data.js            |  2 ++
 .../tests/utils/find-label-with-text.js           |  4 +++-
 91 files changed, 448 insertions(+), 74 deletions(-)

diff --git a/plugins/woocommerce-blocks/.eslintrc.js b/plugins/woocommerce-blocks/.eslintrc.js
index c21dc02830a..d6378bb682c 100644
--- a/plugins/woocommerce-blocks/.eslintrc.js
+++ b/plugins/woocommerce-blocks/.eslintrc.js
@@ -14,6 +14,9 @@ module.exports = {
 		context: 'readonly',
 		jestPuppeteer: 'readonly',
 	},
+	settings: {
+		jsdoc: { mode: 'typescript' },
+	},
 	rules: {
 		'woocommerce/feature-flag': 'off',
 		// @todo Remove temporary disabling of various eslint rules.
@@ -38,18 +41,6 @@ module.exports = {
 		// - @worpdress/no-unused-vars-before-return
 		// - testing-library/no-await-sync-query
 		// - @woocommerce/dependency-group
-		'jsdoc/require-param': 'off',
-		'jsdoc/check-tag-names': 'off',
-		'jsdoc/check-param-names': 'off',
-		'jsdoc/require-property-description': 'off',
-		'jsdoc/valid-types': 'off',
-		'jsdoc/require-property': 'off',
-		'jsdoc/no-undefined-types': 'off',
-		'jsdoc/check-types': 'off',
-		'jsdoc/require-returns-description': 'off',
-		'jsdoc/require-param-type': 'off',
-		'jsdoc/require-returns-type': 'off',
-		'jsdoc/newline-after-description': 'off',
 		'@wordpress/i18n-translator-comments': 'off',
 		'@wordpress/valid-sprintf': 'off',
 		'@wordpress/no-unused-vars-before-return': 'off',
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js
index 8509e7e518e..36949f19f5c 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js
@@ -7,6 +7,10 @@ import { getAttributes, getVariationAttributes } from './utils';
 
 /**
  * VariationAttributes component.
+ *
+ * @param {Object} props             Incoming props
+ * @param {Object} props.product     Product
+ * @param {Object} props.dispatchers An object where values are dispatching functions.
  */
 const VariationAttributes = ( { product, dispatchers } ) => {
 	const attributes = getAttributes( product.attributes );
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js
index 6de8094f06e..8d5c3dcf260 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js
@@ -84,7 +84,12 @@ const AddToCartButton = () => {
 };
 
 /**
- * Button for non-purchasable products.
+ * Button component for non-purchasable products.
+ *
+ * @param {Object} props           Incoming props.
+ * @param {string} props.className Css classnames.
+ * @param {string} props.href      Link for button.
+ * @param {string} props.text      Text content for button.
  */
 const LinkComponent = ( { className, href, text } ) => {
 	return (
@@ -96,6 +101,14 @@ const LinkComponent = ( { className, href, text } ) => {
 
 /**
  * Button for purchasable products.
+ *
+ * @param {Object} props                 Incoming props for component
+ * @param {string} props.className       Incoming css class name.
+ * @param {number} props.quantityInCart  Quantity of item in cart.
+ * @param {boolean} props.isProcessing   Whether processing action is occurring.
+ * @param {boolean} props.isDisabled     Whether the button is disabled or not.
+ * @param {boolean} props.isDone         Whether processing is done.
+ * @param {function():any} props.onClick Callback to execute when button is clicked.
  */
 const ButtonComponent = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js
index dfcbf2ebca6..5f275ab98ac 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js
@@ -1,5 +1,12 @@
 /**
  * Quantity Input Component.
+ *
+ * @param {Object}         props          Incoming props for component
+ * @param {boolean}        props.disabled Whether input is disabled or not.
+ * @param {number}         props.min      Minimum value for input.
+ * @param {number}         props.max      Maximum value for input.
+ * @param {number}         props.value    Value for input.
+ * @param {function():any} props.onChange Function to call on input change event.
  */
 const QuantityInput = ( { disabled, min, max, value, onChange } ) => {
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js
index 93286f37e80..dadc6cc2ca2 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js
@@ -27,7 +27,6 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * @param {string} [props.customColor]            Normal Price custom text color.
  * @param {string} [props.saleColor]              Original Price text color.
  * @param {string} [props.customSaleColor]        Original Price custom text color.
- * @param {Object} [props.product]                Optional product object. Product from
  * context will be used if this is not provided.
  * @return {*} The component.
  */
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.js
index a85b4151457..7de86109bb7 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.js
@@ -30,7 +30,6 @@ import './style.scss';
  * @param {string}  [props.customColor]    Custom title color value.
  * @param {string}  [props.fontSize]       Title font size name.
  * @param {number } [props.customFontSize] Custom font size value.
- * @param {Object}  [props.product]        Optional product object. Product from context
  * will be used if this is not provided.
  * @return {*} The component.
  */
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/button/index.js b/plugins/woocommerce-blocks/assets/js/base/components/button/index.js
index 484ed304a93..efffbb8db5e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/button/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/button/index.js
@@ -10,8 +10,17 @@ import classNames from 'classnames';
  */
 import './style.scss';
 
+/** @typedef {import('react')} React */
+
 /**
- * Component that visually renders a button but semantically might be `<button>` or `<a>` depending on the props.
+ * Component that visually renders a button but semantically might be `<button>` or `<a>` depending
+ * on the props.
+ *
+ * @param {Object}              props             Incoming props for the component.
+ * @param {string}              props.className   CSS classname used.
+ * @param {boolean}             props.showSpinner Whether to show spinner or not.
+ * @param {React.ReactChildren} props.children    Child components passed in.
+ * @param {Object}              props.props       Rest of incoming props.
  */
 const Button = ( { className, showSpinner = false, children, ...props } ) => {
 	const buttonClassName = classNames(
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/index.js
index 52fc82c3ba4..095466f1f7f 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/index.js
@@ -52,6 +52,15 @@ const validateShippingCountry = (
 
 /**
  * Checkout address form.
+ *
+ * @param {Object} props Incoming props for component.
+ * @param {string} props.id Id for component.
+ * @param {Array}  props.fields Array of fields in form.
+ * @param {Object} props.fieldConfig Field configuration for fields in form.
+ * @param {string} props.instanceId Unique id for form.
+ * @param {function(any):any} props.onChange Function to all for an form onChange event.
+ * @param {string} props.type Type of form.
+ * @param {Object} props.values Values for fields.
  */
 const AddressForm = ( {
 	id,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.js
index c1406b35305..4c70f6b92cc 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.js
@@ -15,8 +15,9 @@ import './style.scss';
  * For a given list of icons, render each as a list item, using common icons
  * where available.
  *
- * @param {Object} props Component props.
- * @param {Array} props.icons  Array of icons object configs or ids as strings.
+ * @param {Object} props       Component props.
+ * @param {Array}  props.icons Array of icons object configs or ids as strings.
+ * @param {string} props.align How to align the icon.
  */
 export const PaymentMethodIcons = ( { icons = [], align = 'center' } ) => {
 	const iconConfigs = normalizeIconConfig( icons );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/payment-method-icon.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/payment-method-icon.js
index 159d5aa54b4..7fa431d30f6 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/payment-method-icon.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/payment-method-icon.js
@@ -9,6 +9,11 @@ const getIconClassName = ( id ) => {
 
 /**
  * Return an element for an icon.
+ *
+ * @param {Object}      props     Incoming props for component.
+ * @param {string}      props.id  Id for component.
+ * @param {string|null} props.src Optional src value for icon.
+ * @param {string}      props.alt Optional alt value for icon.
  */
 const PaymentMethodIcon = ( { id, src = null, alt = '' } ) => {
 	if ( ! src ) {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js
index e7a99d4c749..9fb7cabf3dc 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js
@@ -7,6 +7,9 @@ import PropTypes from 'prop-types';
 
 /**
  * Formats and returns an image element.
+ *
+ * @param {Object} props       Incoming props for the component.
+ * @param {Object} props.image Image properties.
  */
 const ProductImage = ( { image = {} } ) => {
 	const imageProps = {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/index.js
index a4a7c4f0e15..fe9eb1ec148 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/index.js
@@ -11,6 +11,9 @@ import ProductBadge from '../product-badge';
 
 /**
  * Returns a low stock badge.
+ *
+ * @param {Object}  props                   Incoming props for the component.
+ * @param {boolean} props.lowStockRemaining Whether or not there is low stock remaining.
  */
 const ProductLowStockBadge = ( { lowStockRemaining } ) => {
 	if ( ! lowStockRemaining ) {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-summary/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-summary/index.js
index 8ff0ff83f75..5739081b703 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-summary/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-summary/index.js
@@ -7,6 +7,11 @@ import { getSetting } from '@woocommerce/settings';
 
 /**
  * Returns an element containing a summary of the product.
+ *
+ * @param {Object} props                  Incoming props for the component.
+ * @param {string} props.className        CSS class name used.
+ * @param {string} props.shortDescription Short description for the product.
+ * @param {string} props.fullDescription  Full description for the product.
  */
 const ProductSummary = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-variation-data/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-variation-data/index.js
index 123493e8997..baddad23f18 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-variation-data/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-variation-data/index.js
@@ -7,6 +7,10 @@ import classNames from 'classnames';
 
 /**
  * Returns a formatted element containing variation details.
+ *
+ * @param {Object}        props           Incoming props for the component.
+ * @param {string}        props.className CSS class used.
+ * @param {Array<Object>} props.variation Variations in use.
  */
 const ProductVariationData = ( { className, variation = [] } ) => {
 	if ( ! variation || variation.length === 0 ) {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-location/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-location/index.js
index 50ab5ebfeca..58f04af5b5b 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-location/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-location/index.js
@@ -11,6 +11,9 @@ import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Shows a formatted shipping location.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.address Incoming address information.
  */
 const ShippingLocation = ( { address } ) => {
 	// we bail early if we don't have an address.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/index.js
index 51555267628..c3ea61511ee 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/index.js
@@ -21,6 +21,13 @@ import './style.scss';
 
 /**
  * Renders the shipping totals row, rates, and calculator if enabled.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.currency Currency information.
+ * @param {Object} props.values Values in use.
+ * @param {boolean} props.isCheckout Whether in checkout or not.
+ * @param {boolean} props.showCalculator Whether to show shipping calculator or not.
+ * @param {boolean} props.showRatesWithoutAddress Whether to show rates without address or not.
  */
 const TotalsShippingItem = ( {
 	currency,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
index b7d3eee9b70..91fb25b9267 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
@@ -12,6 +12,14 @@ import './style.scss';
 
 /**
  * Component used to show a checkbox control with styles.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.className CSS class used.
+ * @param {string} props.label Label for component.
+ * @param {string} props.id Id for component.
+ * @param {string} props.instanceId Unique id for instance of component.
+ * @param {function():any} props.onChange Function called when input changes.
+ * @param {Object} props.rest Rest of properties spread.
  */
 const CheckboxControl = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-list/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-list/index.js
index 23b1d545378..3037d205375 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-list/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-list/index.js
@@ -13,6 +13,15 @@ import './style.scss';
 
 /**
  * Component used to show a list of checkboxes in a group.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.className CSS class used.
+ * @param {function():any} props.onChange Function called when inputs change.
+ * @param {Array} props.options Options for list.
+ * @param {Array} props.checked Which items are checked.
+ * @param {boolean} props.isLoading If loading or not.
+ * @param {boolean} props.isDisabled If inputs are disabled or not.
+ * @param {number} props.limit Whether to limit the number of inputs showing.
  */
 const CheckboxList = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/chip.js b/plugins/woocommerce-blocks/assets/js/base/components/chip/chip.js
index 229cf27fbdc..d7c87e31db9 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/chip/chip.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/chip.js
@@ -9,11 +9,22 @@ import classNames from 'classnames';
  */
 import './style.scss';
 
+/** @typedef {import('react')} React */
+
 /**
  * Component used to render a "chip" -- a list item containing some text.
  *
  * Each chip defaults to a list element but this can be customized by providing
  * a wrapperElement.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.text Text for chip content.
+ * @param {string} props.screenReaderText Screenreader text for the content.
+ * @param {string} props.element The element type for the chip.
+ * @param {string} props.className CSS class used.
+ * @param {string} props.radius Radius size.
+ * @param {React.ReactChildren|null} props.children React children.
+ * @param {Object} props.props Rest of props passed through to component.
  */
 const Chip = ( {
 	text,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js b/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
index ce1f9766445..0adad7cc07f 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
@@ -14,6 +14,16 @@ import { Chip } from './index.js';
 /**
  * Component used to render a "chip" -- an item containing some text with
  * an X button to remove/dismiss each chip.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.ariaLabel Aria label content.
+ * @param {string} props.className CSS class used.
+ * @param {boolean} props.disabled Whether action is disabled or not.
+ * @param {function():any} props.onRemove Function to call when remove event is fired.
+ * @param {boolean} props.removeOnAnyClick Whether to expand click area for remove event.
+ * @param {string} props.text The text for the chip.
+ * @param {string} props.screenReaderText The screen reader text for the chip.
+ * @param {Object} props.props Rest of props passed into component.
  */
 const RemovableChip = ( {
 	ariaLabel = '',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/index.js b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/index.js
index f3973a3efa4..175a41afd95 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/index.js
@@ -19,6 +19,17 @@ import './style.scss';
 
 /**
  * Component used to show an input box with a dropdown with suggestions.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.attributeLabel Label for the attributes.
+ * @param {string} props.className CSS class used.
+ * @param {Array} props.checked Which items are checked.
+ * @param {string} props.inputLabel Label used for the input.
+ * @param {boolean} props.isDisabled Whether the input is disabled or not.
+ * @param {boolean} props.isLoading Whether the input is loading.
+ * @param {boolean} props.multiple Whether multi-select is allowed.
+ * @param {function():any} props.onChange Function to be called when onChange event fires.
+ * @param {Array} props.options The option values to show in the select.
  */
 const DropdownSelector = ( {
 	attributeLabel = '',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/formatted-monetary-amount/index.js b/plugins/woocommerce-blocks/assets/js/base/components/formatted-monetary-amount/index.js
index ba842dc71e3..20c5ab63121 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/formatted-monetary-amount/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/formatted-monetary-amount/index.js
@@ -33,6 +33,11 @@ const currencyToNumberFormat = ( currency ) => {
  * Takes a price and returns a formatted price using the NumberFormat component.
  *
  * @param {Object} props Component props.
+ * @param {string} props.className CSS class used.
+ * @param {number} props.value Value of money amount.
+ * @param {Object} props.currency Currency configuration object.
+ * @param {function():any} props.onValueChange Function to call when value changes.
+ * @param {Object} props.props Rest of props passed into component.
  */
 const FormattedMonetaryAmount = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/label/index.js b/plugins/woocommerce-blocks/assets/js/base/components/label/index.js
index a81b1d92551..adbd1201980 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/label/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/label/index.js
@@ -9,6 +9,12 @@ import classNames from 'classnames';
  * Component used to render an accessible text given a label and/or a
  * screenReaderLabel. The wrapper element and wrapper props can also be
  * specified via props.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.label Label content.
+ * @param {string} props.screenReaderLabel Content for screen readers.
+ * @param {string} props.wrapperElement What element is used to wrap the label.
+ * @param {Object} props.wrapperProps Props passed into wrapper element.
  */
 const Label = ( {
 	label,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js
index 8bddee3bfa9..1390eccc090 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js
@@ -25,6 +25,17 @@ import FilterSubmitButton from '../filter-submit-button';
  * Price slider component.
  *
  * @param {Object} props Component props.
+ * @param {number} props.minPrice Minimum price for slider.
+ * @param {number} props.maxPrice Maximum price for slider.
+ * @param {number} props.minConstraint Minimum constraint.
+ * @param {number} props.maxConstraint Maximum constraint.
+ * @param {function(any):any} props.onChange Function to call on the change event.
+ * @param {number} props.step What step values the slider uses.
+ * @param {Object} props.currency Currency configuration object.
+ * @param {boolean} props.showInputFields Whether to show input fields for the values or not.
+ * @param {boolean} props.showFilterButton Whether to show the filter button for the slider.
+ * @param {boolean} props.isLoading Whether values are loading or not.
+ * @param {function():any} props.onSubmit Function to call when submit event fires.
  */
 const PriceSlider = ( {
 	minPrice,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sort-select/index.js b/plugins/woocommerce-blocks/assets/js/base/components/sort-select/index.js
index c5740bf2265..8c1f8cf74a7 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sort-select/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sort-select/index.js
@@ -14,6 +14,17 @@ import './style.scss';
 /**
  * Component used for 'Order by' selectors, which renders a label
  * and a <select> with the options provided in the props.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.className CSS class used.
+ * @param {string} props.instanceId Unique id for component instance.
+ * @param {string} props.defaultValue Default value for the select.
+ * @param {string} props.label Label for the select.
+ * @param {function():any} props.onChange Function to call on the change event.
+ * @param {Array} props.options Option values for the select.
+ * @param {string} props.screenReaderLabel Screen reader label.
+ * @param {boolean} props.readOnly Whether the select is read only or not.
+ * @param {string} props.value The selected value.
  */
 const SortSelect = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.js b/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.js
index 0c6714c8ba5..eaffbae3d58 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.js
@@ -6,7 +6,7 @@ import { autop } from '@wordpress/autop';
 
 /**
  * Generates the summary text from a string of text.
- *a
+ *
  * @param {string} source Source text.
  * @param {number} maxLength Limit number of countType returned if text has multiple paragraphs.
  * @param {string} countType What is being counted. One of words, characters_excluding_spaces, or characters_including_spaces.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/title/index.js b/plugins/woocommerce-blocks/assets/js/base/components/title/index.js
index 631d109b1ea..df5fe06d4df 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/title/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/title/index.js
@@ -9,8 +9,16 @@ import PropTypes from 'prop-types';
  */
 import './style.scss';
 
+/** @typedef {import('react')} React */
+
 /**
  * Component that renders a block title.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {React.ReactChildren} props.children Children elements this component wraps.
+ * @param {string} props.className CSS class used.
+ * @param {string} props.headingLevel Heading level for title.
+ * @param {Object} props.props Rest of props passed through to component.
  */
 const Title = ( { children, className, headingLevel, ...props } ) => {
 	const buttonClassName = classNames(
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/add-to-cart-form/form-state/reducer.js b/plugins/woocommerce-blocks/assets/js/base/context/add-to-cart-form/form-state/reducer.js
index e8e6b442600..c4006355472 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/add-to-cart-form/form-state/reducer.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/add-to-cart-form/form-state/reducer.js
@@ -31,6 +31,9 @@ const {
  *
  * @param {Object} state  Current state.
  * @param {Object} action Incoming action object.
+ * @param {number} action.quantity Incoming quantity.
+ * @param {string} action.type Type of action.
+ * @param {Object} action.data Incoming payload for action.
  */
 export const reducer = ( state = DEFAULT_STATE, { quantity, type, data } ) => {
 	let newState;
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/checkout-state/reducer.js b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/checkout-state/reducer.js
index 0841bc0003f..b35131757ed 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/checkout-state/reducer.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/checkout-state/reducer.js
@@ -64,6 +64,11 @@ export const prepareResponseData = ( data ) => {
  *
  * @param {Object} state  Current state.
  * @param {Object} action Incoming action object.
+ * @param {string} action.url URL passed in.
+ * @param {string} action.type Type of action.
+ * @param {string} action.orderId Order ID.
+ * @param {Array} action.orderNotes Order notes.
+ * @param {Object} action.data Other action payload.
  */
 export const reducer = (
 	state = DEFAULT_STATE,
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/reducer.js b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/reducer.js
index 6d500121cbc..cf20d89c332 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/reducer.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/reducer.js
@@ -26,6 +26,11 @@ const hasSavedPaymentToken = ( paymentMethodData ) => {
  *
  * @param {Object} state  Current state.
  * @param {Object} action Current action.
+ * @param {string} action.type Action type.
+ * @param {Object} action.paymentMethodData Payment method data payload.
+ * @param {boolean} action.shouldSavePaymentMethod Should save payment method flag.
+ * @param {string} action.errorMessage Error message to store in state.
+ * @param {Object} action.paymentMethods Registered payment methods.
  */
 const reducer = (
 	state = DEFAULT_PAYMENT_DATA,
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/shipping/index.js b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/shipping/index.js
index e149d617a28..b25b4eb2c70 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/shipping/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/shipping/index.js
@@ -33,6 +33,7 @@ import {
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').ShippingDataContext} ShippingDataContext
+ * @typedef {import('react')} React
  */
 
 const { NONE, INVALID_ADDRESS, UNKNOWN } = ERROR_TYPES;
@@ -42,6 +43,7 @@ const { NONE, INVALID_ADDRESS, UNKNOWN } = ERROR_TYPES;
  *
  * @param {string} state  The current status.
  * @param {Object} action The incoming action.
+ * @param {string} action.type The type of action.
  */
 const errorStatusReducer = ( state, { type } ) => {
 	if ( Object.values( ERROR_TYPES ).includes( type ) ) {
@@ -77,6 +79,7 @@ const hasInvalidShippingAddress = ( errors ) => {
  * checkout/cart.
  *
  * @param {Object} props Incoming props for provider
+ * @param {React.ReactElement} props.children
  */
 export const ShippingDataProvider = ( { children } ) => {
 	const { dispatchActions } = useCheckoutContext();
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/container-width-context.js b/plugins/woocommerce-blocks/assets/js/base/context/container-width-context.js
index f13244436cd..6e45345200f 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/container-width-context.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/container-width-context.js
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').ContainerWidthContext} ContainerWidthContext
+ * @typedef {import('react')} React
  */
 
 const ContainerWidthContext = createContext( {
@@ -29,6 +30,10 @@ export const useContainerWidthContext = () => {
 /**
  * Provides an interface to useContainerQueries so children can see what size is being used by the
  * container.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {React.ReactChildren} props.children React elements wrapped by the component.
+ * @param {string} props.className CSS class in use.
  */
 export const ContainerWidthContextProvider = ( {
 	children,
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/shared/event-emit/reducer.js b/plugins/woocommerce-blocks/assets/js/base/context/shared/event-emit/reducer.js
index b6661a8d80c..5cd98416b00 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/shared/event-emit/reducer.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/shared/event-emit/reducer.js
@@ -32,6 +32,11 @@ export const actions = {
  *
  * @param {Object} state  Current state.
  * @param {Object} action Incoming action object
+ * @param {string} action.type The type of action.
+ * @param {string} action.eventType What type of event is emitted.
+ * @param {string} action.id The id for the event.
+ * @param {function(any):any} action.callback The registered callback for the event.
+ * @param {number} action.priority The priority for the event.
  */
 export const reducer = (
 	state = {},
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/shared/validation/index.js b/plugins/woocommerce-blocks/assets/js/base/context/shared/validation/index.js
index 118577481ef..cd968a3a856 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/shared/validation/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/shared/validation/index.js
@@ -12,6 +12,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * @typedef { import('@woocommerce/type-defs/contexts').ValidationContext } ValidationContext
+ * @typedef {import('react')} React
  */
 
 const ValidationContext = createContext( {
@@ -38,6 +39,9 @@ export const useValidationContext = () => {
  *
  * Any children of this context will be exposed to validation state and helpers
  * for tracking validation.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {React.ReactChildren} props.children What react elements are wrapped by this component.
  */
 export const ValidationContextProvider = ( { children } ) => {
 	const [ validationErrors, updateValidationErrors ] = useState( {} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js b/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js
index f960c28fd46..01f43e4b4e6 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js
+++ b/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js
@@ -16,6 +16,7 @@ import {
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').NoticeContext} NoticeContext
+ * @typedef {import('react')} React
  */
 
 const StoreNoticesContext = createContext( {
@@ -45,6 +46,12 @@ export const useStoreNoticesContext = () => {
  *  - Warning
  *  - Info
  *  - Success
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {React.ReactChildren} props.children The Elements wrapped by this component.
+ * @param {string} props.className CSS class used.
+ * @param {boolean} props.createNoticeContainer Whether to create a notice container or not.
+ * @param {string} props.context The notice context for notices being rendered.
  */
 export const StoreNoticesProvider = ( {
 	children,
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js b/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js
index 6dd61e5b3bf..31444b50ad5 100644
--- a/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js
@@ -4,6 +4,8 @@
 import { useRef, useLayoutEffect, useState } from '@wordpress/element';
 import { getIntersectionObserver } from '@woocommerce/base-utils';
 
+/** @typedef {import('react')} React */
+
 /** @type {React.CSSProperties} */
 const style = {
 	bottom: 0,
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/address.js b/plugins/woocommerce-blocks/assets/js/base/utils/address.js
index 3cb6109c22c..b4e6dc9aca4 100644
--- a/plugins/woocommerce-blocks/assets/js/base/utils/address.js
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/address.js
@@ -3,6 +3,10 @@
  * shipping, so we can track when one of them change to update rates.
  *
  * @param {Object} address          An object containing all address information
+ * @param {string} address.country  The country.
+ * @param {string} address.state    The state.
+ * @param {string} address.city     The city.
+ * @param {string} address.postcode The postal code.
  *
  * @return {Object} pluckedAddress  An object containing shipping address that are needed to fetch an address.
  */
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-intersection-observer.js b/plugins/woocommerce-blocks/assets/js/base/utils/get-intersection-observer.js
index 4796a782ce2..47025bff609 100644
--- a/plugins/woocommerce-blocks/assets/js/base/utils/get-intersection-observer.js
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/get-intersection-observer.js
@@ -1,3 +1,5 @@
+/** @typedef {import('window').IntersectionObserverCallback} IntersectionObserverCallback */
+
 /**
  * Util that returns an IntersectionObserver if supported by the browser. If
  * it's not supported, it returns a shim object with the methods to prevent JS
@@ -6,8 +8,8 @@
  *
  * @param {IntersectionObserverCallback} callback Callback function for the
  *                                                Intersection Observer.
- * @param {object}                       options  Intersection Observer options.
- * @return {object|IntersectionObserver} Intersection Observer if available,
+ * @param {Object}                       options  Intersection Observer options.
+ * @return {Object|IntersectionObserver} Intersection Observer if available,
  *                                       otherwise a shim object.
  *
  * @todo Remove IntersectionObserver shim when we drop IE11 support.
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/legacy-events.js b/plugins/woocommerce-blocks/assets/js/base/utils/legacy-events.js
index 859559dd78d..2814f6158cd 100644
--- a/plugins/woocommerce-blocks/assets/js/base/utils/legacy-events.js
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/legacy-events.js
@@ -1,5 +1,7 @@
 const Event = window.Event || null;
 
+/** @typedef {import('window').HTMLNode} HTMLNode */
+
 /**
  * Wrapper function to dispatch an event so it's compatible with IE11.
  *
@@ -48,7 +50,7 @@ export const triggerFragmentRefresh = () => {
  * @param {boolean} bubbles         Whether the event bubbles.
  * @param {boolean} cancelable      Whether the event is cancelable.
  *
- * @returns {Function} Function to remove the jQuery event handler. Ideally it
+ * @return {Function} Function to remove the jQuery event handler. Ideally it
  * should be used when the component is unmounted.
  */
 export const translateJQueryEventToNative = (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/get-registered-block-components.js b/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/get-registered-block-components.js
index e7458a01c90..a5fa2cdcb05 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/get-registered-block-components.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/get-registered-block-components.js
@@ -16,7 +16,6 @@ import { registeredBlockComponents } from './registered-block-components-init';
  *
  * This gets all registered Block Components so we know which Blocks map to which React Components.
  *
- * @export
  * @param {string} context Current context (a named parent Block). If Block Components were only
  *                         registered under a certain context, those Components will be returned,
  *                         as well as any Components registered under all contexts.
@@ -38,7 +37,6 @@ export function getRegisteredBlockComponents( context ) {
 /**
  * Alias of getRegisteredBlockComponents kept for backwards compatibility.
  *
- * @export
  * @param {string} main Name of the parent block to retrieve children of.
  * @return {Object} List of registered inner blocks.
  */
diff --git a/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/register-block-component.js b/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/register-block-component.js
index 7e9d3e65bf0..6761ad9db4e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/register-block-component.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks-registry/block-components/register-block-component.js
@@ -17,7 +17,6 @@ import { registeredBlockComponents } from './registered-block-components-init';
  * Registering a Block Component allows you to define which React Component should be used in place
  * of a registered Block. The Component, when rendered, will be passed all Block Attributes.
  *
- * @export
  * @param {Object}   options           Options to use when registering the block.
  * @param {Function} options.component React component that will be rendered, or the return value from  React.lazy if
  *                                     dynamically imported.
@@ -87,7 +86,6 @@ const assertOption = ( options, optionName, expectedType ) => {
 /**
  * Alias of registerBlockComponent kept for backwards compatibility.
  *
- * @export
  * @param {Object}   options           Options to use when registering the block.
  * @param {string}   options.main      Name of the parent block.
  * @param {string}   options.blockName Name of the child block being registered.
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/active-attribute-filters.js b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/active-attribute-filters.js
index fbf0d5bd871..052f23e0f5b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/active-attribute-filters.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/active-attribute-filters.js
@@ -13,6 +13,12 @@ import { removeAttributeFilterBySlug } from '../../utils/attributes-query';
 
 /**
  * Component that renders active attribute (terms) filters.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributeObject The attribute object.
+ * @param {Array} props.slugs The slugs for attributes.
+ * @param {string} props.operator The operator for the filter.
+ * @param {string} props.displayStyle The style used for displaying the filters.
  */
 const ActiveAttributeFilters = ( {
 	attributeObject = {},
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
index e283f2d12b9..7f8bc19b07f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
@@ -18,6 +18,10 @@ import ActiveAttributeFilters from './active-attribute-filters';
 
 /**
  * Component displaying active filters.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming attributes for the block.
+ * @param {boolean} props.isEditor Whether or not in the editor context.
  */
 const ActiveFiltersBlock = ( {
 	attributes: blockAttributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js
index 22b790e6ee7..55667fd2dff 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js
@@ -45,9 +45,7 @@ registerBlockType( 'woocommerce/active-filters', {
 		},
 	},
 	edit,
-	/**
-	 * Save the props to post content.
-	 */
+	// Save the props to post content.
 	save( { attributes } ) {
 		const { className, displayStyle, heading, headingLevel } = attributes;
 		const data = {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
index 03b42df4db2..d1363f32111 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
@@ -34,6 +34,10 @@ import './style.scss';
 
 /**
  * Component displaying an attribute filter.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {boolean} props.isEditor
  */
 const AttributeFilterBlock = ( {
 	attributes: blockAttributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js
index 5d3b51cd453..de47928e460 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js
@@ -72,9 +72,7 @@ registerBlockType( 'woocommerce/attribute-filter', {
 		},
 	},
 	edit,
-	/**
-	 * Save the props to post content.
-	 */
+	// Save the props to post content.
 	save( { attributes } ) {
 		const {
 			className,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/label.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/label.js
index 83679f7c4e5..3c20dff4886 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/label.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/label.js
@@ -7,6 +7,10 @@ import Label from '@woocommerce/base-components/label';
 
 /**
  * The label for an attribute term filter.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.name The name for the label.
+ * @param {number} props.count The count of products this attribute is attached to.
  */
 const AttributeFilterLabel = ( { name, count } ) => {
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/index.js
index dab341a39fa..54b121498fb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/index.js
@@ -28,6 +28,9 @@ const getIconsFromPaymentMethods = ( paymentMethods ) => {
 
 /**
  * Checkout button rendered in the full cart page.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.link What the button is linked to.
  */
 const CheckoutButton = ( { link } ) => {
 	const { isCalculating } = useCheckoutContext();
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
index 0356a0542a9..01bd31a29cb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
@@ -161,6 +161,11 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
  *       if the user saves the page without having triggered the 'Empty Cart'
  *       view, inner blocks would not be saved and they wouldn't be visible
  *       in the frontend.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.className CSS class used.
+ * @param {Object} props.attributes Attributes available.
+ * @param {function(any):any} props.setAttributes Setter for attributes.
  */
 const CartEditor = ( { className, attributes, setAttributes } ) => {
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js
index 6ad45822832..c86175d986d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js
@@ -14,6 +14,9 @@ import './style.scss';
 
 /**
  * Component to handle edit mode for the Cart block when cart is empty.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {boolean} props.hidden Whether this component is hidden or not.
  */
 const EmptyCartEdit = ( { hidden = false } ) => {
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js
index f75c0a3dea2..6f9dcbad78a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js
@@ -46,6 +46,9 @@ import './style.scss';
 
 /**
  * Component that renders the Cart block when user has something in cart aka "full".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming attributes for block.
  */
 const Cart = ( { attributes } ) => {
 	const {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js
index 24067cc041f..d8f878eaa72 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js
@@ -38,9 +38,7 @@ const settings = {
 	attributes: blockAttributes,
 	edit,
 
-	/**
-	 * Save the props to post content.
-	 */
+	// Save the props to post content.
 	save( { attributes } ) {
 		return (
 			<div className={ classnames( 'is-loading', attributes.className ) }>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
index 342f8708afa..ef4437705f5 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
@@ -53,7 +53,8 @@ const Block = ( props ) => {
  * Main Checkout Component.
  *
  * @param {Object} props Component props.
- * @return {*} The component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.scrollToTop Function for scrolling to top.
  */
 const Checkout = ( { attributes, scrollToTop } ) => {
 	const { isEditor } = useEditorContext();
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/checkout-order-error/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/checkout-order-error/index.js
index 9b17a8d138e..d3dc1cc2d3f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/checkout-order-error/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/checkout-order-error/index.js
@@ -63,7 +63,8 @@ const CheckoutOrderError = () => {
 /**
  * Get the error message to display.
  *
- * @param {Object} errorData Object containing code and message.
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.errorData Object containing code and message.
  */
 const ErrorTitle = ( { errorData } ) => {
 	let heading = __( 'Checkout error', 'woo-gutenberg-products-block' );
@@ -83,7 +84,8 @@ const ErrorTitle = ( { errorData } ) => {
 /**
  * Get the error message to display.
  *
- * @param {Object} errorData Object containing code and message.
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.errorData Object containing code and message.
  */
 const ErrorMessage = ( { errorData } ) => {
 	let message = errorData.message;
@@ -104,7 +106,8 @@ const ErrorMessage = ( { errorData } ) => {
 /**
  * Get the CTA button to display.
  *
- * @param {Object} errorData Object containing code and message.
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.errorData Object containing code and message.
  */
 const ErrorButton = ( { errorData } ) => {
 	let buttonText = __( 'Retry', 'woo-gutenberg-products-block' );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/index.js
index 376efcae063..a397b8b8220 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/index.js
@@ -37,9 +37,8 @@ const settings = {
 	},
 	attributes: blockAttributes,
 	edit,
-	/**
-	 * Save the props to post content.
-	 */
+
+	//Save the props to post content.
 	save( { attributes } ) {
 		return (
 			<div
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js
index 0df59117900..a4866bf0b7b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js
@@ -48,6 +48,18 @@ import { withCategory } from '../../hocs';
 
 /**
  * Component to handle edit mode of "Featured Category".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {boolean} props.isSelected Whether block is selected or not.
+ * @param {function(any):any} props.setAttributes Function for setting new attributes.
+ * @param {string} props.error Error message
+ * @param {function(any):any} props.getCategory Function for getting category details.
+ * @param {boolean} props.isLoading Whether loading or not.
+ * @param {Object} props.category The product category object.
+ * @param {Object} props.overlayColor Overlay color object for content.
+ * @param {function(any):any} props.setOverlayColor Setter for overlay color.
+ * @param {function(any):any} props.debouncedSpeak Function for delayed speak.
  */
 const FeaturedCategory = ( {
 	attributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js
index 12445065d64..62e49e19e73 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js
@@ -49,6 +49,19 @@ import {
 
 /**
  * Component to handle edit mode of "Featured Product".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.debouncedSpeak Function for delayed speak.
+ * @param {string} props.error Error message.
+ * @param {function(any):any} props.getProduct Function for getting the product.
+ * @param {boolean} props.isLoading Whether product is loading or not.
+ * @param {boolean} props.isSelected Whether block is selected or not.
+ * @param {Object} props.overlayColor Overlay color object.
+ * @param {Object} props.product Product object.
+ * @param {function(any):any} props.setAttributes Setter for attributes.
+ * @param {function(any):any} props.setOverlayColor Setter for overlay color.
+ * @param {function(any):any} props.triggerUrlUpdate Function for triggering a url update for product.
  */
 const FeaturedProduct = ( {
 	attributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
index b6c9c563e13..32897f4737a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
@@ -21,6 +21,8 @@ import usePriceConstraints from './use-price-constraints.js';
  * Component displaying a price filter.
  *
  * @param {Object} props Component props.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {boolean} props.isEditor Whether in editor context or not.
  */
 const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 	const [ minPriceQuery, setMinPriceQuery ] = useQueryStateByKey(
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js
index 1e0495a5401..cbd106fbe9c 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js
@@ -49,9 +49,7 @@ registerBlockType( 'woocommerce/price-filter', {
 
 	edit,
 
-	/**
-	 * Save the props to post content.
-	 */
+	// Save the props to post content.
 	save( { attributes } ) {
 		const {
 			className,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
index 712674ea8b4..a28d5cad7fe 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
@@ -28,6 +28,11 @@ const EmptyPlaceholder = () => (
 
 /**
  * Component displaying the categories as dropdown or list.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
+ * @param {string} props.name Name for block.
  */
 const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 	const getInspectorControls = () => {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.js
index ef24d3ad988..f239ae554b0 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.js
@@ -14,6 +14,15 @@ import './style.scss';
 
 /**
  * Component displaying a product search form.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {string} props.attributes.label
+ * @param {string} props.attributes.placeholder
+ * @param {string} props.attributes.formId
+ * @param {string} props.attributes.className
+ * @param {boolean} props.attributes.hasLabel
+ * @param {string} props.attributes.align
  */
 const ProductSearchBlock = ( {
 	attributes: { label, placeholder, formId, className, hasLabel, align },
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.js
index 0c753646e2c..91e4a205d1a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.js
@@ -16,6 +16,17 @@ import './style.scss';
 
 /**
  * Component displaying a product search form.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {string} props.attributes.label
+ * @param {string} props.attributes.placeholder
+ * @param {string} props.attributes.formId
+ * @param {string} props.attributes.className
+ * @param {boolean} props.attributes.hasLabel
+ * @param {string} props.attributes.align
+ * @param {string} props.instanceId
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
  */
 const Edit = ( {
 	attributes: { label, placeholder, formId, className, hasLabel, align },
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js
index 317e157d5b8..d7fc3a84173 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js
@@ -46,11 +46,7 @@ const blockSettings = {
 	edit( props ) {
 		return <Editor { ...props } />;
 	},
-	/**
-	 * Save the props to post content.
-	 *
-	 * @param {Object} attributes Attributes to save.
-	 */
+	// Save the props to post content.
 	save( { attributes } ) {
 		const dataAttributes = {};
 		Object.keys( attributes )
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/edit.js
index 91db74a0483..a973babccd3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/edit.js
@@ -20,6 +20,10 @@ import {
 
 /**
  * Component to handle edit mode of "All Reviews".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
  */
 const AllReviewsEditor = ( { attributes, setAttributes } ) => {
 	const getInspectorControls = () => {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/frontend-block.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/frontend-block.js
index de13663eb49..7bdbf75b9e9 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/frontend-block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/frontend-block.js
@@ -14,6 +14,13 @@ import withReviews from '@woocommerce/base-hocs/with-reviews';
 
 /**
  * Block rendered in the frontend.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.onAppendReviews Function called when appending review.
+ * @param {function(any):any} props.onChangeOrderby
+ * @param {Array} props.reviews
+ * @param {number} props.totalReviews
  */
 const FrontendBlock = ( {
 	attributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js
index 41e1cffcad3..27b4f3d8b6e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js
@@ -29,6 +29,11 @@ import {
 
 /**
  * Component to handle edit mode of "Reviews by Category".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.debouncedSpeak
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
  */
 const ReviewsByCategoryEditor = ( {
 	attributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js
index 7d89ac8b33e..bc67af1c63a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js
@@ -28,6 +28,11 @@ import {
 
 /**
  * Component to handle edit mode of "Reviews by Product".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.debouncedSpeak
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
  */
 const ReviewsByProductEditor = ( {
 	attributes,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/block.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/block.js
index 0fff3ded2dd..8cd212b0265 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/block.js
@@ -13,8 +13,15 @@ import { StoreNoticesProvider } from '@woocommerce/base-context';
  */
 import { BLOCK_NAME } from './constants';
 
+/** @typedef {import('react')} React */
+
 /**
  * The Single Product Block.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {boolean} props.isLoading
+ * @param {Object} props.product
+ * @param {React.ReactChildren} props.children
  */
 const Block = ( { isLoading, product, children } ) => {
 	const className = 'wc-block-single-product wc-block-layout';
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/api-error.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/api-error.js
index 49aeb787e1a..981426e7caf 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/api-error.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/api-error.js
@@ -5,6 +5,11 @@ import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
 
 /**
  * Shown when there is an API error getting a product.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.error
+ * @param {boolean} props.isLoading
+ * @param {function(any):any} props.getProduct
  */
 const ApiError = ( { error, isLoading, getProduct } ) => (
 	<ErrorPlaceholder
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor-block-controls.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor-block-controls.js
index 21b21b0f572..f154d164221 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor-block-controls.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor-block-controls.js
@@ -7,6 +7,10 @@ import { Toolbar } from '@wordpress/components';
 
 /**
  * Adds controls to the editor toolbar.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {boolean} props.isEditing
+ * @param {function(boolean):any} props.setIsEditing
  */
 const EditorBlockControls = ( { isEditing, setIsEditing } ) => {
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js
index d82f7d51316..ca15fe284b8 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js
@@ -22,6 +22,16 @@ import { BLOCK_TITLE, BLOCK_ICON, BLOCK_DESCRIPTION } from '../constants';
 
 /**
  * Component to handle edit mode of the "Single Product Block".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.className
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
+ * @param {string} props.error
+ * @param {function(any):any} props.getProduct
+ * @param {Object} props.product
+ * @param {boolean} props.isLoading
+ * @param {string} props.clientId
  */
 const Editor = ( {
 	className,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/layout-editor.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/layout-editor.js
index 9866e4dd27c..baf5132e459 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/layout-editor.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/layout-editor.js
@@ -24,6 +24,11 @@ import {
 
 /**
  * Component to handle edit mode of the "Single Product Block".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {boolean} props.isLoading
+ * @param {Object} props.product
+ * @param {string} props.clientId
  */
 const LayoutEditor = ( { isLoading, product, clientId } ) => {
 	const baseClassName = 'wc-block-single-product wc-block-layout';
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/shared-product-control.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/shared-product-control.js
index eac8d932aa7..ec3ccbf1193 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/shared-product-control.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/shared-product-control.js
@@ -5,6 +5,10 @@ import ProductControl from '@woocommerce/editor-components/product-control';
 
 /**
  * Allows a product to be selected for display.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
  */
 const SharedProductControl = ( { attributes, setAttributes } ) => (
 	<ProductControl
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/index.js
index 96cef613ea1..19c31daf572 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/index.js
@@ -12,6 +12,10 @@ import './style.scss';
 
 /**
  * Component to render a Feedback prompt in the sidebar.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.text
+ * @param {string} props.url
  */
 const FeedbackPrompt = ( {
 	text,
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/grid-content-control/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/grid-content-control/index.js
index 5ee3f0d242c..0a5d80826d2 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/grid-content-control/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/grid-content-control/index.js
@@ -8,6 +8,10 @@ import { ToggleControl } from '@wordpress/components';
 
 /**
  * A combination of toggle controls for content visibility in product grids.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {function(any):any} props.onChange
+ * @param {Object} props.settings
  */
 const GridContentControl = ( { onChange, settings } ) => {
 	const { button, price, rating, title } = settings;
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/grid-layout-control/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/grid-layout-control/index.js
index 0202ce1a412..9f21c4050ea 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/grid-layout-control/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/grid-layout-control/index.js
@@ -15,6 +15,12 @@ import {
 
 /**
  * A combination of range controls for product grid layout settings.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {number} props.columns
+ * @param {number} props.rows
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
+ * @param {string} props.alignButtons
  */
 const GridLayoutControl = ( {
 	columns,
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-orderby-control/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/product-orderby-control/index.js
index 9e303bda0f0..92fba4a3815 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/product-orderby-control/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-orderby-control/index.js
@@ -7,6 +7,10 @@ import PropTypes from 'prop-types';
 
 /**
  * A pre-configured SelectControl for product orderby settings.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.value
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
  */
 const ProductOrderbyControl = ( { value, setAttributes } ) => {
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/products-control/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/products-control/index.js
index ec776be648a..ffbdfe5d50c 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/products-control/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/products-control/index.js
@@ -12,6 +12,7 @@ import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error
  * products.
  *
  * @param {Object} props Component props.
+ * @param {string} props.error
  * @param {Function} props.onChange  Callback fired when the selected item changes
  * @param {Function} props.onSearch  Callback fired when a search is triggered
  * @param {Array}    props.selected  An array of selected products.
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/utils/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/utils/index.js
index fb11894bbe7..9cc37fa4369 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/utils/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/utils/index.js
@@ -10,7 +10,7 @@ import { IS_LARGE_CATALOG, LIMIT_TAGS } from '@woocommerce/block-settings';
  * Get product query requests for the Store API.
  *
  * @param {Object} request A query object with the list of selected products and search term.
- * @param {string} request.selected Currently selected products.
+ * @param {Array} request.selected Currently selected products.
  * @param {string} request.search Search string.
  * @param {Array} request.queryArgs Query args to pass in.
  */
@@ -47,7 +47,7 @@ const getProductsRequests = ( {
  * Get a promise that resolves to a list of products from the Store API.
  *
  * @param {Object} request A query object with the list of selected products and search term.
- * @param {string} request.selected Currently selected products.
+ * @param {Array} request.selected Currently selected products.
  * @param {string} request.search Search string.
  * @param {Array} request.queryArgs Query args to pass in.
  */
@@ -107,7 +107,7 @@ export const getTerms = ( attribute ) => {
  * Get product tag query requests for the Store API.
  *
  * @param {Object} request A query object with the list of selected products and search term.
- * @param {string} request.selected Currently selected tags.
+ * @param {Array} request.selected Currently selected tags.
  * @param {string} request.search Search string.
  */
 const getProductTagsRequests = ( { selected = [], search } ) => {
@@ -135,7 +135,9 @@ const getProductTagsRequests = ( { selected = [], search } ) => {
 /**
  * Get a promise that resolves to a list of tags from the Store API.
  *
- * @param {Object} - A query object with the list of selected products and search term.
+ * @param {Object} props A query object with the list of selected products and search term.
+ * @param {Array} props.selected
+ * @param {string} props.search
  */
 export const getProductTags = ( { selected = [], search } ) => {
 	const requests = getProductTagsRequests( { selected, search } );
diff --git a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/cod/index.js b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/cod/index.js
index d18b3d3ecdd..6e059b33f94 100644
--- a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/cod/index.js
+++ b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/cod/index.js
@@ -39,8 +39,11 @@ const Label = ( props ) => {
 /**
  * Determine whether COD is available for this cart/order.
  *
- * @param boolean cartNeedsShipping True if the cart contains any physical/shippable products.
- * @return boolean True if COD payment method should be displayed as a payment option.
+ * @param {Object} props Incoming props for the component.
+ * @param {boolean} props.cartNeedsShipping True if the cart contains any physical/shippable products.
+ * @param {boolean} props.selectedShippingMethods
+ *
+ * @return {boolean}  True if COD payment method should be displayed as a payment option.
  */
 const canMakePayment = ( { cartNeedsShipping, selectedShippingMethods } ) => {
 	if ( ! settings.enableForVirtual && ! cartNeedsShipping ) {
diff --git a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/elements.js b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/elements.js
index 086d2992933..cd25bff1f16 100644
--- a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/elements.js
+++ b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/elements.js
@@ -15,10 +15,16 @@ import {
  */
 import { useElementOptions } from './use-element-options';
 
+/** @typedef {import('react')} React */
+
 const baseTextInputStyles = 'wc-block-gateway-input';
 
 /**
  * InlineCard component
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {React.ReactElement} props.inputErrorComponent
+ * @param {function(any):any} props.onChange
  */
 export const InlineCard = ( {
 	inputErrorComponent: ValidationInputError,
@@ -62,6 +68,10 @@ export const InlineCard = ( {
 
 /**
  * CardElements component.
+ *
+ * @param {Object} props
+ * @param {function(any):any} props.onChange
+ * @param {React.ReactElement} props.inputErrorComponent
  */
 export const CardElements = ( {
 	onChange,
diff --git a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/type-defs.js b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/type-defs.js
index 61d2c2aa667..fadc08643b2 100644
--- a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/type-defs.js
+++ b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/type-defs.js
@@ -265,6 +265,7 @@
 
 /**
  * @typedef {Object} Stripe Stripe api object.
+ * @property {any} api Various api properties
  */
 
 /**
@@ -274,6 +275,8 @@
  * @property {string} alt  Alt text for icon.
  */
 
+/* eslint-disable jsdoc/valid-types */
+// [k:string]:CreditCardIcon triggers the above rule even though VSCode interprets it fine.
 /**
  * @typedef {Object} StripeServerData
  *
@@ -299,6 +302,7 @@
  * @property {boolean}                     allowPaymentRequest  True if merchant has enabled payment
  *                                                              request (Chrome/Apple Pay).
  */
+/* eslint-enable jsdoc/valid-types */
 
 /**
  * @typedef {Object} StripeElementOptions
diff --git a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/utils.js b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/utils.js
index 2398461532b..a1b392d3011 100644
--- a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/utils.js
+++ b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/stripe-utils/utils.js
@@ -20,7 +20,7 @@ import { errorTypes, errorCodes } from './constants';
 /**
  * Stripe data comes form the server passed on a global object.
  *
- * @return  {StripeServerData}
+ * @return  {StripeServerData} Stripe server data.
  */
 const getStripeServerData = () => {
 	const stripeServerData = getSetting( 'stripe_data', null );
@@ -253,6 +253,10 @@ const getErrorMessageForTypeAndCode = ( type, code = '' ) => {
  * shipping, so we can track when one of them change to update rates.
  *
  * @param {Object} address          An object containing all address information
+ * @param {string} address.country
+ * @param {string} address.state
+ * @param {string} address.city
+ * @param {string} address.postcode
  *
  * @return {Object} pluckedAddress  An object containing shipping address that are needed to fetch an address.
  */
diff --git a/plugins/woocommerce-blocks/assets/js/settings/shared/get-setting.js b/plugins/woocommerce-blocks/assets/js/settings/shared/get-setting.js
index c0a56bab553..c6a7c3583c8 100644
--- a/plugins/woocommerce-blocks/assets/js/settings/shared/get-setting.js
+++ b/plugins/woocommerce-blocks/assets/js/settings/shared/get-setting.js
@@ -6,7 +6,6 @@ import { allSettings } from './settings-init';
 /**
  * Retrieves a setting value from the setting state.
  *
- * @export
  * @param {string}   name                         The identifier for the setting.
  * @param {*}    [fallback=false]             The value to use as a fallback
  *                                                if the setting is not in the
diff --git a/plugins/woocommerce-blocks/assets/js/settings/shared/set-setting.js b/plugins/woocommerce-blocks/assets/js/settings/shared/set-setting.js
index c514f90b8fb..6d2e9ba146b 100644
--- a/plugins/woocommerce-blocks/assets/js/settings/shared/set-setting.js
+++ b/plugins/woocommerce-blocks/assets/js/settings/shared/set-setting.js
@@ -11,7 +11,6 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Sets a value to a property on the settings state.
  *
- * @export
  * @param {string}   name                        The setting property key for the
  *                                               setting being mutated.
  * @param {*}        value                       The value to set.
diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/contexts.js b/plugins/woocommerce-blocks/assets/js/type-defs/contexts.js
index 5bde7f13d34..75756a1b9e7 100644
--- a/plugins/woocommerce-blocks/assets/js/type-defs/contexts.js
+++ b/plugins/woocommerce-blocks/assets/js/type-defs/contexts.js
@@ -115,17 +115,18 @@
  * CustomerPaymentMethod objects.
  *
  * @typedef {Object} SavedCustomerPaymentMethods
+ * @property {any} any Various payment methods
  */
 
 /**
  * @typedef {Object} PaymentStatusDispatchers
  *
- * @property {function()}                        started
- * @property {function()}                        processing
- * @property {function()}                        completed
- * @property {function(string)}                  error
- * @property {function(string, Object, Object=)} failed
- * @property {function(Object=,Object=,Object=)} success
+ * @property {function()}                        started    Sets started status.
+ * @property {function()}                        processing Sets processing status.
+ * @property {function()}                        completed  Sets complete status.
+ * @property {function(string)}                  error      Sets error status.
+ * @property {function(string, Object, Object=)} failed     Sets failed status.
+ * @property {function(Object=,Object=,Object=)} success    Sets success status.
  */
 
 /**
diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/hooks.js b/plugins/woocommerce-blocks/assets/js/type-defs/hooks.js
index bf0ebaa1fcf..e6578a81fbc 100644
--- a/plugins/woocommerce-blocks/assets/js/type-defs/hooks.js
+++ b/plugins/woocommerce-blocks/assets/js/type-defs/hooks.js
@@ -34,7 +34,7 @@
  *                                                      being loaded.
  * @property {boolean}             hasShippingAddress   Whether or not the cart
  *                                                      has a shipping address yet.
- * @property {function}            receiveCart          Dispatcher to receive
+ * @property {function(Object):any} receiveCart         Dispatcher to receive
  *                                                      updated cart.
  */
 
@@ -90,6 +90,8 @@
  * @property {string} EXPRESS_PAYMENTS Notices for the express payments step.
  */
 
+/* eslint-disable jsdoc/valid-types */
+// Enum format below triggers the above rule even though VSCode interprets it fine.
 /**
  * @typedef {NoticeContexts['PAYMENTS']|NoticeContexts['EXPRESS_PAYMENTS']} NoticeContextsEnum
  */
@@ -137,6 +139,7 @@
  *                                                           response. This varies between context
  *                                                           emitters.
  */
+/* eslint-enable jsdoc/valid-types */
 
 /**
  * @typedef {Object} EmitResponseApi
diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js b/plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js
index 190ed228b29..5a0503e752a 100644
--- a/plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js
+++ b/plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js
@@ -17,12 +17,12 @@
  *
  * @typedef {Object} PaymentStatusActions
  *
- * @property {Function} started
- * @property {Function} processing
- * @property {Function} completed
- * @property {Function} error
- * @property {Function} failed
- * @property {Function} success
+ * @property {Function} started    Set started status.
+ * @property {Function} processing Set processing status.
+ * @property {Function} completed  Set completed status.
+ * @property {Function} error      Set error status.
+ * @property {Function} failed     Set failed status.
+ * @property {Function} success    Set success status.
  */
 
 /**
diff --git a/plugins/woocommerce-blocks/bin/eslint-plugin-woocommerce/rules/feature-flag.js b/plugins/woocommerce-blocks/bin/eslint-plugin-woocommerce/rules/feature-flag.js
index e58564ad729..95e5b1e5b26 100644
--- a/plugins/woocommerce-blocks/bin/eslint-plugin-woocommerce/rules/feature-flag.js
+++ b/plugins/woocommerce-blocks/bin/eslint-plugin-woocommerce/rules/feature-flag.js
@@ -35,7 +35,7 @@ function findParent( sourceNode, predicate ) {
  *
  * @param {Object} node    The WOOCOMMERCE_BLOCKS_PHASE identifier node.
  * @param {Object} context The eslint context object.
- * @todo: update this rule to match the new flags.
+ * @todo update this rule to match the new flags.
  */
 function testIsAccessedViaProcessEnv( node, context ) {
 	let parent = node.parent;
diff --git a/plugins/woocommerce-blocks/tests/e2e/fixtures/fixture-data.js b/plugins/woocommerce-blocks/tests/e2e/fixtures/fixture-data.js
index 3dab8cb8e9b..8b5860df644 100644
--- a/plugins/woocommerce-blocks/tests/e2e/fixtures/fixture-data.js
+++ b/plugins/woocommerce-blocks/tests/e2e/fixtures/fixture-data.js
@@ -194,6 +194,8 @@ const Settings = () => [
 /**
  * Page settings fixture data, using the update batch endpoint.
  *
+ * @param {Array} pages
+ *
  * @see {@link https://woocommerce.github.io/woocommerce-rest-api-docs/#batch-update-setting-options|Batch update setting options}
  */
 const PageSettings = ( pages = [] ) => {
diff --git a/plugins/woocommerce-blocks/tests/utils/find-label-with-text.js b/plugins/woocommerce-blocks/tests/utils/find-label-with-text.js
index de28990b6ea..ccd50aea456 100644
--- a/plugins/woocommerce-blocks/tests/utils/find-label-with-text.js
+++ b/plugins/woocommerce-blocks/tests/utils/find-label-with-text.js
@@ -1,9 +1,11 @@
+/** @typedef {import('react')} React */
+
 /**
  * Finds the label of a toggle control.
  *
  * @param {string} label The label associated with a toggle control.
  *
- * @return {?ElementHandle} Object that represents an in-page DOM element.
+ * @return {?React.ReactElementHandle} Object that represents an in-page DOM element.
  */
 export async function findLabelWithText( label ) {
 	const [ toggle ] = await page.$x(