I9527 storybook examples (#302)

* pkp/pkp-lib#9527 page example

* pkp/pkp-lib#9527 storybook migration wip

.github/workflows/chromatic.yml

@@ -21,6 +21,6 @@ jobs:
         run: npm install
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1 # Chromatic GitHub Action options 
-            with: 
-              projectToken: chpt_d560551f1e4c0c7
+        uses: chromaui/action@v1 # Chromatic GitHub Action options
+        with:
+          projectToken: chpt_d560551f1e4c0c7

.storybook/main.js

@@ -2,17 +2,19 @@
 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-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        'storybook-addon-rtl',
+        "@storybook/addon-mdx-gfm"
+    ],
 	framework: {
 		name: '@storybook/vue3-vite',
 		options: {},
 	},
 	docs: {
 		autodocs: 'tag',
 	},
+	staticDirs: ['../public', './public'],
 };
 export default config;

.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<link
+	rel="stylesheet"
+	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+	integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0="
+	crossorigin="anonymous"
+/>
+
+<script
+	src="https://code.jquery.com/jquery-3.3.1.min.js"
+	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+	crossorigin="anonymous"
+></script>
+<script src="/globals.js"></script>

.storybook/preview.js

@@ -3,262 +3,113 @@
 import {setup} from '@storybook/vue3';
 
 import GlobalMixins from '@/mixins/global.js';
+import emitter from 'tiny-emitter/instance';
 
