intial attempt to get websockets working

app/react-native-server/package.json

@@ -18,8 +18,7 @@
   },
   "license": "MIT",
   "bin": {
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
+    "rn-storybook-server": "./bin/index.js"
   },
   "files": [
     "bin/**/*",

app/react-native-server/src/client/manager/components/PreviewHelp.js

@@ -32,6 +32,9 @@ const styles = {
 const PreviewHelp = () => (
   <div style={styles.main}>
     <h1>Welcome to storybook</h1>
+    <p>
+      <strong>Note components only render on the device, you won't see them here!</strong>
+    </p>
     <p>This is a UI component dev environment for your app.</p>
     <p>
       We've added some basic stories inside the {<span style={styles.code}>storybook/stories</span>}{' '}
@@ -44,9 +47,7 @@ const PreviewHelp = () => (
       (Note that due to an implementation detail, your stories will only show up in the left-pane
       after your device has connected to this storybook server.)
     </p>
-    <p>
-      For <span style={styles.code}>create-react-native-app</span> apps:
-    </p>
+    <p>For expo apps:</p>
     <div style={styles.codeBlock}>
       <pre style={styles.instructionsCode}>npm run &lt;platform&gt;</pre>
     </div>

app/react-native-server/src/client/manager/provider.js

@@ -65,6 +65,6 @@ export default class ReactProvider extends Provider {
 
   handleAPI(api) {
     addons.loadAddons(api);
-    api.emit(Events.GET_STORIES);
+    // api.emit(Events.GET_STORIES); // this event doesn't exist anymore
   }
 }

app/react-native-server/src/server/cli.js

@@ -29,7 +29,7 @@ function getCli() {
     .option('--quiet', 'Suppress verbose build output')
     .parse(process.argv);
 
-  const configDir = path.resolve(program.configDir || './storybook');
+  const configDir = path.resolve(program.configDir || './.storybook');
 
   return {
     ...program,

app/react-native/src/preview/Preview.tsx

@@ -8,6 +8,9 @@ import React from 'react';
 import { loadCsf } from './loadCsf';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
+import createChannel from '@storybook/channel-websocket';
+import getHost from './rn-host-detect';
+import StoryView from './components/StoryView';
 
 const STORAGE_KEY = 'lastOpenedStory';
 
@@ -20,7 +23,7 @@ export type Params = {
   onDeviceUI: boolean;
   asyncStorage: AsyncStorage | null;
   resetStorybook: boolean;
-  disableWebsockets: boolean;
+  enableWebsockets: boolean;
   query: string;
   host: string;
   port: number;
@@ -49,6 +52,7 @@ export default class Preview {
   _asyncStorage: AsyncStorage | null;
 
   _configApi: ConfigApi;
+  _webUrl: string;
 
   configure: (loadable: Loadable, m: NodeModule, showDeprecationWarning: boolean) => void;
 
@@ -89,6 +93,26 @@ export default class Preview {
     }
 
     const { initialSelection, shouldPersistSelection } = params;
+    if (params.enableWebsockets) {
+      const host = getHost(params.host || 'localhost');
+      const port = `:${params.port || 7007}`;
+
+      const query = params.query || '';
+      const { secured } = params;
+      const websocketType = secured ? 'wss' : 'ws';
+      const httpType = secured ? 'https' : 'http';
+      console.log({ host, port });
+
+      const url = `${websocketType}://${host}${port}/${query}`;
+      this._webUrl = `${httpType}://${host}${port}`;
+      this._channel = createChannel({
+        url,
+        async: params.onDeviceUI,
+        onError: () => {
+          this._setInitialStory(initialSelection, shouldPersistSelection);
+        },
+      });
+    }
     this._setInitialStory(initialSelection, shouldPersistSelection);
 
     this._channel.on(Events.SET_CURRENT_STORY, (d: { storyId: string }) => {
@@ -100,17 +124,29 @@ export default class Preview {
     addons.loadAddons(this._clientApi);
 
     const appliedTheme = { ...theme, ...params.theme };
-    return () => (
-      <ThemeProvider theme={appliedTheme}>
-        <OnDeviceUI
-          storyStore={_storyStore}
-          isUIHidden={params.isUIHidden}
-          tabOpen={params.tabOpen}
-          shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
-          keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
-        />
-      </ThemeProvider>
-    );
+    if (params.onDeviceUI !== false) {
+      return () => (
+        <ThemeProvider theme={appliedTheme}>
+          <OnDeviceUI
+            storyStore={_storyStore}
+            isUIHidden={params.isUIHidden}
+            tabOpen={params.tabOpen}
+            shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
+            keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
+          />
+        </ThemeProvider>
+      );
+    } else {
+      return () => {
+        const storyId = _storyStore.getSelection()?.storyId;
+        const story = _storyStore.fromId(storyId);
+        return (
+          <ThemeProvider theme={appliedTheme}>
+            <StoryView story={story} url={this._webUrl} />
+          </ThemeProvider>
+        );
+      };
+    }
   };
 
   _setInitialStory = async (initialSelection: any, shouldPersistSelection = true) => {

app/react-native/src/preview/components/StoryView/StoryView.tsx

@@ -6,6 +6,7 @@ import { StoryContext } from '@storybook/addons';
 
 interface Props {
   story?: StoreItem;
+  url?: string;
 }
 
 const styles = StyleSheet.create({
@@ -19,7 +20,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const StoryView = ({ story }: Props) => {
+const StoryView = ({ story, url }: Props) => {
   const [context, setContext] = useState<StoryContext | undefined>(undefined);
   const id = story?.id;
 
@@ -40,12 +41,21 @@ const StoryView = ({ story }: Props) => {
       </View>
     );
   }
-
-  return (
-    <View style={styles.helpContainer}>
-      <Text>Please open navigator and select a story to preview.</Text>
-    </View>
-  );
+  if (url && url.length) {
+    return (
+      <View style={styles.helpContainer}>
+        <Text>
+          Please open the Storybook UI ({url}) with a web browser and select a story for preview.
+        </Text>
+      </View>
+    );
+  } else {
+    return (
+      <View style={styles.helpContainer}>
+        <Text>Please open navigator and select a story to preview.</Text>
+      </View>
+    );
+  }
 };
 
 export default StoryView;

app/react-native/src/preview/rn-host-detect.js → app/react-native/src/preview/rn-host-detect.ts

@@ -1,14 +1,17 @@
 'use strict';
-
+declare global {
+  interface Window {
+    __fbBatchedBridgeConfig: any;
+    __DEV__: boolean;
+  }
+}
 /*
  * It only for Debug Remotely mode for Android
  * When __DEV__ === false, we can't use window.require('NativeModules')
  */
 function getByRemoteConfig(hostname) {
   var remoteModuleConfig =
-    typeof window !== 'undefined' &&
-    window.__fbBatchedBridgeConfig &&
-    window.__fbBatchedBridgeConfig.remoteModuleConfig;
+    typeof window !== 'undefined' && window.__fbBatchedBridgeConfig?.remoteModuleConfig;
   if (
     !Array.isArray(remoteModuleConfig) ||
     (hostname !== 'localhost' && hostname !== '127.0.0.1')
@@ -62,6 +65,7 @@ function getByRNRequirePolyfill(hostname) {
 export default function getHost(hostname) {
   // Check if it in React Native environment
   if (
+    // @ts-ignore
     typeof __fbBatchedBridge !== 'object' ||
     (hostname !== 'localhost' && hostname !== '127.0.0.1')
   ) {

examples/native/package.json

@@ -13,6 +13,7 @@
     "prestart": "sbn-get-stories",
     "start": "react-native start",
     "storybook-watcher": "sbn-watcher",
+    "start-server": "rn-storybook-server",
     "test": "jest"
   },
   "jest": {