Storybook: Add RTL switcher to toolbar

package.json

@@ -99,6 +99,7 @@
 		"@storybook/addon-docs": "6.3.2",
 		"@storybook/addon-knobs": "6.2.9",
 		"@storybook/addon-storysource": "6.3.2",
+		"@storybook/addon-toolbars": "6.3.12",
 		"@storybook/addon-viewport": "6.3.2",
 		"@storybook/builder-webpack5": "6.3.6",
 		"@storybook/manager-webpack5": "6.3.6",

storybook/decorators/with-rtl.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { forceReRender } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { useEffect, useRef } from '@wordpress/element';
+
+export const WithRTL = ( Story, context ) => {
+	const ref = useRef();
+
+	useEffect( () => {
+		// Override the return value of i18n.isRTL()
+		addFilter(
+			'i18n.gettext_with_context',
+			'storybook',
+			( translation, text, _context ) => {
+				if ( text === 'ltr' && _context === 'text direction' ) {
+					return context.globals.direction;
+				}
+				return translation;
+			}
+		);
+
+		ref.current.ownerDocument.documentElement.setAttribute(
+			'dir',
+			context.globals.direction
+		);
+
+		forceReRender();
+
+		return () => removeFilter( 'i18n.gettext_with_context', 'storybook' );
+	}, [ context.globals.direction ] );
+
+	return (
+		<div ref={ ref }>
+			<Story { ...context } />
+		</div>
+	);
+};

storybook/main.js

@@ -44,6 +44,7 @@ module.exports = {
 		'@storybook/addon-storysource',
 		'@storybook/addon-viewport',
 		'@storybook/addon-a11y',
+		'@storybook/addon-toolbars',
 	],
 	managerWebpack: updateEmotionAliases,
 	// Workaround: