3.4.3 • Published 6 years ago

@nlabs/storybook-addon-events v3.4.3

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

Storybook Addon Events

Build Status on CircleCI CodeFactor Known Vulnerabilities BCH compliance codecov


This storybook (source) addon allows you to add events for your stories.

Storybook Addon Events Example Storybook Addon Events Live Demo

Getting Started

npm i --save-dev @nlabs/storybook-addon-events

Then create a file called addons.js in your storybook config.

Add following content to it:

import '@nlabs/storybook-addon-actions';
import '@nlabs/storybook-addon-links';
import '@nlabs/storybook-addon-events/register';

Then write your stories like this:

import { storiesOf } from '@nlabs/storybook-react';
import WithEvents from '@nlabs/storybook-addon-events';
import EventEmiter from 'event-emiter';

import Logger from './Logger';
import * as EVENTS from './events';

const emiter = new EventEmiter();
const emit = emiter.emit.bind(emiter);


storiesOf('WithEvents', module)
  .addDecorator(getStory => (
    <WithEvents
      emit={emit}
      events={[
        {
          name: EVENTS.TEST_EVENT_1,
          title: 'Test event 1',
          payload: 0,
        },
        {
          name: EVENTS.TEST_EVENT_2,
          title: 'Test event 2',
          payload: 'asdasdad asdasdasd',
        },
        {
          name: EVENTS.TEST_EVENT_3,
          title: 'Test event 3',
          payload: {
            string: 'value',
            number: 123,
            array: [1, 2, 3],
            object: {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
          },
        },
        {
          name: EVENTS.TEST_EVENT_4,
          title: 'Test event 4',
          payload: [
            {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
            {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
            {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
          ],
        },
      ]}
    >
      {getStory()}
    </WithEvents>
  ))
  .add('Logger', () => <Logger emiter={emiter} />);