Release: Prerelease 10.2.0-alpha.12

.github/workflows/nx.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - next
+  # TODO use pull_request_target in the future to also run on forks
   pull_request:
     types: [opened, synchronize, labeled, reopened]
   schedule:
@@ -21,6 +22,7 @@ jobs:
   nx:
     if: >
       (github.event_name == 'pull_request' &&
+        github.event.pull_request.head.repo.full_name == github.repository &&
         (contains(github.event.pull_request.labels.*.name, 'ci:normal') ||
          contains(github.event.pull_request.labels.*.name, 'ci:merged') ||
          contains(github.event.pull_request.labels.*.name, 'ci:daily'))

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 10.2.0-alpha.12
+
+- Addon-docs: Add MDX manifest generation - [#33408](https://github.com/storybookjs/storybook/pull/33408), thanks @copilot-swe-agent!
+- AddonVitest: Improve perf & fix loading incorrect `.env` file - [#33469](https://github.com/storybookjs/storybook/pull/33469), thanks @ndelangen!
+- Core: Add `getStoryHrefs` manager API and add hotkey for "open in isolation" - [#33416](https://github.com/storybookjs/storybook/pull/33416), thanks @ghengeveld!
+
 ## 10.2.0-alpha.11
 
 - Core: Add try-catch for cross-origin access in Storybook hooks - [#33448](https://github.com/storybookjs/storybook/pull/33448), thanks @ndelangen!

code/addons/docs/docs/frameworks/COMMON.md

@@ -28,7 +28,7 @@ export default {
 
 ## DocsPage
 
-When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
+When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automatically for all your stories, available in the `Docs` tab of the Storybook UI.
 
 ## MDX
 

code/addons/docs/docs/frameworks/REACT.md

@@ -37,7 +37,7 @@ export default {
 
 ## DocsPage
 
-When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
+When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automatically for all your stories, available in the `Docs` tab of the Storybook UI.
 
 ## Props tables
 

code/addons/docs/src/blocks/blocks/Stories.tsx

@@ -1,6 +1,8 @@
 import type { FC, ReactElement } from 'react';
 import React, { useContext } from 'react';
 
+import { Tag } from 'storybook/internal/preview-api';
+
 import { styled } from 'storybook/theming';
 
 import { DocsContext } from './DocsContext';
@@ -43,11 +45,11 @@ export const Stories: FC<StoriesProps> = ({ title = 'Stories', includePrimary =
   // The new behavior here is that if NONE of the stories in the autodocs page are tagged
   // with 'autodocs', we show all stories. If ANY of the stories have autodocs then we use
   // the new behavior.
-  const hasAutodocsTaggedStory = stories.some((story) => story.tags?.includes('autodocs'));
+  const hasAutodocsTaggedStory = stories.some((story) => story.tags?.includes(Tag.AUTODOCS));
   if (hasAutodocsTaggedStory) {
     // Don't show stories where mount is used in docs.
     // As the play function is not running in docs, and when mount is used, the mounting is happening in play itself.
-    stories = stories.filter((story) => story.tags?.includes('autodocs') && !story.usesMount);
+    stories = stories.filter((story) => story.tags?.includes(Tag.AUTODOCS) && !story.usesMount);
   }
 
   if (!includePrimary) {

code/addons/docs/src/blocks/blocks/usePrimaryStory.test.tsx

@@ -5,16 +5,17 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import type { FC, PropsWithChildren } from 'react';
 
+import { Tag } from 'storybook/internal/core-server';
 import type { PreparedStory } from 'storybook/internal/types';
 
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import { usePrimaryStory } from './usePrimaryStory';
 
 const stories: Record<string, Partial<PreparedStory>> = {
-  story1: { name: 'Story One', tags: ['!autodocs'] },
-  story2: { name: 'Story Two', tags: ['autodocs'] },
-  story3: { name: 'Story Three', tags: ['autodocs'] },
+  story1: { name: 'Story One', tags: [`!${Tag.AUTODOCS}`] },
+  story2: { name: 'Story Two', tags: [Tag.AUTODOCS] },
+  story3: { name: 'Story Three', tags: [Tag.AUTODOCS] },
   story4: { name: 'Story Four', tags: [] },
 };
 

code/addons/docs/src/blocks/blocks/usePrimaryStory.ts

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 
+import { Tag } from 'storybook/internal/preview-api';
 import type { PreparedStory } from 'storybook/internal/types';
 
 import { DocsContext } from './DocsContext';
@@ -11,5 +12,5 @@ import { DocsContext } from './DocsContext';
 export const usePrimaryStory = (): PreparedStory | undefined => {
   const context = useContext(DocsContext);
   const stories = context.componentStories();
-  return stories.find((story) => story.tags.includes('autodocs'));
+  return stories.find((story) => story.tags.includes(Tag.AUTODOCS));
 };

code/addons/docs/src/blocks/components/Preview.tsx

@@ -260,7 +260,6 @@ export const Preview: FC<PreviewProps> = ({
           zoom={(z: number) => setScale(scale * z)}
           resetZoom={() => setScale(1)}
           storyId={!isLoading && childProps ? getStoryId(childProps, context) : undefined}
-          baseUrl="./iframe.html"
         />
       )}
       <ZoomContext.Provider value={{ scale }}>

code/addons/docs/src/blocks/components/Story.tsx

@@ -2,17 +2,15 @@
 import type { FunctionComponent } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { ErrorFormatter, Loader, getStoryHref } from 'storybook/internal/components';
+import { ErrorFormatter, Loader } from 'storybook/internal/components';
 import type { DocsContextProps, PreparedStory } from 'storybook/internal/types';
 
 import { styled } from 'storybook/theming';
 
+import { getStoryHref } from '../getStoryHref';
 import { IFrame } from './IFrame';
 import { ZoomContext } from './ZoomContext';
 
-const { PREVIEW_URL } = globalThis;
-const BASE_URL = PREVIEW_URL || 'iframe.html';
-
 interface CommonProps {
   story: PreparedStory;
   inline: boolean;
@@ -98,7 +96,7 @@ const IFrameStory: FunctionComponent<IFrameStoryProps> = ({ story, height = '500
             key="iframe"
             id={`iframe--${story.id}`}
             title={story.name}
-            src={getStoryHref(BASE_URL, story.id, { viewMode: 'story' })}
+            src={getStoryHref(story.id, { viewMode: 'story' })}
             allowFullScreen
             scale={scale}
             style={{

code/addons/docs/src/blocks/components/Toolbar.tsx

@@ -1,20 +1,21 @@
 import type { FC, SyntheticEvent } from 'react';
 import React from 'react';
 
-import { Button, Toolbar as SharedToolbar, getStoryHref } from 'storybook/internal/components';
+import { Button, Toolbar as SharedToolbar } from 'storybook/internal/components';
 
 import { ShareAltIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons';
 
 import { styled } from 'storybook/theming';
 
+import { getStoryHref } from '../getStoryHref';
+
 interface ZoomProps {
   zoom: (val: number) => void;
   resetZoom: () => void;
 }
 
 interface EjectProps {
   storyId?: string;
-  baseUrl?: string;
 }
 
 interface BarProps {
@@ -52,14 +53,7 @@ const IconPlaceholder = styled.div(({ theme }) => ({
   animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
 }));
 
-export const Toolbar: FC<ToolbarProps> = ({
-  isLoading,
-  storyId,
-  baseUrl,
-  zoom,
-  resetZoom,
-  ...rest
-}) => (
+export const Toolbar: FC<ToolbarProps> = ({ isLoading, storyId, zoom, resetZoom, ...rest }) => (
   <AbsoluteBar innerStyle={{ gap: 4, paddingInline: 7, justifyContent: 'space-between' }} {...rest}>
     <Wrapper key="left">
       {isLoading ? (
@@ -111,7 +105,6 @@ export const Toolbar: FC<ToolbarProps> = ({
         <IconPlaceholder />
       </Wrapper>
     ) : (
-      baseUrl &&
       storyId && (
         <Wrapper key="right">
           <Button
@@ -121,7 +114,7 @@ export const Toolbar: FC<ToolbarProps> = ({
             key="opener"
             ariaLabel="Open canvas in new tab"
           >
-            <a href={getStoryHref(baseUrl, storyId)} target="_blank" rel="noopener noreferrer">
+            <a href={getStoryHref(storyId)} target="_blank" rel="noopener noreferrer">
               <ShareAltIcon />
             </a>
           </Button>

code/addons/docs/src/blocks/getStoryHref.ts

@@ -0,0 +1,17 @@
+/**
+ * Only for internal use in addon-docs code, because the parent util in `core` cannot be imported.
+ * Unlike the parent util, this one only returns the preview URL.
+ */
+export const getStoryHref = (storyId: string, additionalParams: Record<string, string> = {}) => {
+  const baseUrl = globalThis.PREVIEW_URL || 'iframe.html';
+  const [url, paramsStr] = baseUrl.split('?');
+  const params = new URLSearchParams(paramsStr || '');
+
+  Object.entries(additionalParams).forEach(([key, value]) => {
+    params.set(key, value);
+  });
+
+  params.set('id', storyId);
+
+  return `${url}?${params.toString()}`;
+};