pkp/pkp-lib#9527 Initial storybook setup (pkp#295)

.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
 		'plugin:vue/vue3-essential',
 		'eslint:recommended',
 		'@vue/eslint-config-prettier/skip-formatting',
+		'plugin:storybook/recommended',
 	],
 	globals: {
 		$: true,

.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+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',
+	],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,267 @@
+/** @type { import('@storybook/vue3').Preview } */
+
+import {setup} from '@storybook/vue3';
+
+import GlobalMixins from '@/mixins/global.js';
+
+import '../src/styles/_global.less';
+import {initializeRTL} from 'storybook-addon-rtl';
+
+import {createPinia} from 'pinia';
+import i18nPlugin from '@/piniaPlugins/i18n.plugin.js';
+
+const pinia = createPinia();
+pinia.use(i18nPlugin);
+
+initializeRTL();
+
+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);
+				},
+			},
+		},
+	};
+	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.',
+	};
+});
+
+const preview = {
+	parameters: {
+		actions: {argTypesRegex: '^on[A-Z].*'},
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		direction: 'ltr',
+	},
+};
+
+export default preview;