From 3b36dc2bed625cdec2d9378f886ea623cbd12f66 Mon Sep 17 00:00:00 2001
From: Muhammed Thanish <mnmtanish@gmail.com>
Date: Tue, 8 Nov 2016 16:29:29 +0530
Subject: [PATCH] Show a help text on device

When the selection is null, show a help text
which will ask the user to open the web UI
---
 src/preview/components/StoryView/index.js | 14 ++++++++++++--
 src/preview/components/StoryView/style.js |  6 ++++++
 src/preview/index.js                      |  4 +++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/preview/components/StoryView/index.js b/src/preview/components/StoryView/index.js
index 89454e6..df417ca 100644
--- a/src/preview/components/StoryView/index.js
+++ b/src/preview/components/StoryView/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import style from './style';
 
 export default class StoryView extends Component {
@@ -13,9 +13,19 @@ export default class StoryView extends Component {
     this.setState({storyFn, selection});
   }
 
+  renderHelp() {
+    return (
+      <View style={style.help}>
+        {this.props.url
+          ? <Text>Please open the Storybook UI ({this.props.url}) with a web browser and select a story for preview.</Text>
+          : <Text>Please open the Storybook UI with a web browser and select a story for preview.</Text>}
+      </View>
+    );
+  }
+
   render() {
     if (!this.state.storyFn) {
-      return null;
+      return this.renderHelp();
     }
     const { kind, story } = this.state.selection;
     const context = { kind, story };
diff --git a/src/preview/components/StoryView/style.js b/src/preview/components/StoryView/style.js
index 61b48b7..b5fe466 100644
--- a/src/preview/components/StoryView/style.js
+++ b/src/preview/components/StoryView/style.js
@@ -2,4 +2,10 @@ export default {
   main: {
     flex: 1,
   },
+  help: {
+    flex: 1,
+    padding: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 };
diff --git a/src/preview/index.js b/src/preview/index.js
index 9421eac..db7b65a 100644
--- a/src/preview/index.js
+++ b/src/preview/index.js
@@ -54,11 +54,13 @@ export default class Preview {
 
   getStorybookUI(params = {}) {
     return () => {
+      let webUrl = null;
       let channel = addons.getChannel();
       if (!channel) {
         const host = params.host || 'localhost';
         const port = params.port || 7007;
         const url = `ws://${host}:${port}`;
+        webUrl = `http://${host}:${port}`;
         channel = createChannel({ url });
         addons.setChannel(channel);
       }
@@ -67,7 +69,7 @@ export default class Preview {
       this._sendSetStories();
       this._sendGetCurrentStory();
       // finally return the preview component
-      return <StoryView events={this._events} />;
+      return <StoryView url={webUrl} events={this._events} />;
     }
   }