@storybook/react-native 10.3.0-next.6 → 10.3.0

package/dist/index-6iAzVvXp.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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;
+    /**
+     * Whether to use WSS/HTTPS for the channel server.
+     */
+    secured?: boolean;
+    /**
+     * TLS private key used when `secured` is true.
+     */
+    key?: string | Buffer;
+    /**
+     * TLS certificate used when `secured` is true.
+     */
+    cert?: string | Buffer;
+    /**
+     * Optional certificate authority chain used when `secured` is true.
+     */
+    ca?: string | Buffer | Array<string | Buffer>;
+    /**
+     * Optional TLS passphrase used when `secured` is true.
+     */
+    passphrase?: string;
+}
+
+export type { WebsocketsOptions as W };

package/dist/index.d.ts

@@ -78,6 +78,7 @@ declare class View {
     }>;
     _getHost: (params?: Partial<Params>) => any;
     __getPort: (params?: Partial<Params>) => any;
+    _isSecureConnection: (params?: Partial<Params>) => any;
     _getServerChannel: (params?: Partial<Params>) => Channel;
     createPreparedStoryMapping: () => Promise<void>;
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1389,11 +1389,17 @@ var View3 = class {
     }
     return 7007;
   };
+  _isSecureConnection = (params = {}) => {
+    if (typeof params.secured === "boolean") {
+      return params.secured;
+    }
+    return globalThis.STORYBOOK_WEBSOCKET?.secured ?? false;
+  };
   _getServerChannel = (params = {}) => {
     const host = this._getHost(params);
     const port = `:${this.__getPort(params)}`;
     const query = params.query || "";
-    const websocketType = params.secured ? "wss" : "ws";
+    const websocketType = this._isSecureConnection(params) ? "wss" : "ws";
     const url = `${websocketType}://${host}${port}/${query}`;
     const channel = new import_channels.Channel({
       async: true,

package/dist/metro/withStorybook.d.ts

@@ -1,18 +1,6 @@
 import { MetroConfig } from 'metro-config';
+import { W as WebsocketsOptions } from '../index-6iAzVvXp.js';
 
-/**
- * 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.
  */
@@ -64,6 +52,9 @@ interface WithStorybookOptions {
  *                            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.websockets.secured - Whether to use WSS/HTTPS for the channel server.
+ * @param options.websockets.key - TLS private key used when `secured` is true.
+ * @param options.websockets.cert - TLS certificate used when `secured` is true.
  * @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.

package/dist/metro/withStorybook.js

@@ -201,7 +201,8 @@ var require_generate = __commonJS({
       useJs = false,
       docTools = true,
       host = void 0,
-      port = 7007
+      port = void 0,
+      secured = false
     }) {
       const channelHost = host === "auto" ? getLocalIPAddress() : host;
       const storybookRequiresLocation = path3.resolve(
@@ -284,11 +285,22 @@ var require_generate = __commonJS({
       const annotations = `[
   ${enhancers.join(",\n  ")}
 ]`;
+      const hasWebsocketConfig = host !== void 0 || port !== void 0 || secured;
+      const websocketAssignmentLines = [];
+      if (channelHost) {
+        websocketAssignmentLines.push(`host: '${channelHost}',`);
+      }
+      if (hasWebsocketConfig) {
+        websocketAssignmentLines.push(`port: ${port ?? 7007},`);
+        websocketAssignmentLines.push(`secured: ${Boolean(secured)},`);
+      }
       const globalTypes = `
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
   var FEATURES: Features;
 }
 `;
@@ -306,7 +318,9 @@ ${useJs ? "" : globalTypes}
 const annotations = ${annotations};
 
 globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
+${hasWebsocketConfig ? `globalThis.STORYBOOK_WEBSOCKET = {
+  ${websocketAssignmentLines.join("\n  ")}
+};` : ""}
 
 module?.hot?.accept?.();
 ${featuresAssignment ? `
@@ -574,6 +588,7 @@ var import_telemetry = require("storybook/internal/telemetry");
 // src/metro/channelServer.ts
 var import_ws2 = require("ws");
 var import_node_http = require("http");
+var import_node_https = require("https");
 init_buildIndex();
 
 // src/metro/mcpServer.ts
@@ -951,14 +966,20 @@ function createChannelServer({
   host = void 0,
   configPath,
   experimental_mcp = false,
-  websockets = true
+  websockets = true,
+  secured = false,
+  ssl
 }) {
-  const httpServer = (0, import_node_http.createServer)();
+  if (secured && (!ssl?.key || !ssl?.cert)) {
+    throw new Error("[Storybook] Secure channel server requires both `ssl.key` and `ssl.cert`.");
+  }
+  const httpServer = secured ? (0, import_node_https.createServer)(ssl) : (0, import_node_http.createServer)();
   const wss = websockets ? new import_ws2.WebSocketServer({ server: httpServer }) : null;
   const mcpServer = experimental_mcp ? createMcpHandler(configPath, wss ?? void 0) : null;
   const selectStorySyncEndpoint = wss ? createSelectStorySyncEndpoint(wss) : null;
   httpServer.on("request", async (req, res) => {
-    const requestUrl = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const protocol = "encrypted" in req.socket && req.socket.encrypted ? "https" : "http";
+    const requestUrl = new URL(req.url ?? "/", `${protocol}://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
@@ -1059,7 +1080,7 @@ function createChannelServer({
     }
   });
   httpServer.listen(port, host, () => {
-    const protocol = wss ? "WebSocket" : "HTTP";
+    const protocol = wss ? secured ? "WSS" : "WebSocket" : secured ? "HTTPS" : "HTTP";
     console.log(`${protocol} server listening on ${host ?? "localhost"}:${port}`);
   });
   mcpServer?.preInit();
@@ -1125,12 +1146,20 @@ function withStorybook(config, options = {
   if (websockets || experimental_mcp) {
     const port = websockets === "auto" ? 7007 : websockets?.port ?? 7007;
     const host = websockets === "auto" ? "auto" : websockets?.host;
+    const secured = Boolean(websockets && websockets !== "auto" && websockets.secured);
     createChannelServer({
       port,
       host: host === "auto" ? void 0 : host,
       configPath,
       experimental_mcp,
-      websockets: Boolean(websockets)
+      websockets: Boolean(websockets),
+      secured,
+      ssl: websockets && websockets !== "auto" ? {
+        key: websockets.key,
+        cert: websockets.cert,
+        ca: websockets.ca,
+        passphrase: websockets.passphrase
+      } : void 0
     });
     if (websockets) {
       (0, import_generate.generate)({
@@ -1138,7 +1167,8 @@ function withStorybook(config, options = {
         useJs,
         docTools,
         host,
-        port
+        port,
+        secured
       });
     } else {
       (0, import_generate.generate)({

package/dist/node.d.ts

@@ -1,6 +1,12 @@
 import { WebSocketServer } from 'ws';
 import { StoryIndex } from 'storybook/internal/types';
 
+interface ChannelServerSecureOptions {
+    ca?: string | Buffer | Array<string | Buffer>;
+    cert?: string | Buffer | Array<string | Buffer>;
+    key?: string | Buffer | Array<string | Buffer>;
+    passphrase?: string;
+}
 /**
  * Options for creating a channel server.
  */
@@ -27,6 +33,15 @@ interface ChannelServerOptions {
      * When false, starts only the HTTP server endpoints.
      */
     websockets?: boolean;
+    /**
+     * Whether to use HTTPS/WSS for the channel server.
+     * When true, valid TLS credentials must be provided via `ssl`.
+     */
+    secured?: boolean;
+    /**
+     * TLS credentials used when `secured` is true.
+     */
+    ssl?: ChannelServerSecureOptions;
 }
 /**
  * Creates a channel server for syncing storybook instances and sending events.
@@ -43,9 +58,11 @@ interface ChannelServerOptions {
  * @param options.configPath - The path to the Storybook config folder.
  * @param options.experimental_mcp - Whether to enable MCP server support.
  * @param options.websockets - Whether to enable WebSocket server support.
+ * @param options.secured - Whether to use HTTPS/WSS for the channel server.
+ * @param options.ssl - TLS credentials used when `secured` is true.
  * @returns The created WebSocketServer instance, or null when websockets are disabled.
  */
-declare function createChannelServer({ port, host, configPath, experimental_mcp, websockets, }: ChannelServerOptions): WebSocketServer | null;
+declare function createChannelServer({ port, host, configPath, experimental_mcp, websockets, secured, ssl, }: ChannelServerOptions): WebSocketServer | null;
 
 declare function buildIndex({ configPath }: {
     configPath: string;

package/dist/node.js

@@ -353,6 +353,7 @@ module.exports = __toCommonJS(node_exports);
 // src/metro/channelServer.ts
 var import_ws2 = require("ws");
 var import_node_http = require("http");
+var import_node_https = require("https");
 init_buildIndex();
 
 // src/metro/mcpServer.ts
@@ -730,14 +731,20 @@ function createChannelServer({
   host = void 0,
   configPath,
   experimental_mcp = false,
-  websockets = true
+  websockets = true,
+  secured = false,
+  ssl
 }) {
-  const httpServer = (0, import_node_http.createServer)();
+  if (secured && (!ssl?.key || !ssl?.cert)) {
+    throw new Error("[Storybook] Secure channel server requires both `ssl.key` and `ssl.cert`.");
+  }
+  const httpServer = secured ? (0, import_node_https.createServer)(ssl) : (0, import_node_http.createServer)();
   const wss = websockets ? new import_ws2.WebSocketServer({ server: httpServer }) : null;
   const mcpServer = experimental_mcp ? createMcpHandler(configPath, wss ?? void 0) : null;
   const selectStorySyncEndpoint = wss ? createSelectStorySyncEndpoint(wss) : null;
   httpServer.on("request", async (req, res) => {
-    const requestUrl = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const protocol = "encrypted" in req.socket && req.socket.encrypted ? "https" : "http";
+    const requestUrl = new URL(req.url ?? "/", `${protocol}://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
@@ -838,7 +845,7 @@ function createChannelServer({
     }
   });
   httpServer.listen(port, host, () => {
-    const protocol = wss ? "WebSocket" : "HTTP";
+    const protocol = wss ? secured ? "WSS" : "WebSocket" : secured ? "HTTPS" : "HTTP";
     console.log(`${protocol} server listening on ${host ?? "localhost"}:${port}`);
   });
   mcpServer?.preInit();

package/dist/repack/withStorybook.d.ts

@@ -1,3 +1,5 @@
+import { W as WebsocketsOptions } from '../index-6iAzVvXp.js';
+
 /**
  * Minimal compiler types for webpack/rspack compatibility.
  * We define these inline to avoid requiring @rspack/core or webpack as dependencies.
@@ -21,19 +23,6 @@ interface Compiler {
         };
     };
 }
-/**
- * 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 the Storybook Repack plugin.
  */

package/dist/repack/withStorybook.js

@@ -201,7 +201,8 @@ var require_generate = __commonJS({
       useJs = false,
       docTools = true,
       host = void 0,
-      port = 7007
+      port = void 0,
+      secured = false
     }) {
       const channelHost = host === "auto" ? getLocalIPAddress() : host;
       const storybookRequiresLocation = path3.resolve(
@@ -284,11 +285,22 @@ var require_generate = __commonJS({
       const annotations = `[
   ${enhancers.join(",\n  ")}
 ]`;
+      const hasWebsocketConfig = host !== void 0 || port !== void 0 || secured;
+      const websocketAssignmentLines = [];
+      if (channelHost) {
+        websocketAssignmentLines.push(`host: '${channelHost}',`);
+      }
+      if (hasWebsocketConfig) {
+        websocketAssignmentLines.push(`port: ${port ?? 7007},`);
+        websocketAssignmentLines.push(`secured: ${Boolean(secured)},`);
+      }
       const globalTypes = `
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
   var FEATURES: Features;
 }
 `;
@@ -306,7 +318,9 @@ ${useJs ? "" : globalTypes}
 const annotations = ${annotations};
 
 globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
+${hasWebsocketConfig ? `globalThis.STORYBOOK_WEBSOCKET = {
+  ${websocketAssignmentLines.join("\n  ")}
+};` : ""}
 
 module?.hot?.accept?.();
 ${featuresAssignment ? `
@@ -572,6 +586,7 @@ var import_generate = __toESM(require_generate());
 // src/metro/channelServer.ts
 var import_ws2 = require("ws");
 var import_node_http = require("http");
+var import_node_https = require("https");
 init_buildIndex();
 
 // src/metro/mcpServer.ts
@@ -949,14 +964,20 @@ function createChannelServer({
   host = void 0,
   configPath,
   experimental_mcp = false,
-  websockets = true
+  websockets = true,
+  secured = false,
+  ssl
 }) {
-  const httpServer = (0, import_node_http.createServer)();
+  if (secured && (!ssl?.key || !ssl?.cert)) {
+    throw new Error("[Storybook] Secure channel server requires both `ssl.key` and `ssl.cert`.");
+  }
+  const httpServer = secured ? (0, import_node_https.createServer)(ssl) : (0, import_node_http.createServer)();
   const wss = websockets ? new import_ws2.WebSocketServer({ server: httpServer }) : null;
   const mcpServer = experimental_mcp ? createMcpHandler(configPath, wss ?? void 0) : null;
   const selectStorySyncEndpoint = wss ? createSelectStorySyncEndpoint(wss) : null;
   httpServer.on("request", async (req, res) => {
-    const requestUrl = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const protocol = "encrypted" in req.socket && req.socket.encrypted ? "https" : "http";
+    const requestUrl = new URL(req.url ?? "/", `${protocol}://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
@@ -1057,7 +1078,7 @@ function createChannelServer({
     }
   });
   httpServer.listen(port, host, () => {
-    const protocol = wss ? "WebSocket" : "HTTP";
+    const protocol = wss ? secured ? "WSS" : "WebSocket" : secured ? "HTTPS" : "HTTP";
     console.log(`${protocol} server listening on ${host ?? "localhost"}:${port}`);
   });
   mcpServer?.preInit();
@@ -1109,6 +1130,7 @@ var StorybookPlugin = class {
   }) {
     const port = websockets === "auto" ? 7007 : websockets?.port ?? 7007;
     const host = websockets === "auto" ? "auto" : websockets?.host;
+    const secured = Boolean(websockets && websockets !== "auto" && websockets.secured);
     if ((websockets || experimental_mcp) && !this.serverStarted) {
       this.serverStarted = true;
       createChannelServer({
@@ -1116,7 +1138,14 @@ var StorybookPlugin = class {
         host: host === "auto" ? void 0 : host,
         configPath,
         experimental_mcp,
-        websockets: Boolean(websockets)
+        websockets: Boolean(websockets),
+        secured,
+        ssl: websockets && websockets !== "auto" ? {
+          key: websockets.key,
+          cert: websockets.cert,
+          ca: websockets.ca,
+          passphrase: websockets.passphrase
+        } : void 0
       });
     }
     compiler.hooks.beforeCompile.tapPromise("StorybookPlugin", async () => {
@@ -1126,7 +1155,7 @@ var StorybookPlugin = class {
         configPath,
         useJs,
         docTools,
-        ...websockets ? { host, port } : {}
+        ...websockets ? { host, port, secured } : {}
       });
       console.log("[StorybookPlugin] Generated storybook.requires");
     });
@@ -1141,7 +1170,10 @@ var StorybookPlugin = class {
    * and replace the config folder index with a stub component.
    */
   applyDisabled(compiler, configPath) {
-    const stubPath = require.resolve("@storybook/react-native/stub");
+    const stubPath = path2.resolve(
+      __dirname,
+      __dirname.includes(`${path2.sep}src${path2.sep}`) ? "../stub.tsx" : "../stub.js"
+    );
     const normalizedConfigPath = path2.resolve(configPath);
     new compiler.webpack.NormalModuleReplacementPlugin(/./, (resource) => {
       const request = resource.request;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.3.0-next.6",
+  "version": "10.3.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@storybook/mcp": "^0.4.1",
     "@storybook/react": "10.3.0-alpha.14",
-    "@storybook/react-native-theming": "^10.3.0-next.6",
-    "@storybook/react-native-ui": "^10.3.0-next.6",
-    "@storybook/react-native-ui-common": "^10.3.0-next.6",
+    "@storybook/react-native-theming": "^10.3.0",
+    "@storybook/react-native-ui": "^10.3.0",
+    "@storybook/react-native-ui-common": "^10.3.0",
     "@tmcp/adapter-valibot": "^0.1.4",
     "@tmcp/transport-http": "^0.8.0",
     "commander": "^14.0.2",

package/readme.md

@@ -461,7 +461,7 @@ You can enable MCP with or without websockets:
 
 ### websockets
 
-Type: `'auto' | { host: string?, port: number? }`, default: `undefined`
+Type: `'auto' | { host?: string, port?: number, secured?: boolean, key?: string | Buffer, cert?: string | Buffer, ca?: string | Buffer | Array<string | Buffer>, passphrase?: string }`, default: `undefined`
 
 If specified, create a WebSocket server on startup. This allows you to sync up multiple devices to show the same story and [arg](https://storybook.js.org/docs/writing-stories/args) values connected to the story in the UI.
 
@@ -479,6 +479,18 @@ Type: `number`, default: `7007`
 
 The port on which to run the WebSocket, if specified.
 
+### websockets.secured
+
+Type: `boolean`, default: `false`
+
+When `true`, the channel server starts on `https` and upgrades WebSocket clients over `wss`.
+
+### websockets.key / websockets.cert
+
+Type: `string | Buffer`, default: `undefined`
+
+TLS private key and certificate used when `secured` is `true`.
+
 ## getStorybookUI options
 
 You can pass these parameters to getStorybookUI call in your storybook entry point:

package/scripts/generate.js

@@ -55,7 +55,8 @@ async function generate({
   useJs = false,
   docTools = true,
   host = undefined,
-  port = 7007,
+  port = undefined,
+  secured = false,
 }) {
   // 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;
@@ -165,11 +166,25 @@ async function generate({
   ${enhancers.join(',\n  ')}
 ]`;
 
+  const hasWebsocketConfig = host !== undefined || port !== undefined || secured;
+  const websocketAssignmentLines = [];
+
+  if (channelHost) {
+    websocketAssignmentLines.push(`host: '${channelHost}',`);
+  }
+
+  if (hasWebsocketConfig) {
+    websocketAssignmentLines.push(`port: ${port ?? 7007},`);
+    websocketAssignmentLines.push(`secured: ${Boolean(secured)},`);
+  }
+
   const globalTypes = `
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
   var FEATURES: Features;
 }
 `;
@@ -188,7 +203,13 @@ ${useJs ? '' : globalTypes}
 const annotations = ${annotations};
 
 globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ''}
+${
+  hasWebsocketConfig
+    ? `globalThis.STORYBOOK_WEBSOCKET = {
+  ${websocketAssignmentLines.join('\n  ')}
+};`
+    : ''
+}
 
 module?.hot?.accept?.();
 ${featuresAssignment ? `\n${featuresAssignment}\n` : ''}