@storybook/react-native 6.0.1-beta.7 → 6.0.1-canary.0

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

@@ -10,7 +10,7 @@ const Container = styled.View(({ theme }) => ({
     borderBottomWidth: 1,
     borderColor: theme.borderColor || '#e6e6e6',
 }));
-const Bar = ({ index, onPress }) => (React.createElement(Container, null,
+const Bar = ({ index, onPress, style }) => (React.createElement(Container, { style: style },
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS")));

package/dist/preview/components/OnDeviceUI/navigation/Navigation.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 interface Props {
-    initialUiVisible?: boolean;
     tabOpen: number;
     onChangeTab: (index: number) => void;
+    isUIVisible: boolean;
+    setIsUIVisible: Dispatch<SetStateAction<boolean>>;
 }
-declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, initialUiVisible }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }: Props) => JSX.Element>;
 export default _default;

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { View, SafeAreaView } from 'react-native';
+import React from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import Bar from './Bar';
 import VisibilityButton from './VisibilityButton';
@@ -7,8 +8,14 @@ const SWIPE_CONFIG = {
     velocityThreshold: 0.2,
     directionalOffsetThreshold: 80,
 };
-const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
-    const [isUIVisible, setIsUIVisible] = useState(initialUiVisible !== undefined ? initialUiVisible : true);
+const navStyle = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+};
+const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
+    const insets = useSafeAreaInsets();
     const handleToggleUI = () => {
         setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
     };
@@ -22,11 +29,9 @@ const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
             onChangeTab(tabOpen - 1);
         }
     };
-    return (React.createElement(View, null,
-        React.createElement(SafeAreaView, null,
-            isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-                React.createElement(Bar, { index: tabOpen, onPress: onChangeTab }))),
-            React.createElement(View, null,
-                React.createElement(VisibilityButton, { onPress: handleToggleUI })))));
+    return (React.createElement(View, { style: navStyle },
+        isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
+            React.createElement(Bar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
+        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { marginBottom: insets.bottom } })));
 };
 export default React.memo(Navigation);

package/dist/preview/components/OnDeviceUI/navigation/VisibilityButton.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 interface Props {
     onPress: () => void;
+    style?: StyleProp<ViewStyle>;
 }
-declare const _default: React.MemoExoticComponent<({ onPress }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onPress, style }: Props) => JSX.Element>;
 export default _default;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/native';
