From abb10c80a7632524e983b32532193d194bce4b61 Mon Sep 17 00:00:00 2001
From: Kyle Roach <kroach.work@gmail.com>
Date: Thu, 23 Aug 2018 01:02:26 -0400
Subject: [PATCH] [storybook__react-native] Add getStorybookUI

---
 types/storybook__react-native/index.d.ts      | 18 +++++++-
 .../storybook__react-native-tests.tsx         | 45 +++++++++++++++----
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/types/storybook__react-native/index.d.ts b/types/storybook__react-native/index.d.ts
index 1a0d0bee48..3f46866129 100644
--- a/types/storybook__react-native/index.d.ts
+++ b/types/storybook__react-native/index.d.ts
@@ -3,9 +3,23 @@
 // Definitions by: Joscha Feth <https://github.com/joscha>
 //                 Anton Izmailov <https://github.com/wapgear>
 //                 Alec Hill <https://github.com/alechill>
+//                 Kyle Roach <https://github.com/iRoachie>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import * as Storybook from '@storybook/react';
+import * as React from 'react';
 
-export = Storybook;
+export interface StorybookUIOptions {
+    onDeviceUI?: boolean;
+    disableWebsockets?: boolean;
+    secured?: boolean;
+    host?: string;
+    port?: number;
+    query?: string;
+}
+
+export function getStorybookUI(
+    options: StorybookUIOptions
+): React.ComponentClass;
+
+export * from '@storybook/react';
diff --git a/types/storybook__react-native/storybook__react-native-tests.tsx b/types/storybook__react-native/storybook__react-native-tests.tsx
index 7540a2f3e8..0afa37c1d6 100644
--- a/types/storybook__react-native/storybook__react-native-tests.tsx
+++ b/types/storybook__react-native/storybook__react-native-tests.tsx
@@ -1,12 +1,21 @@
 import * as React from 'react';
-import { storiesOf, setAddon, addDecorator, configure, getStorybook, RenderFunction, Story } from '@storybook/react-native';
+import {
+    storiesOf,
+    setAddon,
+    addDecorator,
+    configure,
+    getStorybook,
+    RenderFunction,
+    getStorybookUI,
+    Story
+} from '@storybook/react-native';
 
 const Decorator = (story: RenderFunction) => <div>{story()}</div>;
 
 storiesOf('Welcome', module)
     // local addDecorator
     .addDecorator(Decorator)
-    .add('to Storybook', () => <div/>)
+    .add('to Storybook', () => <div />)
     .add('to Storybook as Array', () => [<div />, <div />]);
 
 // global addDecorator
@@ -14,24 +23,42 @@ addDecorator(Decorator);
 
 // setAddon
 interface AnyAddon {
-    addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T;
+    addWithSideEffect<T>(
+        this: Story & T,
+        storyName: string,
+        storyFn: RenderFunction
+    ): Story & T;
 }
 const AnyAddon: AnyAddon = {
-    addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T {
+    addWithSideEffect<T>(
+        this: Story & T,
+        storyName: string,
+        storyFn: RenderFunction
+    ): Story & T {
         console.log(this.kind === 'withAnyAddon');
         return this.add(storyName, storyFn);
     }
 };
 setAddon(AnyAddon);
 storiesOf<AnyAddon>('withAnyAddon', module)
-    .addWithSideEffect('custom story', () => <div/>)
-    .addWithSideEffect('more', () => <div/>)
-    .add('another story', () => <div/>)
+    .addWithSideEffect('custom story', () => <div />)
+    .addWithSideEffect('more', () => <div />)
+    .add('another story', () => <div />)
     .add('to Storybook as Array', () => [<div />, <div />])
-    .addWithSideEffect('even more', () => <div/>);
+    .addWithSideEffect('even more', () => <div />);
 
 // configure
 configure(() => undefined, module);
 
 // getStorybook
-getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render()));
+getStorybook().forEach(({ kind, stories }) =>
+    stories.forEach(({ name, render }) => render())
+);
+
+const StorybookUI = getStorybookUI({
+    port: 9001,
+    host: 'localhost',
+    onDeviceUI: true
+});
+
+const TestRender = () => <StorybookUI />;