@storybook/react-native 10.2.2-alpha.5 → 10.2.2-canary.1

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { StoryIndex, PreparedStory, NormalizedStoriesSpecifier, Addon_StorySortP
 import { ReactRenderer } from '@storybook/react';
 export { ArgTypes, Args, Decorator, Loader, Meta, Parameters, Preview, StoryFn, StoryObj } from '@storybook/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { StoryContext } from 'storybook/internal/csf';
 import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
@@ -79,8 +80,11 @@ declare class View {
     _getHost: (params?: Partial<Params>) => any;
     __getPort: (params?: Partial<Params>) => any;
     _getServerChannel: (params?: Partial<Params>) => Channel;
+    showStorybook: (v?: boolean) => void;
     createPreparedStoryMapping: () => Promise<void>;
-    getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
+    getStorybookUI: (params?: Partial<Params>) => ({ children }: {
+        children: React.ReactNode;
+    }) => string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode>> | react_jsx_runtime.JSX.Element;
 }
 
 /** Configuration options that are needed at startup, only serialisable values are possible */

package/dist/index.js

@@ -955,6 +955,9 @@ var View3 = class {
     });
     return channel;
   };
+  showStorybook = (v = true) => {
+    this._channel.emit("SHOW_STORYBOOK", v);
+  };
   createPreparedStoryMapping = async () => {
     await this._preview.ready().then(
       () => Promise.all(
@@ -1016,7 +1019,9 @@ var View3 = class {
       })
     });
     const self = this;
