How to use storybook-readme - 10 common examples

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

const success = boolean('Success', false);

    return {
      components: {
        MyButton,
      },
      template: `My Button`,
    };
  });

// withReadme and withDocs
storiesOf('withDocs and withReadme', module)
  .addDecorator(withKnobs)
  .addDecorator(withDocs(ButtonDocs))
  .addDecorator(withReadme(ButtonReadme))
  .add('Button', () => {
    const warning = boolean('Warning', false);
    const success = boolean('Success', false);

    return {
      components: {
        MyButton,
      },
      template: `My Button`,
    };
  });

// withDocs

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
infoOptions({

Box,
  Button,
  DropDownButton,
  Fixed,
  Flex,
  Heading,
  Provider,
  Txt,
  Link
} from '../../'
import Readme from './README.md'

console.log({ Badge })

storiesOf('Core/Tooltips', module)
  .addDecorator(withReadme(Readme))
  .addDecorator(withScreenshot())
  .add('Standard', () => {
    return (
      
        
          <button>
            Tooltip on top
          </button>

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
    
  )));