@storybook/react-native 6.5.3 → 6.5.4-alpha.0

package/dist/constants.js

@@ -1,5 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANIMATION_DURATION_TRANSITION = void 0;
 /**
  * Duration for a typical transition animation, such as rescaling the canvas
  * UI.
  */
-export const ANIMATION_DURATION_TRANSITION = 400;
+exports.ANIMATION_DURATION_TRANSITION = 400;

package/dist/hooks.js

@@ -1,85 +1,122 @@
-import React, { useMemo } from 'react';
-import { atom, useAtom, useAtomValue, useSetAtom, getDefaultStore } from 'jotai';
-import { useTheme as useEmotionTheme } from 'emotion-theming';
-const storyContextAtom = atom(null);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedAddon = exports.syncExternalUI = exports.useIsSplitPanelVisible = exports.useIsUIVisible = exports.atomWithToggle = exports.useTheme = exports.useUpdateOnStoryChanged = exports.useIsStorySectionSelected = exports.useIsStorySelected = exports.useStoryContextParam = exports.useStoryContext = exports.useSetStoryContext = void 0;
+var react_1 = __importStar(require("react"));
+var jotai_1 = require("jotai");
+var emotion_theming_1 = require("emotion-theming");
+var storyContextAtom = (0, jotai_1.atom)(null);
 /**
  * Hook that returns a function to set the current story context.
  */
