Skip to content

Latest commit

 

History

History
 
 

events

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

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} />
);