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

import '@skatejs/web-components';

import { configure, addDecorator } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';

import WithExample from './addons/example-addon';

function loadStories() {
  require('../stories/button.js');
  require('../stories/select');
  require('../stories/datepicker');
  // You can require as many stories as you need.
}

addDecorator(WithExample);
addDecorator(withKnobs)

configure(loadStories, module);

withKeyboardSupport,
  withMultipleDates,
  withRange,
} from '../';
import styles from './stories.scss';

// Date manipulation utils
import addDays from 'date-fns/add_days';
import addMonths from 'date-fns/add_months';
import endOfMonth from 'date-fns/end_of_month';
import format from 'date-fns/format';
import isBefore from 'date-fns/is_before';
import subMonths from 'date-fns/sub_months';

const CenterDecorator = story =&gt; <div>{story()}</div>;
addDecorator(CenterDecorator);

const today = new Date();

storiesOf('Basic settings', module)
  .add('Default Configuration', () =&gt; )
  .add('Initially Selected Date', () =&gt; )
  .add('Blank Initial State', () =&gt; )
  .add('Min Date', () =&gt; (
    
  ))
  .add('Max Date', () =&gt; (

import { withKnobs, select } from '@kadira/storybook-addon-knobs';

import Arrange from '../src/Arrange';

setOptions({
  name: 'Terra Arrange Storybook',
  url: 'https://github.com/cerner/terra-arrange',
  goFullScreen: false,
  showLeftPanel: true,
  showDownPanel: true,
  showSearchBox: false,
  downPanelInRight: true,
  sortStoriesByKind: false,
});

addDecorator(checkA11y);
addDecorator(withKnobs);

const icon = <svg viewBox="0 0 1000 1000" fill="#8bc34a" style="{{" height="100" width="75" xmlns="http://www.w3.org/2000/svg"><path d="M525 841.3c-7.5 6.7-16 10.2-25 10.2-9.6 0-17.8-3.4-24.3-10.2L204.5 571.2c-1.2-.5-7-6.6-17.5-18-10.4-11.4-21.9-26.5-34-45-12.5-18.7-23.7-40.1-34-64.5-10.2-24.2-15.4-50.2-15.4-77.8 0-40.2 6.3-74.2 19-101.9 12.6-27.7 29-50.1 49.4-67.3 20.4-17.2 43.4-29.4 68.8-37 25.5-7.4 51.5-11.2 77.9-11.2 18.5 0 36.8 3.2 54.8 9.4 18.4 6.4 35 14.2 50.6 23.7 15.6 9.3 29.8 19.7 42.7 30.8 13 11.1 23.9 21.1 33 29.9 9-9.1 20.1-19.2 33.4-30.1 13.3-11.1 27.6-21.3 43.1-30.6 15.5-9.5 32.1-17.3 49.8-23.7 17.8-6.3 36.5-9.4 55.7-9.4 25.8 0 51.5 3.8 76.9 11.2 25.7 7.6 48.4 19.9 68.9 37 20.5 17.2 36.7 39.5 49.5 67.3 12.5 27.7 18.9 61.7 18.9 101.9 0 27.6-5.1 53.6-15.1 77.8-10.1 24.5-21.3 45.8-33.7 64.5-12.3 18.5-23.8 33.6-34.9 45-10.7 11.4-16.4 17.7-17 18.8L525 841.3z"></path></svg>;
// Block style is required since images are inline by default. This could be resolved by someones normalize.css
const image = <img alt="a happy panda" src="http://3w6kx9401skz1bup4i1gs9ne.wpengine.netdna-cdn.com/wp-content/uploads/2016/09/telegraph-1.jpg" width="150" height="100" style="{{">;
const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
const simpleText = <div>{ipsum}</div>;
const textWithPadding = <div style="{{">{ipsum}</div>;

const ArrangeWrapper = props =&gt; (
  <div style="{{">
    {props.children}
  </div>
);

ArrangeWrapper.propTypes = {

import Arrange from '../src/Arrange';

setOptions({
  name: 'Terra Arrange Storybook',
  url: 'https://github.com/cerner/terra-arrange',
  goFullScreen: false,
  showLeftPanel: true,
  showDownPanel: true,
  showSearchBox: false,
  downPanelInRight: true,
  sortStoriesByKind: false,
});

addDecorator(checkA11y);
addDecorator(withKnobs);

const icon = <svg viewBox="0 0 1000 1000" fill="#8bc34a" style="{{" height="100" width="75" xmlns="http://www.w3.org/2000/svg"><path d="M525 841.3c-7.5 6.7-16 10.2-25 10.2-9.6 0-17.8-3.4-24.3-10.2L204.5 571.2c-1.2-.5-7-6.6-17.5-18-10.4-11.4-21.9-26.5-34-45-12.5-18.7-23.7-40.1-34-64.5-10.2-24.2-15.4-50.2-15.4-77.8 0-40.2 6.3-74.2 19-101.9 12.6-27.7 29-50.1 49.4-67.3 20.4-17.2 43.4-29.4 68.8-37 25.5-7.4 51.5-11.2 77.9-11.2 18.5 0 36.8 3.2 54.8 9.4 18.4 6.4 35 14.2 50.6 23.7 15.6 9.3 29.8 19.7 42.7 30.8 13 11.1 23.9 21.1 33 29.9 9-9.1 20.1-19.2 33.4-30.1 13.3-11.1 27.6-21.3 43.1-30.6 15.5-9.5 32.1-17.3 49.8-23.7 17.8-6.3 36.5-9.4 55.7-9.4 25.8 0 51.5 3.8 76.9 11.2 25.7 7.6 48.4 19.9 68.9 37 20.5 17.2 36.7 39.5 49.5 67.3 12.5 27.7 18.9 61.7 18.9 101.9 0 27.6-5.1 53.6-15.1 77.8-10.1 24.5-21.3 45.8-33.7 64.5-12.3 18.5-23.8 33.6-34.9 45-10.7 11.4-16.4 17.7-17 18.8L525 841.3z"></path></svg>;
// Block style is required since images are inline by default. This could be resolved by someones normalize.css
const image = <img alt="a happy panda" src="http://3w6kx9401skz1bup4i1gs9ne.wpengine.netdna-cdn.com/wp-content/uploads/2016/09/telegraph-1.jpg" width="150" height="100" style="{{">;
const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
const simpleText = <div>{ipsum}</div>;
const textWithPadding = <div style="{{">{ipsum}</div>;

const ArrangeWrapper = props =&gt; (
  <div style="{{">
    {props.children}
  </div>
);

ArrangeWrapper.propTypes = {
  children: PropTypes.element,

import '@skatejs/web-components';

import { configure, addDecorator } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';

import WithExample from './addons/example-addon';

function loadStories() {
  require('../stories/button.js');
  require('../stories/select');
  require('../stories/datepicker');
  // You can require as many stories as you need.
}

addDecorator(WithExample);
addDecorator(withKnobs)

configure(loadStories, module);

const WrapMuiThemeProvider = (story) => {
  //hack so hot reload still working
  try {
    injectTapEventPlugin()
  } catch (e) {

  }
    
  return (
    
      {story()}
    
  )
}

addDecorator(WrapMuiThemeProvider)

function loadStories() {
  require('../stories/header.js')

  require('../stories/auth.js')

  require('../stories/TimeEntryInput.js')
  require('../stories/TimeEntryListItem.js')
  require('../stories/TimeEntryListItemsByDay.js')

  require('../stories/ReportFilter.js')

  require('../stories/ColorPicker.js')
  require('../stories/CreateTagForm.js')
  require('../stories/AddTagButton.js')

import { configure, addDecorator } from '@kadira/storybook';
import './base.scss';
import centered from '@kadira/react-storybook-decorator-centered';

addDecorator(centered);

function loadStories () {
  require('../stories/Switch.story');
  require('../stories/Radio.story');
  require('../stories/Range.story');
  require('../stories/CheckBox.story');
  require('../stories/AutoComplete.story');
  require('../stories/Count.story');
  require('../stories/InputRange.story');
  require('../stories/Group.story');
}

configure(loadStories, module);

import { configure, addDecorator } from '@kadira/storybook';
import GithubCorner from '@personare/react-storybook-decorator-github-corner';

addDecorator(GithubCorner);

function loadStories() {
  require('../src/FreshdeskWidget.story');
}

configure(loadStories, module);

import { configure, addDecorator, setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';
import GithubCorner from '@personare/react-storybook-decorator-github-corner';

addDecorator(GithubCorner);

setAddon(infoAddon);

function loadStories() {
  require('../stories/index.jsx');
}

configure(loadStories, module);

import React from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
import centered from '@kadira/react-storybook-decorator-centered';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import muiTheme from 'styles/muiTheme';
import '../src/styles/core.scss';

injectTapEventPlugin();
const rootStories = require.context('./stories/', true, /\.js$/);
const srcStories = require.context('../src/', true, /\.story\.js$/);
function loadStories() {
  rootStories.keys().forEach(rootStories);
  srcStories.keys().forEach(srcStories);
}

addDecorator(centered);
addDecorator((story) => (
  
    {story()}
  
));

configure(loadStories, module);