GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-21 05:02:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Addon-events support

Browse Source
This commit is contained in:
Hypnosphi 2018-05-04 02:57:44 +03:00
parent 71f72f079d
commit bf86c0c13e
8 changed files with 167 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ADDONS_SUPPORT.md
View File

@ -6,7 +6,7 @@
|[actions](addons/actions) |+|+|+|+|+|+|+|
|[backgrounds](addons/backgrounds) |+| | | | |+|+|
|[centered](addons/centered) |+| |+| | |+|+|
|[events](addons/events) |+| | | | | | |
|[events](addons/events) |+| | | | | |+|
|[graphql](addons/graphql) |+| | | | | | |
|[info](addons/info) |+| | | | | | |
|[jest](addons/jest) |+| | | | | | |

1
addons/events/html.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/html');

1
addons/events/package.json
View File

@ -20,6 +20,7 @@
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.4",
"@storybook/core-events": "4.0.0-alpha.4",
"babel-runtime": "^6.26.0",
"format-json": "^1.0.3",
"prop-types": "^15.6.1",

27
addons/events/src/html.js Normal file
View File

@ -0,0 +1,27 @@
import addons from '@storybook/addons';
import CoreEvents from '@storybook/core-events';
import { EVENTS } from './constants';
let prevEvents;
let currentEmit;
const onEmit = event => {
currentEmit(event.name, event.payload);
};
const subscription = () => {
const channel = addons.getChannel();
channel.on(EVENTS.EMIT, onEmit);
return () => channel.removeListener(EVENTS.EMIT, onEmit);
};
export default ({ emit, events }) => story => {
if (prevEvents !== events) {
addons.getChannel().emit(EVENTS.ADD, events);
prevEvents = events;
}
currentEmit = emit;
addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
return story();
};

1
examples/html-kitchen-sink/.storybook/addons.js
View File

@ -1,6 +1,7 @@
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-events/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';

5
examples/html-kitchen-sink/package.json
View File

@ -13,10 +13,12 @@
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@storybook/addons": "^4.0.0-alpha.3",
"@storybook/addon-a11y": "^4.0.0-alpha.3",
"@storybook/addon-actions": "^4.0.0-alpha.3",
"@storybook/addon-backgrounds": "^4.0.0-alpha.3",
"@storybook/addon-centered": "^4.0.0-alpha.3",
"@storybook/addon-events": "^4.0.0-alpha.3",
"@storybook/addon-knobs": "^4.0.0-alpha.3",
"@storybook/addon-links": "^4.0.0-alpha.3",
"@storybook/addon-notes": "^4.0.0-alpha.3",
@ -25,9 +27,12 @@
"@storybook/addon-storysource": "^4.0.0-alpha.3",
"@storybook/addon-viewport": "^4.0.0-alpha.3",
"@storybook/core": "^4.0.0-alpha.3",
"@storybook/core-events": "^4.0.0-alpha.3",
"@storybook/html": "^4.0.0-alpha.3",
"babel-core": "^6.26.0",
"babel-runtime": "^6.26.0",
"eventemitter3": "^3.1.0",
"format-json": "^1.0.3",
"global": "^4.3.2"
}
}

16
examples/html-kitchen-sink/stories/addon-events.css Normal file
View File

@ -0,0 +1,16 @@
.wrapper {
padding: 20px;
font-family:
-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
"Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
color: rgb(51, 51, 51);
}
.title {
margin: 0;
}
.item {
list-style: none;
margin-bottom: 10px;
}

115
examples/html-kitchen-sink/stories/addon-events.stories.js Normal file
View File

@ -0,0 +1,115 @@
import EventEmitter from 'eventemitter3';
import { storiesOf } from '@storybook/html';
import addons from '@storybook/addons';
import CoreEvents from '@storybook/core-events';
import json from 'format-json';
import withEvents from '@storybook/addon-events/html';
import './addon-events.css';
const TEST_EVENTS = {
TEST_EVENT_1: 'test-event-1',
TEST_EVENT_2: 'test-event-2',
TEST_EVENT_3: 'test-event-3',
TEST_EVENT_4: 'test-event-4',
};
const emitter = new EventEmitter();
const emit = emitter.emit.bind(emitter);
const events = [];
const eventHandlers = Object.values(TEST_EVENTS).map(name => ({
name,
handler: payload => {
events.push({ name, payload });
addons.getChannel().emit(CoreEvents.FORCE_RE_RENDER);
},
}));
const subscription = () => {
eventHandlers.forEach(({ name, handler }) => emitter.on(name, handler));
return () => eventHandlers.forEach(({ name, handler }) => emitter.removeListener(name, handler));
};
storiesOf('Addons|Events', module)
.addDecorator(
withEvents({
emit,
events: [
{
name: TEST_EVENTS.TEST_EVENT_1,
title: 'Test event 1',
payload: 0,
},
{
name: TEST_EVENTS.TEST_EVENT_2,
title: 'Test event 2',
payload: 'Test event 2',
},
{
name: TEST_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: TEST_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],
},
],
},
],
})
)
.addDecorator(story => {
addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
return story();
})
.add(
'Logger',
() => `
<div class="wrapper">
<h1 class="title">Logger</h1>
<dl>
${events
.map(
({ name, payload }) => `
<div class="item">
<dt>
<b>Event name:</b> ${name}
</dt>
<dd>
<b>Event payload:</b> ${json.plain(payload)}
</dd>
</div>
`
)
.join('')}
</dl>
</div>
`
);