@storybook/react-native 9.0.9 → 9.0.14

package/dist/index.d.ts

@@ -3,7 +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 { StoryContext } from '@storybook/csf';
+import { StoryContext } from 'storybook/internal/csf';
 import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import { SBUI } from '@storybook/react-native-ui-common';
@@ -32,15 +32,31 @@ type DeepPartial<T> = T extends object ? {
 type ThemePartial = DeepPartial<Theme>;
 type Params = {
     onDeviceUI?: boolean;
+    /**
+     * Set as false to disable the wrapper around the story view.
+     * NOTE We may remove this in the future for a better solution.
+     * default: true
+     */
+    hasStoryWrapper?: boolean;
+    /**
+     * Enable websockets for the storybook server to remotely control the storybook
+     * default: false
+     */
     enableWebsockets?: boolean;
     query?: string;
+    /** The host for the websocket server. default: localhost */
     host?: string;
+    /** The port for the websocket server. default: 7007 */
     port?: number;
     secured?: boolean;
+    /** The initial story */
     initialSelection?: InitialSelection;
+    /** Whether to persist story selection. default: true */
     shouldPersistSelection?: boolean;
     theme: ThemePartial;
+    /** Used for persisting story selection. required. */
     storage?: Storage;
+    /** The custom UI component to use instead of the default UI */
     CustomUIComponent?: SBUI;
 };
 declare class View {

package/dist/index.js

@@ -43,11 +43,11 @@ var import_react_native_theming3 = require("@storybook/react-native-theming");
 var import_react_native4 = require("react-native");
 var import_manager_api2 = require("storybook/internal/manager-api");
 var import_preview_api2 = require("storybook/internal/preview-api");
-var import_csf2 = require("@storybook/csf");
+var import_csf2 = require("storybook/internal/csf");
 var import_channels2 = require("storybook/internal/channels");
 
 // src/View.tsx
-var import_csf = require("@storybook/csf");
+var import_csf = require("storybook/internal/csf");
 var import_react_native_theming2 = require("@storybook/react-native-theming");
 var import_react_native_ui_common = require("@storybook/react-native-ui-common");
 var import_channels = require("storybook/internal/channels");
@@ -789,7 +789,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var StoryView = () => {
+var StoryView = ({ useWrapper = true }) => {
   const context = useStoryContext();
   const id = context?.id;
   const theme3 = (0, import_react_native_theming.useTheme)();
@@ -805,18 +805,21 @@ var StoryView = () => {
   }, [context?.title, context?.name]);
   if (context && context.unboundStoryFn) {
     const { unboundStoryFn: StoryComponent } = context;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_native2.View,
-      {
-        style: containerStyle,
-        testID: id,
-        accessibilityLabel: id,
-        importantForAccessibility: "no",
-        onStartShouldSetResponder: dismissOnStartResponder,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundary, { onError, children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryComponent, { ...context }) })
-      },
-      id
-    );
+    if (useWrapper) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.View,
+        {
+          style: containerStyle,
+          testID: id,
+          accessibilityLabel: id,
+          importantForAccessibility: "no",
+          onStartShouldSetResponder: dismissOnStartResponder,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundary, { onError, children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryComponent, { ...context }) })
+        },
+        id
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundary, { onError, children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryComponent, { ...context }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { children: "Please open the sidebar and select a story to preview." }) });
 };
@@ -953,7 +956,8 @@ var View3 = class {
       onDeviceUI = true,
       enableWebsockets = false,
       storage,
-      CustomUIComponent
+      CustomUIComponent,
+      hasStoryWrapper: storyViewWrapper = true
     } = params;
     const getFullUI = (enabled) => {
       if (enabled) {
@@ -1121,7 +1125,7 @@ var View3 = class {
               setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
               storage,
               theme: appliedTheme,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper })
             }
           );
         }
@@ -1133,11 +1137,11 @@ var View3 = class {
             storyHash,
             story,
             setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper })
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper });
       }
     };
   };

package/dist/metro/withStorybook.js

@@ -159,10 +159,14 @@ var require_generate = __commonJS({
     files: "${specifier.files}",
     importPathMatcher: /${reg.source}/,
     ${useJs ? "" : "// @ts-ignore"}
-    req: require.context('${pathToStory}', ${r}, ${m})
+    req: require.context(
+      '${pathToStory}',
+      ${r},
+      ${m}
+    ),
   }`;
       });
-      let registerAddons = "";
+      const registeredAddons = [];
       for (const addon of main.addons) {
         const registerPath = resolveAddonFile(
           getAddonName(addon),
@@ -171,8 +175,7 @@ var require_generate = __commonJS({
           configPath
         );
         if (registerPath) {
-          registerAddons += `import "${registerPath}";
-`;
+          registeredAddons.push(`import "${registerPath}";`);
         }
       }
       const docToolsAnnotation = 'require("@storybook/react-native/preview")';
@@ -211,14 +214,14 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
 }
-  `;
+`;
       const fileContent = `/* do not change this file, it is auto generated by storybook. */
 import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
 
-${registerAddons}
+${registeredAddons.join("\n")}
 
 const normalizedStories = [
-  ${normalizedStories.join(",\n  ")}
+  ${normalizedStories.join(",\n")}
 ];
 
 ${useJs ? "" : globalTypes}
@@ -236,10 +239,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    ${options}
+${options ? `    ${options},` : ""}
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, ${options});
+  updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ""});
 }
 
 export const view${useJs ? "" : ": View"} = global.view;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.9",
+  "version": "9.0.14",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -46,12 +46,11 @@
     "test:update": "jest --updateSnapshot"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^9.0.9",
