How to use the storybook/decorators/storyTemplates.defaultTemplate function in storybook

import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.addWithInfo('Slider', () => (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">&nbsp;https://github.com/seiyria/bootstrap-slider</a>
    </p>
    <br>
    <br>

    <div>
      </div></div>

import { withKnobs } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.add('Slider', () => (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">&nbsp;https://github.com/seiyria/bootstrap-slider</a>
    </p>
    <br>
    <br>

    <div>
      </div></div>

import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { TabContainer, Nav, NavItem, NavDropdown, MenuItem, TabPane, TabContent } from '../../index';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Tabs`, module);
const description = (
  <p>
    This component is based on React Bootstrap Tabs component. See{' '}
    <a href="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}tabs/`}">React Bootstrap Docs</a> for complete Tabs component
    documentation.
  </p>
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Tabs',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#tabs`,
    description
  })
);

stories.add(
  'Basic Tabs',
  withInfo()(() =&gt; {
    const bsClass = classNames('nav nav-tabs', {
      'nav-justified': boolean('Justified', false)
    });
    const t1Disabled = boolean('Tab 1 Disabled', false);
    const t1Title = (

import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Menu Item`, module);

const description = (
  <p>
    This component is based on React Bootstrap MenuItem component. This component represents a menu item in a dropdown.
    See <a href="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}dropdowns/#menu-items`}">React Bootstrap Docs</a> for
    complete MenuItem component documentation.
  </p>
);

stories.addDecorator(
  defaultTemplate({
    title: 'MenuItem',
    description
  })
);

stories.add(
  'MenuItem',
  withInfo()(() =&gt; (
    <div>
      
        <menuitem>Header</menuitem>
        <menuitem>link</menuitem>
        <menuitem>
        <menuitem>Header</menuitem>
        <menuitem>link</menuitem>
        <menuitem disabled="">disabled</menuitem></menuitem></div>

import {
  MockToolbarExample,
  mockToolbarExampleSource
} from './__mocks__/mockToolbarExample';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${
    STORYBOOK_CATEGORY.FORMS_AND_CONTROLS
  }/Toolbar`,
  module
);

stories.addDecorator(
  defaultTemplate({
    title: 'Toolbar',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}toolbar/`
  })
);

stories.add(
  'Toolbar',
  withInfo({
    source: false,
    propTables: [
      Toolbar,
      ToolbarResults,
      ToolbarRightContent,
      ToolbarFind,
      ToolbarViewSelector
    ],

import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import {
  storybookPackageName,
  DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Button, OverlayTrigger, Popover } from '../../index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Popover`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Popover',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#popover`,
    reactBootstrapDocumentationLink: `${
      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
    }popovers/`
  })
);

stories.add(
  'Popover',
  withInfo()(() => {
    const title = (
      <div>
    );</div>

STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${
    STORYBOOK_CATEGORY.FORMS_AND_CONTROLS
  }/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.addWithInfo('Slider', () => (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and
      available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">
        &nbsp;https://github.com/seiyria/bootstrap-slider
      </a>
    </p>
    <br>
    <br></div>

import {
  storybookPackageName,
  DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Spinner } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Spinner`,
  module
);

stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Spinner',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#spinner`
  })
);

stories.add(
  'Spinner',
  withInfo()(() => {
    const loading = boolean('Loading', true);
    const inline = boolean('Inline', false);
    const inverse = boolean('Inverse', false);
    const size = select('Size', ['lg', 'md', 'sm', 'xs'], 'md');
    const wrapperStyle = {
      backgroundColor: inverse ? 'black' : 'white',
      color: inverse ? 'white' : 'black',
      padding: '15px'

getManagedPageWithErrorsOnTopProps,
  getManagedPageProps,
  getBuildYourOwnPageProps,
  createLogoList,
  getManagedSocialLoginPageProps,
  getBuildYourOwnSocialLoginPageProps
} from './LoginPageFixtures';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.APPLICATION_FRAMEWORK}/Login Page`,
  module
);

stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Login Page',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_APP_FRAMEWORK}login-page`
  })
);

stories.add('Managed Login Page with errors display on top of the form', () => (
  
));

stories.add('Managed Login Page with errors display under form inputs', () => );

stories.add('Build Your own Basic Login Page', () => LoginPage.Pattern(getBuildYourOwnPageProps()));

stories.add('Managed Social Login Page', () => {
  const logoListCopy = createLogoList();
  const listSize = number('Social List Size', 12);

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Badge } from '../Badge';
import { ListGroup, ListGroupItem } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/List Group`, module);

stories.addDecorator(
  defaultTemplate({
    title: 'ListGroup',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#list-group`,
    reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}list-group/`
  })
);

stories.add(
  'List Group',
  withInfo()(() => (
    <div>
      <h2>Basic</h2>
      
        Cras justo odio
        Dapibus ac facilisis in
        Morbi leo risus
        Porta ac consectetur ac</div>