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

import { configure } from '@storybook/react';
import { addDecorator, addParameters } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
import { withTests } from '@storybook/addon-jest';
import { withKnobs } from '@storybook/addon-knobs';

import contexts from './contexts';
import viewports from './viewports';
import results from './jest-test-results.json';
import theme from './theme';
import 'index.scss';

addDecorator(withContexts(contexts));
addDecorator(withTests({ results }));
addDecorator(withKnobs);
addParameters({
  viewport: {
    viewports: viewports
  }
});
addParameters({
  options: {
    theme
  },
});

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {},

import React from 'react'

import { configure, addDecorator } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { withNotes } from '@storybook/addon-notes'

addDecorator(withNotes)

// see https://github.com/storybooks/storybook/tree/master/addons/info#options-and-defaults
addDecorator(
  withInfo({
    inline: true,
    header: false,
    styles: {
      info: {
        padding: '0px'
      },
      infoBody: {
        marginTop: 100,
        border: 'none',
        padding: '0px'
      }
    }
  })
)

// Storybook requires
import { storiesOf, addDecorator } from '@storybook/react'
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import { withState } from '@dump247/storybook-state'
import { BetterVisualizer } from './storyUtil'

// Components
import * as React from 'react'
import { PushButtonLink } from '../components/v1/pushButton'
import UnstyledButton from '../components/unstyledButton'
import SwitchButton from '../components/switchButton'
import ContentToggleArrow from '../components/contentToggleArrow'

addDecorator(withKnobs)

// Globally adapt the story visualizer for this story
addDecorator(BetterVisualizer)

storiesOf('Buttons', module)
  .add('UnstyledButton', () => {
    return (
      
    )

import { GlobalStyle } from '../src/Theme'

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

function loadStories() {
    req.keys().forEach(req)
}

const withGlobal = cb => (
    <>
        
        {cb()}
    
)

addDecorator(withGlobal)

configure(loadStories, module)

import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

const req = require.context("../src/stories", true, /.stories.jsx$/);

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

addDecorator(
  withOptions({
    addonPanelInRight: true,
  })
);

configure(loadStories, module);

import '@coreui/icons/css/coreui-icons.min.css';
import 'font-awesome/css/font-awesome.min.css';
import 'simple-line-icons/css/simple-line-icons.css';
import '@coreui/coreui/dist/css/coreui.min.css';

import '../src/index.css';

import React, { Suspense } from 'react';
import { makeDecorator } from '@storybook/addons';
import { addDecorator, configure } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import StoryRouter from 'storybook-react-router';

import 'common/services/i18next';
import 'app/styles/main.css';

const withI18Next = makeDecorator({
  name: 'withI18Next',
  parameterName: 'i18Next',
  wrapper: (storyFn, context) => }>{storyFn(context)},
});

addDecorator(withA11y);
addDecorator(withI18Next);
addDecorator(StoryRouter());

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

function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

import '@patternfly/react-core/dist/styles/base.css';
import './reset.css';

configure(require.context('../stories/', true, /\.stories\.(mdx|[tj]sx?)$/), module);

addDecorator(withKnobs);

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

import { addDecorator, StoryDecorator } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import centered from "@storybook/addon-centered/react";
import { withA11y } from "@storybook/addon-a11y";
import { withConsole } from "@storybook/addon-console";
import { withViewport } from "@storybook/addon-viewport";

addDecorator(centered);
addDecorator(withKnobs as StoryDecorator);
addDecorator(withA11y);
addDecorator(withViewport);
addDecorator(((storyFn, context) =>
  withConsole()(storyFn)(context)) as StoryDecorator);

const req = require.context("./", true, /.story.tsx$/);

req.keys().forEach(filename => req(filename));

import requireContext from 'require-context.macro'

import { addDecorator, configure } from '@storybook/react'

import themeDecorator from '@pluralsight/ps-design-system-storybook-addon-theme'

addDecorator(themeDecorator)

const req = requireContext('../src', true, /\.story\.js$/)

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

configure(loadStories, module)

import { configure, addDecorator } from '@storybook/react';
import { jsxDecorator } from 'storybook-addon-jsx';
import { withKnobs } from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';

addDecorator(jsxDecorator);
addDecorator(withKnobs);
addDecorator(withInfo);

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

const loadStories = () => {
	req.keys().forEach(file => req(file));
};

configure(loadStories, module);