@storybook/react-native 10.1.3 → 10.2.0-beta.1

package/dist/node.js

@@ -0,0 +1,314 @@
+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 } = require("storybook/internal/common");
+    var path2 = require("path");
+    var fs = require("fs");
+    var cwd2 = process.cwd();
+    var toRequireContext = (specifier) => {
+      const { directory, files } = specifier;
+      const match = globToRegexp(`./${files}`);
+      return {
+        path: directory,
+        recursive: files.includes("**") || files.split("/").length > 1,
+        match
+      };
+    };
+    var supportedExtensions = ["js", "jsx", "ts", "tsx", "cjs", "mjs"];
+    function getFilePathExtension({ configPath }, fileName) {
+      for (const ext of supportedExtensions) {
+        const filePath = path2.resolve(cwd2, configPath, `${fileName}.${ext}`);
+        if (fs.existsSync(filePath)) {
+          return ext;
+        }
+      }
+      return null;
+    }
+    function getFilePathWithExtension2({ configPath }, fileName) {
+      for (const ext of supportedExtensions) {
+        const filePath = path2.resolve(cwd2, configPath, `${fileName}.${ext}`);
+        if (fs.existsSync(filePath)) {
+          return filePath;
+        }
+      }
+      return null;
+    }
+    function ensureRelativePathHasDot2(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,
+      getFilePathExtension,
+      ensureRelativePathHasDot: ensureRelativePathHasDot2,
+      getPreviewExists,
+      resolveAddonFile,
+      getAddonName,
+      getFilePathWithExtension: getFilePathWithExtension2
+    };
+  }
+});
+
+// src/node.ts
+var node_exports = {};
+__export(node_exports, {
+  buildIndex: () => buildIndex,
+  createChannelServer: () => createChannelServer
+});
+module.exports = __toCommonJS(node_exports);
+
+// src/metro/channelServer.ts
+var import_ws = require("ws");
+var import_node_http = require("http");
+
+// src/metro/buildIndex.ts
+var import_common = require("storybook/internal/common");
+var import_node_fs = require("fs");
+var import_glob = require("glob");
+var import_path = __toESM(require("path"));
+var import_csf_tools = require("storybook/internal/csf-tools");
+var import_csf = require("storybook/internal/csf");
+var import_preview_api = require("storybook/internal/preview-api");
+var import_common2 = __toESM(require_common());
+var cwd = process.cwd();
+var makeTitle = (fileName, specifier, userTitle) => {
+  const title = (0, import_preview_api.userOrAutoTitleFromSpecifier)(fileName, specifier, userTitle);
+  if (title) {
+    return title.replace("./", "");
+  } else if (userTitle) {
+    return userTitle.replace("./", "");
+  } else {
+    console.error("Could not generate title!!");
+    process.exit(1);
+  }
+};
+function ensureRelativePathHasDot(relativePath) {
+  return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+}
+async function buildIndex({ configPath }) {
+  const main = await (0, import_common.loadMainConfig)({ configDir: configPath, cwd });
+  if (!main.stories || !Array.isArray(main.stories)) {
+    throw new Error("No stories found");
+  }
+  const storiesSpecifiers = (0, import_common.normalizeStories)(main.stories, {
+    configDir: configPath,
+    workingDir: cwd
+  });
+  const specifierStoryPaths = storiesSpecifiers.map((specifier) => {
+    return (0, import_glob.sync)(specifier.files, {
+      cwd: import_path.default.resolve(process.cwd(), specifier.directory),
+      absolute: true,
+      // default to always ignore (exclude) anything in node_modules
+      ignore: ["**/node_modules"]
+    }).map((storyPath) => {
+      const normalizePathForWindows = (str) => import_path.default.sep === "\\" ? str.replace(/\\/g, "/") : str;
+      return normalizePathForWindows(storyPath);
+    });
+  });
+  const csfStories = specifierStoryPaths.reduce(
+    (acc, specifierStoryPathList, specifierIndex) => {
+      const paths = specifierStoryPathList.map((storyPath) => {
+        const code = (0, import_node_fs.readFileSync)(storyPath, { encoding: "utf-8" }).toString();
+        const relativePath = ensureRelativePathHasDot(import_path.default.posix.relative(cwd, storyPath));
+        return {
+          result: (0, import_csf_tools.loadCsf)(code, {
+            fileName: storyPath,
+            makeTitle: (userTitle) => makeTitle(relativePath, storiesSpecifiers[specifierIndex], userTitle)
+          }).parse(),
+          specifier: storiesSpecifiers[specifierIndex],
+          fileName: relativePath
+        };
+      });
+      return [...acc, ...paths];
+    },
+    new Array()
+  );
+  const index = {
+    v: 5,
+    entries: {}
+  };
+  for (const { result, specifier, fileName } of csfStories) {
+    const { meta, stories } = result;
+    if (stories && stories.length > 0) {
+      for (const story of stories) {
+        const id = (0, import_csf.toId)(meta.title, story.name);
+        index.entries[id] = {
+          type: "story",
+          subtype: "story",
+          id,
+          name: story.name,
+          title: meta.title,
+          importPath: `${specifier.directory}/${import_path.default.posix.relative(specifier.directory, fileName)}`,
+          tags: ["story"]
+        };
+      }
+    } else {
+      console.log(`No stories found for ${fileName}`);
+    }
+  }
+  try {
+    const previewPath = (0, import_common2.getFilePathWithExtension)({ configPath }, "preview");
+    const previewSourceCode = (0, import_node_fs.readFileSync)(previewPath, { encoding: "utf-8" }).toString();
+    const storySort = (0, import_csf_tools.getStorySortParameter)(previewSourceCode);
+    const sortableStories = Object.values(index.entries);
+    (0, import_preview_api.sortStoriesV7)(
+      sortableStories,
+      storySort,
+      sortableStories.map((entry) => entry.importPath)
+    );
+    const sorted = sortableStories.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    );
+    return { v: 5, entries: sorted };
+  } catch {
+    console.warn("Failed to sort stories, using unordered index");
+    return index;
+  }
+}
+
+// src/metro/channelServer.ts
+function createChannelServer({
+  port = 7007,
+  host = void 0,
+  configPath
+}) {
+  const httpServer = (0, import_node_http.createServer)(async (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    if (req.method === "GET" && req.url === "/index.json") {
+      try {
+        const index = await buildIndex({ configPath });
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify(index));
+      } catch (error) {
+        console.error("Failed to build index:", error);
+        res.writeHead(500, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Failed to build story index" }));
+      }
+      return;
+    }
+    if (req.method === "POST" && req.url === "/send-event") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk.toString();
+      });
+      req.on("end", () => {
+        try {
+          const json = JSON.parse(body);
+          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ success: true }));
+        } catch (error) {
+          console.error("Failed to parse event:", error);
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ success: false, error: "Invalid JSON" }));
+        }
+      });
+      return;
+    }
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Not found" }));
+  });
+  const wss = new import_ws.WebSocketServer({ server: httpServer });
+  setInterval(function ping() {
+    wss.clients.forEach(function each(client) {
+      if (client.readyState === import_ws.WebSocket.OPEN) {
+        client.send(JSON.stringify({ type: "ping", args: [] }));
+      }
+    });
+  }, 1e4);
+  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);
+      }
+    });
+  });
+  httpServer.listen(port, host, () => {
+    console.log(`WebSocket server listening on ${host ?? "localhost"}:${port}`);
+  });
+  return wss;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildIndex,
+  createChannelServer
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.1.3",
+  "version": "10.2.0-beta.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",
+    "./node": "./dist/node.js",
     "./preview": "./dist/preview.js",
     "./scripts/generate": "./scripts/generate.js",
     "./preset": "./preset.js",
