@storybook/react-native 10.1.0 → 10.1.2-alpha.0

package/dist/index.js

@@ -813,17 +813,25 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
+var layoutStyles = {
+  padded: { padding: 8 },
+  centered: { alignItems: "center", justifyContent: "center" },
+  fullscreen: {}
+};
 var StoryView = ({ useWrapper = true }) => {
   const context = useStoryContext();
   const id = context?.id;
   const theme3 = (0, import_react_native_theming.useTheme)();
   const containerStyle = (0, import_react3.useMemo)(() => {
+    const layout = context?.parameters?.layout;
+    const layoutStyle = layout ? layoutStyles[layout] : {};
     return {
       flex: 1,
       backgroundColor: theme3.background?.content,
-      overflow: "hidden"
+      overflow: "hidden",
+      ...layoutStyle
     };
-  }, [theme3.background?.content]);
+  }, [theme3.background?.content, context?.parameters?.layout]);
   const onError = (0, import_react3.useCallback)(() => {
     console.log(`Error rendering story for ${context?.title} ${context?.name}`);
   }, [context?.title, context?.name]);
@@ -845,7 +853,7 @@ var StoryView = ({ useWrapper = true }) => {
     }
     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." }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { children: "Please select a story to preview." }) });
 };
 var StoryView_default = import_react3.default.memo(StoryView);
 

package/dist/metro/withStorybook.js

@@ -105,6 +105,38 @@ var require_common = __commonJS({
   }
 });
 
