@storybook/react-native 6.0.1-beta.10 → 6.0.1-beta.11

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
-import './document-polyfill';
 import { StoryApi } from '@storybook/addons';
 import { ClientApi } from '@storybook/client-api';
 import { ReactNode } from 'react';

package/dist/index.js

@@ -1,4 +1,3 @@
-import './document-polyfill';
 import { start } from './preview/start';
 const { clientApi, configure, view } = start();
 export { configure };

package/dist/preview/View.d.ts

@@ -17,6 +17,12 @@ declare type InitialSelection = `${StoryKind}--${StoryName}` | {
     name: StoryName;
 };
 export declare type Params = {
+    onDeviceUI?: boolean;
+    enableWebsockets?: boolean;
+    query?: string;
+    host?: string;
+    port?: number;
+    secured?: boolean;
     initialSelection?: InitialSelection;
     shouldPersistSelection?: boolean;
     tabOpen?: number;
@@ -33,8 +39,10 @@ export declare class View {
     _ready: boolean;
     _preview: PreviewWeb<ReactNativeFramework>;
     _asyncStorageStoryId: string;
+    _webUrl: string;
     constructor(preview: PreviewWeb<ReactNativeFramework>);
     _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<SelectionSpecifier>;
+    _getServerChannel: (params?: Partial<Params>) => import("@storybook/channels").Channel;
     getStorybookUI: (params?: Partial<Params>) => () => JSX.Element;
 }
 export {};

package/dist/preview/View.js

@@ -15,6 +15,10 @@ import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
+import StoryView from './components/StoryView';
+import createChannel from '@storybook/channel-websocket';
+import getHost from './rn-host-detect';
+import events from '@storybook/core-events';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
     constructor(preview) {
@@ -47,9 +51,30 @@ export class View {
             }
             return { storySpecifier: '*', viewMode: 'story' };
         });
