How to use the @storybook/addons.makeDecorator function in @storybook/addons

import addons, { makeDecorator } from '@storybook/addons';
import kebabCase from 'lodash/kebabCase';
import stripHOCs from '../../helpers/stripHOCs';

export const withProps = makeDecorator({
  name: 'withProps',
  parameterName: 'props',
  wrapper: (getStory, context) => {
    const components = {};

    context.parameters.inspectComponents.forEach(component => {
      components[stripHOCs(component.displayName || component.name)] = component;
    });

    // We need to cast globals to JSON, otherwise the data is lost
    addons.getChannel().emit('SET_PROPS_DATA', {
      components,
      componentChangelogs: JSON.stringify(COMPONENT_CHANGELOGS),
      componentMetadata: JSON.stringify(STORYBOOK_REACT_CLASSES),
      section: kebabCase(context.kind.split('/')[0]),
      storyPath: context.parameters.fileName,

import { configure, addDecorator, addParameters } from '@storybook/html';
import { makeDecorator } from '@storybook/addons'
// import { withStyles } from 'storybook-addon-styles/vue'
import '../packages/style.css'
import '../.storybook-vue/style.css'

const withStyles = makeDecorator({
  name: 'withStyles',
  parameterName: 'styles',
  skipIfNoParametersOrOptions: true,
  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
  }

import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons';
import deprecate from 'util-deprecate';

// This decorator is kept purely so we produce a decorator that is compatible with both
// `addDecorator(withBackgrounds(...))` and `addDecorator(withBackgrounds)`
export const withBackgrounds = deprecate(
  makeDecorator({
    name: 'withBackgrounds',
    parameterName: 'backgrounds',
    wrapper: (getStory: StoryGetter, context: StoryContext) => {
      return getStory(context);
    },
  }),
  `Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options})
Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`
);

if (module && module.hot && module.hot.decline) {
  module.hot.decline();
}

key: uuidv4()
        }, e('code', { key: uuidv4() }, template)),
      ]
    }
  };

  const render = () => e(Wrapper, { key: uuidv4() });

  addons.add(PANEL_ID, {
    type: types.PANEL,
    title,
    render,
  });
});

export const withMarkdown = makeDecorator({
  name: 'withMarkdown',
  parameterName: 'markdown',
  wrapper: (storyFn, context, { options : html }) => {
    const channel = addons.getChannel();
    const template = storyFn(context);
    let generatedTemplate = template;
    if (typeof template === 'object' && template !== null && template instanceof HTMLElement) {
      const el = document.createElement('div');
      el.appendChild(template);
      generatedTemplate = el.innerHTML;
    }
    channel.emit(ADDON_EVENT, { template: generatedTemplate, html: html || DEFAULT_MSG });
    return template;
  },
});

class ThemeContainer extends React.PureComponent {
  componentDidUpdate(prevProps) {
    const { contentDensity, setQueryParam } = this.props;
    if (contentDensity !== prevProps.contentDensity) {
      setQueryParam({
        'sap-ui-compactSize': contentDensity === ContentDensity.Compact
      });
    }
  }

  render() {
    return this.props.children;
  }
}

const withQuery = makeDecorator({
  name: 'withQuery',
  parameterName: 'query',
  wrapper: (getStory, context) => {
    function setQueryParam(queryObj) {
      const iframe = window.parent.document.getElementById('storybook-preview-iframe');
      const [base, search] = iframe.src.split('?');
      const currentQuery = qs.parse(search, { ignoreQueryPrefix: true });
      iframe.src = `${base}?${qs.stringify({ ...currentQuery, ...queryObj })}`;
    }

    let contentDensity;
    try {
      const iframe = window.parent.document.getElementById('storybook-preview-iframe');
      const currentQuery = qs.parse(iframe.src.split('?')[1]);
      contentDensity =
        currentQuery['sap-ui-compactSize'] && currentQuery['sap-ui-compactSize'] !== 'false'

import addons, { makeDecorator, StoryWrapper } from '@storybook/addons'

import { Events, ParameterName } from './addon'
import { Config } from './config'

const wrapper: StoryWrapper = (getStory, context, { parameters }) => {
  const channel = addons.getChannel()

  channel.emit(Events.UpdateConfig, parameters)

  return getStory(context)
}

export const withDesign = makeDecorator({
  name: 'withDesign',
  parameterName: ParameterName,
  skipIfNoParameterOrOptions: true,
  wrapper
})

/**
 * Dumb function to ensure typings or enchance IDE auto completion.
 */
export const config = (c: Config | Config[]) => c

if (module && module.hot && module.hot.decline) {
  module.hot.decline()
}

channel.on(VIEWPORT_CHANGED_EVENT_ID, callHandler);
  return () => channel.removeListener(VIEWPORT_CHANGED_EVENT_ID, callHandler);
};

const applyViewportOptions = (options = {}) => {
  const channel = addons.getChannel();

  handler = options.onViewportChange || noop;
  if (options.onViewportChange) {
    channel.emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
  }

  channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, options.name || DEFAULT_VIEWPORT);
};

const withViewport = makeDecorator({
  name: 'withViewport',
  parameterName: 'viewport',
  allowDeprecatedUsage: true,
  wrapper: (getStory, context, { options, parameters }) => {
    const storyOptions = parameters || options;
    const viewportOptions =
      typeof storyOptions === 'string' ? { name: storyOptions } : storyOptions;

    if (viewportOptions) {
      applyViewportOptions(viewportOptions);
    }

    return getStory(context);
  },
});

import * as React from 'react';

import addons, { makeDecorator } from '@storybook/addons';

import Events from './constants';
import Container from './container';

export interface Background {
  name: string;
  value: string;
  default?: boolean;
}

export const withBackgrounds = makeDecorator({
  name: 'withBackgrounds',
  parameterName: 'backgrounds',
  skipIfNoParametersOrOptions: true,
  allowDeprecatedUsage: true,
  wrapper: (getStory, context, { options, parameters }) => {
    const data = parameters || options || [];
    const backgrounds: Background[] = Array.isArray(data) ? data : Object.values(data);

    let background = 'transparent';
    if (backgrounds.length !== 0) {
      addons.getChannel().emit(Events.SET, backgrounds);

      const defaultOrFirst = backgrounds.find(x => x.default) || backgrounds[0];

      if (defaultOrFirst) {
        background = defaultOrFirst.value;

import { document, history } from 'global';
import qs from 'qs';

import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons';

import { PARAM_KEY } from './constants';

export const withQuery = makeDecorator({
  name: 'withQuery',
  parameterName: PARAM_KEY,
  wrapper: (getStory: StoryGetter, context: StoryContext, { parameters }) => {
    const { location } = document;
    const currentQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
    const additionalQuery =
      typeof parameters === 'string'
        ? qs.parse(parameters, { ignoreQueryPrefix: true })
        : parameters;

    const newQuery = qs.stringify({ ...currentQuery, ...additionalQuery });
    const newLocation = location.href.replace(location.search, `?${newQuery}`);

    history.replaceState({}, document.title, newLocation);

    return getStory(context);

return (
            
                {this.props.children}
            
        );
    }

    private updateDesignSystem = (designSystem: DesignSystem): void => {
        this.setState({
            designSystem: Object.assign({}, designSystem),
        });
    };
}

const decorator: ReturnType = makeDecorator({
    name: "withDesignSystem",
    parameterName: "designSystem",
    wrapper: (getStory: StoryGetter, context: StoryContext): ReturnType => {
        const channel: Channel = addons.getChannel();

        return (
            
                {getStory(context)}
            
        );
    },
});

export function setup(): void {
    addDecorator(decorator);
}