@storybook/react-native 9.1.0 → 9.1.1-alpha.1

package/dist/index.d.ts

@@ -123,4 +123,4 @@ interface StorybookConfig {
     framework?: '@storybook/react-native';
 }
 
-export { InitialSelection, Params, Storage, StorybookConfig, ThemePartial, View, getProjectAnnotations, prepareStories, start, updateView };
+export { type InitialSelection, type Params, type Storage, type StorybookConfig, type ThemePartial, View, getProjectAnnotations, prepareStories, start, updateView };

package/dist/index.js

@@ -27,8 +27,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   darkTheme: () => import_react_native_theming3.darkTheme,
   getProjectAnnotations: () => getProjectAnnotations,
   prepareStories: () => prepareStories,
@@ -36,7 +36,7 @@ __export(src_exports, {
   theme: () => import_react_native_theming3.theme,
   updateView: () => updateView
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_react_native_theming3 = require("@storybook/react-native-theming");
 
 // src/Start.tsx
@@ -915,8 +915,7 @@ var View3 = class {
           this._asyncStorageStoryId = value;
         }
         const exists = value && this._storyIdExists(value);
-        if (!exists)
-          console.log("Storybook: could not find persisted story");
+        if (!exists) console.log("Storybook: could not find persisted story");
         return { storySpecifier: exists ? value : "*", viewMode: "story" };
       } catch (e) {
         console.warn("storybook-log: error reading from async storage", e);
@@ -1200,22 +1199,23 @@ function prepareStories({
     req.keys().forEach((filename) => {
       try {
         const fileExports = req(filename);
-        if (!fileExports.default)
-          return;
+        if (!fileExports.default) return;
         const meta = fileExports.default;
         Object.keys(fileExports).forEach((key) => {
-          if (key === "default")
-            return;
-          if (!(0, import_csf2.isExportStory)(key, fileExports.default))
-            return;
+          if (key === "default") return;
+          if (!(0, import_csf2.isExportStory)(key, fileExports.default)) return;
           const exportValue = fileExports[key];
-          if (!exportValue)
-            return;
+          if (!exportValue) return;
           const title = makeTitle(filename, specifier, meta.title);
           if (title) {
             const nameFromExport = (0, import_csf2.storyNameFromExport)(key);
             const id = (0, import_csf2.toId)(title, nameFromExport);
-            const name = exportValue?.name || exportValue?.storyName || nameFromExport;
+            let name = nameFromExport;
+            if (typeof exportValue === "function") {
+              name = exportValue?.storyName || nameFromExport;
+            } else {
+              name = exportValue?.name || exportValue?.storyName || nameFromExport;
+            }
             index.entries[id] = {
               type: "story",
               id,
@@ -1228,8 +1228,7 @@ function prepareStories({
             const importedStories = req(filename);
             const stories = Object.entries(importedStories).reduce(
               (carry, [storyKey, story]) => {
-                if (!(0, import_csf2.isExportStory)(storyKey, fileExports.default))
-                  return carry;
+                if (!(0, import_csf2.isExportStory)(storyKey, fileExports.default)) return carry;
                 if (story.play && !options?.playFn) {
                   carry[storyKey] = { ...story, play: void 0 };
                 } else {

package/dist/metro/withStorybook.js

@@ -69,8 +69,7 @@ var require_common = __commonJS({
       return !!getFilePathExtension({ configPath }, "preview");
     }
     function resolveAddonFile(addon, file, extensions = ["js", "mjs", "ts"], configPath) {
-      if (!addon || typeof addon !== "string")
-        return null;
+      if (!addon || typeof addon !== "string") return null;
       try {
         const basePath = `${addon}/${file}`;
         require.resolve(basePath);
@@ -97,10 +96,8 @@ var require_common = __commonJS({
       return null;
     }
     function getAddonName(addon) {
-      if (typeof addon === "string")
-        return addon;
-      if (typeof addon === "object" && addon.name && typeof addon.name === "string")
-        return addon.name;
+      if (typeof addon === "string") return addon;
+      if (typeof addon === "object" && addon.name && typeof addon.name === "string") return addon.name;
       console.error("Invalid addon configuration", addon);
       return null;
     }
@@ -342,6 +339,11 @@ function withStorybook(config, options = {
             type: "empty"
           };
         }
+        if (moduleName === "tty" || moduleName === "os") {
+          return {
+            type: "empty"
+          };
+        }
         if (liteMode && resolveResult?.filePath?.includes?.("@storybook/react-native-ui") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-lite") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-common")) {
           return {
             type: "empty"

package/dist/metro/withStorybookConfig.d.ts

@@ -0,0 +1,116 @@
+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;
+}
+/**
+ * Options for configuring Storybook with React Native.
+ */
+interface WithStorybookOptions {
+    /**
+     * The path to the Storybook config folder. Defaults to './.rnstorybook'.
+     */
+    configPath?: string;
+    /**
+     * 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 true, we will attempt to remove storybook from the js bundle.
+     */
+    removeStorybook?: boolean;
+    /**
+     * Whether to include doc tools in the storybook.requires file. Defaults to true.
+     */
+    docTools?: boolean;
+    /**
+     * Whether to use lite mode for the storybook. Defaults to false.
+     * This will mock out the default storybook ui so you don't need to install all its dependencies like reanimated etc.
+     */
+    liteMode?: boolean;
+}
+/**
+ * Configures Metro bundler to work with Storybook in React Native.
+ * This function wraps a Metro configuration to enable Storybook usage.
+ * This is intended to replace the withStorybook function in the future.
+ *
+ * @param config - The Metro bundler configuration to be modified. This should be a valid Metro config object
+ *                 that includes resolver, transformer, and other Metro-specific options.
+ * @param options - Options to customize the Storybook configuration.
+ * @param options.configPath - The path to the Storybook config folder. Defaults to './.rnstorybook'.
+ *                            This is where your main.js/ts and preview.js/ts files are located.
+ * @param options.websockets - WebSocket configuration for syncing storybook instances or sending events.
+ *                            When provided, creates a WebSocket server for real-time communication.
+ * @param options.websockets.port - The port WebSocket server will listen on. Defaults to 7007.
+ * @param options.websockets.host - The host WebSocket server will bind to. Defaults to 'localhost'.
+ * @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
+ *                       When true, generates storybook.requires.js instead of storybook.requires.ts.
+ *                       Defaults to false.
+ * @param options.removeStorybook - If enabled is false and this is true, attempts to remove
+ *                                          storybook modules from the JavaScript bundle to reduce bundle size.
+ *                                          Defaults to false.
+ * @param options.docTools - Whether to include doc tools in the storybook.requires file.
+ *                          Doc tools provide additional documentation features. Defaults to true.
+ * @param options.liteMode - Whether to use lite mode for the storybook. In lite mode, the default
+ *                          storybook UI is mocked out so you don't need to install all its dependencies
+ *                          like reanimated etc. This is useful for reducing bundle size and dependencies.
+ *                          Defaults to false.
+ * @returns The modified Metro configuration with Storybook support enabled.
+ *
+ * @example
+ * ```javascript
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const withStorybook = require('@storybook/react-native/metro/withStorybook');
+ * const path = require('path');
+ *
+ * const projectRoot = __dirname;
+ * const config = getDefaultConfig(projectRoot);
+ *
+ * module.exports = withStorybook(config, {
+ *   configPath: path.resolve(projectRoot, './.rnstorybook'),
+ *   websockets: { port: 7007, host: 'localhost' },
+ *   useJs: false,
+ *   docTools: true,
+ *   liteMode: false,
+ * });
+ * ```
+ *
+ * @example
+ * ```javascript
+ * // Minimal configuration
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const withStorybook = require('@storybook/react-native/metro/withStorybook');
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withStorybook(config);
+ * ```
+ *
+ * @example
+ * ```javascript
+ * // Disable Storybook in production
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const withStorybook = require('@storybook/react-native/metro/withStorybook');
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withStorybook(config, {
+ *   removeStorybook: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== "true",
+ * });
+ * ```
+ */
+declare function withStorybookConfig(config: MetroConfig, options?: WithStorybookOptions): MetroConfig;
+
+export { withStorybookConfig as default, withStorybookConfig };

package/dist/metro/withStorybookConfig.js

@@ -0,0 +1,368 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// scripts/common.js
+var require_common = __commonJS({
+  "scripts/common.js"(exports2, module2) {
+    var { globToRegexp, serverRequire } = require("storybook/internal/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");
+    }
+    function resolveAddonFile(addon, file, extensions = ["js", "mjs", "ts"], configPath) {
+      if (!addon || typeof addon !== "string") return null;
+      try {
+        const basePath = `${addon}/${file}`;
+        require.resolve(basePath);
+        return basePath;
+      } catch (_error) {
+      }
+      for (const ext of extensions) {
+        try {
+          const filePath = `${addon}/${file}.${ext}`;
+          require.resolve(filePath);
+          return filePath;
+        } catch (_error) {
+        }
+      }
+      if (addon.startsWith("./") || addon.startsWith("../")) {
+        try {
+          const extension = getFilePathExtension({ configPath }, `${addon}/${file}`);
+          if (extension) {
+            return `${addon}/${file}`;
+          }
+        } catch (_error) {
+        }
+      }
+      return null;
+    }
+    function getAddonName(addon) {
+      if (typeof addon === "string") return addon;
+      if (typeof addon === "object" && addon.name && typeof addon.name === "string") return addon.name;
+      console.error("Invalid addon configuration", addon);
+      return null;
+    }
+    module2.exports = {
+      toRequireContext,
+      requireUncached,
+      getFilePathExtension,
+      getMain,
+      ensureRelativePathHasDot,
+      getPreviewExists,
+      resolveAddonFile,
+      getAddonName
+    };
+  }
+});
+
+// scripts/generate.js
+var require_generate = __commonJS({
+  "scripts/generate.js"(exports2, module2) {
+    var {
+      toRequireContext,
+      ensureRelativePathHasDot,
+      getMain,
+      getPreviewExists,
+      resolveAddonFile,
+      getAddonName
+    } = require_common();
+    var { normalizeStories, globToRegexp } = require("storybook/internal/common");
+    var fs = require("fs");
+    var path2 = require("path");
+    var cwd = process.cwd();
+    function generate2({
+      configPath,
+      /* absolute = false, */
+      useJs = false,
+      docTools = true
+    }) {
+      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 registeredAddons = [];
+      for (const addon of main.addons) {
+        const registerPath = resolveAddonFile(
+          getAddonName(addon),
+          "register",
+          ["js", "mjs", "jsx", "ts", "tsx"],
+          configPath
+        );
+        if (registerPath) {
+          registeredAddons.push(`import "${registerPath}";`);
+        }
+      }
+      const docToolsAnnotation = 'require("@storybook/react-native/preview")';
+      const enhancers = [];
+      if (docTools) {
+        enhancers.push(docToolsAnnotation);
+      }
+      for (const addon of main.addons) {
+        const previewPath = resolveAddonFile(
+          getAddonName(addon),
+          "preview",
+          ["js", "mjs", "jsx", "ts", "tsx"],
+          configPath
+        );
+        if (previewPath) {
+          enhancers.push(`require('${previewPath}')`);
+          continue;
+        }
+      }
+      let options = "";
+      let optionsVar = "";
+      const reactNativeOptions = main.reactNative;
+      if (reactNativeOptions && typeof reactNativeOptions === "object") {
+        optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 2)}`;
+        options = "options";
+      }
+      const previewExists = getPreviewExists({ configPath });
+      if (previewExists) {
+        enhancers.unshift("require('./preview')");
+      }
+      const annotations = `[
+  ${enhancers.join(",\n  ")}
+]`;
+      const globalTypes = `
+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';
+
+${registeredAddons.join("\n")}
+
+const normalizedStories = [
+  ${normalizedStories.join(",\n  ")}
+];
+
+${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 ? `    ${options},` : ""}
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ""});
+}
+
+export const view${useJs ? "" : ": View"} = global.view;
+`;
+      fs.writeFileSync(storybookRequiresLocation, fileContent, {
+        encoding: "utf8",
+        flag: "w"
+      });
+    }
+    module2.exports = {
+      generate: generate2
+    };
+  }
+});
+
+// src/metro/withStorybookConfig.ts
+var withStorybookConfig_exports = {};
+__export(withStorybookConfig_exports, {
+  default: () => withStorybookConfig_default,
+  withStorybookConfig: () => withStorybookConfig
+});
+module.exports = __toCommonJS(withStorybookConfig_exports);
+var path = __toESM(require("path"));
+var import_generate = __toESM(require_generate());
+var import_ws = require("ws");
+function withStorybookConfig(config, options = {
+  useJs: false,
+  removeStorybook: false,
+  docTools: true,
+  liteMode: false,
+  configPath: path.resolve(process.cwd(), "./.rnstorybook")
+}) {
+  const {
+    configPath = path.resolve(process.cwd(), "./.rnstorybook"),
+    websockets,
+    useJs = false,
+    removeStorybook = false,
+    docTools = true,
+    liteMode = false
+  } = options;
+  if (removeStorybook) {
+    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);
+        }
+      }
+    };
+  }
+  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,
+    useJs,
+    docTools
+  });
+  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 shouldUseCustomResolveConfig = moduleName.startsWith("storybook") || moduleName.startsWith("@storybook") || moduleName.startsWith("uuid");
+        const theContext = shouldUseCustomResolveConfig ? {
+          ...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"
+          };
+        }
+        if (moduleName === "tty" || moduleName === "os") {
+          return {
+            type: "empty"
+          };
+        }
+        if (liteMode && resolveResult?.filePath?.includes?.("@storybook/react-native-ui") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-lite") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-common")) {
+          return {
+            type: "empty"
+          };
+        }
+        return resolveResult;
+      }
+    }
+  };
+}
+var withStorybookConfig_default = withStorybookConfig;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withStorybookConfig
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.1.0",
+  "version": "9.1.1-alpha.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -24,6 +24,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./metro/withStorybook": "./dist/metro/withStorybook.js",
+    "./metro/withStorybookConfig": "./dist/metro/withStorybookConfig.js",
     "./preview": "./dist/preview.js",
     "./scripts/generate": "./scripts/generate.js",
     "./preset": "./preset.js"
@@ -47,10 +48,10 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^9.1.0",
-    "@storybook/react-native-theming": "^9.1.0",
-    "@storybook/react-native-ui": "^9.1.0",
-    "@storybook/react-native-ui-common": "^9.1.0",
+    "@storybook/react": "^9.1.2",
+    "@storybook/react-native-theming": "^9.1.1-alpha.1",
+    "@storybook/react-native-ui": "^9.1.1-alpha.1",
+    "@storybook/react-native-ui-common": "^9.1.1-alpha.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -66,13 +67,13 @@
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^12.0.9",
     "jest": "^29.7.0",
-    "jest-expo": "~53.0.5",
+    "jest-expo": "~53.0.9",
     "jotai": "^2.6.2",
     "react": "19.0.0",
-    "react-native": "0.79.2",
+    "react-native": "0.79.5",
     "react-test-renderer": "^19.1.0",
-    "storybook": "^9.1.0",
-    "tsup": "^7.2.0",
+    "storybook": "^9.1.2",
+    "tsup": "^8.5.0",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {
@@ -104,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38124888d92766d2a5b8c2bfa0fd283bb384a4cd"
+  "gitHead": "cc38bfb53177171ffb92d228c0bcde0e4d01d767"
 }