How to use @storybook/web-components - 10 common examples
To help you get started, we’ve selected a few @storybook/web-components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
open-wc / open-wc / packages / create / src / generators / demoing-storybook / templates / static / .storybook / config.js View on Github 
import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
addDecorator(withA11y);
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
addDecorator(withA11y);
// force full reload to not reregister web components
const req = require.context('../components', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}function addDefaultValue (def) {
def.defaultValue = def.default;
}
customElements.tags.forEach((tagDefinition) => {
(tagDefinition.attributes || []).forEach((def) => addDefaultValue(def));
(tagDefinition.properties || []).forEach((def) => addDefaultValue(def));
});
setCustomElements(customElements);
// We cannot use main.js (stories: []) yet because of the HMR config for web-components
const csfStories = require.context('../stories', true, /\.stories\.js$/);
const mdxDocsPages = require.context('../docs', true, /\.mdx$/);
configure([csfStories, mdxDocsPages], module);
// Force full reload instead of HMR for Web Components
// https://github.com/storybookjs/storybook/tree/next/app/web-components
if (module.hot) {
module.hot.accept(csfStories.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}restoreScroll: true,
},
},
options: {
hierarchyRootSeparator: /\|/,
},
docs: {
iframeHeight: '200px',
},
});
// configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}// import customElements from '../custom-elements.json';
// setCustomElements(customElements);
addParameters({
docs: {
iframeHeight: '200px',
},
});
// configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}setCustomElements(customElements);
addParameters({
docs: {
iframeHeight: '200px'
},
options: {
// disable keyboard shortcuts because they interfere with the stories
enableShortcuts: false,
theme
}
});
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}import customElements from '../.components-docs/custom-elements.json';
import { addDecorator, addParameters, configure, setCustomElements } from '@storybook/web-components';
import { i18nKnob } from '../stories/lib/i18n-knob.js';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
addDecorator(withKnobs);
// Add global language selector knob on each story
addDecorator((storyFn) => {
i18nKnob();
return storyFn();
});
addDecorator(withA11y);
const viewports = {};
Array
.from(new Array(10))
.map((_, i) => {
const w = 350 + i * 100;
viewports['w' + w] = {
type: 'desktop',import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
addDecorator(withA11y);
// force full reload to not reregister web components
const req = require.context('../components', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
addDecorator(withA11y);
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}import customElements from '../.components-docs/custom-elements.json';
import { addDecorator, addParameters, configure, setCustomElements } from '@storybook/web-components';
import { i18nKnob } from '../stories/lib/i18n-knob.js';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
addDecorator(withKnobs);
// Add global language selector knob on each story
addDecorator((storyFn) => {
i18nKnob();
return storyFn();
});
addDecorator(withA11y);
const viewports = {};
Array
.from(new Array(10))
.map((_, i) => {
const w = 350 + i * 100;
viewports['w' + w] = {
type: 'desktop',
name: w + 'px',
styles: {
width: w + 'px',
height: '90%',
},
};
});@storybook/web-components
Storybook web-components renderer
