Core: Add "open in editor" feature

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/package.json

@@ -228,7 +228,7 @@
   },
   "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",
@@ -317,6 +317,7 @@
     "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",
@@ -334,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,
+  },
+};

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

@@ -19,6 +19,7 @@ import {
   SyncIcon,
 } from '@storybook/icons';
 
+import { type API } from 'storybook/manager-api';
 import { styled, useTheme } from 'storybook/theming';
 
 import { type ControlStates } from '../../instrumenter/types';
@@ -47,6 +48,9 @@ interface SubnavProps {
   status: PlayStatus;
   storyFileName?: string;
   onScrollToEnd?: () => void;
+  importPath?: string;
+  canOpenInEditor?: boolean;
+  api: API;
 }
 
 const StyledButton = styled(Button)(({ theme }) => ({
@@ -73,8 +77,10 @@ const StyledSeparator = styled(Separator)({
   marginTop: 0,
 });
 
-const StyledLocation = styled(P)(({ theme }) => ({
-  color: theme.textMutedColor,
+const StyledLocation = styled(P)<{ isText?: boolean }>(({ theme, isText }) => ({
+  color: isText ? theme.textMutedColor : theme.color.secondary,
+  cursor: isText ? 'default' : 'pointer',
+  fontWeight: isText ? theme.typography.weight.regular : theme.typography.weight.bold,
   justifyContent: 'flex-end',
   textAlign: 'right',
   whiteSpace: 'nowrap',
@@ -119,6 +125,9 @@ export const Subnav: React.FC<SubnavProps> = ({
   status,
   storyFileName,
   onScrollToEnd,
+  importPath,
+  canOpenInEditor,
+  api,
 }) => {
   const buttonText = status === 'errored' ? 'Scroll to error' : 'Scroll to end';
   const theme = useTheme();
@@ -182,9 +191,28 @@ export const Subnav: React.FC<SubnavProps> = ({
               </RerunButton>
             </WithTooltip>
           </Group>
-          {storyFileName && (
+          {(importPath || storyFileName) && (
             <Group>
-              <StyledLocation>{storyFileName}</StyledLocation>
+              {canOpenInEditor ? (
+                <WithTooltip
+                  trigger="hover"
+                  hasChrome={false}
+                  tooltip={<Note note="Open in editor" />}
+                >
+                  <StyledLocation
+                    aria-label="Open in editor"
+                    onClick={() => {
+                      api.openInEditor({
+                        file: importPath as string,
+                      });
+                    }}
+                  >
+                    {storyFileName}
+                  </StyledLocation>
+                </WithTooltip>
+              ) : (
+                <StyledLocation isText={true}>{storyFileName}</StyledLocation>
+              )}
             </Group>
           )}
         </StyledSubnav>

code/core/src/components/components/tooltip/WithTooltip.tsx

@@ -177,7 +177,12 @@ const WithToolTipState = ({
 
   useEffect(() => {
     const hide = () => onVisibilityChange(false);
-    document.addEventListener('keydown', hide, false);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        hide();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, false);
 
     // Find all iframes on the screen and bind to clicks inside them (waiting until the iframe is ready)
     const iframes: HTMLIFrameElement[] = Array.from(document.getElementsByTagName('iframe'));
@@ -211,7 +216,7 @@ const WithToolTipState = ({
     });
 
     return () => {
-      document.removeEventListener('keydown', hide);
+      document.removeEventListener('keydown', handleKeyDown);
       unbinders.forEach((unbind) => {
         unbind();
       });

code/core/src/core-events/data/open-in-editor.ts

@@ -0,0 +1,8 @@
+export type OpenInEditorRequestPayload = { file: string; line?: number; column?: number };
+
+export type OpenInEditorResponsePayload = {
+  file: string;
+  line?: number;
+  column?: number;
+  error: string | null;
+};

code/core/src/core-events/index.ts

@@ -86,6 +86,9 @@ enum events {
   ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse',
   CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest',
   CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse',
+  // Open a file in the code editor
+  OPEN_IN_EDITOR_REQUEST = 'openInEditorRequest',
+  OPEN_IN_EDITOR_RESPONSE = 'openInEditorResponse',
 }
 
 // Enables: `import Events from ...`
@@ -151,6 +154,8 @@ export const {
   SAVE_STORY_RESPONSE,
   ARGTYPES_INFO_REQUEST,
   ARGTYPES_INFO_RESPONSE,
+  OPEN_IN_EDITOR_REQUEST,
+  OPEN_IN_EDITOR_RESPONSE,
 } = events;
 
 export * from './data/create-new-story';
@@ -160,3 +165,4 @@ export * from './data/request-response';
 export * from './data/save-story';
 export * from './data/whats-new';
 export * from './data/phases';
+export * from './data/open-in-editor';

code/core/src/core-server/dev-server.ts

@@ -55,6 +55,9 @@ export async function storybookDevServer(options: Options) {
   const proto = options.https ? 'https' : 'http';
   const { address, networkAddress } = getServerAddresses(port, host, proto, initialPath);
 
+  // Expose addresses on options for the manager builder to surface in globals, important for QR code link sharing
+  options.networkAddress = networkAddress;
+
   if (!core?.builder) {
     throw new MissingBuilderError();
   }

code/core/src/core-server/presets/common-preset.ts

@@ -32,6 +32,7 @@ import { dedent } from 'ts-dedent';
 import { resolvePackageDir } from '../../shared/utils/module';
 import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel';
 import { initFileSearchChannel } from '../server-channel/file-search-channel';
+import { initOpenInEditorChannel } from '../server-channel/open-in-editor-channel';
 import { defaultFavicon, defaultStaticDirs } from '../utils/constants';
 import { initializeSaveStory } from '../utils/save-story/save-story';
 import { parseStaticDir } from '../utils/server-statics';
@@ -256,6 +257,7 @@ export const experimental_serverChannel = async (
 
   initFileSearchChannel(channel, options, coreOptions);
   initCreateNewStoryChannel(channel, options, coreOptions);
+  initOpenInEditorChannel(channel, options, coreOptions);
 
   return channel;
 };