-export function useSetStoryContext() {
-    return useSetAtom(storyContextAtom);
+function useSetStoryContext() {
+    return (0, jotai_1.useSetAtom)(storyContextAtom);
 }
+exports.useSetStoryContext = useSetStoryContext;
 /**
  * Hook to read the current story context.
  */
-export function useStoryContext() {
-    return useAtomValue(storyContextAtom);
+function useStoryContext() {
+    return (0, jotai_1.useAtomValue)(storyContextAtom);
 }
+exports.useStoryContext = useStoryContext;
 /**
  * Hook that reads the value of a specific story context parameter.
  */
-export function useStoryContextParam(name, defaultValue) {
+function useStoryContextParam(name, defaultValue) {
     var _a;
-    const paramAtom = useMemo(() => atom((get) => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
-    return (_a = useAtomValue(paramAtom)) !== null && _a !== void 0 ? _a : defaultValue;
+    var paramAtom = (0, react_1.useMemo)(function () { return (0, jotai_1.atom)(function (get) { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }); }, [name]);
+    return (_a = (0, jotai_1.useAtomValue)(paramAtom)) !== null && _a !== void 0 ? _a : defaultValue;
 }
+exports.useStoryContextParam = useStoryContextParam;
 /**
  * Hook that indicates if `storyId` is the currently selected story.
  */
-export function useIsStorySelected(storyId) {
-    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
+function useIsStorySelected(storyId) {
+    return (0, jotai_1.useAtomValue)((0, react_1.useMemo)(function () { return (0, jotai_1.atom)(function (get) { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }); }, [storyId]));
 }
+exports.useIsStorySelected = useIsStorySelected;
 /**
  * Hook that indicates if `title` is the currently selected story section.
  */
-export function useIsStorySectionSelected(title) {
-    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+function useIsStorySectionSelected(title) {
+    return (0, jotai_1.useAtomValue)((0, react_1.useMemo)(function () { return (0, jotai_1.atom)(function (get) { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }); }, [title]));
 }
+exports.useIsStorySectionSelected = useIsStorySectionSelected;
 /**
  * Hook that causes a re-render when the currently selected story is changed.
  */
-export function useUpdateOnStoryChanged() {
-    useAtomValue(useMemo(() => atom((get) => { var _a; return (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id; }), []));
+function useUpdateOnStoryChanged() {
+    (0, jotai_1.useAtomValue)((0, react_1.useMemo)(function () { return (0, jotai_1.atom)(function (get) { var _a; return (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id; }); }, []));
 }
+exports.useUpdateOnStoryChanged = useUpdateOnStoryChanged;
 /**
  * Hook that gets the current theme values.
  */
-export function useTheme() {
-    return useEmotionTheme();
+function useTheme() {
+    return (0, emotion_theming_1.useTheme)();
 }
+exports.useTheme = useTheme;
 /**
  * A boolean atom creator for an atom that can only be toggled between
  * true/false.
  *
  * @see {@link https://jotai.org/docs/recipes/atom-creators#atomwithtoggle}
  */
-export function atomWithToggle(initialValue) {
-    const anAtom = atom(initialValue, (get, set, nextValue) => {
-        const update = nextValue !== null && nextValue !== void 0 ? nextValue : !get(anAtom);
+function atomWithToggle(initialValue) {
+    var anAtom = (0, jotai_1.atom)(initialValue, function (get, set, nextValue) {
+        var update = nextValue !== null && nextValue !== void 0 ? nextValue : !get(anAtom);
         set(anAtom, update);
     });
     return anAtom;
 }
-const isUIVisibleAtom = atomWithToggle(true);
+exports.atomWithToggle = atomWithToggle;
+var isUIVisibleAtom = atomWithToggle(true);
 /**
  * Hook that retrieves the current state, and a setter, for the `isUIVisible`
  * atom.
  */
-export function useIsUIVisible() {
-    return useAtom(isUIVisibleAtom);
+function useIsUIVisible() {
+    return (0, jotai_1.useAtom)(isUIVisibleAtom);
 }
-const isSplitPanelVisibleAtom = atomWithToggle(false);
+exports.useIsUIVisible = useIsUIVisible;
+var isSplitPanelVisibleAtom = atomWithToggle(false);
 /**
  * Hook that retrieves the current state, and a setter, for the
  * `isSplitPanelVisibleAtom` atom.
  */
-export function useIsSplitPanelVisible() {
-    return useAtom(isSplitPanelVisibleAtom);
+function useIsSplitPanelVisible() {
+    return (0, jotai_1.useAtom)(isSplitPanelVisibleAtom);
 }
+exports.useIsSplitPanelVisible = useIsSplitPanelVisible;
 /**
  * Sync the UI atom states with external values, such as from Story parameters.
  */
-export function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
-    const jotaiStore = getDefaultStore();
+function syncExternalUI(_a) {
+    var isUIVisible = _a.isUIVisible, isSplitPanelVisible = _a.isSplitPanelVisible;
+    var jotaiStore = (0, jotai_1.getDefaultStore)();
     if (isUIVisible !== undefined) {
         jotaiStore.set(isUIVisibleAtom, isUIVisible);
     }
@@ -87,18 +124,19 @@ export function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
         jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
     }
 }
-const selectedAddonAtom = atom(undefined);
+exports.syncExternalUI = syncExternalUI;
+var selectedAddonAtom = (0, jotai_1.atom)(undefined);
 /**
  * Hook that manages the state for the currently selected addon.
  *
  * This value persists across stories, so that the same addon will be selected
  * when switching stories.
  */
-export function useSelectedAddon(initialValue) {
-    const result = useAtom(selectedAddonAtom);
-    const set = result[1];
-    React.useEffect(() => {
-        const jotaiStore = getDefaultStore();
+function useSelectedAddon(initialValue) {
+    var result = (0, jotai_1.useAtom)(selectedAddonAtom);
+    var set = result[1];
+    react_1.default.useEffect(function () {
+        var jotaiStore = (0, jotai_1.getDefaultStore)();
         // Only apply the initial value once, and only if the atom doesn't have a
         // value yet.
         if (jotaiStore.get(selectedAddonAtom) === undefined) {
@@ -108,3 +146,4 @@ export function useSelectedAddon(initialValue) {
     }, []);
     return result;
 }
+exports.useSelectedAddon = useSelectedAddon;

package/dist/index.js

@@ -1,23 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var _a;
-import { start } from './preview/start';
-const { clientApi, configure, view } = start();
-export { configure };
-const rawStoriesOf = clientApi.storiesOf.bind(clientApi);
-export const setAddon = clientApi.setAddon.bind(clientApi);
-export const addDecorator = clientApi.addDecorator.bind(clientApi);
-export const addParameters = clientApi.addParameters.bind(clientApi);
-export const addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
-export const addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
-export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
-export const getStorybook = clientApi.getStorybook.bind(clientApi);
-export const raw = clientApi.raw.bind(clientApi);
-export const storiesOf = (kind, _module) => rawStoriesOf(kind, { hot: () => { } }).addParameters({
-    framework: 'react-native',
-});
-export const getStorybookUI = view.getStorybookUI;
-export * from './types/types-6.0';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkTheme = exports.theme = exports.getStorybookUI = exports.storiesOf = exports.raw = exports.getStorybook = exports.clearDecorators = exports.addArgTypesEnhancer = exports.addArgsEnhancer = exports.addParameters = exports.addDecorator = exports.setAddon = exports.configure = void 0;
+var start_1 = require("./preview/start");
+var _b = (0, start_1.start)(), clientApi = _b.clientApi, configure = _b.configure, view = _b.view;
+exports.configure = configure;
+var rawStoriesOf = clientApi.storiesOf.bind(clientApi);
+exports.setAddon = clientApi.setAddon.bind(clientApi);
+exports.addDecorator = clientApi.addDecorator.bind(clientApi);
+exports.addParameters = clientApi.addParameters.bind(clientApi);
+exports.addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
+exports.addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
+exports.clearDecorators = clientApi.clearDecorators.bind(clientApi);
+exports.getStorybook = clientApi.getStorybook.bind(clientApi);
+exports.raw = clientApi.raw.bind(clientApi);
+var storiesOf = function (kind, _module) {
+    return rawStoriesOf(kind, { hot: function () { } }).addParameters({
+        framework: 'react-native',
+    });
+};
+exports.storiesOf = storiesOf;
+exports.getStorybookUI = view.getStorybookUI;
+__exportStar(require("./types/types-6.0"), exports);
 // @storybook/addon-storyshots v6 needs global.__STORYBOOK_STORY_STORE__.initializationPromise
 global.__STORYBOOK_STORY_STORE__ = {
     initializationPromise: (_a = clientApi.storyStore) === null || _a === void 0 ? void 0 : _a.initializationPromise,
 };
-export { theme, darkTheme } from './preview/components/Shared/theme';
+var theme_1 = require("./preview/components/Shared/theme");
+Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.theme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });

package/dist/preview/View.js

@@ -1,3 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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) {
@@ -7,127 +31,180 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useMemo, useReducer } from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { toId } from '@storybook/csf';
-import { addons } from '@storybook/addons';
-import { ThemeProvider } from 'emotion-theming';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { useSetStoryContext, syncExternalUI } from '../hooks';
-import OnDeviceUI from './components/OnDeviceUI';
-import { darkTheme, 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';
-import { useColorScheme } from 'react-native';
-import deepmerge from 'deepmerge';
-const STORAGE_KEY = 'lastOpenedStory';
-export class View {
-    constructor(preview) {
-        this._setStory = () => { };
-        this._ready = false;
-        this._getInitialStory = ({ initialSelection, shouldPersistSelection = true, } = {}) => __awaiter(this, void 0, void 0, function* () {
-            if (initialSelection) {
-                if (typeof initialSelection === 'string') {
-                    return { storySpecifier: initialSelection, viewMode: 'story' };
-                }
-                else {
-                    return {
-                        storySpecifier: toId(initialSelection.kind, initialSelection.name),
-                        viewMode: 'story',
-                    };
-                }
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
             }
-            if (shouldPersistSelection) {
-                try {
-                    let value = this._asyncStorageStoryId;
-                    if (!value) {
-                        value = yield AsyncStorage.getItem(STORAGE_KEY);
-                        this._asyncStorageStoryId = value;
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.View = void 0;
+var react_1 = __importStar(require("react"));
+var async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+var csf_1 = require("@storybook/csf");
+var addons_1 = require("@storybook/addons");
+var emotion_theming_1 = require("emotion-theming");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var hooks_1 = require("../hooks");
+var OnDeviceUI_1 = __importDefault(require("./components/OnDeviceUI"));
+var theme_1 = require("./components/Shared/theme");
+var StoryView_1 = __importDefault(require("./components/StoryView"));
+var channel_websocket_1 = __importDefault(require("@storybook/channel-websocket"));
+var rn_host_detect_1 = __importDefault(require("./rn-host-detect"));
+var core_events_1 = __importDefault(require("@storybook/core-events"));
+var react_native_1 = require("react-native");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var STORAGE_KEY = 'lastOpenedStory';
+var View = /** @class */ (function () {
+    function View(preview) {
+        var _this = this;
+        this._setStory = function () { };
+        this._ready = false;
+        this._getInitialStory = function (_a) {
+            var _b = _a === void 0 ? {} : _a, initialSelection = _b.initialSelection, _c = _b.shouldPersistSelection, shouldPersistSelection = _c === void 0 ? true : _c;
+            return __awaiter(_this, void 0, void 0, function () {
+                var value, e_1;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (initialSelection) {
+                                if (typeof initialSelection === 'string') {
+                                    return [2 /*return*/, { storySpecifier: initialSelection, viewMode: 'story' }];
+                                }
+                                else {
+                                    return [2 /*return*/, {
+                                            storySpecifier: (0, csf_1.toId)(initialSelection.kind, initialSelection.name),
+                                            viewMode: 'story',
+                                        }];
+                                }
+                            }
+                            if (!shouldPersistSelection) return [3 /*break*/, 5];
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 4, , 5]);
+                            value = this._asyncStorageStoryId;
+                            if (!!value) return [3 /*break*/, 3];
+                            return [4 /*yield*/, async_storage_1.default.getItem(STORAGE_KEY)];
+                        case 2:
+                            value = _d.sent();
+                            this._asyncStorageStoryId = value;
+                            _d.label = 3;
+                        case 3: return [2 /*return*/, { storySpecifier: value !== null && value !== void 0 ? value : '*', viewMode: 'story' }];
+                        case 4:
+                            e_1 = _d.sent();
+                            console.warn('storybook-log: error reading from async storage', e_1);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/, { storySpecifier: '*', viewMode: 'story' }];
                     }
-                    return { storySpecifier: value !== null && value !== void 0 ? value : '*', viewMode: 'story' };
-                }
-                catch (e) {
-                    console.warn('storybook-log: error reading from async storage', e);
-                }
-            }
-            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,
+                });
+            });
+        };
+        this._getServerChannel = function (params) {
+            if (params === void 0) { params = {}; }
+            var host = (0, rn_host_detect_1.default)(params.host || 'localhost');
+            var port = ":".concat(params.port || 7007);
+            var query = params.query || '';
+            var websocketType = params.secured ? 'wss' : 'ws';
+            var url = "".concat(websocketType, "://").concat(host).concat(port, "/").concat(query);
+            return (0, channel_websocket_1.default)({
+                url: url,
                 async: true,
-                onError: () => __awaiter(this, void 0, void 0, function* () { }),
+                onError: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                }); }); },
             });
         };
-        this.getStorybookUI = (params = {}) => {
-            const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
-            const initialStory = this._getInitialStory(params);
+        this.getStorybookUI = function (params) {
+            if (params === void 0) { params = {}; }
+            var _a = params.shouldPersistSelection, shouldPersistSelection = _a === void 0 ? true : _a, _b = params.onDeviceUI, onDeviceUI = _b === void 0 ? true : _b, _c = params.enableWebsockets, enableWebsockets = _c === void 0 ? false : _c;
+            var initialStory = _this._getInitialStory(params);
             if (enableWebsockets) {
-                const channel = this._getServerChannel(params);
-                addons.setChannel(channel);
+                var channel = _this._getServerChannel(params);
+                addons_1.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);
+                _this._preview.channel = channel;
+                _this._preview.setupListeners();
+                channel.emit(core_events_1.default.CHANNEL_CREATED);
+                _this._preview.initializeWithStoryIndex(_this._storyIndex);
             }
-            addons.loadAddons({
-                store: () => ({
-                    fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
-                    getSelection: () => {
-                        return this._preview.currentSelection;
+            addons_1.addons.loadAddons({
+                store: function () { return ({
+                    fromId: function (id) {
+                        return _this._preview.storyStore.getStoryContext(_this._preview.storyStore.fromId(id));
+                    },
+                    getSelection: function () {
+                        return _this._preview.currentSelection;
                     },
-                    _channel: this._preview.channel,
-                }),
+                    _channel: _this._preview.channel,
+                }); },
             });
             // eslint-disable-next-line consistent-this
-            const self = this;
+            var self = _this;
             // Sync the Storybook parameters (external) with app UI state (internal), to initialise them.
-            syncExternalUI({
+            (0, hooks_1.syncExternalUI)({
                 isUIVisible: params.isUIHidden !== undefined ? !params.isUIHidden : undefined,
                 isSplitPanelVisible: params.isSplitPanelVisible,
             });
-            return () => {
-                const setContext = useSetStoryContext();
-                const colorScheme = useColorScheme();
-                const [, forceUpdate] = useReducer((x) => x + 1, 0);
-                const appliedTheme = useMemo(() => {
+            return function () {
+                var setContext = (0, hooks_1.useSetStoryContext)();
+                var colorScheme = (0, react_native_1.useColorScheme)();
+                var _a = (0, react_1.useReducer)(function (x) { return x + 1; }, 0), forceUpdate = _a[1];
+                var appliedTheme = (0, react_1.useMemo)(function () {
                     var _a;
-                    return deepmerge(colorScheme === 'dark' ? darkTheme : theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
+                    return (0, deepmerge_1.default)(colorScheme === 'dark' ? theme_1.darkTheme : theme_1.theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
                 }, [colorScheme]);
-                useEffect(() => {
-                    self._setStory = (newStory) => {
+                (0, react_1.useEffect)(function () {
+                    self._setStory = function (newStory) {
                         setContext(newStory);
                         if (shouldPersistSelection) {
-                            AsyncStorage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+                            async_storage_1.default.setItem(STORAGE_KEY, newStory.id).catch(function (e) {
                                 console.warn('storybook-log: error writing to async storage', e);
                             });
                         }
                     };
-                    self._forceRerender = () => forceUpdate();
-                    initialStory.then((story) => {
+                    self._forceRerender = function () { return forceUpdate(); };
+                    initialStory.then(function (story) {
                         self._preview.urlStore.selectionSpecifier = story;
                         self._preview.selectSpecifiedStory();
                     });
                     // eslint-disable-next-line react-hooks/exhaustive-deps
                 }, []);
                 if (onDeviceUI) {
-                    return (React.createElement(SafeAreaProvider, null,
-                        React.createElement(ThemeProvider, { theme: appliedTheme },
-                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                    return (react_1.default.createElement(react_native_safe_area_context_1.SafeAreaProvider, null,
+                        react_1.default.createElement(emotion_theming_1.ThemeProvider, { theme: appliedTheme },
+                            react_1.default.createElement(OnDeviceUI_1.default, { storyIndex: self._storyIndex, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
                 }
                 else {
-                    return React.createElement(StoryView, null);
+                    return react_1.default.createElement(StoryView_1.default, null);
                 }
             };
         };
         this._preview = preview;
     }
-}
+    return View;
+}());
+exports.View = View;