Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use client api in react native #3036

Merged
merged 4 commits into from
Feb 20, 2018
Merged

Use client api in react native #3036

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
add0964
ClientApi doesn't actually use the channel, so let's not require it
tmeasday Feb 20, 2018
7a70d5c
Use the full `ClientApi` from `@storybook/react-native`
tmeasday Feb 20, 2018
e8ddefc
Missed how this was being used
tmeasday Feb 20, 2018
f1c1d0c
Merge branch 'master' into tmeasday/use-client-api-in-react-native
Hypnosphi Feb 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/react-native/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const preview = new Preview();
export const storiesOf = preview.storiesOf.bind(preview);
export const setAddon = preview.setAddon.bind(preview);
export const addDecorator = preview.addDecorator.bind(preview);
export const clearDecorators = preview.clearDecorators.bind(preview);
export const configure = preview.configure.bind(preview);
export const getStorybook = preview.getStorybook.bind(preview);
export const getStorybookUI = preview.getStorybookUI.bind(preview);
Expand Down
38 changes: 5 additions & 33 deletions app/react-native/src/preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,20 @@ import parse from 'url-parse';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-websocket';
import { EventEmitter } from 'events';
import { StoryStore } from '@storybook/core/client';
import StoryKindApi from './story_kind';
import { StoryStore, ClientApi } from '@storybook/core/client';
import OnDeviceUI from './components/OnDeviceUI';
import StoryView from './components/StoryView';

export default class Preview {
constructor() {
this._addons = {};
this._decorators = [];
this._stories = new StoryStore();
this._events = new EventEmitter();
}

storiesOf(kind, module) {
if (module && module.hot) {
// TODO remove the kind on dispose
}
this._clientApi = new ClientApi({ storyStore: new StoryStore() });

const fileName = module ? module.filename : null;

return new StoryKindApi(this._stories, this._addons, this._decorators, kind, fileName);
}

setAddon(addon) {
Object.assign(this._addons, addon);
}

addDecorator(decorator) {
this._decorators.push(decorator);
['storiesOf', 'setAddon', 'addDecorator', 'clearDecorators', 'getStorybook'].forEach(method => {
this[method] = this._clientApi[method].bind(this._clientApi);
});
}

configure(loadStories, module) {
Expand All @@ -45,19 +30,6 @@ export default class Preview {
}
}

getStorybook() {
return this._stories.getStoryKinds().map(kind => {
const fileName = this._stories.getStoryFileName(kind);

const stories = this._stories.getStories(kind).map(name => {
const render = this._stories.getStory(kind, name);
return { name, render };
});

return { kind, fileName, stories };
});
}

getStorybookUI(params = {}) {
return () => {
let webUrl = null;
Expand Down
32 changes: 0 additions & 32 deletions app/react-native/src/preview/story_kind.js
View file
Open in desktop

This file was deleted.

9 changes: 1 addition & 8 deletions lib/core/src/client/preview/client_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,7 @@ const defaultDecorateStory = (getStory, decorators) =>
);

export default class ClientApi {
constructor({
channel,
storyStore = new StoryStore(),
decorateStory = defaultDecorateStory,
} = {}) {
// channel can be null when running in node
// always check whether channel is available
this._channel = channel;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

channel here is only used by RN?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code (client_api) wasn't previously used by RN.

_channel is always there in existing code that uses the client API, but not used by the client API, so given the way I was going to initialize this code in the RN context (without passing the channel as it doesn't exist yet), I figured we get rid of if from this code, so no-one would try and use it in the future.

constructor({ storyStore = new StoryStore(), decorateStory = defaultDecorateStory } = {}) {
this._storyStore = storyStore;
this._addons = {};
this._globalDecorators = [];
Expand Down