UI: Add isolation mode shortcut

code/core/src/manager-api/modules/shortcuts.ts

@@ -114,6 +114,7 @@ export interface API_Shortcuts {
   remount: API_KeyCollection;
   openInEditor: API_KeyCollection;
   copyStoryLink: API_KeyCollection;
+  openInIsolation: API_KeyCollection;
   // TODO: bring this back once we want to add shortcuts for this
   // copyStoryName: API_KeyCollection;
 }
@@ -153,6 +154,7 @@ export const defaultShortcuts: API_Shortcuts = Object.freeze({
   remount: ['alt', 'R'],
   openInEditor: ['alt', 'shift', 'E'],
   copyStoryLink: ['alt', 'shift', 'L'],
+  openInIsolation: ['alt', 'shift', 'I'],
   // TODO: bring this back once we want to add shortcuts for this
   // copyStoryName: ['alt', 'shift', 'C'],
 });
@@ -397,6 +399,11 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
           }
           break;
         }
+        case 'openInIsolation': {
+          const { refId, storyId } = store.getState();
+          fullAPI.openInIsolation(storyId, refId);
+          break;
+        }
         // TODO: bring this back once we want to add shortcuts for this
         // case 'copyStoryName': {
         //   const storyData = fullAPI.getCurrentStoryData();

code/core/src/manager-api/modules/stories.ts

@@ -1,4 +1,5 @@
 import { logger } from 'storybook/internal/client-logger';
+import { getStoryHref } from 'storybook/internal/components';
 import {
   CONFIG_ERROR,
   CURRENT_STORY_WAS_SET,
@@ -291,6 +292,17 @@ export interface SubAPI {
    * @returns {Promise<void>} A promise that resolves when the state has been updated.
    */
   experimental_setFilter: (addonId: string, filterFunction: API_FilterFunction) => Promise<void>;
+  /**
+   * Opens a story in isolation mode in a new tab/window.
+   *
+   * @param {string} storyId - The ID of the story to open.
+   * @param {string | null | undefined} refId - The ID of the ref for the story. Pass null/undefined
+   *   for local stories.
+   * @param {'story' | 'docs'} viewMode - The view mode to open the story in. Defaults to current
+   *   view mode.
+   * @returns {void}
+   */
+  openInIsolation: (storyId: string, refId?: string | null, viewMode?: 'story' | 'docs') => void;
 }
 
 const removedOptions = ['enableShortcuts', 'theme', 'showRoots'];
@@ -707,6 +719,32 @@ export const init: ModuleFn<SubAPI, SubState> = ({
 
       provider.channel?.emit(SET_FILTER, { id });
     },
+
+    openInIsolation: (storyId, refId, viewMode) => {
+      const { location } = global.document;
+      const { refs, customQueryParams, viewMode: currentViewMode } = store.getState();
+
+      // Get the ref object from refs map using refId
+      const ref = refId ? refs[refId] : null;
+
+      let baseUrl = `${location.origin}${location.pathname}`;
+
+      if (!baseUrl.endsWith('/')) {
+        baseUrl += '/';
+      }
+
+      const iframeUrl = ref
+        ? `${ref.url}/iframe.html`
+        : (global.PREVIEW_URL as string) || `${baseUrl}iframe.html`;
+
+      const storyViewMode = viewMode ?? currentViewMode;
+
+      const href = getStoryHref(iframeUrl, storyId, {
+        ...customQueryParams,
+        ...(storyViewMode && { viewMode: storyViewMode }),
+      });
+      global.window.open(href, '_blank', 'noopener,noreferrer');
+    },
   };
 
   // On initial load, the local iframe will select the first story (or other "selection specifier")

code/core/src/manager-api/root.tsx

@@ -105,6 +105,7 @@ export type API = addons.SubAPI &
   version.SubAPI &
   url.SubAPI &
   whatsnew.SubAPI &
+  openInEditor.SubAPI &
   Other;
 
 interface Other {

code/core/src/manager-api/tests/stories.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import type { Mocked } from 'vitest';
 import { describe, expect, it, vi } from 'vitest';
 

code/core/src/manager/components/preview/tools/share.tsx

@@ -1,11 +1,6 @@
 import React, { useMemo, useState } from 'react';
 
-import {
-  Button,
-  PopoverProvider,
-  TooltipLinkList,
-  getStoryHref,
-} from 'storybook/internal/components';
+import { Button, PopoverProvider, TooltipLinkList } from 'storybook/internal/components';
 import type { Addon_BaseType } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
@@ -78,23 +73,22 @@ const QRDescription = styled.div(({ theme }) => ({
 }));
 
 function ShareMenu({
-  baseUrl,
-  storyId,
-  queryParams,
   qrUrl,
   isDevelopment,
+  refId,
+  storyId,
 }: {
-  baseUrl: string;
-  storyId: string;
-  queryParams: Record<string, any>;
   qrUrl: string;
   isDevelopment: boolean;
+  refId: string | null | undefined;
+  storyId: string;
 }) {
   const api = useStorybookApi();
   const shortcutKeys = api.getShortcutKeys();
   const enableShortcuts = !!shortcutKeys;
   const [copied, setCopied] = useState(false);
   const copyStoryLink = shortcutKeys?.copyStoryLink;
+  const openInIsolation = shortcutKeys?.openInIsolation;
 
   const links = useMemo(() => {
     const copyTitle = copied ? 'Copied!' : 'Copy story link';
@@ -113,11 +107,11 @@ function ShareMenu({
         },
         {
           id: 'open-new-tab',
-          title: 'Open in isolation mode',
+          title: 'Open in isolation',
           icon: <BugIcon />,
+          right: enableShortcuts ? <Shortcut keys={openInIsolation} /> : null,
           onClick: () => {
-            const href = getStoryHref(baseUrl, storyId, queryParams);
-            window.open(href, '_blank', 'noopener,noreferrer');
+            api.openInIsolation(storyId, refId);
           },
         },
       ],
@@ -144,7 +138,17 @@ function ShareMenu({
     ]);
 
     return baseLinks;
-  }, [baseUrl, storyId, queryParams, copied, qrUrl, enableShortcuts, copyStoryLink, isDevelopment]);
+  }, [
+    copied,
+    qrUrl,
+    enableShortcuts,
+    copyStoryLink,
+    isDevelopment,
+    api,
+    openInIsolation,
+    refId,
+    storyId,
+  ]);
 
   return <TooltipLinkList links={links} style={{ width: 210 }} />;
 }
