Add Storybook entry for `FormattedMonetaryAmount` (https://github.com/woocommerce/woocommerce-blocks/pull/11481)

plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx

@@ -15,10 +15,10 @@ import type { Currency } from '@woocommerce/types';
  */
 import './style.scss';
 
-interface FormattedMonetaryAmountProps
-	extends Omit< NumberFormatProps, 'onValueChange' > {
+export interface FormattedMonetaryAmountProps
+	extends Omit< NumberFormatProps, 'onValueChange' | 'displayType' > {
 	className?: string;
-	displayType?: NumberFormatProps[ 'displayType' ];
+	displayType?: NumberFormatProps[ 'displayType' ] | undefined;
 	allowNegative?: boolean;
 	isAllowed?: ( formattedValue: NumberFormatValues ) => boolean;
 	value: number | string; // Value of money amount.
@@ -55,6 +55,8 @@ type CustomFormattedMonetaryAmountProps = Omit<
  * FormattedMonetaryAmount component.
  *
  * Takes a price and returns a formatted price using the NumberFormat component.
+ *
+ * More detailed docs on the additional props can be found here:https://s-yadav.github.io/react-number-format/docs/intro
  */
 const FormattedMonetaryAmount = ( {
 	className,

plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/stories/index.tsx

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+
+/**
+ * Internal dependencies
+ */
+import FormattedMonetaryAmount, { type FormattedMonetaryAmountProps } from '..';
+
+export default {
+	title: 'WooCommerce Blocks/@woocommerce-blocks-components/FormattedMonetaryAmount',
+	component: FormattedMonetaryAmount,
+	argTypes: {
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		currency: {
+			table: {
+				type: {
+					summary: 'object',
+				},
+			},
+			control: 'object',
+			description:
+				'The currency object used to describe how the monetary amount should be displayed.',
+		},
+		displayType: {
+			table: {
+				type: {
+					summary: 'input | text',
+				},
+			},
+			control: 'select',
+			options: [ 'input', 'text' ],
+			defaultValue: 'text',
+			description:
+				'Whether this should be an input or just a text display.',
+		},
+		value: {
+			control: 'number',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+			defaultValue: 1234,
+			description:
+				'The raw value of the currency, it will be formatted depending on the props of this component.',
+		},
+		isAllowed: {
+			control: 'function',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+			if: { arg: 'displayType', eq: 'input' },
+			description:
+				'A checker function to validate the input value. If this function returns false, the onChange method will not get triggered and the input value will not change.',
+		},
+		allowNegative: {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+			description: 'Whether negative numbers can be entered',
+		},
+		onValueChange: {
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+			action: 'changed',
+		},
+		style: {
+			control: 'object',
+			table: {
+				type: {
+					summary: 'object',
+				},
+			},
+		},
+	},
+} as Meta< FormattedMonetaryAmountProps >;
+
+const Template: Story< FormattedMonetaryAmountProps > = ( args ) => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const [ _, updateArgs ] = useArgs();
+	const onValueChange = ( unit: number ) => {
+		updateArgs( { value: unit } );
+	};
+
+	return (
+		<FormattedMonetaryAmount { ...args } onValueChange={ onValueChange } />
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	currency: {
+		minorUnit: 2,
+		code: 'USD',
+		decimalSeparator: '.',
+		prefix: '$',
+		suffix: '',
+		symbol: '$',
+		thousandSeparator: ',',
+	},
+};