Hi, I have some questions regarding publishing storybook on DSM website. I have successfully uploaded my storybook to the DSM website, however, the DSM website was unable to load my storybook.
1. First, you can see the storybook info shown under the HTML tab.
2. Second, after loading for a while, the website showed "Unable to load the Storybook."
Below is the code that I was using for publishing the story:
import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
import { decorate } from '@storybook/addon-actions';
import '../components/button/_button.scss';
import buttonDocs from '../components/button/button.mdx';
// This story is written in "Component Story Format" that was introduced in Storybook 5.2
export default {
title:'Buttons',
parameters: {
decorators: [withKnobs],
// Module-Level 'in-dsm' configuration (Will apply to all stories inside the module)
'in-dsm': { id:'' }
}
};
const kindOptions = {
primary:'primary',
secondary:'secondary',
tertiary:'tertiary',
tertiary_underline:'tertiary -underline'
}
const sizeVariations = {
default:'default',
small:'sm'
}
const iconAlignment = {
left:'icon-left-aligned',
right:'icon-right-aligned'
}
const iconOptions = {
add:'add',
accessibility:'accessibility',
rotate_right:'rotate_right',
keyboard_arrow_left:'keyboard_arrow_left',
keyboard_arrow_right:'keyboard_arrow_right'
}
const decoratedAction = decorate([() => ['Click']]);
export const button_variations = () => {
constkind = select('Button kind', kindOptions, kindOptions.primary);
constsize = select('Size variations', sizeVariations, sizeVariations.default);
consticon = select('Icon', iconOptions, iconOptions.add);
constalignment = select('Alignment of the icon', iconAlignment, iconAlignment.left);
constchildren = text('Label', 'Button');
constdisabled = boolean('Disabled', false);
returndecoratedAction.withActions({ 'click .cds-button':'Button clicked!' })(
() => `
<button class="cds-button${kind !== kindOptions ? ` -${kind}` : ''}${size !== sizeVariations.default ? ` -${size}` : ''} " ${disabled ? 'disabled' : ''}>
${children}
</button>
<button class="cds-button${kind !== kindOptions ? ` -${kind}` : ''}${size !== sizeVariations.default ? ` -${size}` : ''} ${alignment !== iconAlignment ? ` -${alignment}` : ''} " ${disabled ? 'disabled' : ''} icon-name="${icon}">
${children}
</button>
<button class="cds-button${kind !== kindOptions ? ` -${kind}` : ''}${size !== sizeVariations.default ? ` -${size}` : ''} -icon-only " ${disabled ? 'disabled' : ''} icon-name="${icon}" aria-label="Add">
</button>
`
);
};
button_variations.story = {
parameters: {
// Story-Level 'in-dsm' configuration (Will apply only to the story that is being configured)
// Story-Level configuration will override Module-Level 'in-dsm' configuration for the specific story
'in-dsm': {
docFilePath:'../components/button/button.docs.json',
id:'5ed96aabf149f372bd4016dd'
},
docs: { page:buttonDocs }
}
};
I am using "Storybook-v5", "version": "1.0.0" in Storybook HTML. Can you help me on understanding what went wrong in this upload? Thanks!
comments
Sort by
Hi Minshuo,
Thanks for reaching out, and our apologies for this trouble publishing to DSM. So we can take a closer look into this, could you please provide the following details:
This information will help us to further investigate the issue. I look forward to your response!
Best,
Shaina
Hi Shaina,
Thanks for your follow up. Here's a screenshot of my Terminal:
As for the Storybook display on browsers, I've tried Safari and Firefox. They all have the same loading issue with Chrome. Here's what showed up in my Safari:
Hi Minshuo,
Thanks for letting us know, and I'm sorry to hear you're still experiencing this issue. We'd like to have our Support team take a look into this for you. Can you provide the following details when you have a chance?
Thanks in advance!
Michael
Was there ever a resolution to this? We're seeing the same problem.
Hi Jonathon,
We're sorry to hear that this issue is occurring for you as well. We'll be happy to pass this onto our Support team for further troubleshooting. To that end, would you mind providing the following details?
Thanks, Jonathon!
Regards,
Raynor
Hi Raynor,
Here are the details you requested. There are no error messages when previewing or publishing.
Node version
v12.16.1{"name": "StoryBookHtml",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"dsm-storybook:publish": "dsm-storybook publish",
"dsm-storybook:preview": "dsm-storybook preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/addon-actions": "^6.1.11",
"@storybook/addon-essentials": "^6.1.11",
"@storybook/addon-links": "^6.1.11",
"@storybook/html": "^6.1.11",
"babel-loader": "^8.2.2"
},
"dependencies": {
"@invisionapp/dsm-storybook": "0.0.137",
"@storybook/addon-options": "^5.3.21",
"@storybook/addons": "^6.1.11",
"request": "^2.88.2"
}
}
Hi Jonathon,
So sorry to hear that you’re running into this issue! Thanks for providing the details you have here in Community for our team to use for further troubleshooting.
I’m opening a ticket on your behalf with our Support team so they can troubleshoot with you internally. Please keep an eye out for an email from one of our Support agents soon.
I apologize for any frustration and disruption that this issue is causing you!
Thanks for hanging in there,
Camille