Fix react native server (#7187)

Fix react native server
storybookjs · Jul 31, 2019 · 9774325 · 9774325
1 parent cbac4f3
commit 9774325
Show file tree

Hide file tree

Showing 22 changed files with 135 additions and 236 deletions.
diff --git 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-*
diff --git 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:
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               {toggle}
               {nameComponent}
-              <Text>{': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}</Text>
+              <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
             </View>
             {expanded ? (
               <View style={{ marginLeft: 40 }}>
@@ -62,7 +65,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
                   </View>
                 ))}
                 <View style={{ marginLeft: 20 }}>
-                  <Text>{']'}</Text>
+                  <Text>]</Text>
                 </View>
               </View>
             ) : null}
@@ -71,13 +74,13 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
       }
       return (
         <View>
-          <Text>{'['}</Text>
+          <Text>[</Text>
           {value.map((v, i) => (
             <View key={i} style={{ marginLeft: 20 }}>
               <Inspect value={v} />
             </View>
           ))}
-          <Text>{']'}</Text>
+          <Text>]</Text>
         </View>
       );
     }
@@ -89,7 +92,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
               {toggle}
               {nameComponent}
               <Text>
-                {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+                {`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
               </Text>
             </View>
             {expanded ? (
@@ -124,7 +127,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           {toggle}
           {nameComponent}
-          <Text>{': '}</Text>
+          <Text>: </Text>
           <Value value={value} />
         </View>
       );
@@ -147,7 +150,7 @@ function Value({ value }: { value: any }) {
   if (value instanceof RegExp) {
     return (
       <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {'/' + value.source + '/' + value.flags}
+        {`/${value.source}/${value.flags}`}
       </Text>
     );
   }
@@ -166,8 +169,9 @@ function Value({ value }: { value: any }) {
       );
     case 'function':
       return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+    default:
+      return <Text>{JSON.stringify(value)}</Text>;
   }
-  return <Text>{JSON.stringify(value)}</Text>;
 }
 
 export default Inspect;
diff --git 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
@@ -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
@@ -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
@@ -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");
-}
+}
diff --git 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
@@ -51,8 +51,7 @@ export default class ReactProvider extends Provider {
       <Consumer filter={mapper} pure>
         {({ 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' ? <PreviewHelp /> : 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
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import Preview from './preview';
 
 const preview = new Preview();

diff --git a/...eact-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/...eact-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<Props> {
   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
@@ -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
@@ -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<OnDeviceUIProps, OnDeviceUIState> {
   animatedValue: Animated.Value;
+
   channel: Channel;
 
   constructor(props: OnDeviceUIProps) {
@@ -72,33 +69,13 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.state = {
       tabOpen,
       slideBetweenAnimation: false,
-      selection: {},
-      storyFn: null,
       previewWidth: 0,
       previewHeight: 0,
     };
     this.animatedValue = new Animated.Value(tabOpen);
     this.channel = addons.getChannel();
   }
 
-  async componentWillMount() {
-    const { getInitialStory } = this.props;
-    if (getInitialStory) {
-      const story = await getInitialStory();
-      this.setState({
-        selection: story || {},
-        storyFn: story ? story.storyFn : null,
-      });
-    }
-    this.channel.on(Events.SELECT_STORY, this.handleStoryChange);
-    this.channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
-  componentWillUnmount() {
-    this.channel.removeListener(Events.SELECT_STORY, this.handleStoryChange);
-    this.channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
   onLayout = ({ previewWidth, previewHeight }: PreviewDimens) => {
     this.setState({ previewWidth, previewHeight });
   };
@@ -107,24 +84,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.handleToggleTab(PREVIEW);
   };
 
-  forceReRender = () => {
-    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<OnDeviceUIProps, OnDeviceU
       keyboardAvoidingViewVerticalOffset,
     } = this.props;
 
-    const {
-      tabOpen,
-      slideBetweenAnimation,
-      selection,
-      storyFn,
-      previewWidth,
-      previewHeight,
-    } = this.state;
+    const { tabOpen, slideBetweenAnimation, previewWidth, previewHeight } = this.state;
 
     const previewWrapperStyles = [
       { flex: 1 },
@@ -190,21 +142,12 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
                 disabled={tabOpen === PREVIEW}
                 onPress={this.handleOpenPreview}
               >
-                <StoryView
-                  url={url}
-                  selection={selection}
-                  storyFn={storyFn}
-                  listenToEvents={false}
-                />
+                <StoryView url={url} onDevice stories={stories} />
               </Preview>
             </Animated.View>
           </Animated.View>
           <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-            <StoryListView
-              stories={stories}
-              selectedKind={selection.kind}
-              selectedStory={selection.story}
-            />
+            <StoryListView stories={stories} />
           </Panel>
           <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
             <Addons />

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