2019-05-01 17:58:02 -04:00

73 lines
1.8 KiB
JavaScript

import React from 'react';
import { Consumer } from '@storybook/api';
import { Provider } from '@storybook/ui';
import createChannel from '@storybook/channel-websocket';
import addons from '@storybook/addons';
import Events from '@storybook/core-events';
import uuid from 'uuid';
import PreviewHelp from './components/PreviewHelp';
const mapper = ({ state, api }) => ({
api,
storiesHash: state.storiesHash,
storyId: state.storyId,
});
export default class ReactProvider extends Provider {
constructor({ url: domain, options }) {
super();
const { secured, host, port } = options;
const websocketType = secured ? 'wss' : 'ws';
let url = `${websocketType}://${domain}`;
if (options.manualId) {
this.pairedId = uuid();
url += `/pairedId=${this.pairedId}`;
}
const channel = this.channel || createChannel({ url });
addons.setChannel(channel);
channel.emit(Events.CHANNEL_CREATED, {
host,
pairedId: this.pairedId,
port,
secured,
});
this.addons = addons;
this.channel = channel;
this.options = options;
}
getElements(type) {
return addons.getElements(type);
}
renderPreview() {
return (
<Consumer filter={mapper} pure>
{({ storiesHash, storyId, api }) => {
if (storiesHash[storyId]) {
const { kind, story } = storiesHash[storyId];
api.emit(Events.SET_CURRENT_STORY, { kind, story });
}
return <PreviewHelp />;
}}
</Consumer>
);
}
handleAPI(api) {
addons.loadAddons(api);
api.on(Events.STORY_CHANGED, () => {
api.emit(Events.SET_CURRENT_STORY, this.selection);
});
api.on(Events.GET_CURRENT_STORY, () => {
api.emit(Events.SET_CURRENT_STORY, this.selection);
});
api.emit(Events.GET_STORIES);
}
}