How to use the @storybook/react/dist/client.storiesOf function in @storybook/react

import React from 'react';
import PropTypes from 'prop-types';
// Issue in v3.3.3. https://github.com/storybooks/storybook/pull/2604
import { storiesOf, linkTo } from '@storybook/react/dist/client';

// To be converted by postcss via webpack
import 'github-markdown-css/github-markdown.css';

import AppEnabledWikiEditorCodeMirror from '../src/AppEnabledWikiEditorCodeMirror';

import logo from '../docs/assets/cattaz.svg';

storiesOf('CodeMirror', module)
  .add('no sync', () =>  `\`\`\`${s}\n\`\`\``).join('\n\n')} />)
  .add('sync in room1', () => )
  .add('sync in room2', () => );

function WikiNavigationPage(props) {
  return (
    <div>
      <div>
        <a href="#dummy"><img height="33" width="100" alt="cattaz" src="{logo}"></a>
        <span style="{{">{props.name}</span>
      </div>
      
    </div>);
}
WikiNavigationPage.propTypes = {
  name: PropTypes.string.isRequired,

function WikiNavigationPage(props) {
  return (
    <div>
      <div>
        <a href="#dummy"><img height="33" width="100" alt="cattaz" src="{logo}"></a>
        <span style="{{">{props.name}</span>
      </div>
      
    </div>);
}
WikiNavigationPage.propTypes = {
  name: PropTypes.string.isRequired,
};

storiesOf('Wiki navigation', module)
  .add('index', () =&gt; (
    <div>
      <h1><img width="640" alt="cattaz" src="{logo}"></h1>
      <h2>List of pages</h2>
      <ul>
        <li><a href="#dummy">page1</a></li>
        <li><a href="#dummy">page2</a></li>
      </ul>
      <div>
        Create a new page: <input placeholder="new page name" type="text"><input value="Create" type="button">
      </div>
    </div>))
  .add('page1', () =&gt; )
  .add('page2', () =&gt; )
  .add('page3', () =&gt; );

<div>
      <h1><img width="640" alt="cattaz" src="{logo}"></h1>
      <h2>List of pages</h2>
      <ul>
        <li><a href="#dummy">page1</a></li>
        <li><a href="#dummy">page2</a></li>
      </ul>
      <div>
        Create a new page: <input placeholder="new page name" type="text"><input value="Create" type="button">
      </div>
    </div>))
  .add('page1', () =&gt; )
  .add('page2', () =&gt; )
  .add('page3', () =&gt; );

storiesOf('Kanban usecase', module)
  .add('markdown', () =&gt; (
    ))
  .add('app', () =&gt; (