Web: Components: Add RTL-switcher to new Storybook

packages/components/.storybook/globals/index.js

@@ -9,6 +9,16 @@ const globalTypes = {
       dynamicTitle: true,
     },
   },
+  direction: {
+    description: "Interface direction",
+    defaultValue: "ltr",
+    toolbar: {
+      title: "Dir",
+      icon: "paragraph",
+      items: ["ltr", "rtl"],
+      dynamicTitle: true,
+    },
+  },
 };
 
 export default globalTypes;

packages/components/.storybook/preview.js

@@ -26,9 +26,11 @@ const preview = {
   },
   decorators: [
     (Story, context) => {
-      const theme = context.globals.theme;
+      const theme = context.globals.theme === "Dark" ? Dark : Base;
+      const interfaceDirection = context.globals.direction;
+
       return (
-        <ThemeWrapper theme={theme === "Dark" ? Dark : Base}>
+        <ThemeWrapper theme={{ ...theme, interfaceDirection }}>
           <Story />
         </ThemeWrapper>
       );