@@ -48,14 +49,15 @@
     "test:generate:update": "node --test --test-update-snapshots scripts/generate.test.js"
   },
   "dependencies": {
-    "@storybook/react": "^10.1.3",
-    "@storybook/react-native-theming": "^10.1.3",
-    "@storybook/react-native-ui": "^10.1.3",
-    "@storybook/react-native-ui-common": "^10.1.3",
+    "@storybook/react": "10.2.0-beta.1",
+    "@storybook/react-native-theming": "^10.2.0-beta.1",
+    "@storybook/react-native-ui": "^10.2.0-beta.1",
+    "@storybook/react-native-ui-common": "^10.2.0-beta.1",
     "commander": "^14.0.2",
     "dedent": "^1.7.0",
     "deepmerge": "^4.3.1",
     "esbuild-register": "^3.6.0",
+    "glob": "^13.0.0",
     "react-native-url-polyfill": "^3.0.0",
     "setimmediate": "^1.0.5",
     "ws": "^8.18.3"
@@ -70,7 +72,7 @@
     "jotai": "^2.6.2",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "storybook": "^10.1.3",
+    "storybook": "10.2.0-beta.1",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3",
     "universal-test-renderer": "^0.6.0"
@@ -104,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a5146fd043a764842aa68d0e49172d9c3c14f78"
+  "gitHead": "decc26bd32be018bbc5ab0dc28bc5daff9342daa"
 }

package/readme.md