@@ -157,7 +161,7 @@ export const shareTool: Addon_BaseType = {
   render: () => {
     return (
       <Consumer filter={mapper}>
-        {({ baseUrl, storyId, queryParams }) => {
+        {({ storyId, refId }) => {
           const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
           const storyUrl = global.STORYBOOK_NETWORK_ADDRESS
             ? new URL(window.location.search, global.STORYBOOK_NETWORK_ADDRESS).href
@@ -169,7 +173,12 @@ export const shareTool: Addon_BaseType = {
               placement="bottom"
               padding={0}
               popover={
-                <ShareMenu {...{ baseUrl, storyId, queryParams, qrUrl: storyUrl, isDevelopment }} />
+                <ShareMenu
+                  qrUrl={storyUrl}
+                  isDevelopment={isDevelopment}
+                  refId={refId}
+                  storyId={storyId}
+                />
               }
             >
               <Button padding="small" variant="ghost" ariaLabel="Share" tooltip="Share...">

docs/_snippets/storybook-addons-api-addnotification.md

@@ -0,0 +1,27 @@
+```js
+import { addons } from '@storybook/manager-api';
+import { CheckIcon } from '@storybook/icons';
+
+addons.register('my-organisation/my-addon', (api) => {
+  // Add a simple notification
+  api.addNotification({
+    id: 'my-notification',
+    content: {
+      headline: 'Action completed',
+      subHeadline: 'Your changes have been saved successfully',
+    },
+    duration: 5000, // 5 seconds
+  });
+
+  // Add a notification with an icon
+  api.addNotification({
+    id: 'success-notification',
+    content: {
+      headline: 'Success!',
+      subHeadline: 'Operation completed successfully',
+    },
+    icon: <CheckIcon />,
+    duration: 3000,
+  });
+});
+```

docs/_snippets/storybook-addons-api-getcurrentstorydata.md

@@ -0,0 +1,7 @@
+```js
+addons.register('my-organisation/my-addon', (api) => {
+  // Get data about the currently selected story
+  const storyData = api.getCurrentStoryData();
+  console.log('Current story:', storyData.id, storyData.title);
+});
+```

docs/_snippets/storybook-addons-api-openineditor.md

@@ -0,0 +1,23 @@
+```js
+addons.register('my-organisation/my-addon', (api) => {
+  // Open a file in the editor
+  api.openInEditor({
+    file: './src/components/Button.tsx',
+  });
+
+  // Handle the api response
+  api
+    .openInEditor({
+      file: './src/components/Button.tsx',
+      line: 42,
+      column: 15,
+    })
+    .then((response) => {
+      if (response.error) {
+        console.error('Failed to open file:', response.error);
+      } else {
+        console.log('File opened successfully');
+      }
+    });
+});
+```

docs/_snippets/storybook-addons-api-openinisolation.md

@@ -0,0 +1,12 @@
+```js
+addons.register('my-organisation/my-addon', (api) => {
+  // Open the current story in isolation mode
+  api.openInIsolation('button--primary');
+
+  // Open a story from an external ref in isolation
+  api.openInIsolation('external-button--secondary', 'external-ref');
+
+  // Open a story in docs view mode
+  api.openInIsolation('button--primary', null, 'docs');
+});
+```

docs/_snippets/storybook-addons-api-togglefullscreen.md

@@ -0,0 +1,12 @@
+```js
+addons.register('my-organisation/my-addon', (api) => {
+  // Toggle fullscreen mode
+  api.toggleFullscreen();
+
+  // Enable fullscreen
+  api.toggleFullscreen(true);
+
+  // Disable fullscreen
+  api.toggleFullscreen(false);
+});
+```

docs/_snippets/storybook-addons-api-togglepanel.md

@@ -0,0 +1,12 @@
+```js
+addons.register('my-organisation/my-addon', (api) => {
+  // Toggle panel visibility
+  api.togglePanel();
+
+  // Show the panel
+  api.togglePanel(true);
+
+  // Hide the panel
+  api.togglePanel(false);
+});
+```

docs/addons/addons-api.mdx

@@ -165,6 +165,76 @@ This method allows you to register a handler function called whenever the user n
 
 {/* prettier-ignore-end */}
 
+### api.openInIsolation(storyId, refId?, viewMode?)
+
+Opens a story in isolation mode in a new tab/window. This allows you to programmatically open stories in the same way as the "Open in isolation" button in the share menu.
+
+- `storyId`: The ID of the story to open (required)
+- `refId`: The ID of the ref for external stories. Pass `null`/`undefined` for local stories (optional)
+- `viewMode`: The view mode to open the story in. Can be `'story'` or `'docs'` (optional, defaults to current view mode)
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-addons-api-openinisolation.md" />
+
+{/* prettier-ignore-end */}
+
+### api.openInEditor(payload)
+
+Opens a file in the configured code editor. Useful for "Edit in IDE" functionality in addons.
+
+- `payload.file`: The file path to open (required)
+- `payload.line`: Optional line number to jump to
+- `payload.column`: Optional column number to jump to
+
+Returns a Promise that resolves with information about whether the operation was successful.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-addons-api-openineditor.md" />
+
+{/* prettier-ignore-end */}
+
+### api.getCurrentStoryData()
+
+Returns the current story's data, including its ID, kind, name, and parameters.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-addons-api-getcurrentstorydata.md" />
+
+{/* prettier-ignore-end */}
+
+### api.toggleFullscreen(toggled?)
+
+Toggles the fullscreen mode of the Storybook UI. Pass `true` to enable fullscreen, `false` to disable, or omit to toggle the current state.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-addons-api-togglefullscreen.md" />
+
+{/* prettier-ignore-end */}
+
+### api.togglePanel(toggled?)
+
+Toggles the visibility of the addon panel. Pass `true` to show the panel, `false` to hide, or omit to toggle the current state.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-addons-api-togglepanel.md" />
+
+{/* prettier-ignore-end */}
+
+### api.addNotification(notification)
+
+Displays a notification in the Storybook UI. The notification object should contain `id`, `content`, and optionally `duration` and `icon`.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-addons-api-addnotification.md" />
+
+{/* prettier-ignore-end */}
+
 ### addons.setConfig(config)
 
 This method allows you to override the default Storybook UI configuration (e.g., set up a [theme](../configure/user-interface/theming.mdx) or hide UI elements):