+import { View } from 'react-native';
 const Touchable = styled.TouchableOpacity({
     backgroundColor: 'transparent',
     position: 'absolute',
@@ -7,10 +8,38 @@ const Touchable = styled.TouchableOpacity({
     bottom: 12,
     zIndex: 100,
 });
-const HideIcon = styled.Text(({ theme }) => ({
-    fontSize: 14,
-    color: theme.buttonTextColor || '#999999',
+const HIDE_ICON_SIZE = 14;
+const HIDE_ICON_BORDER_WIDTH = 1;
+const Inner = styled.View(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    overflow: 'hidden',
+    borderColor: theme.buttonTextColor || '#999999',
+    borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
 }));
-const VisibilityButton = ({ onPress }) => (React.createElement(Touchable, { onPress: onPress, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
-    React.createElement(HideIcon, null, "\u25A1")));
+const Outer = styled.View({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    overflow: 'hidden',
+    borderColor: 'white',
+    borderWidth: HIDE_ICON_BORDER_WIDTH,
+});
+const hideIconStyles = {
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    marginRight: 4,
+};
+const HideIcon = () => (React.createElement(View, { style: hideIconStyles },
+    React.createElement(Inner, null),
+    React.createElement(Outer, null)));
+const VisibilityButton = ({ onPress, style }) => (React.createElement(Touchable, { onPress: onPress, style: style, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
+    React.createElement(HideIcon, null)));
 export default React.memo(VisibilityButton);

package/dist/preview/components/Shared/icons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const GridIcon: () => JSX.Element;
 export declare const StoryIcon: ({ selected }: {
     selected: boolean;

package/dist/preview/components/Shared/text.d.ts

@@ -1,44 +1,3 @@
-/// <reference types="react" />
-export declare const Header: import("@emotion/styled-base").StyledComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, {
-    selected: boolean;
-}, {
-    backgroundColor: string;
-    storyListBackgroundColor: string;
-    listItemActiveColor: string;
-    listItemActiveTextColor: string;
-    headerTextColor: string;
-    labelColor: string;
-    borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-    secondaryLabelColor: string;
-}>;
-export declare const Name: import("@emotion/styled-base").StyledComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, {
-    selected: boolean;
-}, {
-    backgroundColor: string;
-    storyListBackgroundColor: string;
-    listItemActiveColor: string;
-    listItemActiveTextColor: string;
-    headerTextColor: string;
-    labelColor: string;
-    borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-    secondaryLabelColor: string;
-}>;
-export declare const Label: import("@emotion/styled-base").StyledComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, Pick<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, keyof import("react-native").TextProps>, {
-    backgroundColor: string;
-    storyListBackgroundColor: string;
-    listItemActiveColor: string;
-    listItemActiveTextColor: string;
-    headerTextColor: string;
-    labelColor: string;
-    borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-    secondaryLabelColor: string;
-}>;
+export declare const Header: any;
+export declare const Name: any;
+export declare const Label: any;

package/dist/preview/components/StoryListView/StoryListView.d.ts

@@ -1,7 +1,10 @@
-import { StoreItem, StoryStore } from '@storybook/client-api';
+/// <reference types="react" />
+import { /* StoreItem, */ StoryIndex } from '@storybook/client-api';
+import { StoryContext } from '@storybook/csf';
+import { ReactNativeFramework } from 'src/types/types-6.0';
 interface Props {
-    storyStore: StoryStore;
-    selectedStory: StoreItem;
+    storyIndex: StoryIndex;
+    selectedStoryContext: StoryContext<ReactNativeFramework>;
 }
-declare const StoryListView: ({ selectedStory, storyStore }: Props) => JSX.Element;
+declare const StoryListView: ({ selectedStoryContext, storyIndex }: Props) => JSX.Element;
 export default StoryListView;

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

@@ -2,7 +2,8 @@ import styled from '@emotion/native';
 import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
 import React, { useMemo, useState } from 'react';
-import { SectionList, StyleSheet } from 'react-native';
+import { SectionList, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GridIcon, StoryIcon } from '../Shared/icons';
 import { Header, Name } from '../Shared/text';
 const SearchBar = styled.TextInput({
@@ -36,7 +37,7 @@ const StoryListContainer = styled.View(({ theme }) => (Object.assign(Object.assi
     borderRightWidth: StyleSheet.hairlineWidth, borderRightColor: theme.borderColor, backgroundColor: theme.storyListBackgroundColor })));
 const SectionHeader = React.memo(({ title, selected }) => (React.createElement(HeaderContainer, { key: title },
     React.createElement(GridIcon, null),
-    React.createElement(Header, { selected: selected }, title))), (prevProps, nextProps) => prevProps.selected === nextProps.selected);
+    React.createElement(Header, { selected: selected }, title))));
 const ItemTouchable = styled.TouchableOpacity({
     padding: 5,
     paddingLeft: 40,
@@ -46,25 +47,27 @@ const ItemTouchable = styled.TouchableOpacity({
 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);
-const getStories = (storyStore) => {
-    if (!storyStore) {
+const getStories = (storyIndex) => {
+    if (!storyIndex) {
         return [];
     }
-    return Object.values(storyStore
-        .raw()
-        .reduce((acc, story) => {
-        acc[story.kind] = {
-            title: story.kind,
-            data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
+    const groupedStories = Object.values(storyIndex.stories).reduce((acc, story) => {
+        var _a, _b;
+        acc[story.title] = {
+            title: story.title,
+            data: ((_b = (_a = acc[story.title]) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : []).concat(story),
         };
         return acc;
-    }, {}));
+    }, {});
+    return Object.values(groupedStories);
 };
 const styles = StyleSheet.create({
     sectionList: { flex: 1 },
 });
-const StoryListView = ({ selectedStory, storyStore }) => {
-    const originalData = useMemo(() => getStories(storyStore), [storyStore]);
+const tabBarHeight = 40;
+const StoryListView = ({ selectedStoryContext, storyIndex }) => {
+    const insets = useSafeAreaInsets();
+    const originalData = useMemo(() => getStories(storyIndex), [storyIndex]);
     const [data, setData] = useState(originalData);
     const handleChangeSearchText = (text) => {
         const query = text.trim();
@@ -89,8 +92,14 @@ const StoryListView = ({ selectedStory, storyStore }) => {
         const channel = addons.getChannel();
         channel.emit(Events.SET_CURRENT_STORY, { storyId });
     };
+    const safeStyle = { flex: 1, marginTop: insets.top, paddingBottom: insets.bottom + tabBarHeight };
     return (React.createElement(StoryListContainer, null,
-        React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", clearButtonMode: "while-editing", disableFullscreenUI: true, onChangeText: handleChangeSearchText, placeholder: "Filter", returnKeyType: "search" }),
-        React.createElement(SectionList, { style: styles.sectionList, testID: "Storybook.ListView", renderItem: ({ item }) => (React.createElement(ListItem, { title: item.name, kind: item.kind, selected: selectedStory && item.id === selectedStory.id, onPress: () => changeStory(item.id) })), renderSectionHeader: ({ section: { title } }) => (React.createElement(SectionHeader, { title: title, selected: selectedStory && title === selectedStory.kind })), keyExtractor: (item, index) => item.id + index, sections: data, stickySectionHeadersEnabled: false })));
+        React.createElement(View, { style: safeStyle },
+            React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", clearButtonMode: "while-editing", disableFullscreenUI: true, onChangeText: handleChangeSearchText, placeholder: "Filter", returnKeyType: "search" }),
+            React.createElement(SectionList
+            // contentInset={{ bottom: insets.bottom, top: 0 }}
+            , { 
+                // contentInset={{ bottom: insets.bottom, top: 0 }}
+                style: styles.sectionList, testID: "Storybook.ListView", renderItem: ({ item }) => (React.createElement(ListItem, { title: item.name, kind: item.title, selected: selectedStoryContext && item.id === selectedStoryContext.id, onPress: () => changeStory(item.id) })), renderSectionHeader: ({ section: { title } }) => (React.createElement(SectionHeader, { title: title, selected: selectedStoryContext && title === selectedStoryContext.title })), keyExtractor: (item, index) => item.id + index, sections: data, stickySectionHeadersEnabled: false }))));
 };
 export default StoryListView;

package/dist/preview/components/StoryView/StoryView.d.ts

@@ -1,6 +1,8 @@
-import { StoreItem } from '@storybook/client-api';
+/// <reference types="react" />
+import type { StoryContext } from '@storybook/csf';
+import { ReactNativeFramework } from 'src/types/types-6.0';
 interface Props {
-    story?: StoreItem;
+    context?: StoryContext<ReactNativeFramework>;
 }
-declare const StoryView: ({ story }: Props) => JSX.Element;
+declare const StoryView: ({ context }: Props) => JSX.Element;
 export default StoryView;

package/dist/preview/components/StoryView/StoryView.js

@@ -1,13 +1,4 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
     container: { flex: 1 },
@@ -19,20 +10,11 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
     },
 });
-const StoryView = ({ story }) => {
-    const [context, setContext] = useState(undefined);
-    const id = story === null || story === void 0 ? void 0 : story.id;
-    useEffect(() => {
-        const loadContext = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (story && story.unboundStoryFn && story.applyLoaders) {
-                setContext(yield story.applyLoaders());
-            }
-        });
-        loadContext();
-    }, [story, id]);
-    if (story && story.unboundStoryFn) {
-        const { unboundStoryFn } = story;
-        return (React.createElement(View, { key: id, testID: id, style: styles.container }, context && context.id === story.id ? unboundStoryFn(context) : null));
+const StoryView = ({ context }) => {
+    const id = context === null || context === void 0 ? void 0 : context.id;
+    if (context && context.unboundStoryFn) {
+        const { unboundStoryFn: StoryComponent } = context;
+        return (React.createElement(View, { key: id, testID: id, style: styles.container }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
     }
     return (React.createElement(View, { style: styles.helpContainer },
         React.createElement(Text, null, "Please open navigator and select a story to preview.")));

package/dist/preview/executeLoadable.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+import { ModuleExports } from '@storybook/store';
+import { Loadable } from '../types/types';
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and returns a map of filename => module exports
+ *
+ * @param loadable Loadable
+ * @returns Map<Path, ModuleExports>
+ */
+export declare function executeLoadable(loadable: Loadable): Map<string, ModuleExports>;
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and compares it's output to the last time it was run (as stored on a node module)
+ *
+ * @param loadable Loadable
+ * @param m NodeModule
+ * @returns { added: Map<Path, ModuleExports>, removed: Map<Path, ModuleExports> }
+ */
+export declare function executeLoadableForChanges(loadable: Loadable, _m?: NodeModule): {
+    added: Map<string, ModuleExports>;
+    removed: Map<string, ModuleExports>;
+};

package/dist/preview/executeLoadable.js

@@ -0,0 +1,82 @@
+import { logger } from '@storybook/client-logger';
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and returns a map of filename => module exports
+ *
+ * @param loadable Loadable
+ * @returns Map<Path, ModuleExports>
+ */
+export function executeLoadable(loadable) {
+    let reqs = null;
+    // todo discuss / improve type check
+    if (Array.isArray(loadable)) {
+        reqs = loadable;
+    }
+    else if (loadable.keys) {
+        reqs = [loadable];
+    }
+    let exportsMap = new Map();
+    if (reqs) {
+        reqs.forEach((req) => {
+            req.keys().forEach((filename) => {
+                try {
+                    const fileExports = req(filename);
+                    exportsMap.set(typeof req.resolve === 'function' ? req.resolve(filename) : filename, fileExports);
+                }
+                catch (error) {
+                    const errorString = error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString();
+                    logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
+                }
+            });
+        });
+    }
+    else {
+        const exported = loadable();
+        if (Array.isArray(exported) /*FIXME && exported.every((obj) => obj.default != null)*/) {
+            const csfExports = exported.filter((obj) => obj.default != null);
+            exportsMap = new Map(csfExports.map((fileExports, index) => [`exports-map-${index}`, fileExports]));
+        }
+        //  else if (exported) {
+        //   logger.warn(
+        //     `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
+        //       exported
+        //     )}`
+        //   );
+        // }
+    }
+    return exportsMap;
+}
+global.lastExportsMap = new Map();
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and compares it's output to the last time it was run (as stored on a node module)
+ *
+ * @param loadable Loadable
+ * @param m NodeModule
+ * @returns { added: Map<Path, ModuleExports>, removed: Map<Path, ModuleExports> }
+ */
+export function executeLoadableForChanges(loadable, _m) {
+    // if (m?.hot?.dispose) {
+    //   m.hot.accept();
+    //   m.hot.dispose((data) => {
+    //     // eslint-disable-next-line no-param-reassign
+    //     data.lastExportsMap = lastExportsMap;
+    //   });
+    // }
+    const lastExportsMap = global.lastExportsMap;
+    const exportsMap = executeLoadable(loadable);
+    const added = new Map();
+    Array.from(exportsMap.entries())
+        // Ignore files that do not have a default export
+        .filter(([, fileExports]) => !!fileExports.default)
+        // Ignore exports that are equal (by reference) to last time, this means the file hasn't changed
+        .filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports)
+        .forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
+    const removed = new Map();
+    Array.from(lastExportsMap.keys())
+        .filter((fileName) => !exportsMap.has(fileName))
+        .forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
+    // Save the value for the dispose() call above
+    global.lastExportsMap = exportsMap;
+    return { added, removed };
+}

package/dist/preview/rn-host-detect.d.ts

@@ -0,0 +1 @@
+export default function getHost(hostname: any): any;

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

@@ -0,0 +1,62 @@
+'use strict';
+/*
+ * 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;
+    if (!Array.isArray(remoteModuleConfig) ||
+        (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
+        return { hostname: hostname, passed: false };
+    }
+    var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+    if (constants) {
+        var serverHost = constants.ServerHost || hostname;
+        return { hostname: serverHost.split(':')[0], passed: true };
+    }
+    return { hostname: hostname, passed: false };
+}
+function getConstants(config) {
+    return config && (config[0] === 'AndroidConstants' || config[0] === 'PlatformConstants');
+}
+function getByRNRequirePolyfill(hostname) {
+    var NativeModules;
+    var PlatformConstants;
+    var AndroidConstants;
+    if (typeof window === 'undefined' ||
+        !window.__DEV__ ||
+        typeof window.require !== 'function' ||
+        // RN >= 0.56
+        // TODO: Get NativeModules for RN >= 0.56
+        window.require.name === 'metroRequire') {
+        return hostname;
+    }
+    NativeModules = window.require('NativeModules');
+    if (!NativeModules || (!NativeModules.PlatformConstants && !NativeModules.AndroidConstants)) {
+        return hostname;
+    }
+    PlatformConstants = NativeModules.PlatformConstants;
+    AndroidConstants = NativeModules.AndroidConstants;
+    var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+    return serverHost.split(':')[0];
+}
+/*
+ * Get React Native server IP if hostname is `localhost`
+ * On Android emulator, the IP of host is `10.0.2.2` (Genymotion: 10.0.3.2)
+ */
+export default function getHost(hostname) {
+    // Check if it in React Native environment
+    if (typeof __fbBatchedBridge !== 'object' ||
+        (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
+        return hostname;
+    }
+    var result = getByRemoteConfig(hostname);
+    // Leave if get hostname by remote config successful
+    if (result.passed) {
+        return result.hostname;
+    }
+    // Otherwise, use RN's require polyfill
+    return getByRNRequirePolyfill(hostname);
+}

package/dist/preview/start.d.ts

@@ -0,0 +1,13 @@
+import { Loadable } from '@storybook/core-client';
+import { PreviewWeb } from '@storybook/preview-web';
+import { ClientApi } from '@storybook/client-api';
+import type { ReactNativeFramework } from '../types/types-6.0';
+import { View } from './View';
+import '../document-polyfill';
+export declare function start(): {
+    view: View;
+    forceReRender: () => void;
+    clientApi: ClientApi<ReactNativeFramework>;
+    preview: PreviewWeb<ReactNativeFramework>;
+    configure(loadable: Loadable): void;
+};

package/dist/preview/start.js

@@ -0,0 +1,75 @@
+import Channel from '@storybook/channels';
+import { addons } from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { PreviewWeb } from '@storybook/preview-web';
+import { ClientApi } from '@storybook/client-api';
+import { View } from './View';
+import { executeLoadableForChanges } from './executeLoadable';
+import '../document-polyfill';
+export function start() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const channel = new Channel({ async: true });
+    addons.setChannel(channel);
+    const clientApi = new ClientApi();
+    const preview = new PreviewWeb();
+    clientApi.storyStore = preview.storyStore;
+    preview.urlStore = {
+        selection: { storyId: '', viewMode: 'story' },
+        selectionSpecifier: null,
+        setQueryParams: () => { },
+        setSelection: (selection) => {
+            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 });
+    let initialized = false;
+    function onStoriesChanged() {
+        const storyIndex = clientApi.getStoryIndex();
+        preview.onStoriesChanged({ storyIndex });
+        view._storyIndex = storyIndex;
+    }
+    const view = new View(preview);
+    return {
+        view,
+        forceReRender: () => channel.emit(Events.FORCE_RE_RENDER),
+        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
+        configure(loadable) {
+            clientApi.addParameters({ framework: 'react-native' });
+            // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations
+            // function in case it throws. So we also need to process its output there also
+            const getProjectAnnotations = () => {
+                const { added, removed } = executeLoadableForChanges(loadable /*,m*/);
+                Array.from(added.entries()).forEach(([fileName, fileExports]) => clientApi.facade.addStoriesFromExports(fileName, fileExports));
+                Array.from(removed.entries()).forEach(([fileName]) => clientApi.facade.clearFilenameExports(fileName));
+                return Object.assign(Object.assign({}, clientApi.facade.projectAnnotations), { renderToDOM: (context) => {
+                        view._setStory(context.storyContext);
+                    } });
+            };
+            const importFn = (path) => clientApi.importFn(path);
+            if (!initialized) {
+                preview.initialize({
+                    getStoryIndex: () => {
+                        const index = clientApi.getStoryIndex();
+                        view._storyIndex = index;
+                        return index;
+                    },
+                    importFn,
+                    getProjectAnnotations,
+                });
+                initialized = true;
+            }
+            else {
+                // TODO -- why don't we care about the new annotations?
+                getProjectAnnotations();
+                onStoriesChanged();
+            }
+        },
+    };
+}

package/dist/{types-6.0.d.ts → types/types-6.0.d.ts}

@@ -4,6 +4,10 @@ export declare type StoryFnReactReturnType = ReactElement<unknown>;
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
 declare type ReactComponent = ComponentType<any>;
 declare type ReactReturnType = StoryFnReactReturnType;
+export declare type ReactNativeFramework = {
+    component: ComponentType<any>;
+    storyResult: StoryFnReactReturnType;
+};
 /**
  * Metadata to configure the stories for a component.
  *

package/dist/types/types-6.0.js

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

package/dist/types/types.d.ts

@@ -0,0 +1,14 @@
+import { RenderContext, RenderContextWithoutStoryContext } from '@storybook/client-api';
+export interface PreviewError {
+    message?: string;
+    stack?: string;
+}
+export interface RequireContext {
+    keys: () => string[];
+    (id: string): any;
+    resolve(id: string): string;
+}
+export declare type LoaderFunction = () => void | any[];
+export declare type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+export type { RenderContext, RenderContextWithoutStoryContext };
+export declare type RenderStoryFunction = (context: RenderContext) => void;

package/dist/types/types.js

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