Release: Prerelease 10.0.0-beta.6

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 9.1.7
+
+- Dependencies: Update `vite-plugin-storybook-nextjs` to 2.0.7 - [#32331](https://github.com/storybookjs/storybook/pull/32331), thanks @k35o!
+- React: Preserve `@ts-expect-error` in preview - [#32442](https://github.com/storybookjs/storybook/pull/32442), thanks @mrginglymus!
+- Telemetry: Queue error reporting & filter browser-extention - [#32499](https://github.com/storybookjs/storybook/pull/32499), thanks @ndelangen!
+
 ## 9.1.6
 
 - CLI: Capture the version specifier used in `create-storybook` - [#32344](https://github.com/storybookjs/storybook/pull/32344), thanks @shilman!

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 10.0.0-beta.6
+
+- Core: Add "open in editor" feature - [#32452](https://github.com/storybookjs/storybook/pull/32452), thanks @yannbf!
+- Dev: Improve the browser opening experience - [#32488](https://github.com/storybookjs/storybook/pull/32488), thanks @ndelangen!
+- Maintenance: Remove globalization for dropped entrypoints - [#32491](https://github.com/storybookjs/storybook/pull/32491), thanks @ndelangen!
+- Telemetry: Queue error reporting & filter browser-extention - [#32499](https://github.com/storybookjs/storybook/pull/32499), thanks @ndelangen!
+- Upgrade: Packages `open` - [#32484](https://github.com/storybookjs/storybook/pull/32484), thanks @ndelangen!
+
 ## 10.0.0-beta.5
 
 - Dependencies: Update `vite-plugin-storybook-nextjs` to 2.0.7 - [#32331](https://github.com/storybookjs/storybook/pull/32331), thanks @k35o!

code/addons/a11y/package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@radix-ui/react-tabs": "1.0.4",
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "@testing-library/react": "^14.0.0",
     "execa": "^9.5.2",
     "react": "^18.2.0",

code/addons/docs/package.json

@@ -85,7 +85,7 @@
   "dependencies": {
     "@mdx-js/react": "^3.0.0",
     "@storybook/csf-plugin": "workspace:*",
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "@storybook/react-dom-shim": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

code/addons/jest/package.json

@@ -54,7 +54,7 @@
     "upath": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",

code/addons/onboarding/package.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@neoconfetti/react": "^1.0.0",
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-joyride": "^2.8.2",

code/addons/pseudo-states/package.json

@@ -55,7 +55,7 @@
     "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.8.3"

code/addons/themes/package.json

@@ -61,7 +61,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.8.3"

code/addons/vitest/package.json

@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "prompts": "^2.4.0",
     "ts-dedent": "^2.2.0"
   },

code/addons/vitest/src/components/TestProviderRender.stories.tsx

@@ -316,6 +316,7 @@ export const InSidebarContextMenu: Story = {
       importPath: './path/to/story',
       prepared: true,
       parent: 'parent-id',
+      exportName: 'ExampleStory',
       depth: 1,
     },
   },

code/builders/builder-webpack5/src/index.ts

@@ -195,6 +195,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
       immutable: true,
     })
   );
+
   router.use(compilation);
   router.use(webpackHotMiddleware(compiler, { log: false }));
 

code/core/assets/server/openBrowser.applescript

@@ -0,0 +1,94 @@
+(*
+Copyright (c) 2015-present, Facebook, Inc.
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*)
+
+property targetTab: null
+property targetTabIndex: -1
+property targetWindow: null
+property theProgram: "Google Chrome"
+
+on run argv
+  set theURL to item 1 of argv
+  set matchURL to item 2 of argv
+
+  -- Allow requested program to be optional,
+  -- default to Google Chrome
+  if (count of argv) > 2 then
+    set theProgram to item 3 of argv
+  end if
+
+  using terms from application "Google Chrome"
+    tell application theProgram
+
+      if (count every window) = 0 then
+        make new window
+      end if
+
+      -- 1: Looking for tab running debugger
+      -- then, Reload debugging tab if found
+      -- then return
+      set found to my lookupTabWithUrl(matchURL)
+      if found then
+        set targetWindow's active tab index to targetTabIndex
+        tell targetTab to reload
+        tell targetWindow to activate
+        set index of targetWindow to 1
+        return
+      end if
+
+      -- 2: Looking for Empty tab
+      -- In case debugging tab was not found
+      -- We try to find an empty tab instead
+      set found to my lookupTabWithUrl("chrome://newtab/")
+      if found then
+        set targetWindow's active tab index to targetTabIndex
+        set URL of targetTab to theURL
+        tell targetWindow to activate
+        return
+      end if
+
+      -- 3: Create new tab
+      -- both debugging and empty tab were not found
+      -- make a new tab with url
+      tell window 1
+        activate
+        make new tab with properties {URL:theURL}
+      end tell
+    end tell
+  end using terms from
+end run
+
+-- Function:
+-- Lookup tab with given url
+-- if found, store tab, index, and window in properties
+-- (properties were declared on top of file)
+on lookupTabWithUrl(lookupUrl)
+  using terms from application "Google Chrome"
+    tell application theProgram
+      -- Find a tab with the given url
+      set found to false
+      set theTabIndex to -1
+      repeat with theWindow in every window
+        set theTabIndex to 0
+        repeat with theTab in every tab of theWindow
+          set theTabIndex to theTabIndex + 1
+          if (theTab's URL as string) contains lookupUrl then
+            -- assign tab, tab index, and window to properties
+            set targetTab to theTab
+            set targetTabIndex to theTabIndex
+            set targetWindow to theWindow
+            set found to true
+            exit repeat
+          end if
+        end repeat
+
+        if found then
+          exit repeat
+        end if
+      end repeat
+    end tell
+  end using terms from
+  return found
+end lookupTabWithUrl

code/core/package.json

@@ -228,13 +228,12 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
     "@vitest/expect": "3.2.4",
     "@vitest/mocker": "3.2.4",
     "@vitest/spy": "3.2.4",
-    "better-opn": "^3.0.2",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
     "recast": "^0.23.5",
     "semver": "^7.6.2",
@@ -318,13 +317,14 @@
     "jiti": "^2.4.2",
     "js-yaml": "^4.1.0",
     "jsdoc-type-pratt-parser": "^4.0.0",
+    "launch-editor": "^2.11.1",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
     "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
     "nanoid": "^4.0.2",
     "npmlog": "^7.0.0",
-    "open": "^8.4.0",
+    "open": "^10.2.0",
     "p-limit": "^6.2.0",
     "package-manager-detector": "^1.1.0",
     "picocolors": "^1.1.0",
@@ -335,6 +335,7 @@
     "prettier": "^3.5.3",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
+    "qrcode.react": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",

code/core/src/builder-manager/utils/framework.ts

@@ -55,5 +55,9 @@ export const buildFrameworkGlobalsFromOptions = async (options: Options) => {
     globals.STORYBOOK_FRAMEWORK = framework;
   }
 
+  if (options.networkAddress) {
+    globals.STORYBOOK_NETWORK_ADDRESS = options.networkAddress;
+  }
+
   return globals;
 };

code/core/src/component-testing/components/InteractionsPanel.stories.tsx

@@ -30,6 +30,11 @@ const managerContext: any = {
   api: {
     getDocsUrl: fn().mockName('api::getDocsUrl'),
     emit: fn().mockName('api::emit'),
+    getData: fn()
+      .mockName('api::getData')
+      .mockImplementation(() => ({
+        importPath: 'core/src/component-testing/components/InteractionsPanel.stories.tsx',
+      })),
   },
 };
 

code/core/src/component-testing/components/InteractionsPanel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { transparentize } from 'polished';
+import type { API } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
 import { type Call, type CallStates, type ControlStates } from '../../instrumenter/types';
@@ -44,6 +45,9 @@ interface InteractionsPanelProps {
   onScrollToEnd?: () => void;
   hasResultMismatch?: boolean;
   browserTestStatus?: CallStates;
+  importPath?: string;
+  canOpenInEditor?: boolean;
+  api: API;
 }
 
 const Container = styled.div(({ theme }) => ({
@@ -104,6 +108,9 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     endRef,
     hasResultMismatch,
     browserTestStatus,
+    importPath,
+    canOpenInEditor,
+    api,
   }) {
     const filter = useAnsiToHtmlFilter();
     const hasRealInteractions = interactions.some((i) => i.id !== INTERNAL_RENDER_CALL_ID);
@@ -120,6 +127,9 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
           status={status}
           storyFileName={fileName}
           onScrollToEnd={onScrollToEnd}
+          importPath={importPath}
+          canOpenInEditor={canOpenInEditor}
+          api={api}
         />
         <div aria-label="Interactions list">
           {interactions.map((call) => (

code/core/src/component-testing/components/Panel.tsx

@@ -17,6 +17,8 @@ import {
   useAddonState,
   useChannel,
   useParameter,
+  useStorybookApi,
+  useStorybookState,
 } from 'storybook/manager-api';
 
 import {
@@ -191,6 +193,12 @@ export const Panel = memo<{ refId?: string; storyId: string; storyUrl: string }>
     });
 
     // shared state
+    const state = useStorybookState();
+    const api = useStorybookApi();
+    const data = api.getData(state.storyId, state.refId);
+    const importPath = data?.importPath as string | undefined;
+    const canOpenInEditor = global.CONFIG_TYPE === 'DEVELOPMENT' && !state.refId;
+
     const [panelState, set] = useAddonState<PanelState>(ADDON_ID, {
       status: 'rendering' as PlayStatus,
       controlStates: INITIAL_CONTROL_STATES,
@@ -406,6 +414,9 @@ export const Panel = memo<{ refId?: string; storyId: string; storyUrl: string }>
           // @ts-expect-error TODO
           endRef={endRef}
           onScrollToEnd={scrollTarget && scrollToTarget}
+          importPath={importPath}
+          canOpenInEditor={canOpenInEditor}
+          api={api}
         />
       </Fragment>
     );

code/core/src/component-testing/components/Subnav.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { action } from 'storybook/actions';
 
 import { Subnav } from './Subnav';
@@ -132,3 +134,18 @@ export const Detached = {
     },
   },
 };
+
+export const WithOpenInEditorLink = {
+  args: {
+    status: 'completed',
+    controlStates: {
+      detached: true,
+      start: false,
+      back: false,
+      goto: false,
+      next: false,
+      end: false,
+    },
+    canOpenInEditor: true,
+  },
+};