-    "@storybook/react-native-theming": "^9.0.9",
-    "@storybook/react-native-ui": "^9.0.9",
-    "@storybook/react-native-ui-common": "^9.0.9",
+    "@storybook/react": "9.0.14",
+    "@storybook/react-native-theming": "^9.0.14",
+    "@storybook/react-native-ui": "^9.0.14",
+    "@storybook/react-native-ui-common": "^9.0.14",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -72,7 +71,7 @@
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-test-renderer": "^19.1.0",
-    "storybook": "^9.0.9",
+    "storybook": "9.0.14",
     "tsup": "^7.2.0",
     "typescript": "~5.8.3"
   },
@@ -83,7 +82,7 @@
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": "^9.0.9"
+    "storybook": "9.0.14"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -105,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6c247692ee0ede93df4e7df6e27e832e3e40a45d"
+  "gitHead": "19bb44781daef1f4bd1c5782c0a00d5b7fa5b943"
 }

package/scripts/__snapshots__/generate.test.js.snap

@@ -9,7 +9,6 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
-
 const normalizedStories = [
   {
     titlePrefix: "",
@@ -17,7 +16,11 @@ const normalizedStories = [
     files: "FakeStory.stories.tsx",
     importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
     // @ts-ignore
-    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+    req: require.context(
+      './',
+      false,
+      /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/
+    ),
   }
 ];
 
@@ -26,7 +29,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
 }
-  
+
 
 const annotations = [
   require('./preview'),
@@ -44,10 +47,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    
+
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, );
+  updateView(global.view, annotations, normalizedStories);
 }
 
 export const view: View = global.view;
@@ -63,7 +66,6 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
-
 const normalizedStories = [
   {
     titlePrefix: "ComponentsPrefix",
@@ -71,7 +73,11 @@ const normalizedStories = [
     files: "**/*.stories.tsx",
     importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
     // @ts-ignore
-    req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
+    req: require.context(
+      './components',
+      true,
+      /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/
+    ),
   }
 ];
 
@@ -80,7 +86,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
 }
-  
+
 
 const annotations = [
   require('./preview'),
@@ -98,10 +104,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    
+
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, );
+  updateView(global.view, annotations, normalizedStories);
 }
 
 export const view: View = global.view;
@@ -117,7 +123,6 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
-
 const normalizedStories = [
   {
     titlePrefix: "",
@@ -125,7 +130,11 @@ const normalizedStories = [
     files: "FakeStory.stories.tsx",
     importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
     // @ts-ignore
-    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+    req: require.context(
+      './',
+      false,
+      /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/
+    ),
   }
 ];
 
@@ -134,7 +143,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
 }
-  
+
 
 const annotations = [
   require('./preview'),
@@ -152,10 +161,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    
+
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, );
+  updateView(global.view, annotations, normalizedStories);
 }
 
 export const view: View = global.view;
@@ -171,7 +180,6 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
-
 const normalizedStories = [
   {
     titlePrefix: "",
@@ -179,7 +187,11 @@ const normalizedStories = [
     files: "FakeStory.stories.tsx",
     importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
     // @ts-ignore
-    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+    req: require.context(
+      './',
+      false,
+      /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/
+    ),
   }
 ];
 
@@ -188,7 +200,7 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
 }
-  
+
 
 const annotations = [
   require("@storybook/react-native/preview")
@@ -205,10 +217,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    
+
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, );
+  updateView(global.view, annotations, normalizedStories);
 }
 
 export const view: View = global.view;
@@ -224,7 +236,6 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
-
 const normalizedStories = [
   {
     titlePrefix: "",
@@ -232,7 +243,11 @@ const normalizedStories = [
     files: "FakeStory.stories.tsx",
     importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
     
-    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+    req: require.context(
+      './',
+      false,
+      /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/
+    ),
   }
 ];
 
@@ -254,10 +269,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    
+
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, );
+  updateView(global.view, annotations, normalizedStories);
 }
 
 export const view = global.view;

package/scripts/generate.js

@@ -44,11 +44,15 @@ function generate({ configPath, /* absolute = false, */ useJs = false, docTools
     files: "${specifier.files}",
     importPathMatcher: /${reg.source}/,
     ${useJs ? '' : '// @ts-ignore'}
-    req: require.context('${pathToStory}', ${r}, ${m})
+    req: require.context(
+      '${pathToStory}',
+      ${r},
+      ${m}
+    ),
   }`;
   });
 
-  let registerAddons = '';
+  const registeredAddons = [];
 
   for (const addon of main.addons) {
     const registerPath = resolveAddonFile(
@@ -59,7 +63,7 @@ function generate({ configPath, /* absolute = false, */ useJs = false, docTools
     );
 
     if (registerPath) {
-      registerAddons += `import "${registerPath}";\n`;
+      registeredAddons.push(`import "${registerPath}";`);
     }
   }
 
@@ -109,15 +113,15 @@ declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
 }
-  `;
+`;
 
   const fileContent = `/* do not change this file, it is auto generated by storybook. */
 import { start, updateView${useJs ? '' : ', View'} } from '@storybook/react-native';
 
-${registerAddons}
+${registeredAddons.join('\n')}
 
 const normalizedStories = [
-  ${normalizedStories.join(',\n  ')}
+  ${normalizedStories.join(',\n')}
 ];
 
 ${useJs ? '' : globalTypes}
@@ -135,10 +139,10 @@ if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
-    ${options}
+${options ? `    ${options},` : ''}
   });
 } else {
-  updateView(global.view, annotations, normalizedStories, ${options});
+  updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ''});
 }
 
 export const view${useJs ? '' : ': View'} = global.view;