Skip to content

Commit

Permalink
I9527 storybook examples (#302)
Browse files Browse the repository at this point in the history 
* pkp/pkp-lib#9527 page example

* pkp/pkp-lib#9527 storybook migration wip
  • Loading branch information
@jardakotesovec
jardakotesovec committed Dec 6, 2023
1 parent c2aa1fe commit 4946906
Show file tree
Hide file tree
Showing 154 changed files with 25,883 additions and 15,822 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/chromatic.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
12 changes: 7 additions & 5 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
13 changes: 13 additions & 0 deletions .storybook/preview-head.html
View file
Original file line number Diff line number Diff line change
@@ -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>
305 changes: 78 additions & 227 deletions .storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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});
},*/
},
},
};

Expand Down

0 comments on commit 4946906

Please sign in to comment.