Add stories for ErrorPlaceholder and ErrorMessage (#5249)

Stories include:

* Default generic error
* API error
* Unknown error
* Error without possibility to retry
* Base Error atom

Where applicable, the **Retry** button will not only trigger the appropriate
action, but also simulate the loading state of the error component.

assets/js/editor-components/error-placeholder/stories/error-message.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ErrorMessage, { ErrorMessageProps } from '../error-message';
+
+export default {
+	title: 'WooCommerce Blocks/editor-components/Errors/Base Error Atom',
+	component: ErrorMessage,
+} as Meta< ErrorMessageProps >;
+
+const Template: Story< ErrorMessageProps > = ( args ) => (
+	<ErrorMessage { ...args } />
+);
+
+export const BaseErrorAtom = Template.bind( {} );
+BaseErrorAtom.args = {
+	error: {
+		message:
+			'A very generic and unhelpful error. Please try again later. Or contact support. Or not.',
+		type: 'general',
+	},
+};

assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { Story, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+
+/**
+ * Internal dependencies
+ */
+import ErrorPlaceholder, { ErrorPlaceholderProps } from '..';
+
+export default {
+	title: 'WooCommerce Blocks/editor-components/Errors',
+	component: ErrorPlaceholder,
+} as Meta< ErrorPlaceholderProps >;
+
+const Template: Story< ErrorPlaceholderProps > = ( args ) => {
+	const [ { isLoading }, setArgs ] = useArgs();
+
+	const onRetry = args.onRetry
+		? () => {
+				setArgs( { isLoading: true } );
+
+				setTimeout( () => setArgs( { isLoading: false } ), 3500 );
+		  }
+		: undefined;
+
+	return (
+		<ErrorPlaceholder
+			{ ...args }
+			onRetry={ onRetry }
+			isLoading={ isLoading }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	error: {
+		message:
+			'A very generic and unhelpful error. Please try again later. Or contact support. Or not.',
+		type: 'general',
+	},
+};
+
+export const APIError = Template.bind( {} );
+APIError.args = {
+	error: {
+		message: 'Server refuses to comply. It is a teapot.',
+		type: 'api',
+	},
+};
+
+export const UnknownError = Template.bind( {} );
+UnknownError.args = {
+	error: {
+		message: '',
+		type: 'general',
+	},
+};
+
+export const NoRetry: Story< ErrorPlaceholderProps > = ( args ) => {
+	return <ErrorPlaceholder { ...args } onRetry={ undefined } />;
+};
+NoRetry.args = {
+	error: {
+		message: '',
+		type: 'general',
+	},
+};