@storybook/react-native 8.4.0-alpha.0 → 8.4.0-rc.0

package/babel.config.js

@@ -1,4 +1,4 @@
 // note this file is used by jest to make it not shit itself
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
 };

package/dist/metro/withStorybook.js

@@ -68,13 +68,31 @@ var require_common = __commonJS({
     function getPreviewExists({ configPath }) {
       return !!getFilePathExtension({ configPath }, "preview");
     }
+    function resolveAddonFile(addon, file, extensions = ["js", "mjs", "ts"]) {
+      try {
+        const basePath = path2.join(addon, file);
+        require.resolve(basePath);
+        return basePath;
+      } catch (error) {
+      }
+      for (const ext of extensions) {
+        try {
+          const filePath = path2.join(addon, `${file}.${ext}`);
+          require.resolve(filePath);
+          return filePath;
+        } catch (error) {
+        }
+      }
+      return null;
+    }
     module2.exports = {
       toRequireContext,
       requireUncached,
       getFilePathExtension,
       getMain,
       ensureRelativePathHasDot,
-      getPreviewExists
+      getPreviewExists,
+      resolveAddonFile
     };
   }
 });
@@ -86,7 +104,8 @@ var require_generate = __commonJS({
       toRequireContext,
       ensureRelativePathHasDot,
       getMain,
-      getPreviewExists
+      getPreviewExists,
+      resolveAddonFile
     } = require_common();
     var { normalizeStories, globToRegexp } = require("@storybook/core/common");
     var fs = require("fs");
@@ -118,9 +137,23 @@ var require_generate = __commonJS({
       req: require.context('${pathToStory}', ${r}, ${m})
     }`;
       });
-      const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join("\n");
-      const doctools = 'require("@storybook/react-native/preview")';
-      const enhancer = main.addons?.includes("@storybook/addon-ondevice-actions") ? "require('@storybook/addon-actions/preview')" : "";
+      let registerAddons = "";
+      for (const addon of main.addons) {
+        const registerPath = resolveAddonFile(addon, "register", ["js", "mjs", "jsx", "ts", "tsx"]);
+        if (registerPath) {
+          registerAddons += `import "${registerPath}";
+`;
+        }
+      }
+      const docTools = 'require("@storybook/react-native/preview")';
+      const enhancers = [docTools];
+      for (const addon of main.addons) {
+        const previewPath = resolveAddonFile(addon, "preview", ["js", "mjs", "jsx", "ts", "tsx"]);
+        if (previewPath) {
+          enhancers.push(`require('${previewPath}')`);
+          continue;
+        }
+      }
       let options = "";
       let optionsVar = "";
       const reactNativeOptions = main.reactNative;
@@ -129,7 +162,10 @@ var require_generate = __commonJS({
         options = "options";
       }
       const previewExists = getPreviewExists({ configPath });
-      const annotations = `[${previewExists ? "require('./preview')," : ""}${doctools}, ${enhancer}]`;
+      if (previewExists) {
+        enhancers.unshift("require('./preview')");
+      }
+      const annotations = `[${enhancers.join(", ")}]`;
       const globalTypes = `
     declare global {
       var view: ReturnType<typeof start>;

package/jest.config.js

@@ -5,5 +5,9 @@ const config = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   transformIgnorePatterns: ['node_modules/(?!react-native|@react-native)'],
   setupFilesAfterEnv: ['<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js'],
+  transform: {
+    '^.+\\.(js)$': ['babel-jest', { plugins: ['babel-plugin-syntax-hermes-parser'] }],
+    '^.+\\.(ts|tsx)$': 'babel-jest',
+  },
 };
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.4.0-alpha.0",
+  "version": "8.4.0-rc.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -41,15 +41,16 @@
     "dev": "npx --yes tsx buildscripts/gendtsdev.ts && tsup --watch",
     "prepare": "rm -rf dist/ && tsup",
     "test": "jest",
-    "test:ci": "jest"
+    "test:ci": "jest",
+    "test:update": "jest --updateSnapshot"
   },
   "dependencies": {
-    "@storybook/core": "^8.4.0-beta.0",
+    "@storybook/core": "^8.4.0",
     "@storybook/csf": "^0.1.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^8.4.0-beta.0",
-    "@storybook/react-native-theming": "^8.4.0-alpha.0",
-    "@storybook/react-native-ui": "^8.4.0-alpha.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-native-theming": "^8.4.0-rc.0",
+    "@storybook/react-native-ui": "^8.4.0-rc.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -59,7 +60,7 @@
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-url-polyfill": "^2.0.0",
     "setimmediate": "^1.0.5",
-    "storybook": "^8.4.0-beta.0",
+    "storybook": "^8.4.0",
     "type-fest": "~2.19",
     "util": "^0.12.4",
     "ws": "^8.18.0"
@@ -67,17 +68,20 @@
   "devDependencies": {
     "@types/jest": "^29.4.3",
     "@types/react": "~18.3.12",
-    "babel-jest": "^29.4.3",
-    "jest": "29.7.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-syntax-hermes-parser": "^0.25.0",
+    "jest": "^29.7.0",
     "jotai": "^2.6.2",
-    "react-test-renderer": "18.2.0",
+    "react": "18.3.1",
+    "react-native": "0.76.1",
+    "react-test-renderer": "^18.3.1",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",
     "react": "*",
-    "react-native": ">=0.57.0",
+    "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
     "react-native-safe-area-context": "*"
   },
@@ -87,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "11531d9d55c0c933feb61d507595da80becb0b4a"
+  "gitHead": "abd58c20c9280c03482f879c0dd4471ccdc3432a"
 }

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

@@ -11,6 +11,7 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
+
   const normalizedStories = [{
       titlePrefix: "",
       directory: "./scripts/mocks/file-extensions",
@@ -27,7 +28,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -61,6 +62,7 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
+
   const normalizedStories = [{
       titlePrefix: "ComponentsPrefix",
       directory: "./scripts/mocks/configuration-objects/components",
@@ -77,7 +79,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -111,6 +113,7 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
+
   const normalizedStories = [{
       titlePrefix: "",
       directory: "./scripts/mocks/all-config-files",
@@ -127,7 +130,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -161,6 +164,7 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
+
   const normalizedStories = [{
       titlePrefix: "",
       directory: "./scripts/mocks/no-preview",
@@ -177,7 +181,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -211,6 +215,7 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
+
   const normalizedStories = [{
       titlePrefix: "",
       directory: "./scripts/mocks/all-config-files",
@@ -222,7 +227,7 @@ import "@storybook/addon-ondevice-actions/register";
 
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
   

package/scripts/common.js

@@ -58,6 +58,28 @@ function getPreviewExists({ configPath }) {
   return !!getFilePathExtension({ configPath }, 'preview');
 }
 
+function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts']) {
+  try {
+    const basePath = path.join(addon, file);
+
+    require.resolve(basePath);
+
+    return basePath;
+  } catch (error) {}
+
+  for (const ext of extensions) {
+    try {
+      const filePath = path.join(addon, `${file}.${ext}`);
+
+      require.resolve(filePath);
+
+      return filePath;
+    } catch (error) {}
+  }
+
+  return null;
+}
+
 module.exports = {
   toRequireContext,
   requireUncached,
@@ -65,4 +87,5 @@ module.exports = {
   getMain,
   ensureRelativePathHasDot,
   getPreviewExists,
+  resolveAddonFile,
 };

package/scripts/generate.js

@@ -3,6 +3,7 @@ const {
   ensureRelativePathHasDot,
   getMain,
   getPreviewExists,
+  resolveAddonFile,
 } = require('./common');
 const { normalizeStories, globToRegexp } = require('@storybook/core/common');
 const fs = require('fs');
@@ -46,14 +47,28 @@ function generate({ configPath, absolute = false, useJs = false }) {
     }`;
   });
 
-  const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
+  let registerAddons = '';
 
-  const doctools = 'require("@storybook/react-native/preview")';
+  for (const addon of main.addons) {
+    const registerPath = resolveAddonFile(addon, 'register', ['js', 'mjs', 'jsx', 'ts', 'tsx']);
 
-  // TODO: implement presets or something similar
-  const enhancer = main.addons?.includes('@storybook/addon-ondevice-actions')
-    ? "require('@storybook/addon-actions/preview')"
-    : '';
+    if (registerPath) {
+      registerAddons += `import "${registerPath}";\n`;
+    }
+  }
+
+  const docTools = 'require("@storybook/react-native/preview")';
+
+  const enhancers = [docTools];
+
+  for (const addon of main.addons) {
+    const previewPath = resolveAddonFile(addon, 'preview', ['js', 'mjs', 'jsx', 'ts', 'tsx']);
+
+    if (previewPath) {
+      enhancers.push(`require('${previewPath}')`);
+      continue;
+    }
+  }
 
   let options = '';
   let optionsVar = '';
@@ -66,7 +81,11 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   const previewExists = getPreviewExists({ configPath });
 
-  const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`;
+  if (previewExists) {
+    enhancers.unshift("require('./preview')");
+  }
+
+  const annotations = `[${enhancers.join(', ')}]`;
 
   const globalTypes = `
     declare global {