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

@@ -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',

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 );

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,

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 (

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.
  */

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.
  */

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(

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,

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 {Object} props       Component props.
- * @param {Array} props.icons  Array of icons object configs or ids as strings.
+ * @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 );

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 ) {

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 = {

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 ) {

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,

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 ) {

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.

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,

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,

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,

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,

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 = '',

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 = '',

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,

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,

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,

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,

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.

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(

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;

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,

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,

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();

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,

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 = {},

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( {} );

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,

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,

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.
  */

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.
+ * @param {Object}                       options  Intersection Observer options.
- * @return {object|IntersectionObserver} Intersection Observer if available,
+ * @return {Object|IntersectionObserver} Intersection Observer if available,
  *                                       otherwise a shim object.
  *
  * @todo Remove IntersectionObserver shim when we drop IE11 support.

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 = (

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.
  */

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.

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 = {},

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,

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 = {

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,

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,

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 (

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();

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 (

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 (

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 {

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 ) }>

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();

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' );

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

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,

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,

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(

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,

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 = () => {

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 },

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 },

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.
-	 * Save the props to post content.
-	 *
-	 * @param {Object} attributes Attributes to save.
-	 */
 	save( { attributes } ) {
 		const dataAttributes = {};
 		Object.keys( attributes )

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 = () => {

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,

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,

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,

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';

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

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 (

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,

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';

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

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,

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;

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,

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 (

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.

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 } );

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.
+ * @param {Object} props Incoming props for the component.
- * @return boolean True if COD payment method should be displayed as a payment option.
+ * @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 ) {

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,

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

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.
  */

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

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.

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()}                        started    Sets started status.
- * @property {function()}                        processing
+ * @property {function()}                        processing Sets processing status.
- * @property {function()}                        completed
+ * @property {function()}                        completed  Sets complete status.
- * @property {function(string)}                  error
+ * @property {function(string)}                  error      Sets error status.
- * @property {function(string, Object, Object=)} failed
+ * @property {function(string, Object, Object=)} failed     Sets failed status.
- * @property {function(Object=,Object=,Object=)} success
+ * @property {function(Object=,Object=,Object=)} success    Sets success status.
  */
 
 /**

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

plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js

@@ -17,12 +17,12 @@
  *
  * @typedef {Object} PaymentStatusActions
  *
- * @property {Function} started
+ * @property {Function} started    Set started status.
- * @property {Function} processing
+ * @property {Function} processing Set processing status.
- * @property {Function} completed
+ * @property {Function} completed  Set completed status.
- * @property {Function} error
+ * @property {Function} error      Set error status.
- * @property {Function} failed
+ * @property {Function} failed     Set failed status.
- * @property {Function} success
+ * @property {Function} success    Set success status.
  */
 
 /**

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;

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 = [] ) => {

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(