Storybook and TS migration of PriceSlider component (woocommerce#5253…

…) (woocommerce#5293)

* Add full documentation to the component props in Storybook
* Fix `FormattedMonetaryAmount` TypeScript errors

Since this component is passing on props to `NumberFormat`,
it needs to extend all of its original props, except for `onValueChange`
which we wrap in order to accept only `number`s.

* Convert `constrainRangeSliderValues` to TypeScript
* Add docs to `Currency` types
* Convert `PriceSlider` to TypeScript

*Note:* All TypeScript errors were fixed during the conversion,
except for the IE workaround which wasn't clear to me at this time.
Opened an issue: woocommerce#5276

* Fix Price Slider story (woocommerce#5253)
* Migrate stories for `ProductName` to latest Storybook

Also add props documentation and add named export.

assets/js/base/components/formatted-monetary-amount/index.tsx

@@ -14,7 +14,8 @@ import type { Currency } from '@woocommerce/types';
  */
 import './style.scss';
 
-interface FormattedMonetaryAmountProps {
+interface FormattedMonetaryAmountProps
+	extends Omit< NumberFormatProps, 'onValueChange' > {
 	className?: string;
 	displayType?: NumberFormatProps[ 'displayType' ];
 	value: number | string; // Value of money amount.
@@ -83,14 +84,10 @@ const FormattedMonetaryAmount = ( {
 	// Wrapper for NumberFormat onValueChange which handles subunit conversion.
 	const onValueChangeWrapper = onValueChange
 		? ( values: NumberFormatValues ) => {
-				const minorUnitValue =
-					( ( values.value as unknown ) as number ) *
-					10 ** currency.minorUnit;
+				const minorUnitValue = +values.value * 10 ** currency.minorUnit;
 				onValueChange( minorUnitValue );
 		  }
-		: () => {
-				/* not used */
-		  };
+		: () => void 0;
 
 	return (
 		<NumberFormat

assets/js/base/components/price-slider/constrain-range-slider-values.ts

@@ -0,0 +1,66 @@
+/**
+ * Validate a min and max value for a range slider against defined constraints (min, max, step).
+ *
+ * @return {[number, number]} Validated and updated min/max values that fit within the range slider constraints.
+ */
+export const constrainRangeSliderValues = (
+	/**
+	 * Tuple containing min and max values.
+	 */
+	values: [ number, number ],
+	/**
+	 * Min allowed value for the sliders.
+	 */
+	min?: number | null,
+	/**
+	 * Max allowed value for the sliders.
+	 */
+	max?: number | null,
+	/**
+	 * Step value for the sliders.
+	 */
+	step = 1,
+	/**
+	 * Whether we're currently interacting with the min range slider or not, so we update the correct values.
+	 */
+	isMin = false
+): [ number, number ] => {
+	let [ minValue, maxValue ] = values;
+
+	const isFinite = ( n: number | undefined ): n is number =>
+		Number.isFinite( n );
+
+	if ( ! isFinite( minValue ) ) {
+		minValue = min || 0;
+	}
+
+	if ( ! isFinite( maxValue ) ) {
+		maxValue = max || step;
+	}
+
+	if ( isFinite( min ) && min > minValue ) {
+		minValue = min;
+	}
+
+	if ( isFinite( max ) && max <= minValue ) {
+		minValue = max - step;
+	}
+
+	if ( isFinite( min ) && min >= maxValue ) {
+		maxValue = min + step;
+	}
+
+	if ( isFinite( max ) && max < maxValue ) {
+		maxValue = max;
+	}
+
+	if ( ! isMin && minValue >= maxValue ) {
+		minValue = maxValue - step;
+	}
+
+	if ( isMin && maxValue <= minValue ) {
+		maxValue = minValue + step;
+	}
+
+	return [ minValue, maxValue ];
+};