pkp/pkp-lib#9527 using addons-themes for ltr/rtl, instead of dedicate…

…d addons to handle compatibility with modes

.storybook/main.js

@@ -2,12 +2,12 @@
 const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 	addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
-        'storybook-addon-rtl',
-        "@storybook/addon-mdx-gfm"
-    ],
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-themes',
+		'@storybook/addon-mdx-gfm',
+	],
 	framework: {
 		name: '@storybook/vue3-vite',
 		options: {},

.storybook/modes.js

@@ -1,10 +1,11 @@
 export const allModes = {
 	desktop: {
 		viewport: 'large',
+		theme: 'LTR',
 	},
-	'desktop rtl': {
+	'desktop RTL': {
 		viewport: 'large',
-		direction: 'rtl',
+		theme: 'RTL',
 	},
 	// for snapshotting scrollable areas with all content, like modals
 	desktopLargeHeight: {

.storybook/preview.js

@@ -1,5 +1,7 @@
 /** @type { import('@storybook/vue3').Preview } */
 
+import {withThemeByDataAttribute} from '@storybook/addon-themes';
+
 import {setup} from '@storybook/vue3';
 
 import GlobalMixins from '@/mixins/global.js';
@@ -28,14 +30,12 @@ import VueScrollTo from 'vue-scrollto';
 import '../src/styles/_import.less';
 import '../src/styles/_global.less';
 import {allModes} from './modes';
-import {initializeRTL} from 'storybook-addon-rtl';
 import {initialize, mswLoader} from 'msw-storybook-addon';
 
 import {createPinia} from 'pinia';
 
 const pinia = createPinia();
 
-initializeRTL();
 // Initialize MSW
 initialize({
 	onUnhandledRequest: ({method, url}) => {
@@ -95,6 +95,14 @@ setup((app) => {
 const preview = {
 	loaders: [mswLoader],
 	decorators: [
+		withThemeByDataAttribute({
+			themes: {
+				ltr: 'LTR',
+				rtl: 'RTL',
+			},
+			defaultTheme: 'LTR',
+			attributeName: 'RTL',
+		}),
 		(story) => ({
 			components: {story},
 			template: '<div style="padding: 10px;"><story /></div>',
@@ -153,7 +161,7 @@ const preview = {
 		chromatic: {
 			modes: {
 				desktop: allModes['desktop'],
-				'desktop rtl': allModes['desktop rtl'],
+				'desktop RTL': allModes['desktop RTL'],
 			},
 		},
 	},