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

import { mount, storiesOf } from '@storybook/riot';
import { linkTo } from '@storybook/addon-links';

/* eslint-disable-next-line import/no-webpack-loader-syntax */
import MyButtonRaw from 'raw-loader!./MyButton.tag';
import './MyButton.tag';
import './Welcome.tag';

storiesOf('Welcome', module).add('to Storybook', () =>
  mount('welcome', { showApp: () => linkTo('Button') })
);

storiesOf('Button', module)
  .add('with text', () => ({
    tags: ['Hello Button'],
  }))
  .add('with scenario', () => ({
    tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
    template: 'With scenario',
  }))
  .add('with some emoji', () => ({
    tags: ['😀 😎 👍 💯'],
  }));

import { mount, storiesOf } from '@storybook/riot';
import { linkTo } from '@storybook/addon-links';
import ButtonRaw from './Button.txt';
import './Welcome.tag';
import '../App.tag';

storiesOf('Welcome', module).add('Welcome', () =>
  mount('welcome', { goToButton: linkTo('Button') })
);

storiesOf('App', module).add('App', () => mount('app', {}));

storiesOf('Button', module)
  // Works if riot.component is called in the config.js in .storybook
  .add('rounded', () => ({
    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
    template: 'A Button with rounded edges',
  }))
  .add('square', () => ({
    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
    template: 'A Button with square edges',
  }));

import { mount, storiesOf } from '@storybook/riot';
import { linkTo } from '@storybook/addon-links';
import ButtonRaw from './Button.txt';
import './Welcome.tag';
import '../App.tag';

storiesOf('Welcome', module).add('Welcome', () =>
  mount('welcome', { goToButton: linkTo('Button') })
);

storiesOf('App', module).add('App', () => mount('app', {}));

storiesOf('Button', module)
  // Works if riot.component is called in the config.js in .storybook
  .add('rounded', () => ({
    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
    template: 'A Button with rounded edges',
  }))
  .add('square', () => ({
    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
    template: 'A Button with square edges',
  }));

import { mount, storiesOf } from '@storybook/riot';
import { linkTo } from '@storybook/addon-links';

/* eslint-disable-next-line import/no-webpack-loader-syntax */
import MyButtonRaw from 'raw-loader!./MyButton.tag';
import './MyButton.tag';
import './Welcome.tag';

storiesOf('Welcome', module).add('to Storybook', () =>
  mount('welcome', { showApp: () => linkTo('Button') })
);

storiesOf('Button', module)
  .add('with text', () => ({
    tags: ['Hello Button'],
  }))
  .add('with scenario', () => ({
    tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
    template: 'With scenario',
  }))
  .add('with some emoji', () => ({
    tags: ['😀 😎 👍 💯'],
  }));

storiesOf('App', module).add('App', () => mount('app', {}));

import { tag, mount, storiesOf, asCompiledCode } from '@storybook/riot';
import SimpleTestRaw from './SimpleTest.txt';
import './AnotherTest.tag';

const simpleTestCompiled = asCompiledCode(SimpleTestRaw);

storiesOf('Story|How to create a story', module)
  .add(
    'built with tag',
    () =>
      tag('test', '<div>simple test ({ opts.value })</div>', '', '', () =&gt; {}) &amp;&amp;
      mount('test', { value: 'with a parameter' })
  )

  .add('built as string', () =&gt; ({ tags: ['<div>simple test</div>'] }))

  .add('built from raw import', () =&gt; simpleTestCompiled)

  .add(
    'built from tags and template',
    () =&gt; ({
      tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
      template:

template:
      '',
    tagConstructor: function tagConstructor() {
      this.hacked = true;
    },
  }))

  .add('built from the precompilation', () => mount('anothertest', {}), {
    notes: 'WARN, only works in lower case, never upper case with precompiled templates',
  })

  .add('the mount instruction is not necessary', () => ({ tagName: 'anothertest', opts: {} }))

  .add('the opts value is not necessary', () => ({ tagName: 'anothertest' }));

storiesOf('Story|Nest tags', module)
  .add('Three tags', () => ({
    tags: [
      'Simple titleSimple Content',
      '<h1></h1>',
      '<div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"></div>',
    ],
  }))

  .add('Matriochka', () =&gt; ({
    tags: [
      '<div>Inside tag1:<ul><li></li></ul></div>',
      '<div>Inside tag2:<ul><li></li></ul></div>',
      '<div>Inside tag3:<ul><li></li></ul></div>',
      '<div>Inside tag4:<ul><li></li></ul></div>',
      '<div>Inside tag5:<ul><li></li></ul></div>',
    ],