https://github.com/faebeee/storybook-auto-events

Annoyed to always add all events to your story so that they appear in the Actions panel? This is where storybook-auto-events comes in handy. It will automatically detect all events thrown in your component and create an event listener for exactly that event.
https://github.com/faebeee/storybook-auto-events

development documentation storybook tools

Last synced: about 1 month ago
JSON representation

Annoyed to always add all events to your story so that they appear in the Actions panel? This is where storybook-auto-events comes in handy. It will automatically detect all events thrown in your component and create an event listener for exactly that event.

• Host: GitHub
• URL: https://github.com/faebeee/storybook-auto-events
• Owner: faebeee
• Created: 2021-03-24T11:19:53.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-03-24T14:14:37.000Z (over 3 years ago)
• Last Synced: 2024-10-12T10:31:34.895Z (about 1 month ago)
• Topics: development, documentation, storybook, tools
• Language: JavaScript
• Homepage:
• Size: 21.5 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# storybook-auto-events

Annoyed to always add all events to your story so that they appear in the `Actions` panel?

This is where `storybook-auto-events` comes in handy. It will automatically detect all events

thrown in your component and create an event listener for exactly that event.

## Install

    

    npm i storybook-auto-events

## Setup

in your `.storybook/preview.js` add a new `decorator`

    // File: .storybook/preview.js

    import withEvents from 'storybook-auto-events';

    export const decorators = [

        withEvents,

        storybookAxiosDecorator(getAxios()),

    ];

## Usage

Add a new parameter in your story named `events`. `Events` is an object which holds a list of handlers with the corresponding

event name as the key.

Add those events to the story context via `data` or a `computed` property and finally bind all events to your component

via `v-on="events"`

    //select-input.stories.js

    export const IncludeExclude = (args, { argTypes, events }) => ({

        components: { SelectInput },

        props: Object.keys(argTypes),

        data: () => ({

            events,

        }),

        template: `

            `,

    });