How to use the storybook-readme.withReadme function in storybook-readme

import { configure, addDecorator } from '@storybook/vue'
import { setOptions as masterOptions } from '@storybook/addon-options'
import { setDefaults as infoOptions } from '@storybook/addon-info'
import { withDocs, withReadme } from 'storybook-readme'
import { withConsole } from '@storybook/addon-console'
import { withKnobs } from '@storybook/addon-knobs/dist/vue'

// import centered from '@storybook/addon-centered'

import Readme from '../README.md'
import Footer from '../FOOTER.md'

// const optionsCallback = (options) => ({ panelExclude: [...options.panelExclude, /Warning/] })
// addDecorator((storyFn, context) => withConsole(optionsCallback)(storyFn)(context))

addDecorator(withReadme(Readme))
withDocs.addFooter(Footer)

/** WIP: @since https://github.com/storybooks/storybook/issues/2560 so wait to resolve 
@func addDecorator(withKnobs)
*/

// addDecorator(centered) // BUG: Cannot add property components, object is not extensible (Vue Component not supported)
masterOptions({
  name: 'vue-authoring-template',
  url: '#',
  showLeftPanel: true,
  downPanelInRight: true,
  hierarchySeparator: /\/|\./
})

/** BUG: Vue Component not yet supported

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withReadme } from 'storybook-readme';

import Readme from './README.md';
import { Tab, TabContainer } from './Tab';
import { Card, CardSection } from '../Card';

const stories = storiesOf('Components|Tab', module).addDecorator(withReadme(Readme));

const StoryTab = () => {
  const [state, setState] = React.useState(0);

  return (
    
      
         setState(0)} active={state === 0}>
          Lions
        
         setState(1)} active={state === 1}>
          Tigers
        
         setState(2)} active={state === 2}>
          Bears

{'sm={3}'}
        
        
          {'sm={3}'}
        
        
          {'sm={6}'}
        
      
    
  ))))
  .add('Advanced', withReadme(GridReadme, withDocs(GridAdvancedDocs, () => (
    
      
        
          {'sm={12} md={8}'}
        
        
          {'sm={6} md={4}'}
        
      
      
        
          {'xs={6} md={4}'}
        
        
          {'xs={6} md={4}'}

import { host } from 'storybook-host';
import { withReadme } from 'storybook-readme';
import { Input } from './input';
import README from './README.md';

storiesOf('Components/Inputs/Input', module)
  .addDecorator(
    host({
      title: 'Input component',
      align: 'center middle',
      backdrop: 'rgba(70, 69, 71, 0.2)',
      height: 30,
      width: 300,
    }),
  )
  .addDecorator(withReadme(README))
  .add('default state', () =&gt; <input>)
  .add('with placeholder', () =&gt; <input placeholder="Placeholder test">)
  .add('with predefined value', () =&gt; <input value="Predefined text">)
  .add('with predefined value &amp; readonly', () =&gt; <input value="Predefined text" readonly="">)
  .add('with value &amp; type number', () =&gt; <input value="12345" type="number">)
  .add('with value &amp; type password', () =&gt; <input value="12345" type="password">)
  .add('max length (10)', () =&gt; <input maxlength="10">)
  .add('disabled', () =&gt; <input disabled="">)
  .add('with actions', () =&gt; (
    <input>

<button disabled="{!fs.fullScreen}">
          {'Close'}
        </button>
      
      <h3>Fullscreen</h3>
      <pre>{JSON.stringify(fs, null, 2)}</pre>
      <h3>Fullscreen Browser</h3>
      <pre>{JSON.stringify(fsb, null, 2)}</pre>
    
  )
}

storiesOf('FullScreen', module).add(
  'Default',
  withReadme(readme, () =&gt; )
)

<span>{zipcode}</span>
  
);
const veryLongRenderer = () =&gt; (
  
    <span>
      {Array(100)
        .fill("VeryLongWord")
        .join("")}
    </span>
  
);

storiesOf("Table/CheckboxTable", module)
  .addDecorator(withReadme([readme]))
  .addParameters({
    info: {
      propTablesExclude: [CheckboxTableHelper],
      propTables: [CheckboxTable, Column]
    }
  })
  .add("default", () =&gt; (
    
      name}
        cellRenderer={nameCellRenderer}
        growToFill={true}
      /&gt;
      role}
        cellRenderer={roleCellRenderer}

min: 0,
            max: 5,
            step: 1,
          })}
      ordered={boolean('Ordered', false)}
    >
      <span>This just needs to be an element of some type</span>
      <span>It can be nearly anything</span>
      <span>It will inherit styles though</span>
      <span>So you are responsible for taking care of that</span>
    
  )));

storiesOf('ListHeader', module)
  .addDecorator(withKnobs)
  .add('interactive', readme(ListHeaderRM, () =&gt; (
    
        At the top of a list
    
  )));

import { MostFailedTests } from './mostFailedTests';
import { failedTests, state } from './data';
import README from './README.md';

storiesOf('Components/Widgets/Tables/MostFailedTests', module)
  .addDecorator(
    host({
      title: 'Most Failed test-cases widget',
      align: 'center middle',
      backdrop: 'rgba(70, 69, 71, 0.2)',
      background: '#fff',
      height: 300,
      width: '100%',
    }),
  )
  .addDecorator(withReadme(README))
  .add('with required props: launch, issueType, tests, nameClickHandler', () => (
    
      
    
  ));

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withReadme } from 'storybook-readme';
import cn from 'classnames';

import { Tooltip, TooltipPlacement } from './Tooltip';
import { Input } from '../Input';
import Readme from './README.md';
import styles from '../../../../stories/styles/stories.scss';

const stories = storiesOf('Components|Tooltip', module).addDecorator(withReadme(Readme));

const placements: TooltipPlacement[] = [
  'top',
  'top-start',
  'top-end',
  'bottom',
  'bottom-start',
  'bottom-end',
  'left',
  'right',
];

stories.add(
  'Types',
  () => (
    <div></div>

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withReadme } from 'storybook-readme';

import DeterminateProgress from './examples/Determinate';
import IndeterminateProgress from './examples/Indeterminate';
import StaticProgress from './examples/Static';

import { Heading2, Heading3, TextContent } from '../Text';
import { Box } from '../Core';
import Readme from './README.md';

const stories = storiesOf('Components|Progress', module).addDecorator(withReadme(Readme));

stories.add('Linear', () => (
  
    Progress - linear
    Determinate
    
      
    
    Indeterminate
    
      
    
    Static