mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 18:31:08 +08:00
95b8cadc3a
# Conflicts: # addons/actions/package.json # addons/backgrounds/package.json # addons/cssresources/package.json # addons/events/package.json # addons/google-analytics/package.json # addons/info/package.json # addons/jest/package.json # addons/ondevice-backgrounds/package.json # addons/ondevice-knobs/package.json # addons/ondevice-notes/package.json # addons/options/package.json # addons/storyshots/storyshots-core/package.json # addons/storyshots/storyshots-puppeteer/package.json # addons/storysource/package.json # addons/viewport/package.json # app/ember/package.json # examples/angular-cli/package.json # examples/cra-kitchen-sink/package.json # examples/cra-ts-kitchen-sink/package.json # examples/ember-cli/package.json # examples/mithril-kitchen-sink/package.json # examples/official-storybook/package.json # examples/riot-kitchen-sink/package.json # examples/vue-kitchen-sink/package.json # lib/core/package.json # yarn.lock
Storybook Addon Events
This storybook (source) addon allows you to add events for your stories.
Storybook Addon Events Live Demo
Getting Started
npm i --save-dev @storybook/addon-events
Then create a file called addons.js in your storybook config.
Add following content to it:
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-events/register';
Then write your stories like this:
import { storiesOf } from '@storybook/react';
import withEvents from '@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(
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],
},
],
},
]
})
)
.add('Logger', () => <Logger emiter={emiter} />);