Package Exports

@storybook/addon-events
@storybook/addon-events/register

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/addon-events) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Addon Events

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

Framework Support

Storybook Addon Events Live Demo

Getting Started

npm i --save-dev @storybook/addon-events event-emitter

within .storybook/main.js:

module.exports = {
  addons: ['@storybook/addon-events']
}

Then write your stories like this:

import withEvents from '@storybook/addon-events';
import EventEmitter from 'event-emitter';

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

const emitter = new EventEmitter();
const emit = emitter.emit.bind(emitter);

export default {
  title: 'withEvents',
  decorators: [
    withEvents({
      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],
            },
          ],
        },
      ]
    }),
  ],
}

export const defaultView = () => (
  <Logger emitter={emitter} />
);