+// scripts/require-interop.js
+var require_require_interop = __commonJS({
+  "scripts/require-interop.js"(exports2, module2) {
+    var registered = false;
+    function interopRequireDefault(filePath) {
+      const hasEsbuildBeenRegistered = !!require("module")._extensions[".ts"];
+      if (registered === false && !hasEsbuildBeenRegistered) {
+        const { register } = require("esbuild-register/dist/node");
+        registered = true;
+        register({
+          target: `node${process.version.slice(1)}`,
+          format: "cjs",
+          hookIgnoreNodeModules: true,
+          // Some frameworks, like Stylus, rely on the 'name' property of classes or functions
+          // https://github.com/storybookjs/storybook/issues/19049
+          keepNames: true,
+          tsconfigRaw: `{
+      "compilerOptions": {
+        "strict": false,
+        "skipLibCheck": true,
+      },
+    }`
+        });
+      }
+      const result = require(filePath);
+      const isES6DefaultExported = typeof result === "object" && result !== null && typeof result.default !== "undefined";
+      return isES6DefaultExported ? result.default : result;
+    }
+    module2.exports = { interopRequireDefault };
+  }
+});
+
 // scripts/generate.js
 var require_generate = __commonJS({
   "scripts/generate.js"(exports2, module2) {
@@ -116,9 +148,27 @@ var require_generate = __commonJS({
       getAddonName
     } = require_common();
     var { normalizeStories, globToRegexp, loadMainConfig } = require("storybook/internal/common");
+    var { interopRequireDefault } = require_require_interop();
     var fs = require("fs");
     var path2 = require("path");
     var cwd = process.cwd();
+    var loadMain = async ({ configPath, cwd: cwd2 }) => {
+      try {
+        const main = await loadMainConfig({ configDir: configPath, cwd: cwd2 });
+        return main;
+      } catch {
+        console.error("Error loading main config, trying fallback");
+      }
+      const mainPathTs = path2.resolve(cwd2, configPath, `main.ts`);
+      const mainPathJs = path2.resolve(cwd2, configPath, `main.js`);
+      if (fs.existsSync(mainPathTs)) {
+        return interopRequireDefault(mainPathTs);
+      } else if (fs.existsSync(mainPathJs)) {
+        return interopRequireDefault(mainPathJs);
+      } else {
+        throw new Error(`Main config file not found at ${mainPathTs} or ${mainPathJs}`);
+      }
+    };
     async function generate2({
       configPath,
       /* absolute = false, */
@@ -130,7 +180,7 @@ var require_generate = __commonJS({
         configPath,
         `storybook.requires.${useJs ? "js" : "ts"}`
       );
-      const main = await loadMainConfig({ configDir: configPath, cwd });
+      const main = await loadMain({ configPath, cwd });
       const storiesSpecifiers = normalizeStories(main.stories, {
         configDir: configPath,
         workingDir: cwd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.1.0",
+  "version": "10.1.2-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -48,13 +48,14 @@
     "test:generate:update": "node --test --test-update-snapshots scripts/generate.test.js"
   },
   "dependencies": {
-    "@storybook/react": "^10.1.0",
-    "@storybook/react-native-theming": "^10.1.0",
-    "@storybook/react-native-ui": "^10.1.0",
-    "@storybook/react-native-ui-common": "^10.1.0",
+    "@storybook/react": "^10.1.2",
+    "@storybook/react-native-theming": "^10.1.2-alpha.0",
+    "@storybook/react-native-ui": "^10.1.2-alpha.0",
+    "@storybook/react-native-ui-common": "^10.1.2-alpha.0",
     "commander": "^14.0.2",
     "dedent": "^1.7.0",
     "deepmerge": "^4.3.1",
+    "esbuild-register": "^3.6.0",
     "react-native-url-polyfill": "^3.0.0",
     "setimmediate": "^1.0.5",
     "ws": "^8.18.3"
@@ -65,11 +66,11 @@
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^54.0.6",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.13",
+    "jest-expo": "~54.0.16",
     "jotai": "^2.6.2",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "storybook": "^10.1.0",
+    "storybook": "^10.1.2",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3",
     "universal-test-renderer": "^0.6.0"
@@ -103,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "af8cee5245b3a91761a4a07ae4bb695192c0a4c0"
+  "gitHead": "3c47e12910793c447acdd33e6ce8f9628c63019b"
 }

package/scripts/generate.js

@@ -6,12 +6,32 @@ const {
   getAddonName,
 } = require('./common');
 const { normalizeStories, globToRegexp, loadMainConfig } = require('storybook/internal/common');
+const { interopRequireDefault } = require('./require-interop');
 const fs = require('fs');
 
 const path = require('path');
 
 const cwd = process.cwd();
 
+const loadMain = async ({ configPath, cwd }) => {
+  try {
+    const main = await loadMainConfig({ configDir: configPath, cwd });
+    return main;
+  } catch {
+    console.error('Error loading main config, trying fallback');
+  }
+
+  const mainPathTs = path.resolve(cwd, configPath, `main.ts`);
+  const mainPathJs = path.resolve(cwd, configPath, `main.js`);
+  if (fs.existsSync(mainPathTs)) {
+    return interopRequireDefault(mainPathTs);
+  } else if (fs.existsSync(mainPathJs)) {
+    return interopRequireDefault(mainPathJs);
+  } else {
+    throw new Error(`Main config file not found at ${mainPathTs} or ${mainPathJs}`);
+  }
+};
+
 async function generate({ configPath, /* absolute = false, */ useJs = false, docTools = true }) {
   const storybookRequiresLocation = path.resolve(
     cwd,
@@ -19,9 +39,7 @@ async function generate({ configPath, /* absolute = false, */ useJs = false, doc
     `storybook.requires.${useJs ? 'js' : 'ts'}`
   );
 
-  const main = await loadMainConfig({ configDir: configPath, cwd });
-
-  // const reactNativeOptions = main.reactNativeOptions;
+  const main = await loadMain({ configPath, cwd });
 
   const storiesSpecifiers = normalizeStories(main.stories, {
     configDir: configPath,

package/scripts/require-interop.js

@@ -0,0 +1,32 @@
+let registered = false;
+function interopRequireDefault(filePath) {
+  const hasEsbuildBeenRegistered = !!require('module')._extensions['.ts'];
+
+  if (registered === false && !hasEsbuildBeenRegistered) {
+    const { register } = require('esbuild-register/dist/node');
+    registered = true;
+    register({
+      target: `node${process.version.slice(1)}`,
+      format: 'cjs',
+      hookIgnoreNodeModules: true,
+      // Some frameworks, like Stylus, rely on the 'name' property of classes or functions
+      // https://github.com/storybookjs/storybook/issues/19049
+      keepNames: true,
+      tsconfigRaw: `{
+      "compilerOptions": {
+        "strict": false,
+        "skipLibCheck": true,
+      },
+    }`,
+    });
+  }
+
+  const result = require(filePath);
+
+  const isES6DefaultExported =
+    typeof result === 'object' && result !== null && typeof result.default !== 'undefined';
+
+  return isES6DefaultExported ? result.default : result;
+}
+
+module.exports = { interopRequireDefault };