-    return () => {
+    return ({ children }) => {
+      const isShownInitially = !children || !!self._channel.last("SHOW_STORYBOOK") || !!globalThis.STORYBOOK_FORCE_ENABLED;
+      const [isShown, setIsShown] = (0, import_react4.useState)(isShownInitially);
       const setContext = useSetStoryContext();
       const story = useStoryContext();
       const colorScheme = (0, import_react_native3.useColorScheme)();
@@ -1026,6 +1031,11 @@ var View3 = class {
         () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming2.darkTheme : import_react_native_theming2.theme, params.theme ?? {}),
         [colorScheme]
       );
+      (0, import_react4.useEffect)(() => {
+        self._channel.on("SHOW_STORYBOOK", (v = true) => {
+          setIsShown(v);
+        });
+      }, []);
       (0, import_react4.useEffect)(() => {
         const listener = import_react_native3.Linking.addEventListener("url", ({ url }) => {
           if (typeof url === "string") {
@@ -1119,6 +1129,9 @@ var View3 = class {
           }
         });
       }, [ready, update]);
+      if (!isShown) {
+        return children || null;
+      }
       if (!ready) {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_react_native3.View,

package/dist/metro/withStorybook.js

@@ -199,7 +199,10 @@ var require_generate = __commonJS({
       host = void 0,
       port = 7007
     }) {
-      const channelHost = host === "auto" ? getLocalIPAddress() : host;
+      const envChannelHost = process.env.STORYBOOK_CHANNEL_HOST;
+      const envChannelPort = process.env.STORYBOOK_CHANNEL_PORT;
+      const channelHost = envChannelHost || (host === "auto" ? getLocalIPAddress() : host);
+      const channelPort = envChannelPort || port;
       const storybookRequiresLocation = path3.resolve(
         cwd2,
         configPath,
@@ -275,6 +278,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
   var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_FORCE_ENABLED: boolean | undefined;
 }
 `;
       const fileContent = `/* do not change this file, it is auto generated by storybook. */
@@ -290,9 +294,10 @@ ${useJs ? "" : globalTypes}
 
 const annotations = ${annotations};
 
-globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
 
+globalThis.STORIES = normalizedStories;
+${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${channelPort} };` : ""}
+${process.env.STORYBOOK_FORCE_ENABLED ? `globalThis.STORYBOOK_FORCE_ENABLED = true;` : ""}
 ${useJs ? "" : "// @ts-ignore"}
 module?.hot?.accept?.();
 
@@ -529,11 +534,11 @@ function withStorybook(config, options = {
     configPath = path2.resolve(process.cwd(), "./.rnstorybook"),
     websockets,
     useJs = false,
-    enabled = true,
     docTools = true,
     liteMode = false
   } = options;
   const disableTelemetry = (0, import_common3.optionalEnvToBoolean)(process.env.STORYBOOK_DISABLE_TELEMETRY);
+  const enabled = (0, import_common3.optionalEnvToBoolean)(process.env.STORYBOOK_FORCE_ENABLED) || (options.enabled ?? true);
   if (!disableTelemetry && enabled) {
     const event = process.env.NODE_ENV === "production" ? "build" : "dev";
     (0, import_telemetry.telemetry)(event, {}).catch((e) => {

package/dist/repack/withStorybook.js

@@ -199,7 +199,10 @@ var require_generate = __commonJS({
       host = void 0,
       port = 7007
     }) {
-      const channelHost = host === "auto" ? getLocalIPAddress() : host;
+      const envChannelHost = process.env.STORYBOOK_CHANNEL_HOST;
+      const envChannelPort = process.env.STORYBOOK_CHANNEL_PORT;
+      const channelHost = envChannelHost || (host === "auto" ? getLocalIPAddress() : host);
+      const channelPort = envChannelPort || port;
       const storybookRequiresLocation = path3.resolve(
         cwd2,
         configPath,
@@ -275,6 +278,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
   var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_FORCE_ENABLED: boolean | undefined;
 }
 `;
       const fileContent = `/* do not change this file, it is auto generated by storybook. */
@@ -290,9 +294,10 @@ ${useJs ? "" : globalTypes}
 
 const annotations = ${annotations};
 
-globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
 
+globalThis.STORIES = normalizedStories;
+${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${channelPort} };` : ""}
+${process.env.STORYBOOK_FORCE_ENABLED ? `globalThis.STORYBOOK_FORCE_ENABLED = true;` : ""}
 ${useJs ? "" : "// @ts-ignore"}
 module?.hot?.accept?.();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.2.2-alpha.5",
+  "version": "10.2.2-canary.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,9 +51,9 @@
   },
   "dependencies": {
     "@storybook/react": "^10.2.2",
-    "@storybook/react-native-theming": "^10.2.2-alpha.5",
-    "@storybook/react-native-ui": "^10.2.2-alpha.5",
-    "@storybook/react-native-ui-common": "^10.2.2-alpha.5",
+    "@storybook/react-native-theming": "^10.2.2-canary.1",
+    "@storybook/react-native-ui": "^10.2.2-canary.1",
+    "@storybook/react-native-ui-common": "^10.2.2-canary.1",
     "commander": "^14.0.2",
     "dedent": "^1.7.0",
     "deepmerge": "^4.3.1",
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "51485fba2ef3d8f323905bdbee0ad1828ce45eb4"
+  "gitHead": "1626205fb105d17ee86111d277a7a939140b5e87"
 }

package/scripts/generate.js

@@ -58,7 +58,11 @@ async function generate({
   port = 7007,
 }) {
   // here we want to get the ip address and pass it to rn storybook so that devices can connect over lan easily
-  const channelHost = host === 'auto' ? getLocalIPAddress() : host;
+  const envChannelHost = process.env.STORYBOOK_CHANNEL_HOST;
+  const envChannelPort = process.env.STORYBOOK_CHANNEL_PORT;
+
+  const channelHost = envChannelHost || (host === 'auto' ? getLocalIPAddress() : host);
+  const channelPort = envChannelPort || port;
   const storybookRequiresLocation = path.resolve(
     cwd,
     configPath,
@@ -154,6 +158,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
   var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_FORCE_ENABLED: boolean | undefined;
 }
 `;
 
@@ -170,9 +175,10 @@ ${useJs ? '' : globalTypes}
 
 const annotations = ${annotations};
 
-globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ''}
 
+globalThis.STORIES = normalizedStories;
+${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${channelPort} };` : ''}
+${process.env.STORYBOOK_FORCE_ENABLED ? `globalThis.STORYBOOK_FORCE_ENABLED = true;` : ''}
 ${useJs ? '' : '// @ts-ignore'}
 module?.hot?.accept?.();
 

package/scripts/generate.test.js.snapshot

@@ -1,39 +1,39 @@
 exports[`loader > writeRequires > when host and port are provided > includes STORYBOOK_WEBSOCKET with host and port 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\nglobalThis.STORYBOOK_WEBSOCKET = { host: '192.168.1.100', port: 8080 };\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\nglobalThis.STORYBOOK_WEBSOCKET = { host: '192.168.1.100', port: 8080 };\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when host and port are provided with useJs > includes STORYBOOK_WEBSOCKET in JS file 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    \\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\nglobalThis.STORYBOOK_WEBSOCKET = { host: '192.168.1.100', port: 8080 };\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    \\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\nglobalThis.STORYBOOK_WEBSOCKET = { host: '192.168.1.100', port: 8080 };\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when host is not provided > does not include STORYBOOK_WEBSOCKET assignment 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when only host is provided > includes STORYBOOK_WEBSOCKET with host and default port 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\nglobalThis.STORYBOOK_WEBSOCKET = { host: 'localhost', port: 7007 };\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\nglobalThis.STORYBOOK_WEBSOCKET = { host: 'localhost', port: 7007 };\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when only port is provided without host > does not include STORYBOOK_WEBSOCKET assignment 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when there are different file extensions > writes the story imports 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/file-extensions\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/file-extensions\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when there is a configuration object > writes the story imports 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"ComponentsPrefix\\",\\n    directory: \\"./scripts/mocks/configuration-objects/components\\",\\n    files: \\"**/*.stories.tsx\\",\\n    importPathMatcher: /^\\\\.(?:(?:^|\\\\/|(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './components',\\n      true,\\n      /^\\\\.(?:(?:^|\\\\/|(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"ComponentsPrefix\\",\\n    directory: \\"./scripts/mocks/configuration-objects/components\\",\\n    files: \\"**/*.stories.tsx\\",\\n    importPathMatcher: /^\\\\.(?:(?:^|\\\\/|(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './components',\\n      true,\\n      /^\\\\.(?:(?:^|\\\\/|(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when there is a story glob > writes the story imports 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when there is no preview > does not add preview related stuff 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/no-preview\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView, View } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/no-preview\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    // @ts-ignore\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var STORYBOOK_FORCE_ENABLED: boolean | undefined;\\n}\\n\\n\\nconst annotations = [\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n// @ts-ignore\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
 exports[`loader > writeRequires > when using js > writes the story imports without types 1`] = `
-"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    \\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view = globalThis.view;\\n"
+"/* do not change this file, it is auto generated by storybook. */\\nimport { start, updateView } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    \\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view = globalThis.view;\\n"
 `;