@@ -11,7 +11,7 @@ If you are migrating from 9 to 10 you can find the migration guide [here](https:
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> [!NOTE]  
+> [!NOTE]
 > Make sure you align your storybook dependencies to the same major version or you will see broken behaviour.
 
 ![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
@@ -34,14 +34,14 @@ For more information about storybook visit: [storybook.js.org](https://storybook
 
 There is some project boilerplate with `@storybook/react-native` and `@storybook/addon-react-native-web` both already configured with a simple example.
 
-For expo you can use this [template](https://github.com/dannyhw/expo-template-storybook) with the following command
+For Expo you can use this [template](https://github.com/dannyhw/expo-template-storybook) with the following command
 
 ```sh
 # With NPM
 npx create-expo-app --template expo-template-storybook AwesomeStorybook
 ```
 
-For react native cli you can use this [template](https://github.com/dannyhw/react-native-template-storybook)
+For React Native CLI you can use this [template](https://github.com/dannyhw/react-native-template-storybook)
 
 ```sh
 npx @react-native-community/cli init MyApp --template react-native-template-storybook
@@ -65,7 +65,7 @@ Then wrap your metro config with the withStorybook function as seen [below](#add
 
 If you want to be able to swap easily between storybook and your app, have a look at this [blog post](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o)
 
-If you want to add everything yourself check out the the manual guide [here](https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md).
+If you want to add everything yourself check out the manual guide [here](https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md).
 
 #### Additional steps: Update your metro config
 
@@ -107,7 +107,7 @@ module.exports = withStorybook(config, {
 });
 ```
 
-**React native**
+**React Native**
 
 ```js
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
@@ -185,13 +185,13 @@ export { default } from '../.rnstorybook';
 
 Then add a way to navigate to your storybook route and I recommend disabling the header for the storybook route.
 
-Heres a video showing the same setup:
+Here's a video showing the same setup:
 
 https://www.youtube.com/watch?v=egBqrYg0AIg
 
 ## Writing stories
 
-In storybook we use a syntax called CSF that looks like this:
+In Storybook we use a syntax called CSF that looks like this:
 
 ```tsx
 import type { Meta, StoryObj } from '@storybook/react-native';
@@ -229,7 +229,7 @@ export default main;
 
 ### Decorators and Parameters
 
-For stories you can add decorators and parameters on the default export or on a specifc story.
+For stories you can add decorators and parameters on the default export or on a specific story.
 
 ```tsx
 import type { Meta } from '@storybook/react';
@@ -263,7 +263,7 @@ For global decorators and parameters, you can add them to `preview.tsx` inside y
 
 ```tsx
 // .rnstorybook/preview.tsx
-import type {
+import type { Preview } from '@storybook/react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 
 const preview: Preview = {
@@ -295,11 +295,11 @@ export default preview;
 The cli will install some basic addons for you such as controls and actions.
 Ondevice addons are addons that can render with the device ui that you see on the phone.
 
-Currently the addons available are:
+Currently, the addons available are:
 
 - [`@storybook/addon-ondevice-controls`](https://storybook.js.org/addons/@storybook/addon-ondevice-controls): adjust your components props in realtime
 - [`@storybook/addon-ondevice-actions`](https://storybook.js.org/addons/@storybook/addon-ondevice-actions): mock onPress calls with actions that will log information in the actions tab
-- [`@storybook/addon-ondevice-notes`](https://storybook.js.org/addons/@storybook/addon-ondevice-notes): Add some markdown to your stories to help document their usage
+- [`@storybook/addon-ondevice-notes`](https://storybook.js.org/addons/@storybook/addon-ondevice-notes): Add some Markdown to your stories to help document their usage
 - [`@storybook/addon-ondevice-backgrounds`](https://storybook.js.org/addons/@storybook/addon-ondevice-backgrounds): change the background of storybook to compare the look of your component against different backgrounds
 
 Install each one you want to use and add them to the `main.ts` addons list as follows:
@@ -465,29 +465,31 @@ The port on which to run the WebSocket, if specified.
 
 You can pass these parameters to getStorybookUI call in your storybook entry point:
 
-```
+```ts
 {
-    initialSelection?: string | Object (undefined)
-        -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
-    storage?: Object (undefined)
-        -- {getItem: (key: string) => Promise<string | null>;setItem: (key: string, value: string) => Promise<void>;}
-        -- Custom storage to be used instead of AsyncStorage
+    // initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
+    initialSelection?: string | Object;
+    // Custom storage to be used instead of AsyncStorage
+    storage?: {
+        getItem: (key: string) => Promise<string | null>;
+        setItem: (key: string, value: string) => Promise<void>;
+    };
+    // show the onDevice UI
     onDeviceUI?: boolean;
-        -- show the ondevice ui
+    // enable websockets for the Storybook UI
     enableWebsockets?: boolean;
-        -- enable websockets for the storybook ui
+    // query params for the websocket connection
     query?: string;
-        -- query params for the websocket connection
+    // host for the websocket connection
     host?: string;
-        -- host for the websocket connection
+    // port for the websocket connection
     port?: number;
-        -- port for the websocket connection
+    // use secured websockets
     secured?: boolean;
-        -- use secured websockets
+    // store the last selected story in the device's storage
     shouldPersistSelection?: boolean;
-        -- store the last selected story in the device's storage
+    // theme for the Storybook UI
     theme: Partial<Theme>;
-        -- theme for the storybook ui
 }
 ```
 
@@ -500,7 +502,7 @@ Storybook provides testing utilities that allow you to reuse your stories in ext
 We welcome contributions to Storybook!
 
 - 📥 Pull requests and 🌟 Stars are always welcome.
-- Read our [contributing guide](CONTRIBUTING.md) to get started,
+- Read our [contributing guide](../../CONTRIBUTING.md) to get started,
   or find us on [Discord](https://discord.gg/sMFvFsG) and look for the react-native channel.
 
 Looking for a first issue to tackle?
@@ -514,6 +516,6 @@ Here are some example projects to help you get started
 
 - A mono repo setup by @axeldelafosse https://github.com/axeldelafosse/storybook-rnw-monorepo
 - Expo setup https://github.com/dannyhw/expo-storybook-starter
-- React native cli setup https://github.com/dannyhw/react-native-storybook-starter
+- React Native CLI setup https://github.com/dannyhw/react-native-storybook-starter
 - Adding a separate entry point and dev menu item in native files for RN CLI project: https://github.com/zubko/react-native-storybook-with-dev-menu
 - Want to showcase your own project? open a PR and add it to the list!

package/scripts/common.js

@@ -32,6 +32,18 @@ function getFilePathExtension({ configPath }, fileName) {
   return null;
 }
 
+function getFilePathWithExtension({ configPath }, fileName) {
+  for (const ext of supportedExtensions) {
+    const filePath = path.resolve(cwd, configPath, `${fileName}.${ext}`);
+
+    if (fs.existsSync(filePath)) {
+      return filePath;
+    }
+  }
+
+  return null;
+}
+
 function ensureRelativePathHasDot(relativePath) {
   return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
 }
@@ -92,4 +104,5 @@ module.exports = {
   getPreviewExists,
   resolveAddonFile,
   getAddonName,
+  getFilePathWithExtension,
 };

package/scripts/generate.js

@@ -8,6 +8,7 @@ const {
 const { normalizeStories, globToRegexp, loadMainConfig } = require('storybook/internal/common');
 const { interopRequireDefault } = require('./require-interop');
 const fs = require('fs');
+const { networkInterfaces } = require('node:os');
 
 const path = require('path');
 
@@ -32,7 +33,32 @@ const loadMain = async ({ configPath, cwd }) => {
   }
 };
 
-async function generate({ configPath, /* absolute = false, */ useJs = false, docTools = true }) {
+/**
+ * Get the local IP address of the machine.
+ * @returns The local IP address of the machine.
+ */
+function getLocalIPAddress() {
+  const nets = networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      const familyV4Value = typeof net.family === 'string' ? 'IPv4' : 4;
+      if (net.family === familyV4Value && !net.internal) {
+        return net.address;
+      }
+    }
+  }
+  return '0.0.0.0';
+}
+
+async function generate({
+  configPath,
+  useJs = false,
+  docTools = true,
+  host = undefined,
+  port = 7007,
+}) {
+  // here we want to get the ip address and pass it to rn storybook so that devices can connect over lan easily
+  const channelHost = host === 'auto' ? getLocalIPAddress() : host;
   const storybookRequiresLocation = path.resolve(
     cwd,
     configPath,
@@ -127,6 +153,7 @@ async function generate({ configPath, /* absolute = false, */ useJs = false, doc
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
+  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
 }
 `;
 
@@ -143,24 +170,25 @@ ${useJs ? '' : globalTypes}
 
 const annotations = ${annotations};
 
-global.STORIES = normalizedStories;
+globalThis.STORIES = normalizedStories;
+${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ''}
 
 ${useJs ? '' : '// @ts-ignore'}
 module?.hot?.accept?.();
 
 ${optionsVar}
 
-if (!global.view) {
-  global.view = start({
+if (!globalThis.view) {
+  globalThis.view = start({
     annotations,
     storyEntries: normalizedStories,
 ${options ? `    ${options},` : ''}
   });
 } else {
-  updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ''});
+  updateView(globalThis.view, annotations, normalizedStories${options ? `, ${options}` : ''});
 }
 
-export const view${useJs ? '' : ': View'} = global.view;
+export const view${useJs ? '' : ': View'} = globalThis.view;
 `;
 
   fs.writeFileSync(storybookRequiresLocation, fileContent, {