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';