diff --git a/.eslintignore b/.eslintignore
index 73cb24becbf2..af5321f2b3bb 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,6 +10,7 @@ lib/cli/test
scripts/storage
*.bundle.js
*.js.map
+*.d.ts
!.remarkrc.js
!.babelrc.js
@@ -18,7 +19,3 @@ scripts/storage
!.jest.config.js
!.storybook
-REACT_NATIVE
-examples-native
-react-native
-ondevice-*
\ No newline at end of file
diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
index bcf4f1fcac2e..fb7ffbe513dd 100644
--- a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
import React from 'react';
import { Button, View, Text } from 'react-native';
@@ -22,6 +24,7 @@ const theme = {
class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
state = { expanded: false };
+
render() {
const { name, value } = this.props;
const { expanded } = this.state;
@@ -52,7 +55,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
{toggle}
{nameComponent}
- {': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}
+ {`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}
{expanded ? (
@@ -62,7 +65,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
))}
- {']'}
+ ]
) : null}
@@ -71,13 +74,13 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
}
return (
- {'['}
+ [
{value.map((v, i) => (
))}
- {']'}
+ ]
);
}
@@ -89,7 +92,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
{toggle}
{nameComponent}
- {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+ {`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
{expanded ? (
@@ -124,7 +127,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
{toggle}
{nameComponent}
- {': '}
+ :
);
@@ -147,7 +150,7 @@ function Value({ value }: { value: any }) {
if (value instanceof RegExp) {
return (
- {'/' + value.source + '/' + value.flags}
+ {`/${value.source}/${value.flags}`}
);
}
@@ -166,8 +169,9 @@ function Value({ value }: { value: any }) {
);
case 'function':
return [Function];
+ default:
+ return {JSON.stringify(value)};
}
- return {JSON.stringify(value)};
}
export default Inspect;
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.js b/addons/ondevice-backgrounds/src/BackgroundPanel.js
index cd28c6d73c11..3442ecfc04dc 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.js
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types, react/destructuring-assignment, import/no-extraneous-dependencies */
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Events from '@storybook/core-events';
@@ -36,10 +37,6 @@ const Instructions = () => (
);
export default class BackgroundPanel extends Component {
- setBackgroundFromSwatch = background => {
- this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
- };
-
componentDidMount() {
this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
}
@@ -48,6 +45,10 @@ export default class BackgroundPanel extends Component {
this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
}
+ setBackgroundFromSwatch = background => {
+ this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
+ };
+
onStorySelected = selection => {
this.setState({ selection });
};
diff --git a/addons/ondevice-backgrounds/src/container.js b/addons/ondevice-backgrounds/src/container.js
index f5b03964bb15..523e4ae4a31e 100644
--- a/addons/ondevice-backgrounds/src/container.js
+++ b/addons/ondevice-backgrounds/src/container.js
@@ -19,9 +19,9 @@ export default class Container extends React.Component {
channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
}
- onBackgroundChange = (background) => {
+ onBackgroundChange = background => {
this.setState({ background });
- }
+ };
render() {
const { background } = this.state;
diff --git a/addons/ondevice-knobs/src/PropForm.js b/addons/ondevice-knobs/src/PropForm.js
index 93770e5e3e71..e0c35334cf1b 100644
--- a/addons/ondevice-knobs/src/PropForm.js
+++ b/addons/ondevice-knobs/src/PropForm.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import { View } from 'react-native';
import PropField from './PropField';
-export default class propForm extends React.Component {
+export default class PropForm extends React.Component {
makeChangeHandler(name, type) {
return value => {
const { onFieldChange } = this.props;
@@ -38,13 +38,13 @@ export default class propForm extends React.Component {
}
}
-propForm.displayName = 'propForm';
+PropForm.displayName = 'PropForm';
-propForm.defaultProps = {
+PropForm.defaultProps = {
knobs: [],
};
-propForm.propTypes = {
+PropForm.propTypes = {
knobs: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string,
diff --git a/addons/ondevice-notes/src/index.js b/addons/ondevice-notes/src/index.js
index 5200b63f8454..28be51837efa 100644
--- a/addons/ondevice-notes/src/index.js
+++ b/addons/ondevice-notes/src/index.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
if (__DEV__) {
console.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
-}
\ No newline at end of file
+}
diff --git a/addons/ondevice-notes/src/register.js b/addons/ondevice-notes/src/register.js
index 1ed3a38bfcdf..b68ccc3a6d52 100644
--- a/addons/ondevice-notes/src/register.js
+++ b/addons/ondevice-notes/src/register.js
@@ -1,3 +1,6 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { View } from 'react-native';
import Markdown from 'react-native-simple-markdown';
@@ -7,10 +10,6 @@ import Events from '@storybook/core-events';
export const PARAM_KEY = `notes`;
class Notes extends React.Component {
- setBackgroundFromSwatch = background => {
- this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
- };
-
componentDidMount() {
this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
}
diff --git a/app/react-native-server/src/client/manager/provider.js b/app/react-native-server/src/client/manager/provider.js
index 334a5a40167f..688ed6f7e833 100644
--- a/app/react-native-server/src/client/manager/provider.js
+++ b/app/react-native-server/src/client/manager/provider.js
@@ -51,8 +51,7 @@ export default class ReactProvider extends Provider {
{({ storiesHash, storyId, api, viewMode }) => {
if (storiesHash[storyId]) {
- const { kind, story } = storiesHash[storyId];
- api.emit(Events.SET_CURRENT_STORY, { kind, story });
+ api.emit(Events.SET_CURRENT_STORY, { storyId });
}
return viewMode === 'story' ? : null;
}}
@@ -62,12 +61,6 @@ export default class ReactProvider extends Provider {
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);
}
}
diff --git a/app/react-native/src/index.ts b/app/react-native/src/index.ts
index 5ab573d3f77e..12381c769198 100644
--- a/app/react-native/src/index.ts
+++ b/app/react-native/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
import Preview from './preview';
const preview = new Preview();
diff --git a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
index 51c49e1e95f9..d368802cdd5f 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
@@ -22,7 +22,9 @@ type Props = {
// To avoid issues we use absolute positioned element with predefined screen size
export default class AbsolutePositionedKeyboardAwareView extends PureComponent {
keyboardDidShowListener: EmitterSubscription;
+
keyboardDidHideListener: EmitterSubscription;
+
keyboardOpen: boolean;
componentWillMount() {
diff --git a/app/react-native/src/preview/components/OnDeviceUI/animation.ts b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
index 4ce7747b158e..f19ef152fd80 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/animation.ts
+++ b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
@@ -1,5 +1,5 @@
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
import { Animated } from 'react-native';
+import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
const PREVIEW_SCALE = 0.3;
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
index e875ec9394bb..5718b0d86e19 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
@@ -8,7 +8,6 @@ import {
TouchableOpacityProps,
} from 'react-native';
import styled from '@emotion/native';
-import Events from '@storybook/core-events';
import addons from '@storybook/addons';
import Channel from '@storybook/channels';
import StoryListView from '../StoryListView';
@@ -36,14 +35,11 @@ interface OnDeviceUIProps {
url?: string;
tabOpen?: number;
isUIHidden?: boolean;
- getInitialStory?: (...args: any[]) => any;
shouldDisableKeyboardAvoidingView?: boolean;
keyboardAvoidingViewVerticalOffset?: number;
}
interface OnDeviceUIState {
- selection: any;
- storyFn: any;
tabOpen: number;
slideBetweenAnimation: boolean;
previewWidth: number;
@@ -64,6 +60,7 @@ const Preview: typeof TouchableOpacity = styled.TouchableOpacity`
export default class OnDeviceUI extends PureComponent {
animatedValue: Animated.Value;
+
channel: Channel;
constructor(props: OnDeviceUIProps) {
@@ -72,8 +69,6 @@ export default class OnDeviceUI extends PureComponent {
this.setState({ previewWidth, previewHeight });
};
@@ -107,24 +84,6 @@ export default class OnDeviceUI extends PureComponent {
- this.forceUpdate();
- };
-
- handleStoryChange = (selection: any) => {
- const { selection: prevSelection } = this.state;
- if (selection.kind === prevSelection.kind && selection.story === prevSelection.story) {
- this.handleToggleTab(PREVIEW);
- }
- this.setState({
- selection: {
- kind: selection.kind,
- story: selection.story,
- },
- storyFn: selection.storyFn,
- });
- };
-
handleToggleTab = (newTabOpen: number) => {
const { tabOpen } = this.state;
if (newTabOpen === tabOpen) {
@@ -155,14 +114,7 @@ export default class OnDeviceUI extends PureComponent
-
+
-
+
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
index f2d03cf9aa9e..7e30ebe39825 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
import React, { PureComponent } from 'react';
import { View, SafeAreaView, StyleSheet } from 'react-native';
import GestureRecognizer, { GestureRecognizerConfig } from 'react-native-swipe-gestures';
diff --git a/app/react-native/src/preview/components/StoryListView/index.tsx b/app/react-native/src/preview/components/StoryListView/index.tsx
index 3f296918c679..22766d87d9aa 100644
--- a/app/react-native/src/preview/components/StoryListView/index.tsx
+++ b/app/react-native/src/preview/components/StoryListView/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
import React, { Component } from 'react';
import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
import styled from '@emotion/native';
@@ -64,8 +65,6 @@ const ListItem: React.FunctionComponent = ({ kind, title, selecte
interface Props {
stories: any;
- selectedKind?: string;
- selectedStory?: string;
}
interface State {
@@ -90,28 +89,35 @@ export default class StoryListView extends Component {
componentDidMount() {
const channel = addons.getChannel();
channel.on(Events.STORY_ADDED, this.handleStoryAdded);
+ channel.on(Events.SELECT_STORY, this.forceReRender);
this.handleStoryAdded();
}
componentWillUnmount() {
const channel = addons.getChannel();
channel.removeListener(Events.STORY_ADDED, this.handleStoryAdded);
+ channel.removeListener(Events.SELECT_STORY, this.forceReRender);
}
+ forceReRender = () => {
+ this.forceUpdate();
+ };
+
handleStoryAdded = () => {
const { stories } = this.props;
if (stories) {
- const data = stories.dumpStoryBook().map(
- (section: any) => ({
- title: section.kind,
- data: section.stories.map((story: any) => ({
- key: story,
- name: story,
- kind: section.kind,
- })),
- }),
- {}
+ const data = Object.values(
+ stories
+ .raw()
+ .reduce((acc: { [kind: string]: { title: string; data: any[] } }, story: any) => {
+ acc[story.kind] = {
+ title: story.kind,
+ data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
+ };
+
+ return acc;
+ }, {})
);
this.setState({ data, originalData: data });
@@ -146,13 +152,13 @@ export default class StoryListView extends Component {
this.setState({ data: filteredData });
};
- changeStory(kind: string, story: string) {
+ changeStory(storyId: string) {
const channel = addons.getChannel();
- channel.emit(Events.SET_CURRENT_STORY, { kind, story });
+ channel.emit(Events.SET_CURRENT_STORY, { storyId });
}
render() {
- const { selectedKind, selectedStory } = this.props;
+ const selectedStory = this.props.stories.getSelection();
const { data } = this.state;
return (
@@ -171,12 +177,12 @@ export default class StoryListView extends Component {
this.changeStory(item.kind, item.name)}
+ selected={item.id === selectedStory.id}
+ onPress={() => this.changeStory(item.id)}
/>
)}
renderSectionHeader={({ section: { title } }) => (
-
+
)}
keyExtractor={(item, index) => item + index}
sections={data}
diff --git a/app/react-native/src/preview/components/StoryView/index.tsx b/app/react-native/src/preview/components/StoryView/index.tsx
index 3318b568773f..7417c9ec1791 100644
--- a/app/react-native/src/preview/components/StoryView/index.tsx
+++ b/app/react-native/src/preview/components/StoryView/index.tsx
@@ -5,15 +5,9 @@ import addons from '@storybook/addons';
import Events from '@storybook/core-events';
interface Props {
- listenToEvents: boolean;
- selection?: any;
- storyFn?: any;
+ stories: any;
url: string;
-}
-
-interface State {
- storyFn?: any;
- selection?: any;
+ onDevice?: boolean;
}
const HelpContainer = styled.View`
@@ -24,33 +18,23 @@ const HelpContainer = styled.View`
justify-content: center;
`;
-export default class StoryView extends Component {
+export default class StoryView extends Component {
componentDidMount() {
- if (this.props.listenToEvents) {
- const channel = addons.getChannel();
- channel.on(Events.SELECT_STORY, this.selectStory);
- channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
- }
+ const channel = addons.getChannel();
+ channel.on(Events.STORY_RENDER, this.forceReRender);
+ channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
}
componentWillUnmount() {
- const { listenToEvents } = this.props;
-
- if (listenToEvents) {
- const channel = addons.getChannel();
- channel.removeListener(Events.SELECT_STORY, this.selectStory);
- channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
- }
+ const channel = addons.getChannel();
+ channel.removeListener(Events.STORY_RENDER, this.forceReRender);
+ channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
}
forceReRender = () => {
this.forceUpdate();
};
- selectStory = (selection: any) => {
- this.setState({ storyFn: selection.storyFn, selection });
- };
-
renderHelp = () => {
const { url } = this.props;
return (
@@ -75,41 +59,24 @@ export default class StoryView extends Component {
);
render() {
- const { listenToEvents } = this.props;
+ const { onDevice, stories } = this.props;
- if (listenToEvents) {
- return this.renderListening();
- } else {
- return this.renderOnDevice();
- }
- }
+ const selection = stories.getSelection();
- renderListening = () => {
- if (!this.state) {
- return null;
- }
- const { storyFn, selection } = this.state;
- const { kind, story } = selection;
+ const { id, storyFn } = selection;
- return storyFn ? (
-
- {storyFn()}
-
- ) : (
- this.renderHelp()
- );
- };
+ if (storyFn) {
+ return (
+
+ {storyFn()}
+
+ );
+ }
- renderOnDevice = () => {
- const { storyFn, selection } = this.props;
- const { kind, story } = selection;
+ if (onDevice) {
+ return this.renderOnDeviceUIHelp();
+ }
- return storyFn ? (
-
- {storyFn()}
-
- ) : (
- this.renderOnDeviceUIHelp()
- );
- };
+ return this.renderHelp();
+ }
}
diff --git a/app/react-native/src/preview/index.tsx b/app/react-native/src/preview/index.tsx
index b45f3b4b454c..c766b3a73a40 100644
--- a/app/react-native/src/preview/index.tsx
+++ b/app/react-native/src/preview/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, no-underscore-dangle */
import React from 'react';
import { AsyncStorage } from 'react-native';
import { ThemeProvider } from 'emotion-theming';
@@ -32,16 +33,19 @@ export type Params = {
} & EmotionProps;
export default class Preview {
- currentStory: any;
_clientApi: ClientApi;
+
_stories: StoryStore;
+
_addons: any;
+
_decorators: any[];
+ _asyncStorageStoryId: string;
+
constructor() {
this._addons = {};
this._decorators = [];
-
this._stories = new StoryStore({});
this._clientApi = new ClientApi({ storyStore: this._stories });
}
@@ -64,9 +68,6 @@ export default class Preview {
const onDeviceUI = params.onDeviceUI !== false;
const { initialSelection, shouldPersistSelection } = params;
- // should the initial story be sent to storybookUI
- // set to true if using disableWebsockets or if connection to WebsocketServer fails.
- let setInitialStory = false;
try {
channel = addons.getChannel();
@@ -78,6 +79,7 @@ export default class Preview {
if (!channel || params.resetStorybook) {
if (onDeviceUI && params.disableWebsockets) {
channel = new Channel({ async: true });
+ this._setInitialStory(initialSelection, shouldPersistSelection);
} else {
const host = getHost(params.host || 'localhost');
const port = `:${params.port || 7007}`;
@@ -93,11 +95,7 @@ export default class Preview {
url,
async: onDeviceUI,
onError: () => {
- // We are both emitting event and telling the component to get initial story. It may happen that component is created before the error or vise versa.
- // This way we handle both cases
this._setInitialStory(initialSelection, shouldPersistSelection);
-
- setInitialStory = true;
},
});
}
@@ -113,13 +111,6 @@ export default class Preview {
this._sendSetStories();
- // If the app is started with server running, set the story as the one selected in the browser
- if (webUrl) {
- this._sendGetCurrentStory();
- } else {
- setInitialStory = true;
- }
-
const preview = this;
addons.loadAddons(this._clientApi);
@@ -127,7 +118,6 @@ export default class Preview {
const appliedTheme = { ...theme, ...params.theme };
// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
- // eslint-disable-next-line react/prefer-stateless-function
return class StorybookRoot extends React.PureComponent {
render() {
if (onDeviceUI) {
@@ -138,11 +128,6 @@ export default class Preview {
url={webUrl}
isUIHidden={params.isUIHidden}
tabOpen={params.tabOpen}
- getInitialStory={
- setInitialStory
- ? preview._getInitialStory(initialSelection, shouldPersistSelection)
- : null
- }
shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
/>
@@ -152,7 +137,7 @@ export default class Preview {
return (
-
+
);
}
@@ -164,14 +149,6 @@ export default class Preview {
const stories = this._stories.extract();
channel.emit(Events.SET_STORIES, { stories });
channel.emit(Events.STORIES_CONFIGURED);
- if (this.currentStory) {
- channel.emit(Events.SET_CURRENT_STORY, this.currentStory);
- }
- }
-
- _sendGetCurrentStory() {
- const channel = addons.getChannel();
- channel.emit(Events.GET_CURRENT_STORY);
}
_setInitialStory = async (initialSelection: any, shouldPersistSelection = true) => {
@@ -187,11 +164,18 @@ export default class Preview {
if (initialSelection && this._checkStory(initialSelection)) {
story = initialSelection;
} else if (shouldPersistSelection) {
- const value = await AsyncStorage.getItem(STORAGE_KEY);
- const previousStory = JSON.parse(value);
+ try {
+ let value = this._asyncStorageStoryId;
+ if (!value) {
+ value = JSON.parse(await AsyncStorage.getItem(STORAGE_KEY));
+ this._asyncStorageStoryId = value;
+ }
- if (this._checkStory(previousStory)) {
- story = previousStory;
+ if (this._checkStory(value)) {
+ story = value;
+ }
+ } catch (e) {
+ //
}
}
@@ -199,43 +183,44 @@ export default class Preview {
return this._getStory(story);
}
- const dump = this._stories.dumpStoryBook();
-
- const nonEmptyKind = dump.find((kind: any) => kind.stories.length > 0);
- if (nonEmptyKind) {
- return this._getStory({ kind: nonEmptyKind.kind, story: nonEmptyKind.stories[0] });
+ const stories = this._stories.raw();
+ if (stories && stories.length) {
+ return this._getStory(stories[0].id);
}
return null;
};
- _getStory(selection: { kind: string; story: string }) {
- const { kind, story } = selection;
- const storyFn = this._stories.getStoryWithContext(kind, story);
- return { ...selection, storyFn };
+ _getStory(storyId: string) {
+ return this._stories.fromId(storyId);
}
- _selectStoryEvent(selection: { kind: string; story: string }) {
- AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
+ _selectStoryEvent({ storyId }: { storyId: string }) {
+ if (storyId) {
+ try {
+ AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId));
+ } catch (e) {
+ //
+ }
- if (selection) {
- const story = this._getStory(selection);
+ const story = this._getStory(storyId);
this._selectStory(story);
}
}
_selectStory(story: any) {
- this.currentStory = story;
const channel = addons.getChannel();
+
+ this._stories.setSelection(story);
channel.emit(Events.SELECT_STORY, story);
}
- _checkStory(selection: any) {
- if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) {
+ _checkStory(storyId: string) {
+ if (!storyId) {
return null;
}
- const story = this._getStory(selection);
+ const story = this._getStory(storyId);
if (story.storyFn === null) {
return null;
diff --git a/examples-native/crna-kitchen-sink/App.js b/examples-native/crna-kitchen-sink/App.js
index cf84ee1adb00..cf409b5aa655 100644
--- a/examples-native/crna-kitchen-sink/App.js
+++ b/examples-native/crna-kitchen-sink/App.js
@@ -1,4 +1,6 @@
-export default from './storybook';
+import StorybookUIRoot from './storybook';
+
+export { StorybookUIRoot as default };
// NOTE: The code below is what CRNA generates out of the box. We currently
// have no clever way of replacing this with Storybook's UI (Vanilla RN does!)
diff --git a/examples-native/crna-kitchen-sink/metro.config.js b/examples-native/crna-kitchen-sink/metro.config.js
index 1f4f7e6fabdd..1badc02560ca 100644
--- a/examples-native/crna-kitchen-sink/metro.config.js
+++ b/examples-native/crna-kitchen-sink/metro.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
diff --git a/examples-native/crna-kitchen-sink/storybook/addons.js b/examples-native/crna-kitchen-sink/storybook/addons.js
index 8741fd55b89f..e8a3976c7539 100644
--- a/examples-native/crna-kitchen-sink/storybook/addons.js
+++ b/examples-native/crna-kitchen-sink/storybook/addons.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-options/register';
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/index.js b/examples-native/crna-kitchen-sink/storybook/stories/index.js
index 1cc3e1352dc1..4f603da21dc8 100644
--- a/examples-native/crna-kitchen-sink/storybook/stories/index.js
+++ b/examples-native/crna-kitchen-sink/storybook/stories/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Text } from 'react-native';
@@ -7,6 +8,7 @@ import { linkTo } from '@storybook/addon-links';
import { withKnobs } from '@storybook/addon-knobs';
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
import knobsWrapper from './Knobs';
+// eslint-disable-next-line import/no-unresolved, import/extensions
import Button from './Button';
import CenterView from './CenterView';
import Welcome from './Welcome';
diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js
index d59d4eb899a0..5a1f23103b24 100644
--- a/lib/cli/generators/REACT_NATIVE/index.js
+++ b/lib/cli/generators/REACT_NATIVE/index.js
@@ -12,17 +12,12 @@ import {
} from '../../lib/helpers';
export default async (npmOptions, installServer) => {
- const [
- storybookVersion,
- addonsVersion,
- actionsVersion,
- linksVersion,
- ] = await getVersions(
+ const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(
npmOptions,
'@storybook/react-native',
'@storybook/addons',
'@storybook/addon-actions',
- '@storybook/addon-links',
+ '@storybook/addon-links'
);
// copy all files from the template directory to project directory
@@ -76,8 +71,5 @@ export default async (npmOptions, installServer) => {
const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
- installDependencies(npmOptions, [
- ...devDependencies,
- ...babelDependencies,
- ]);
+ installDependencies(npmOptions, [...devDependencies, ...babelDependencies]);
};
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
index 63f1a6266717..b354a462808b 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
+// eslint-disable-next-line import/extensions
import Button from './Button';
import CenterView from './CenterView';
import Welcome from './Welcome';