@storybook/react-native 8.3.10-alpha.2 → 8.4.0-alpha.0

package/dist/index.js

@@ -795,7 +795,7 @@ var StoryView = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_native2.View,
       {
-        style: { flex: 1, backgroundColor: theme3.background?.content },
+        style: { flex: 1, backgroundColor: theme3.background?.content, overflow: "hidden" },
         testID: id,
         onStartShouldSetResponder: dismissOnStartResponder,
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(

package/{metro → dist/metro}/withStorybook.d.ts

@@ -1,50 +1,43 @@
-import type { InputConfigT } from 'metro-config';
+import { MetroConfig } from 'metro-config';
 
 /**
  * Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
  */
 interface WebsocketsOptions {
-  /**
-   * The port WebSocket server will listen on. Defaults to 7007.
-   */
-  port?: number;
-
-  /**
-   * The host WebSocket server will bind to. Defaults to 'localhost'.
-   */
-  host?: string;
+    /**
+     * The port WebSocket server will listen on. Defaults to 7007.
+     */
+    port?: number;
+    /**
+     * The host WebSocket server will bind to. Defaults to 'localhost'.
+     */
+    host?: string;
 }
-
 /**
  * Options for configuring Storybook with React Native.
  */
 interface WithStorybookOptions {
-  /**
-   * The path to the Storybook config folder. Defaults to './.storybook'.
-   */
-  configPath?: string;
-
-  /**
-   * Whether Storybook is enabled. Defaults to true.
-   */
-  enabled?: boolean;
-
-  /**
-   * WebSocket configuration for syncing storybook instances or sending events to storybook.
-   */
-  websockets?: WebsocketsOptions;
-
-  /**
-   * Whether to use JavaScript files for Storybook configuration instead of TypeScript. Defaults to false.
-   */
-  useJs?: boolean;
-
-  /**
-   * If enabled is false and onDisabledRemoveStorybook is true, we will attempt to remove storybook from the js bundle.
-   */
-  onDisabledRemoveStorybook?: boolean;
+    /**
+     * The path to the Storybook config folder. Defaults to './.storybook'.
+     */
+    configPath?: string;
+    /**
+     * Whether Storybook is enabled. Defaults to true.
+     */
+    enabled?: boolean;
+    /**
+     * WebSocket configuration for syncing storybook instances or sending events to storybook.
+     */
+    websockets?: WebsocketsOptions;
+    /**
+     * Whether to use JavaScript files for Storybook configuration instead of TypeScript. Defaults to false.
+     */
+    useJs?: boolean;
+    /**
+     * If enabled is false and onDisabledRemoveStorybook is true, we will attempt to remove storybook from the js bundle.
+     */
+    onDisabledRemoveStorybook?: boolean;
 }
-
 /**
  * Configures Metro bundler to work with Storybook in React Native.
  * This function wraps a Metro configuration to enable Storybook usage.
@@ -69,4 +62,6 @@ interface WithStorybookOptions {
  *   onDisabledRemoveStorybook: true,
  * });
  */
-export function withStorybook(config: InputConfigT, options?: WithStorybookOptions): InputConfigT;
+declare function withStorybook(config: MetroConfig, options?: WithStorybookOptions): MetroConfig;
+
+export { withStorybook as default };

package/dist/metro/withStorybook.js

@@ -0,0 +1,267 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// scripts/common.js
+var require_common = __commonJS({
+  "scripts/common.js"(exports2, module2) {
+    var { globToRegexp, serverRequire } = require("@storybook/core/common");
+    var path2 = require("path");
+    var fs = require("fs");
+    var cwd = process.cwd();
+    var toRequireContext = (specifier) => {
+      const { directory, files } = specifier;
+      const match = globToRegexp(`./${files}`);
+      return {
+        path: directory,
+        recursive: files.includes("**") || files.split("/").length > 1,
+        match
+      };
+    };
+    function requireUncached(module3) {
+      delete require.cache[require.resolve(module3)];
+      return serverRequire(module3);
+    }
+    var supportedExtensions = ["js", "jsx", "ts", "tsx", "cjs", "mjs"];
+    function getFilePathExtension({ configPath }, fileName) {
+      for (const ext of supportedExtensions) {
+        const filePath = path2.resolve(cwd, configPath, `${fileName}.${ext}`);
+        if (fs.existsSync(filePath)) {
+          return ext;
+        }
+      }
+      return null;
+    }
+    function getMain({ configPath }) {
+      const fileExtension = getFilePathExtension({ configPath }, "main");
+      if (fileExtension === null) {
+        throw new Error("main config file not found");
+      }
+      const mainPath = path2.resolve(cwd, configPath, `main.${fileExtension}`);
+      return requireUncached(mainPath);
+    }
+    function ensureRelativePathHasDot(relativePath) {
+      return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+    }
+    function getPreviewExists({ configPath }) {
+      return !!getFilePathExtension({ configPath }, "preview");
+    }
+    module2.exports = {
+      toRequireContext,
+      requireUncached,
+      getFilePathExtension,
+      getMain,
+      ensureRelativePathHasDot,
+      getPreviewExists
+    };
+  }
+});
+
+// scripts/generate.js
+var require_generate = __commonJS({
+  "scripts/generate.js"(exports2, module2) {
+    var {
+      toRequireContext,
+      ensureRelativePathHasDot,
+      getMain,
+      getPreviewExists
+    } = require_common();
+    var { normalizeStories, globToRegexp } = require("@storybook/core/common");
+    var fs = require("fs");
+    var prettier = require("prettier");
+    var path2 = require("path");
+    var cwd = process.cwd();
+    function generate2({ configPath, absolute = false, useJs = false }) {
+      const storybookRequiresLocation = path2.resolve(
+        cwd,
+        configPath,
+        `storybook.requires.${useJs ? "js" : "ts"}`
+      );
+      const mainImport = getMain({ configPath });
+      const main = mainImport.default ?? mainImport;
+      const storiesSpecifiers = normalizeStories(main.stories, {
+        configDir: configPath,
+        workingDir: cwd
+      });
+      const normalizedStories = storiesSpecifiers.map((specifier) => {
+        const reg = globToRegexp(`./${specifier.files}`);
+        const { path: p, recursive: r, match: m } = toRequireContext(specifier);
+        const pathToStory = ensureRelativePathHasDot(path2.posix.relative(configPath, p));
+        return `{
+      titlePrefix: "${specifier.titlePrefix}",
+      directory: "${specifier.directory}",
+      files: "${specifier.files}",
+      importPathMatcher: /${reg.source}/,
+      ${useJs ? "" : "// @ts-ignore"}
+      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 options = "";
+      let optionsVar = "";
+      const reactNativeOptions = main.reactNative;
+      if (reactNativeOptions && typeof reactNativeOptions === "object") {
+        optionsVar = `const options = ${JSON.stringify(reactNativeOptions)}`;
+        options = "options";
+      }
+      const previewExists = getPreviewExists({ configPath });
+      const annotations = `[${previewExists ? "require('./preview')," : ""}${doctools}, ${enhancer}]`;
+      const globalTypes = `
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  `;
+      const fileContent = `
+  /* do not change this file, it is auto generated by storybook. */
+
+  import { start, updateView } from '@storybook/react-native';
+
+  ${registerAddons}
+
+  const normalizedStories = [${normalizedStories.join(",")}];
+
+  ${useJs ? "" : globalTypes}
+
+  const annotations = ${annotations};
+
+  global.STORIES = normalizedStories;
+  
+  ${useJs ? "" : "// @ts-ignore"}
+  module?.hot?.accept?.();
+
+  ${optionsVar}
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories,
+      ${options}
+    });
+  } else {
+    updateView(global.view, annotations, normalizedStories, ${options});
+  }
+
+  export const view = global.view;
+`;
+      const formattedFileContent = prettier.format(fileContent, { parser: "babel-ts" });
+      fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
+        encoding: "utf8",
+        flag: "w"
+      });
+    }
+    module2.exports = {
+      generate: generate2
+    };
+  }
+});
+
+// src/metro/withStorybook.ts
+var path = __toESM(require("path"));
+var import_generate = __toESM(require_generate());
+var import_ws = require("ws");
+function withStorybook(config, options = {
+  enabled: true,
+  useJs: false,
+  onDisabledRemoveStorybook: false
+}) {
+  const {
+    configPath,
+    enabled = true,
+    websockets,
+    useJs = false,
+    onDisabledRemoveStorybook = false
+  } = options;
+  if (!enabled) {
+    if (onDisabledRemoveStorybook) {
+      return {
+        ...config,
+        resolver: {
+          ...config.resolver,
+          resolveRequest: (context, moduleName, platform) => {
+            const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
+            if (moduleName.startsWith("storybook") || moduleName.startsWith("@storybook")) {
+              return {
+                type: "empty"
+              };
+            }
+            return resolveFunction(context, moduleName, platform);
+          }
+        }
+      };
+    }
+    return config;
+  }
+  if (websockets) {
+    const port = websockets.port ?? 7007;
+    const host = websockets.host ?? "localhost";
+    const wss = new import_ws.WebSocketServer({ port, host });
+    wss.on("connection", function connection(ws) {
+      console.log("WebSocket connection established");
+      ws.on("error", console.error);
+      ws.on("message", function message(data) {
+        try {
+          const json = JSON.parse(data.toString());
+          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    });
+  }
+  (0, import_generate.generate)({
+    configPath: configPath ?? path.resolve(process.cwd(), "./.storybook"),
+    useJs
+  });
+  return {
+    ...config,
+    transformer: {
+      ...config.transformer,
+      unstable_allowRequireContext: true
+    },
+    resolver: {
+      ...config.resolver,
+      resolveRequest: (context, moduleName, platform) => {
+        const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
+        const isStorybookModule = moduleName.startsWith("storybook") || moduleName.startsWith("@storybook");
+        const theContext = isStorybookModule ? {
+          ...context,
+          unstable_enablePackageExports: true,
+          unstable_conditionNames: ["import"]
+        } : context;
+        const resolveResult = resolveFunction(theContext, moduleName, platform);
+        if (resolveResult?.filePath?.includes?.("@storybook/react/template/cli")) {
+          return {
+            type: "empty"
+          };
+        }
+        return resolveResult;
+      }
+    }
+  };
+}
+module.exports = withStorybook;

package/metro/withStorybook.js

@@ -1,106 +1 @@
-const path = require('path');
-
-const { generate } = require('../scripts/generate');
-const { WebSocketServer } = require('ws');
-
-module.exports = (
-  config,
-  { configPath, enabled = true, websockets, useJs = false, onDisabledRemoveStorybook = false } = {
-    enabled: true,
-    useJs: false,
-    onDisabledRemoveStorybook: false,
-  }
-) => {
-  if (!enabled) {
-    if (onDisabledRemoveStorybook) {
-      return {
-        ...config,
-        resolver: {
-          ...config.resolver,
-          resolveRequest: (context, moduleName, platform) => {
-            const resolveFunction = config?.resolver?.resolveRequest
-              ? config?.resolver?.resolveRequest
-              : context.resolveRequest;
-
-            if (moduleName.startsWith('storybook') || moduleName.startsWith('@storybook')) {
-              return {
-                type: 'empty',
-              };
-            }
-
-            return resolveFunction(context, moduleName, platform);
-          },
-        },
-      };
-    }
-
-    return config;
-  }
-
-  if (websockets) {
-    const port = websockets.port ?? 7007;
-
-    const host = websockets.host ?? 'localhost';
-
-    const wss = new WebSocketServer({ port, host });
-
-    wss.on('connection', function connection(ws) {
-      console.log('websocket connection established');
-
-      ws.on('error', console.error);
-
-      ws.on('message', function message(data) {
-        try {
-          const json = JSON.parse(data.toString());
-
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
-        } catch (error) {
-          console.error(error);
-        }
-      });
-    });
-  }
-
-  generate({
-    configPath: configPath ?? path.resolve(process.cwd(), './.storybook'),
-    useJs,
-  });
-
-  return {
-    ...config,
-    transformer: {
-      ...config.transformer,
-      unstable_allowRequireContext: true,
-    },
-    resolver: {
-      ...config.resolver,
-      resolveRequest: (context, moduleName, platform) => {
-        const resolveFunction = config?.resolver?.resolveRequest
-          ? config?.resolver?.resolveRequest
-          : context.resolveRequest;
-
-        const isStorybookModule =
-          moduleName.startsWith('storybook') || moduleName.startsWith('@storybook');
-
-        const theContext = isStorybookModule
-          ? {
-              ...context,
-              unstable_enablePackageExports: true,
-              unstable_conditionNames: ['import'],
-            }
-          : context;
-
-        const resolveResult = resolveFunction(theContext, moduleName, platform);
-
-        // workaround for template files with invalid imports
-        if (resolveResult?.filePath?.includes?.('@storybook/react/template/cli')) {
-          return {
-            type: 'empty',
-          };
-        }
-
-        return resolveResult;
-      },
-    },
-  };
-};
+module.exports = require('../dist/metro/withStorybook.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.3.10-alpha.2",
+  "version": "8.4.0-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -22,6 +22,11 @@
     "sb-rn-get-stories": "./bin/get-stories.js",
     "sb-rn-watcher": "./bin/watcher.js"
   },
+  "exports": {
+    ".": "./dist/index.js",
+    "./metro/withStorybook": "./dist/metro/withStorybook.js",
+    "./preview": "./dist/preview.js"
+  },
   "files": [
     "bin/**/*",
     "dist/**/*",
@@ -29,22 +34,22 @@
     "*.js",
     "*.d.ts",
     "scripts/*",
-    "metro/*",
-    "template/**/*"
+    "template/**/*",
+    "metro/**/*"
   ],
   "scripts": {
-    "dev": "npx tsx buildscripts/gendtsdev.ts && tsup --watch",
+    "dev": "npx --yes tsx buildscripts/gendtsdev.ts && tsup --watch",
     "prepare": "rm -rf dist/ && tsup",
     "test": "jest",
     "test:ci": "jest"
   },
   "dependencies": {
-    "@storybook/core": "^8.3.5",
+    "@storybook/core": "^8.4.0-beta.0",
     "@storybook/csf": "^0.1.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.10-alpha.2",
-    "@storybook/react-native-ui": "^8.3.10-alpha.2",
+    "@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",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -54,14 +59,14 @@
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-url-polyfill": "^2.0.0",
     "setimmediate": "^1.0.5",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.0-beta.0",
     "type-fest": "~2.19",
     "util": "^0.12.4",
     "ws": "^8.18.0"
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.2.79",
+    "@types/react": "~18.3.12",
     "babel-jest": "^29.4.3",
     "jest": "29.7.0",
     "jotai": "^2.6.2",
@@ -82,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2567b9a4d11a77d9b5bf74dd699ad49fb47afa5b"
+  "gitHead": "11531d9d55c0c933feb61d507595da80becb0b4a"
 }

package/preview.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preview.js');

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

@@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
   
 
-  const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
 
   global.STORIES = normalizedStories;
   
@@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register";
 
   
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
 
   global.STORIES = normalizedStories;
   

package/scripts/generate.js

@@ -48,7 +48,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
 
-  const doctools = 'require("@storybook/react-native/dist/preview")';
+  const doctools = 'require("@storybook/react-native/preview")';
 
   // TODO: implement presets or something similar
   const enhancer = main.addons?.includes('@storybook/addon-ondevice-actions')