Context: Why was this issue created?

We don't support RTL in the storybook, the grunt build RTL is applicable only for the plugin css.
It turns the entire css to RTL.

What is the goal of this issue?

Add support for RTL in the storybooks

What needs to be done to achieve the goal?

We need to add RTL classes and not rely on the grunt tasks that build the rtl css for the plugin.

Does the issue still need UX or research?

No

If available: what are the tips for fixing the problem or possible solutions?

• Instead of using yst-text-right or yst-text-left use something that in in the context of the direction: yst-text-start or yst-text-end.
• We will need to look for all the margin and padding text for right and left and add the rtl equivalent.
• See f we can move the arrow icon in the select field on rtl.
• Exclude the ui library and related-keyphrase-suggestions packages from the grunt build of the rtl file.
• Pay attention to translate-x classes, like with the tooltip.
• Avoid margin by using yst-gap

What is the expected result/behavior?

• Run the storybook and click on Direction on the top left corner.
• Check all the components are in the rtl direction.

Should documentation be added or updated for this change? and if so, where?

No