Merge pull request #28314 from iRoachie/storybook/rn

[storybook__react-native] Add getStorybookUI

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

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