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