@storybook/react-native 7.6.11 → 7.6.13

package/dist/V6.js

@@ -1256,12 +1256,26 @@ var ErrorBoundary = class extends import_react4.default.Component {
   static getDerivedStateFromError(_error) {
     return { hasError: true };
   }
-  componentDidCatch(error, errorInfo) {
-    console.warn(error, errorInfo);
+  componentDidCatch(error, info) {
+    this.props.onError(error, info.componentStack);
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Something went wrong rendering your story" });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.View,
+        {
+          style: {
+            margin: 16,
+            padding: 16,
+            borderColor: "red",
+            borderWidth: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 4
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: { fontWeight: "bold" }, children: "Something went wrong rendering your story" })
+        }
+      );
     }
     return this.props.children;
   }
@@ -1285,7 +1299,15 @@ var StoryView = () => {
         style: { flex: 1, backgroundColor },
         testID: id,
         onStartShouldSetResponder: dismissOnStartResponder,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ErrorBoundary,
+          {
+            onError: () => {
+              console.log(`Error rendering story for ${context.title} ${context.name}`);
+            },
+            children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context })
+          }
+        )
       },
       id
     );
@@ -2003,7 +2025,7 @@ function getHost(hostname) {
 // src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
-var View10 = class {
+var View11 = class {
   _storyIndex;
   _setStory = () => {
   };
@@ -2069,7 +2091,6 @@ var View10 = class {
         this._idToPrepared[storyId] = await this._preview.storyStore.loadStory({ storyId });
       })
     );
-    console.log("Storybook: Finished building story index");
   };
   getStorybookUI = (params = {}) => {
     const {
@@ -2300,7 +2321,7 @@ function start() {
     preview.onStoriesChanged({ storyIndex });
     view2._storyIndex = storyIndex;
   }
-  const view2 = new View10(preview, channel);
+  const view2 = new View11(preview, channel);
   return {
     view: view2,
     forceReRender: () => channel.emit(import_core_events3.default.FORCE_RE_RENDER),

package/dist/index.js

@@ -1249,12 +1249,26 @@ var ErrorBoundary = class extends import_react4.default.Component {
   static getDerivedStateFromError(_error) {
     return { hasError: true };
   }
-  componentDidCatch(error, errorInfo) {
-    console.warn(error, errorInfo);
+  componentDidCatch(error, info) {
+    this.props.onError(error, info.componentStack);
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Something went wrong rendering your story" });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.View,
+        {
+          style: {
+            margin: 16,
+            padding: 16,
+            borderColor: "red",
+            borderWidth: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 4
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: { fontWeight: "bold" }, children: "Something went wrong rendering your story" })
+        }
+      );
     }
     return this.props.children;
   }
@@ -1278,7 +1292,15 @@ var StoryView = () => {
         style: { flex: 1, backgroundColor },
         testID: id,
         onStartShouldSetResponder: dismissOnStartResponder,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ErrorBoundary,
+          {
+            onError: () => {
+              console.log(`Error rendering story for ${context.title} ${context.name}`);
+            },
+            children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context })
+          }
+        )
       },
       id
     );
@@ -1996,7 +2018,7 @@ function getHost(hostname) {
 // src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
-var View10 = class {
+var View11 = class {
   _storyIndex;
   _setStory = () => {
   };
@@ -2062,7 +2084,6 @@ var View10 = class {
         this._idToPrepared[storyId] = await this._preview.storyStore.loadStory({ storyId });
       })
     );
-    console.log("Storybook: Finished building story index");
   };
   getStorybookUI = (params = {}) => {
     const {
@@ -2279,7 +2300,7 @@ function start({
     }
   };
   const preview = new import_preview_web.PreviewWithSelection(urlStore, previewView);
-  const view = new View10(preview, channel);
+  const view = new View11(preview, channel);
   if (global) {
     global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
     global.__STORYBOOK_PREVIEW__ = preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.11",
+  "version": "7.6.13",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -63,7 +63,7 @@
     "@storybook/preview-api": "^7.6.10",
     "@storybook/preview-web": "^7.6.10",
     "@storybook/react": "^7.6.10",
-    "@storybook/react-native-theming": "^7.6.11",
+    "@storybook/react-native-theming": "^7.6.13",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5aed8e2d2ddc4fe76dd5f883aeb35e3fb48cae87"
+  "gitHead": "65a036af0a3bdb8a3c48e8acc2b7a935165ddbb8"
 }

package/readme.md

@@ -79,7 +79,7 @@ Then set `transformer.unstable_allowRequireContext` to true and add the generate
 
 ```js
 // metro.config.js
-
+const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
 
 const { generate } = require('@storybook/react-native/scripts/generate');
@@ -88,16 +88,18 @@ generate({
   configPath: path.resolve(__dirname, './.storybook'),
 });
 
-const defaultConfig = getDefaultConfig(__dirname);
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
 
-defaultConfig.transformer.unstable_allowRequireContext = true;
+config.transformer.unstable_allowRequireContext = true;
 
-module.exports = defaultConfig;
+module.exports = config;
 ```
 
 **React native**
 
 ```js
+const path = require('path');
 const { generate } = require('@storybook/react-native/scripts/generate');
 
 generate({

package/scripts/generate.js

@@ -29,14 +29,13 @@ function generate({ configPath, absolute = false, useJs = false }) {
     workingDir: cwd,
   });
 
-  // TODO refactor contexts and normalized stories to be one thing
   const normalizedStories = storiesSpecifiers.map((specifier) => {
     // TODO why????
     const reg = globToRegexp(`./${specifier.files}`);
 
     const { path: p, recursive: r, match: m } = toRequireContext(specifier);
 
-    const pathToStory = ensureRelativePathHasDot(path.relative(configPath, p));
+    const pathToStory = ensureRelativePathHasDot(path.posix.relative(configPath, p));
     return `{
       titlePrefix: "${specifier.titlePrefix}",
       directory: "${specifier.directory}",