How to use the @storybook/web-components.addDecorator function in @storybook/web-components

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%',
      },
    };
  });

/* global window */

import { configure, addParameters, addDecorator } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withA11y);

addParameters({
  a11y: {
    config: {},
    options: {
      checks: { 'color-contrast': { options: { noScroll: true } } },
      restoreScroll: true,
    },
  },
  options: {
    hierarchyRootSeparator: /\|/,
  },
  docs: {
    iframeHeight: '200px',
  },
});