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

/* eslint-disable import/no-extraneous-dependencies */

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { setOptions } from '@kadira/storybook-addon-options';

import ThemeSwitcher from './ThemeSwitcher';
import App from './App';

storiesOf('Theme Switcher', module)
    .addDecorator((story) => {
        const storyKind = story();
        return (
          <div style="{{">
            <div style="{{">
              {storyKind}
            </div>
          </div>);
    })
    .add('Component', () =&gt; {
        setOptions({
            name: 'React Theme Provider',
            url: 'https://github.com/sm-react/react-theme-provider',
        });
        return (<div></div>);
    })

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    
  ));

storiesOf('Button', module)
  .add('with text', () => (
    <button>Hello Button</button>
  ))
  .add('with some emoji', () =&gt; (
    <button>😀 😎 👍 💯</button>
  ));

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import { Localization } from '../../localization';
import SubHeader from './sub-header';

storiesOf('Sub Header', module)
  .add('View on map', () =>
    
  )
  .add('View on list', () =>
    
  );

duration_unit: 'm',
    contract_type: 'CALL',
    basis: 'stake',
};

const fakeTrade2 = {
    date_start: 1465873888 + 6000,
    date_expiry: 1465873888 + 100000,
    duration: 2,
    amount: 50,
    duration_unit: 'm',
    contract_type: 'CALL',
    basis: 'stake',
};

storiesOf('In future', module)
    .add('Start later simple', () =>
        
    )
    .add('Start later much more data', () =>
        
    )
    .add('Exit later much more data', () =>

import React from 'react';
import { storiesOf } from '@kadira/storybook';

import { Tabs, Tab, RoutedTabs, ScrollableRoutedTabs } from '../../src';

const stories = storiesOf('Tabs', module);

stories.add('default', () =>
  <div style="{styles.wrapper}">
    
      
        <div style="{styles.tabComponent}">Component 1</div>
      
      
        <div style="{styles.tabComponent}">Component 2</div>
      
      
        <div style="{styles.tabComponent}">Component 3</div>
      
    
  </div>
);

import React from 'react';
import {storiesOf, action} from '@kadira/storybook';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from '../Header';

storiesOf('Header', module)
  .add('default', () => {
    'use strict';
    return <header>;
  });
</header>

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { styles } from './shared';

storiesOf('common.button', module)
  .addDecorator(story => (
    <div style="{styles.root}">
      {story()}
    </div>
  ))
  .add('normal', () =&gt; (
    <button type="button">Click</button>
  ));

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { Label } from '.';

storiesOf('Label', module)
  .addDecorator(story =>
    <div style="{{">{story()}</div>
  )
  .add('default', () =&gt; (
    <label>old</label>
  ))
  .add('with background color', () =&gt; (
    <label background="green">new</label>
  ));

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Logo } from '../index';

storiesOf('Logo', module)
  .add('default view', () => (
    
  ))
  .add('light blue', () => (
    
  ))
  .add('black', () => (
    
  ))
  .add('light black', () => (
    
  ))
  .add('green', () => (
    
  ))
  .add('light green', () => (

import React from 'react';
import {storiesOf, action} from '@kadira/storybook';
import IconButton from './index.js';

storiesOf('IconButton', module)
    .add('default', () => (
        <div>
            
        </div>
    ));