+        this._getServerChannel = (params = {}) => {
+            const host = getHost(params.host || 'localhost');
+            const port = `:${params.port || 7007}`;
+            const query = params.query || '';
+            const websocketType = params.secured ? 'wss' : 'ws';
+            const url = `${websocketType}://${host}${port}/${query}`;
+            return createChannel({
+                url,
+                async: true,
+                onError: () => __awaiter(this, void 0, void 0, function* () { }),
+            });
+        };
         this.getStorybookUI = (params = {}) => {
-            const { shouldPersistSelection = true } = params;
+            const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
             const initialStory = this._getInitialStory(params);
+            if (enableWebsockets) {
+                const channel = this._getServerChannel(params);
+                addons.setChannel(channel);
+                // TODO: check this with someone who knows what they're doing
+                this._preview.channel = channel;
+                this._preview.setupListeners();
+                channel.emit(events.CHANNEL_CREATED);
+                this._preview.initializeWithStoryIndex(this._storyIndex);
+            }
             addons.loadAddons({
                 store: () => ({
                     fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -80,9 +105,14 @@ export class View {
                         self._preview.selectSpecifiedStory();
                     });
                 }, []);
-                return (React.createElement(SafeAreaProvider, null,
-                    React.createElement(ThemeProvider, { theme: appliedTheme },
-                        React.createElement(OnDeviceUI, { context: context, storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                if (onDeviceUI) {
+                    return (React.createElement(SafeAreaProvider, null,
+                        React.createElement(ThemeProvider, { theme: appliedTheme },
+                            React.createElement(OnDeviceUI, { context: context, storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                }
+                else {
+                    return React.createElement(StoryView, { context: context });
+                }
             };
         };
         this._preview = preview;

package/dist/preview/components/OnDeviceUI/OnDeviceUI.js

@@ -92,7 +92,10 @@ const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoi
                             tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
                     React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
                         React.createElement(StoryListView, { storyIndex: storyIndex, selectedStoryContext: context })),
-                    React.createElement(Panel, { style: getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide) },
+                    React.createElement(Panel, { style: [
+                            getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            wrapperMargin,
+                        ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
             React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
 };

package/dist/preview/components/StoryListView/StoryListView.js

@@ -43,7 +43,7 @@ const ItemTouchable = styled.TouchableOpacity({
     paddingLeft: 40,
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ selected, theme }) => (selected ? { backgroundColor: theme.listItemActiveColor } : {}));
+}, ({ selected, theme }) => { var _a; return (selected ? { backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd' } : {}); });
 const ListItem = React.memo(({ kind, title, selected, onPress }) => (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected },
     React.createElement(StoryIcon, { selected: selected }),
     React.createElement(Name, { selected: selected }, title))), (prevProps, nextProps) => prevProps.selected === nextProps.selected);

package/dist/preview/rn-host-detect.js

@@ -4,9 +4,8 @@
  * When __DEV__ === false, we can't use window.require('NativeModules')
  */
 function getByRemoteConfig(hostname) {
-    var remoteModuleConfig = typeof window !== 'undefined' &&
-        window.__fbBatchedBridgeConfig &&
-        window.__fbBatchedBridgeConfig.remoteModuleConfig;
+    var _a;
+    var remoteModuleConfig = (_a = window === null || window === void 0 ? void 0 : window.__fbBatchedBridgeConfig) === null || _a === void 0 ? void 0 : _a.remoteModuleConfig;
     if (!Array.isArray(remoteModuleConfig) ||
         (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
         return { hostname: hostname, passed: false };

package/dist/preview/start.js

@@ -14,14 +14,32 @@ export const render = (args, context) => {
     return React.createElement(Component, Object.assign({}, args));
 };
 export function start() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // TODO: can we get settings from main.js and set the channel here?
     const channel = new Channel({ async: true });
     addons.setChannel(channel);
     const clientApi = new ClientApi();
-    const preview = new PreviewWeb();
-    clientApi.storyStore = preview.storyStore;
-    setGlobalRender(render);
-    preview.urlStore = {
+    const previewView = {
+        prepareForStory: () => null,
+        showNoPreview: () => { },
+        showPreparingStory: () => { },
+        applyLayout: () => { },
+        showErrorDisplay: (e) => {
+            console.log(e);
+        },
+        showStoryDuringRender: () => { },
+        showMain: () => { },
+        checkIfLayoutExists: () => { },
+        showStory: () => { },
+        docsRoot: null,
+        prepareForDocs: () => null,
+        showDocs: () => { },
+        preparingTimeout: setTimeout(() => { }, 0),
+        showMode: () => { },
+        showPreparingDocs: () => { },
+        storyRoot: null,
+        testing: false,
+    };
+    const urlStore = {
         selection: { storyId: '', viewMode: 'story' },
         selectionSpecifier: null,
         setQueryParams: () => { },
@@ -29,11 +47,9 @@ export function start() {
             preview.urlStore.selection = selection;
         },
     };
-    preview.view = Object.assign(Object.assign({}, preview.view), { prepareForStory: () => null, showNoPreview: () => { }, showPreparingStory: () => { }, applyLayout: () => { }, showErrorDisplay: (e) => {
-            console.log(e);
-        }, showStoryDuringRender: () => { }, showMain: () => { }, 
-        // these are just to make typescript happy
-        showDocs: (_a = preview.view) === null || _a === void 0 ? void 0 : _a.showDocs, storyRoot: (_b = preview.view) === null || _b === void 0 ? void 0 : _b.storyRoot, prepareForDocs: (_c = preview.view) === null || _c === void 0 ? void 0 : _c.prepareForDocs, docsRoot: (_d = preview.view) === null || _d === void 0 ? void 0 : _d.docsRoot, checkIfLayoutExists: (_e = preview.view) === null || _e === void 0 ? void 0 : _e.checkIfLayoutExists, showMode: (_f = preview.view) === null || _f === void 0 ? void 0 : _f.showMode, showPreparingDocs: (_g = preview.view) === null || _g === void 0 ? void 0 : _g.showPreparingDocs, showStory: (_h = preview.view) === null || _h === void 0 ? void 0 : _h.showStory });
+    const preview = new PreviewWeb(urlStore, previewView);
+    clientApi.storyStore = preview.storyStore;
+    setGlobalRender(render);
     let initialized = false;
     function onStoriesChanged() {
         const storyIndex = clientApi.getStoryIndex();
@@ -47,7 +63,7 @@ export function start() {
         clientApi,
         preview,
         // This gets called each time the user calls configure (i.e. once per HMR)
-        // The first time, it constructs the preview, subsequently it updates it
+        // The first time, it constructs thecurrentSelection preview, subsequently it updates it
         configure(loadable, m) {
             clientApi.addParameters({ framework: 'react-native' });
             // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.0.1-beta.10",
+  "version": "6.0.1-beta.11",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -49,15 +49,15 @@
   "dependencies": {
     "@emotion/core": "^10.0.20",
     "@emotion/native": "^10.0.14",
-    "@storybook/addons": "^6.5",
-    "@storybook/channel-websocket": "^6.5",
-    "@storybook/channels": "^6.5",
-    "@storybook/client-api": "^6.5",
-    "@storybook/client-logger": "^6.5",
-    "@storybook/core-client": "^6.5",
-    "@storybook/core-events": "^6.5",
+    "@storybook/addons": "^6.5.14",
+    "@storybook/channel-websocket": "^6.5.14",
+    "@storybook/channels": "^6.5.14",
+    "@storybook/client-api": "^6.5.14",
+    "@storybook/client-logger": "^6.5.14",
+    "@storybook/core-client": "^6.5.14",
+    "@storybook/core-events": "^6.5.14",
     "@storybook/csf": "0.0.2--canary.7c6c115.0",
-    "@storybook/preview-web": "^6.5",
+    "@storybook/preview-web": "^6.5.14",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "emotion-theming": "^10.0.19",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0288f6d0728b0f29698435b5cd2d46dc7dde57fc"
+  "gitHead": "622dfc390b5bb31681c5f17c4c8815ca27c1ef84"
 }

package/dist/document-polyfill/DOM/Document.d.ts

@@ -1,14 +0,0 @@
-export default Document;
-declare class Document extends Element {
-    constructor();
-    body: Element;
-    documentElement: Element;
-    readyState: string;
-    createElement(tagName: any): Element;
-    createElementNS(tagName: any): Element;
-    getElementById(id: any): Element;
-    location: {
-        search: string;
-    };
-}
-import Element from "./Element";

package/dist/document-polyfill/DOM/Document.js

@@ -1,37 +0,0 @@
-import Element from './Element';
-import HTMLVideoElement from './HTMLVideoElement';
-import HTMLImageElement from './HTMLImageElement';
-import HTMLCanvasElement from './HTMLCanvasElement';
-class Document extends Element {
-    constructor() {
-        super('#document');
-        this.location = { search: '' };
-        this.body = new Element('BODY');
-        this.documentElement = new Element('HTML');
-        this.readyState = 'complete';
-    }
-    createElement(tagName) {
-        switch ((tagName || '').toLowerCase()) {
-            case 'video':
-                return new HTMLVideoElement(tagName);
-            case 'img':
-                return new HTMLImageElement(tagName);
-            case 'canvas':
-                return new HTMLCanvasElement(tagName);
-            case 'iframe':
-                // Return nothing to keep firebase working.
-                return null;
-            default:
-                return new Element(tagName);
-        }
-    }
-    createElementNS(tagName) {
-        const element = this.createElement(tagName);
-        element.toDataURL = () => ({});
-        return element;
-    }
-    getElementById(id) {
-        return new Element('div');
-    }
-}
-export default Document;

package/dist/document-polyfill/DOM/Element.d.ts

@@ -1,37 +0,0 @@
-export default Element;
-declare class Element extends Node {
-    doc: {
-        body: {
-            innerHTML: string;
-        };
-    };
-    get tagName(): any;
-    get clientWidth(): number;
-    get clientHeight(): number;
-    get offsetWidth(): number;
-    get offsetHeight(): number;
-    get innerWidth(): number;
-    get innerHeight(): number;
-    getContext(contextType: any, contextOptions: any, context: any): {
-        fillText: (text: any, x: any, y: any, maxWidth: any) => {};
-        measureText: (text: any) => {
-            width: number;
-            height: number;
-        };
-        fillRect: () => {};
-        drawImage: () => {};
-        getImageData: () => {
-            data: Uint8ClampedArray;
-        };
-        getContextAttributes: () => {
-            stencil: boolean;
-        };
-        getExtension: () => {
-            loseContext: () => void;
-        };
-        putImageData: () => {};
-        createImageData: () => {};
-    };
-    get ontouchstart(): {};
-}
-import Node from "./Node";

package/dist/document-polyfill/DOM/Element.js

@@ -1,58 +0,0 @@
-import Node from './Node';
-class Element extends Node {
-    constructor(tagName) {
-        return super(tagName.toUpperCase());
-        // eslint-disable-next-line no-unreachable
-        this.doc = {
-            body: {
-                innerHTML: '',
-            },
-        };
-    }
-    get tagName() {
-        return this.nodeName;
-    }
-    setAttributeNS() { }
-    get clientWidth() {
-        return this.innerWidth;
-    }
-    get clientHeight() {
-        return this.innerHeight;
-    }
-    get offsetWidth() {
-        return this.innerWidth;
-    }
-    get offsetHeight() {
-        return this.innerHeight;
-    }
-    get innerWidth() {
-        return window.innerWidth;
-    }
-    get innerHeight() {
-        return window.innerHeight;
-    }
-    getContext(contextType, contextOptions, context) {
-        return {
-            fillText: (text, x, y, maxWidth) => ({}),
-            measureText: (text) => ({
-                width: (text || '').split('').length * 6,
-                height: 24,
-            }),
-            fillRect: () => ({}),
-            drawImage: () => ({}),
-            getImageData: () => ({ data: new Uint8ClampedArray([255, 0, 0, 0]) }),
-            getContextAttributes: () => ({
-                stencil: true,
-            }),
-            getExtension: () => ({
-                loseContext: () => { },
-            }),
-            putImageData: () => ({}),
-            createImageData: () => ({}),
-        };
-    }
-    get ontouchstart() {
-        return {};
-    }
-}
-export default Element;

package/dist/document-polyfill/DOM/HTMLCanvasElement.d.ts

@@ -1,4 +0,0 @@
-export default HTMLCanvasElement;
-declare class HTMLCanvasElement extends Element {
-}
-import Element from "./Element";

package/dist/document-polyfill/DOM/HTMLCanvasElement.js

@@ -1,4 +0,0 @@
-import Element from './Element';
-class HTMLCanvasElement extends Element {
-}
-export default HTMLCanvasElement;

package/dist/document-polyfill/DOM/HTMLImageElement.d.ts

@@ -1,4 +0,0 @@
-export default HTMLImageElement;
-declare class HTMLImageElement extends Element {
-}
-import Element from "./Element";

package/dist/document-polyfill/DOM/HTMLImageElement.js

@@ -1,4 +0,0 @@
-import Element from './Element';
-class HTMLImageElement extends Element {
-}
-export default HTMLImageElement;

package/dist/document-polyfill/DOM/HTMLVideoElement.d.ts

@@ -1,4 +0,0 @@
-export default HTMLVideoElement;
-declare class HTMLVideoElement extends Element {
-}
-import Element from "./Element";

package/dist/document-polyfill/DOM/HTMLVideoElement.js

@@ -1,4 +0,0 @@
-import Element from './Element';
-class HTMLVideoElement extends Element {
-}
-export default HTMLVideoElement;

package/dist/document-polyfill/DOM/Node.d.ts

@@ -1,26 +0,0 @@
-export default Node;
-declare class Node {
-    constructor(nodeName: any);
-    addEventListener(_eventName: any, _listener: any): void;
-    removeEventListener(_eventName: any, _listener: any): void;
-    style: {};
-    className: {
-        baseVal: string;
-    };
-    nodeName: any;
-    get ownerDocument(): Document;
-    appendChild(): void;
-    insertBefore(): void;
-    removeChild(): void;
-    setAttributeNS(): void;
-    getBoundingClientRect(): {
-        left: number;
-        top: number;
-        right: number;
-        bottom: number;
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-}

package/dist/document-polyfill/DOM/Node.js

@@ -1,33 +0,0 @@
-class Node {
-    constructor(nodeName) {
-        this.addEventListener = this.addEventListener.bind(this);
-        this.removeEventListener = this.removeEventListener.bind(this);
-        this.style = {};
-        this.className = {
-            baseVal: '',
-        };
-        this.nodeName = nodeName;
-    }
-    get ownerDocument() {
-        return window.document;
-    }
-    addEventListener(_eventName, _listener) { }
-    removeEventListener(_eventName, _listener) { }
-    appendChild() { }
-    insertBefore() { }
-    removeChild() { }
-    setAttributeNS() { }
-    getBoundingClientRect() {
-        return {
-            left: 0,
-            top: 0,
-            right: window.innerWidth,
-            bottom: window.innerHeight,
-            x: 0,
-            y: 0,
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
-    }
-}
-export default Node;

package/dist/document-polyfill/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/document-polyfill/index.js

@@ -1,3 +0,0 @@
-// this is temporary until we can solve the preview web crashing the app by accessing document
-// adjusted from expo/browser-polyfill to not require external dependencies https://github.com/expo/browser-polyfill
-import './module';

package/dist/document-polyfill/module.js

@@ -1 +0,0 @@
-// do nothing

package/dist/document-polyfill/module.native.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/document-polyfill/module.native.js

@@ -1,2 +0,0 @@
-import Document from './DOM/Document';
-window.document = window.document || new Document();