storybook-addon-custom-event-broadcaster

Custom panel tab to send custom events to components.

This addon adds a tab to the addon panel. It has a set of input fields. The input of these fields are used to create a custom event.

Input	functionality
EventName	Name of the event
Data	custom data, to be send in the event
Selector	the selector of the node the event will be fired on
"send"-Button	Push to send the event

Install

npm install storybook-addon-custom-event-broadcaster

Add the addon to the storybook configuration:

// .storybook/main.js
module.exports = {
 ...
  addons: [
   ...
    'storybook-addon-custom-event-broadcaster',
  ],
};

Configuration in your story

To configure your story you need to add an customEventPanel-object to the parameters section. it has one required parameter eventName and two optional parameters eventData,selector. It is analogous to the three input fields.

If the selector-field is empty, the event will be fired on the document-object of the page. if it is filled it will fire the event on the selected node.

// \*.stories.jsx
// example configuration of 3 lines
export default {
  title: "Content/MyStory",
  parameters: {
    customEventPanel: [
      {
        eventName: "event:example",
      },
      {
        eventName: "my:event",
        eventData: {
          opt: 23,
        },
        selector: ".selector",
      },
      {
        eventName: "my:otherevent",
        eventData: {
          foo: 23,
        },
      },
    ],
  },
  argTypes: {},
};

Plugin in Action

I have a example project using this addon on https://github.com/derKuba/stenciljs-tutorial/tree/main/component-lib.

Development scripts

• npm start runs babel in watch mode and starts Storybook
• npm run build build and package your addon code

Switch from TypeScript to JavaScript

Don't want to use TypeScript? We offer a handy eject command: npm run eject-ts

This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.