+import Badge from '@/components/Badge/Badge.vue';
+import Dropdown from '@/components/Dropdown/Dropdown.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import Notification from '@/components/Notification/Notification.vue';
+import Panel from '@/components/Panel/Panel.vue';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import PkpHeader from '@/components/Header/Header.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
+import Step from '@/components/Steps/Step.vue';
+import Steps from '@/components/Steps/Steps.vue';
+import Tab from '@/components/Tabs/Tab.vue';
+import Tabs from '@/components/Tabs/Tabs.vue';
+import FloatingVue from 'floating-vue';
+
+import '../src/styles/_import.less';
 import '../src/styles/_global.less';
 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}) => {
+		if (url.pathname.includes('://mock/')) {
+			console.error(`Unhandled ${method} request to ${url}.
+
+        This exception has been only logged in the console, however, it's strongly recommended to resolve this error as you don't want unmocked data in Storybook stories.
+
+        If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses
+      `);
+		}
+	},
+});
 
 setup((app) => {
 	app.use(pinia);
 	app.mixin(GlobalMixins);
-	window.pkp = {};
-	window.$ = {};
-	window.$.pkp = {
-		app: {
-			currentLocale: 'en',
-			primaryLocale: 'en',
-			rtlLocales: ['ar'],
-			tinyMceContentCSS: '/styles/content.css',
-			tinyMceOneLineContentCSS: '/styles/content_oneline.css',
-		},
-		pkpHandler() {
-			alert(
-				'This action can not be completed in the UI library because it requires a legacy JS component that is part of the OJS, OMP or OPS application.',
-			);
-		},
-		classes: {
-			Helper: {
-				// A fake uuid generator to mock the one in the Helper component of
-				// OJS, OMP and OPS. This is not guaranteed to be unique and should
-				// not be used in production
-				uuid() {
-					return Math.floor((1 + Math.random()) * 0x10000).toString(16);
+
+	app.use(FloatingVue, {
+		themes: {
+			'pkp-tooltip': {
+				$extend: 'tooltip',
+				triggers: ['click'],
+				delay: {
+					show: 0,
+					hide: 0,
 				},
 			},
 		},
-	};
-	window.pkp.const = {
-		STAGE_ID_PUBLISHED: 0,
-		WORKFLOW_STAGE_ID_SUBMISSION: 1,
-		WORKFLOW_STAGE_ID_INTERNAL_REVIEW: 2,
-		WORKFLOW_STAGE_ID_EXTERNAL_REVIEW: 3,
-		WORKFLOW_STAGE_ID_EDITING: 4,
-		WORKFLOW_STAGE_ID_PRODUCTION: 5,
-		INSERT_TAG_VARIABLE_TYPE_PLAIN_TEXT: 'PLAIN_TEXT',
-		ROLE_ID_MANAGER: 16,
-		ROLE_ID_SITE_ADMIN: 1,
-		ROLE_ID_AUTHOR: 65536,
-		ROLE_ID_REVIEWER: 4096,
-		ROLE_ID_ASSISTANT: 4097,
-		ROLE_ID_READER: 1048576,
-		ROLE_ID_SUB_EDITOR: 17,
-		ROLE_ID_SUBSCRIPTION_MANAGER: 2097152,
-		STATUS_QUEUED: 1,
-		STATUS_PUBLISHED: 3,
-		STATUS_DECLINED: 4,
-		STATUS_SCHEDULED: 5,
-		STAGE_STATUS_SUBMISSION_UNASSIGNED: 1,
-	};
-	window.pkp.localeKeys = {
-		'article.article': 'Article',
-		'common.attachFiles': 'Attach Files',
-		'common.cancel': 'Cancel',
-		'common.clearSearch': 'Clear search phrase',
-		'common.close': 'Close',
-		'common.commaListSeparator': ', ',
-		'common.delete': 'Delete',
-		'common.description': 'Description',
-		'common.edit': 'Edit',
-		'common.editItem': 'Edit {$name}',
-		'common.error': 'Error',
-		'common.filter': 'Filters',
-		'common.filterAdd': 'Add filter: {$filterTitle}',
-		'common.filterRemove': 'Clear filter: {$filterTitle}',
-		'common.filtersClear': 'Clear Filters',
-		'common.inParenthesis': '({$text})',
-		'common.insertContent': 'Insert Content',
-		'common.lastActivity': 'Last activity recorded on {$date}.',
-		'common.loaded': 'Loaded',
-		'common.loading': 'Loading',
-		'common.no': 'No',
-		'common.noItemsFound': 'No items found.',
-		'common.none': 'None',
-		'common.ok': 'OK',
-		'common.order': 'Order',
-		'common.orderDown': 'Decrease position of {$itemTitle}',
-		'common.orderUp': 'Increase position of {$itemTitle}',
-		'common.pageNumber': 'Page {$pageNumber}',
-		'common.pagination.goToPage': 'Go to {$page}',
-		'common.pagination.label': 'View additional pages',
-		'common.pagination.next': 'Next',
-		'common.pagination.previous': 'Previous',
-		'common.remove': 'Remove',
-		'common.required': 'Required',
-		'common.reviewRoundNumber': 'Round {$round}',
-		'common.save': 'Save',
-		'common.saving': 'Saving',
-		'common.search': 'Search',
-		'common.selectAll': 'Select All',
-		'common.selectNone': 'Select None',
-		'common.selectWithName': 'Select {$name}',
-		'common.showingXofX':
-			'Showing <strong>{$start} to {$finish}</strong> of {$total}',
-		'common.status': 'Status',
-		'common.type': 'Type',
-		'common.unknownError':
-			'An unexpected error has occurred. Please reload the page and try again.',
-		'common.uploadedBy': 'Uploaded by {$name}',
-		'common.uploadedByAndWhen': 'Uploaded by {$name} on {$date}',
-		'common.view': 'View',
-		'common.viewWithName': 'View {$name}',
-		'common.yes': 'Yes',
-		'doi.manager.versions.countStatement': 'There are {$count} versions.',
-		'doi.manager.versions.modalTitle': 'DOIs for all versions',
-		'doi.manager.versions.view': 'View all',
-		'editor.submission.daysInStage': 'Days in Stage',
-		'editor.submission.search':
-			'Search submissions, ID, authors, keywords, etc.',
-		'editor.submission.viewSummary': 'Summary',
-		'editor.submissionArchive.confirmDelete':
-			'Are you sure you want to permanently delete this submission?',
-		'form.dataHasChanged':
-			'The data on this form has changed. Do you wish to continue without saving?',
-		'form.errorA11y': 'Go to {$fieldLabel}: {$errorMessage}',
-		'form.errorGoTo': 'Jump to next error',
-		'form.errorMany': 'Please correct {$count} errors.',
-		'form.errorOne': 'Please correct one error.',
-		'form.errors':
-			'The form was not saved because {$count} error(s) were encountered. Please correct these errors and try again.',
-		'form.multilingualLabel': '{$label} in {$localeName}',
-		'form.multilingualProgress': '{$count}/{$total} languages completed',
-		'form.saved': 'Saved',
-		'grid.action.sort': 'Sort',
-		'help.help': 'Help',
-		'issue.issue': 'Issue',
-		'list.collapseAll': 'Collapse all',
-		'list.expandAll': 'Expand all',
-		'list.viewLess': 'Hide expanded details about {$name}',
-		'list.viewMore': 'Show more details about {$name}',
-		'manager.dois.actions.assign.label': 'Assign DOIs',
-		'manager.dois.actions.assign.prompt':
-			'You are about to assign new DOIs to {$count} item(s) for any eligible item that does not already have a DOI assigned. Are you sure you want to assign DOIs to these items?',
-		'manager.dois.actions.bulkActions': 'Bulk Actions',
-		'manager.dois.actions.deposit.all': 'Deposit All',
-		'manager.dois.actions.deposit.label': 'Deposit DOIs',
-		'manager.dois.actions.deposit.prompt':
-			'You are about to send DOI metadata records for {$count} item(s) to {$registrationAgency}. Are you sure you want to deposit these records?',
-		'manager.dois.actions.depositAll.label': 'Deposit all DOIs',
-		'manager.dois.actions.depositAll.prompt':
-			"You are about to schedule all outstanding DOI metadata records to be deposited with {$registrationAgency}. Only published items with a DOI will be deposited. Each item's status will be updated when a response is received. Are you sure you want to schedule deposits for all of these items?",
-		'manager.dois.actions.description':
-			'Take action on {$count} selected item(s).',
-		'manager.dois.actions.export.label': 'Export DOIs',
-		'manager.dois.actions.export.prompt':
-			'You are about to export DOI metadata records for {$count} item(s) for {$registrationAgency}. Are you sure you want to export these records?',
-		'manager.dois.actions.markRegistered.label': 'Mark DOIs Registered',
-		'manager.dois.actions.markRegistered.prompt':
-			'You are about to mark DOI metadata records for {$count} item(s) as registered. Are you sure you want to mark these records as registered?',
-		'manager.dois.actions.markStale.label': 'Mark DOIs Needs Sync',
-		'manager.dois.actions.markStale.prompt':
-			'You are about to mark DOI metadata records for {$count} item(s) as needing to be synced. The Needs Sync status can only be applied to previously submitted DOIs. Are you sure you want to mark these records as stale?',
-		'manager.dois.actions.markUnregistered.label': 'Mark DOIs Unregistered',
-		'manager.dois.actions.markUnregistered.prompt':
-			'You are about to mark DOI metadata records for {$count} item(s) as unregistered. Are you sure you want to mark these records as unregistered?',
-		'manager.dois.filters.doiAssigned': 'DOI Assigned',
-		'manager.dois.filters.doiAssigned.description': 'All items assigned a DOI.',
-		'manager.dois.help.statuses.title': 'DOI Statuses',
-		'manager.dois.notification.assignDoisSuccess':
-			'Items successfully assigned new DOIs',
-		'manager.dois.notification.depositQueuedSuccess':
-			'Items successfully submitted for deposit',
-		'manager.dois.notification.exportSuccess': 'Items successfully exported',
-		'manager.dois.notification.markRegisteredSuccess':
-			'Items successfully marked registered',
-		'manager.dois.notification.markStaleSuccess':
-			'Items successfully marked needs sync',
-		'manager.dois.notification.markUnregisteredSuccess':
-			'Items successfully marked unregistered',
-		'manager.dois.registration.depositDois': 'Deposit DOI(s)',
-		'manager.dois.registration.manuallyMarkedRegistered':
-			'This item has been manually registered with a registration agency.',
-		'manager.dois.registration.notPublishedDescription':
-			'This item cannot be deposited until it has been published.',
-		'manager.dois.registration.notSubmittedDescription':
-			'The metadata for this item has not been submitted to {$registrationAgency}.',
-		'manager.dois.registration.submittedDescription':
-			'The metadata for this item has been submitted to {$registrationAgency}.',
-		'manager.dois.registration.viewError': 'View Error',
-		'manager.dois.registration.viewError.title': 'Registration Error Message',
-		'manager.dois.registration.viewRecord': 'View Record',
-		'manager.dois.status.error': 'Error',
-		'manager.dois.status.error.description':
-			'All items that have encountered an error in the registration process.',
-		'manager.dois.status.error.filterTitle': 'Has Error',
-		'manager.dois.status.needsDoi': 'Needs DOI',
-		'manager.dois.status.needsDoi.description': 'All items missing a DOI.',
-		'manager.dois.status.registered': 'Registered',
-		'manager.dois.status.registered.description':
-			'All items that have been registered with a registration agency or manually marked as registered.',
-		'manager.dois.status.stale': 'Needs Sync',
-		'manager.dois.status.stale.description':
-			'All items that have been republished since they were last deposited with a registration agency. They need to be resubmitted to the registration agency to update their metadata records.',
-		'manager.dois.status.submitted': 'Submitted',
-		'manager.dois.status.submitted.description':
-			'All items that have been submitted to a registration agency.',
-		'manager.dois.status.unregistered': 'Unregistered',
-		'manager.dois.status.unregistered.description':
-			'All items with a DOI that have been published but not yet deposited with a registration agency.',
-		'manager.dois.title': 'DOIs',
-		'manager.dois.update.failedCreation': 'DOI Updates Failed',
-		'manager.dois.update.partialFailure': 'Some DOI(s) could not be updated',
-		'manager.newSubmission': 'New Submission',
-		'manger.dois.update.success': 'DOI(s) successfully updated',
-		'navigation.backTo': '\u27f5 Back to {$page}',
-		'navigation.submissions': 'Submissions',
-		'publication.status.published': 'Published',
-		'publication.status.unpublished': 'Unpublished',
-		'publication.version': 'Version {$version}',
-		'stats.countWithYearlyAverage': '{$count} ({$average}/year)',
-		'stats.descriptionForStat': 'Description for {$stat}',
-		'submission.list.assignEditor': 'Assign Editor',
-		'submission.list.copyeditsSubmitted': 'Copyedited files submitted',
-		'submission.list.currentStage': 'Currently in the {$stage} stage.',
-		'submission.list.discussions': 'Open discussions',
-		'submission.list.dualWorkflowLinks':
-			'You have been assigned multiple roles for this submission. Would you like to access the <a href="{$urlAuthorWorkflow}">Author\'s workflow</a>  or the <a href="{$urlEditorialWorkflow}">Editorial workflow</a>?',
-		'submission.list.empty': 'No submissions found.',
-		'submission.list.galleysCreated': 'Production galleys created',
-		'submission.list.infoCenter': 'Activity Log & Notes',
-		'submission.list.responseDue': 'Response Due: {$date}',
-		'submission.list.reviewAssignment': 'Review Assignment',
-		'submission.list.reviewCancelled': 'Review Cancelled',
-		'submission.list.reviewComplete': 'Review Submitted',
-		'submission.list.reviewDue': 'Review Due: {$date}',
-		'submission.list.reviewerWorkflowLink':
-			'You have been assigned an editorial role for this submission. Would you like to access the <a href="{$urlEditorialWorkflow}">Editorial workflow</a>?',
-		'submission.list.reviewsCompleted': 'Assigned reviews completed',
-		'submission.list.revisionsSubmitted': 'Revisions submitted',
-		'submission.submit.newSubmissionSingle': 'New Submission',
-		'submissions.incomplete': 'Incomplete',
-		'validator.required': 'This field is required.',
+	});
+
+	app.component('Badge', Badge);
+	app.component('Dropdown', Dropdown);
+	app.component('Icon', Icon);
+	app.component('Notification', Notification);
+	app.component('Panel', Panel);
+	app.component('PanelSection', PanelSection);
+	app.component('PkpButton', PkpButton);
+	app.component('PkpHeader', PkpHeader);
+	app.component('Spinner', Spinner);
+	app.component('Step', Step);
+	app.component('Steps', Steps);
+	app.component('Tab', Tab);
+	app.component('Tabs', Tabs);
+
+	console.log('preview running');
+	window.pkp.eventBus = {
+		$on: (...args) => emitter.on(...args),
+		$once: (...args) => emitter.once(...args),
+		$off: (...args) => emitter.off(...args),
+		$emit: (...args) => emitter.emit(...args),
 	};
 });
 
 const preview = {
+	loaders: [mswLoader],
 	parameters: {
 		actions: {argTypesRegex: '^on[A-Z].*'},
 		controls: {
+			expanded: true,
 			matchers: {
 				color: /(background|color)$/i,
 				date: /Date$/i,
 			},
 		},
 		direction: 'ltr',
+		options: {
+			/*storySort: (a, b) => {
+				if (a.id.includes('introduction--docs')) {
+					return -1;
+				}
+				if (b.id.includes('introduction--docs')) {
+					return 1;
+				}
+
+				return a.id === b.id
+					? 0
+					: a.id.localeCompare(b.id, undefined, {numeric: true});
+			},*/
+		},
 	},
 };