I9527 storybook migration part4 (#305)

* pkp/pkp-lib#9527 Form fields migrated to storybook

* pkp/pkp-lib#9527 Migrate ListPanel components to storybok

* pkp/pkp-lib#9527 Page components migrated to storybook

* pkp/pkp-lib#9527 Make initPageConfig as props for better documentation

* pkp/pkp-lib#9527 Create defineComponentStore to hide implementation details for stores that needs to follow component lifecycle

* pkp/pkp-lib#9527 Adjust size for modal to be screenshoted

* pkp/pkp-lib#9527 Add margin to stories to properly see borders/shadows

* pkp/pkp-lib#9527 Move global dialog to decorators

* pkp/pkp-lib#9527 Tweak padding for better snapshoting

* pkp/pkp-lib#9527 Adjust default view port to get full desktop layouts

* pkp/pkp-lib#9527 Add rtl snapshoting

* pkp/pkp-lib#9527 Activate rtl snapshots

* pkp/pkp-lib#9527 using addons-themes for ltr/rtl, instead of dedicated addons to handle compatibility with modes

* pkp/pkp-lib#9527 Apply rtl to storybook root to prevent breaking layout in some cases

* pkp/pkp-lib#9527 reenable other decorators

* pkp/pkp-lib#9527 Address RTL issues for 'screenreader only' styling, which was creating additional space

* pkp/pkp-lib#9527 To cover modals/dialogs, move dir attribute to body

* pkp/pkp-lib#9527 Same source of the truth for dir rtl/ltr

* pkp/pkp-lib#9527 Adjust viewport to xl

* pkp/pkp-lib#9527 fix composer rtl issue

* pkp/pkp-lib#9527 Attempt to stabilize StatsPage data

* pkp/pkp-lib#9527 stabilize table data

* pkp/pkp-lib#9527 Trigger build to verify it has stable snapshots.

* pkp/pkp-lib#9527 move components to the same category for now

* pkp/pkp-lib#9527 Stabilize stats page for snapshots

* pkp/pkp-lib#9527 migrate to msw2, add some useFetch tests

* pkp/pkp-lib#9527 stabilize SelectReviewerListPanel stories

.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

@@ -0,0 +1,14 @@
+export const allModes = {
+	desktop: {
+		viewport: 'large',
+		theme: 'ltr',
+	},
+	'desktop rtl': {
+		viewport: 'large',
+		theme: 'rtl',
+	},
+	// for snapshotting scrollable areas with all content, like modals
+	desktopLargeHeight: {
+		viewport: 'largeHeight',
+	},
+};

.storybook/preview.js

@@ -1,7 +1,7 @@
 /** @type { import('@storybook/vue3').Preview } */
 
+import {withThemeByDataAttribute} from '@storybook/addon-themes';
 import {setup} from '@storybook/vue3';
-
 import GlobalMixins from '@/mixins/global.js';
 import emitter from 'tiny-emitter/instance';
 
@@ -20,19 +20,24 @@ import Tab from '@/components/Tabs/Tab.vue';
 import Tabs from '@/components/Tabs/Tabs.vue';
 import FloatingVue from 'floating-vue';
 
+import PkpDialog from '@/components/Modal/Dialog.vue';
+import {useDialogStore} from '@/stores/dialogStore';
+
+import VueScrollTo from 'vue-scrollto';
+
 import '../src/styles/_import.less';
 import '../src/styles/_global.less';
-import {initializeRTL} from 'storybook-addon-rtl';
+import {allModes} from './modes';
 import {initialize, mswLoader} from 'msw-storybook-addon';
 
 import {createPinia} from 'pinia';
 
 const pinia = createPinia();
 
-initializeRTL();
 // Initialize MSW
 initialize({
-	onUnhandledRequest: ({method, url}) => {
+	/** To be migrated to msw2 if neede */
+	/*onUnhandledRequest: ({method, url}) => {
 		if (url.pathname.includes('://mock/')) {
 			console.error(`Unhandled ${method} request to ${url}.
 
@@ -41,7 +46,7 @@ initialize({
         If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses
       `);
 		}
-	},
+	},*/
 });
 
 setup((app) => {
@@ -61,6 +66,8 @@ setup((app) => {
 		},
 	});
 
+	app.use(VueScrollTo);
+
 	app.component('Badge', Badge);
 	app.component('Dropdown', Dropdown);
 	app.component('Icon', Icon);
@@ -86,6 +93,43 @@ setup((app) => {
 
 const preview = {
 	loaders: [mswLoader],
+	decorators: [
+		withThemeByDataAttribute({
+			themes: {
+				ltr: 'ltr',
+				rtl: 'rtl',
+			},
+			defaultTheme: 'ltr',
+		}),
+		(story, {globals}) => {
+			/** withThemebyDataAttribute decorator applies attribute after render, which
+			 * is too late fort tinyMCE which needs to detect it on first render correctly
+			 *
+			 */
+			document.body.setAttribute('dir', globals.theme);
+			return story();
+		},
+		(story) => ({
+			components: {story},
+			template: '<div style="padding: 10px;"><story /></div>',
+		}),
+		/** Globally Available Dialog */
+		(story) => ({
+			setup() {
+				const dialogStore = useDialogStore();
+				return {dialogStore};
+			},
+			components: {story, PkpDialog},
+			template: `<div>			
+				<PkpDialog
+					:open="dialogStore.dialogOpened"
+					v-bind="dialogStore.dialogProps"
+					@close="dialogStore.closeDialog"
+				></PkpDialog>
+				<story />
+			</div>`,
+		}),
+	],
 	parameters: {
 		actions: {argTypesRegex: '^on[A-Z].*'},
 		controls: {
@@ -104,12 +148,27 @@ const preview = {
 				if (b.id.includes('introduction--docs')) {
 					return 1;
 				}
-
 				return a.id === b.id
 					? 0
 					: a.id.localeCompare(b.id, undefined, {numeric: true});
 			},*/
 		},
+		viewport: {
+			viewports: {
+				large: {name: 'Large', styles: {width: '1280px', height: '1000px'}},
+				/** For scrollable scenarios */
+				largeHeight: {
+					name: 'Large',
+					styles: {width: '1024px', height: '1500px'},
+				},
+			},
+		},
+		chromatic: {
+			modes: {
+				desktop: allModes['desktop'],
+				'desktop rtl': allModes['desktop rtl'],
+			},
+		},
 	},
 };