How to use @storybook/riot - 10 common examples

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: ['😀 😎 👍 💯'],
  }));

import { configure } from '@storybook/riot';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

import { load, addParameters } from '@storybook/riot';

addParameters({
  options: {
    hierarchyRootSeparator: /\|/,
  },
});

// require('../src/stories');
load(require.context('../src/stories', true, /\.stories\.js$/), module);

export const toStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });

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

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

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