How to use the @storybook/html.addDecorator function in @storybook/html

base: 'light',
      brandTitle: 'JetBrains Ring UI',
      ...theme
    })
  },
  a11y: {
    options: {
      rules: {
        // TODO enable when RG-2054 is fixed
        'color-contrast': {enabled: false}
      }
    }
  }
});

addDecorator(withA11y);
addDecorator(stylesDecorator());

const req = require.context('../components', true, /\.examples\.js$/);

function loadStories() {
  return [
    // Make welcome stories default
    require('../components/welcome.examples'),
    ...req.keys().map(filename => req(filename))
  ];
}

configure(loadStories, module);

import { configure, addDecorator } from "@storybook/html";
import { withOptions } from "@storybook/addon-options";

import "../src/main.scss";

addDecorator(
  withOptions({
    hierarchyRootSeparator: /\|/
  })
);

// automatically import all files ending in *.stories.js
const req = require.context("../stories", true, /.stories.js$/);
function loadStories() {
  // Make welcome story default
  require("../stories/index.stories");
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

import '../_spark.scss';
import '../../storybook-theming/_docs.scss';
import { configure, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from '../../storybook-theming/storybook-spark-theme';
import 'iframe-resizer/js/iframeResizer.contentWindow.min';
import '!style-loader!css-loader!sass-loader!../../storybook-theming/font-loader.scss';
import '../../storybook-theming/icon-loader';

addDecorator(withA11y);

// Option defaults
addParameters({
  options: {
    theme: sparkTheme,
    showRoots: true,
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
  },
});

addParameters({
  docs: {
    extractComponentDescription: (component, { info }) => {
      if (info) {
        return typeof info === 'string' ? info : info.markdown || info.text;

import Twig from 'twig';
import twigDrupal from 'twig-drupal-filters';

// Add the filters to Drupal.
twigDrupal(Twig);

// Automatically import all files ending in *.stories.js
const twig = require.context('../twig', true, /\.stories\.(ts|js)$/);
const editor = require.context('../editor', true, /\.stories\.(ts|js)$/);
function loadStories() {
  twig.keys().forEach(filename => twig(filename));
  editor.keys().forEach(filename => editor(filename));
}

// Helps make UI components more accessible.
addDecorator(withA11y);

configure(loadStories, module);

brandTitle: 'JetBrains Ring UI',
      ...theme
    })
  },
  a11y: {
    options: {
      rules: {
        // TODO enable when RG-2054 is fixed
        'color-contrast': {enabled: false}
      }
    }
  }
});

addDecorator(withA11y);
addDecorator(stylesDecorator());

const req = require.context('../components', true, /\.examples\.js$/);

function loadStories() {
  return [
    // Make welcome stories default
    require('../components/welcome.examples'),
    ...req.keys().map(filename => req(filename))
  ];
}

configure(loadStories, module);

import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';

import { withCenteredLayout } from '../src/vcentered-addon/index'

import 'angular';
import 'angular-aria';
import 'angular-sanitize';

// Load src for livereload
import '@ovh-ux/ui-kit-builder';
import '../src/index.less';

// Addons
addDecorator(withA11y);
addDecorator(withKnobs);
addDecorator(withCenteredLayout);

// Options
addParameters({
  options: {
    name: 'OVH UI Kit',
    panelPosition: 'bottom',
  },
});

// Automatically import all files ending in *.stories.js
const req = require.context("../stories", true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

import { configure, addDecorator, addParameters } from '@storybook/html';
import { withKnobs } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { withNotes } from '@storybook/addon-notes';
import { bulmilTheme } from './bulmil-theme';

addDecorator(withKnobs);
addDecorator(withA11y);
addDecorator(withNotes);

addParameters({
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
  options: {
    theme: bulmilTheme,
  },
});

const req = require.context('../src', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));

import { configure, addDecorator } from '@storybook/html';
import { makeDecorator } from '@storybook/addons';
import Grid from '../src/grid';

const withDefaultConfig =  makeDecorator({
  name: 'withDefaultConfig',
  wrapper: (getStory, context) => {
    Grid.setLanguage('en');
    Grid.applyTheme({ preset: 'default' });
    return getStory(context);
  }
});

addDecorator(withDefaultConfig);
configure(require.context('../stories', true, /.stories.tsx?$/), module);

wrapper: (getStory, context, { options, parameters }) => {
    const root = document.createElement('div')
    Object.assign(root.style, options, parameters)

    const story = getStory(context)
    if (typeof story === 'string') {
      root.innerHTML = story
    } else if (story instanceof Node) {
      root.appendChild(story)
    }

    return root
  }
})

addDecorator(withStyles)
addParameters({
  options: {
    showPanel: false
  },
  styles: {
    margin: '0 auto',
    padding: '40px 24px 0',
    maxWidth: '400px',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif',
  }
})

function loadStories() {
  require('../packages/autocomplete-js/Autocomplete.stories.js')
}

import { configure, addDecorator } from '@storybook/html'
import { setOptions } from '@storybook/addon-options'
import { withNotes } from '@storybook/addon-notes'

import { withPreview } from './decorators'
import './style.css'

setOptions({
  name: 'medium-zoom',
  url: 'https://github.com/francoischalifour/medium-zoom',
})

addDecorator(withNotes)
addDecorator(withPreview)

const req = require.context('..', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)