Release: Prerelease beta 8.1.0-beta.0

.circleci/config.yml

@@ -768,30 +768,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 30
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 32
           requires:
             - build-sandboxes
       - test-portable-stories:

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.0.10
+
+- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+
 ## 8.0.9
 
 - Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!

CHANGELOG.prerelease.md

@@ -1,3 +1,14 @@
+## 8.1.0-beta.0
+
+- Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
+- Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
+- Nextjs: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
+- Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
+- Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
+- React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
+- Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
+- UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!
+
 ## 8.1.0-alpha.8
 
 - Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!

MIGRATION.md

@@ -1,10 +1,12 @@
 <h1>Migration</h1>
 
 - [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
-  - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
-      - [Title block](#title-block)
   - [Portable stories](#portable-stories)
     - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
+  - [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated)
+  - [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed)
+  - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
+  - [Title block `of` prop](#title-block-of-prop)
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Portable stories](#portable-stories-1)
     - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
@@ -430,13 +432,51 @@ module.exports = createJestConfig(customJestConfig);
 
 This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
 
+### main.js `docs.autodocs` is deprecated
+
+The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be removed in 9.0.
+
+It has been replaced with a tags-based system which is more flexible than before.
+
+`docs.autodocs` takes three values:
+- `true`: generate autodocs for every component
+- `false`: don't generate autodocs at all
+- `tag`: generate autodocs for components that have been tagged `'autodocs'`.
+
+Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true`), add the following code to `.storybook/preview.js`:
+
+```js
+// .storybook/preview.js
+export default {
+  tags: ['autodocs'],
+}
+```
+
+Tags cascade, so setting `'autodocs'` at the project level automatically propagates to every component and story. If you set autodocs globally and want to opt-out for a particular component, you can remove the `'autodocs'` tag for a component like this:
+
+```js
+// Button.stories.ts
+export default {
+  component: Button,
+  tags: ['!autodocs'],
+}
+```
+
+If you had set `docs.autodocs = 'tag'`, the default setting, you can remove the setting from `.storybook/main.js`. That is now the default behavior.
+
+If you had set `docs.autodocs = false`, this still works in 8.x, but will go away in 9.0 as a breaking change. If you don't want autodocs at all, simply remove the `'autodocs'` tag throughout your Storybook and autodocs will not be created.
+
+### `docs` and `story` system tags removed
+
+Storybook automatically added the tag `'docs'` to any docs entry in the index and `'story'` to any story entry in the index. This behavior was undocumented, and in an effort to reduce the number of tags we've removed them in 8.1. If you depended on these tags, please file an issue on the [Storybook monorepo](https://github.com/storybookjs/storybook) and let us know!
+
 ### Subtitle block and `parameters.componentSubtitle`
 
 The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
 
 `parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
 
-##### Title block
+### Title block `of` prop
 
 The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
 
@@ -3859,7 +3899,7 @@ export default {
 We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
 
 - [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
-- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
+- [Migration notes](https://github.com/storybookjs/storybook/blob/next/code/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
 
 #### Deprecated scoped blocks imports
 

code/addons/docs/src/preview.ts

@@ -22,7 +22,9 @@ export const parameters: any = {
       filter: (story: PreparedStory) => {
         const tags = story.tags || [];
         return (
-          tags.filter((tag) => excludeTags[tag]).length === 0 && !story.parameters.docs?.disable
+          tags.includes('autodocs') &&
+          tags.filter((tag) => excludeTags[tag]).length === 0 &&
+          !story.parameters.docs?.disable
         );
       },
     },

code/addons/docs/template/stories/docs2/resolved-react.stories.ts

@@ -44,6 +44,8 @@ export default {
     docs: {
       name: 'ResolvedReact',
     },
+    // the version string changes with every release of React/Next.js/Preact, not worth snapshotting
+    chromatic: { disable: true },
   },
 };
 

code/addons/gfm/src/index.ts

@@ -12,7 +12,7 @@ export const mdxLoaderOptions = async (config: any) => {
 deprecate(dedent`
   The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version.
   It's recommended you read this document:
-  https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
+  https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
 
   Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
 `);

code/addons/links/package.json

@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.6",
+    "@storybook/csf": "^0.1.7",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
@@ -82,7 +82,7 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {

code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx

@@ -1,9 +1,7 @@
 import { keyframes, styled } from '@storybook/theming';
 import { Modal } from '@storybook/components';
 
-export const ModalWrapper = styled(Modal)`
-  background: white;
-`;
+export const ModalWrapper = styled(Modal)``;
 
 export const ModalContent = styled.div`
   display: flex;
@@ -21,10 +19,13 @@ export const Main = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: white;
   font-family: ${({ theme }) => theme.typography.fonts.base};
 `;
 
 export const Header = styled.div`
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
@@ -64,20 +65,20 @@ export const Content = styled.div`
   }
 `;
 
-export const SpanHighlight = styled.span`
-  display: inline-flex;
-  border-radius: 3px;
-  padding: 0 5px;
-  margin-bottom: -2px;
-  opacity: 0.8;
-  font-family: ${({ theme }) => theme.typography.fonts.mono};
-  font-size: 11px;
-  border: 1px solid #ecf4f9;
-  color: ${({ theme }) => theme.color.darkest};
-  background-color: #f7fafc;
-  box-sizing: border-box;
-  line-height: 17px;
-`;
+export const SpanHighlight = styled.span(({ theme }) => ({
+  display: 'inline-flex',
+  borderRadius: 3,
+  padding: '0 5px',
+  marginBottom: -2,
+  opacity: 0.8,
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: 11,
+  border: theme.base === 'dark' ? theme.color.darkest : theme.color.lightest,
+  color: theme.base === 'dark' ? theme.color.lightest : theme.color.darkest,
+  backgroundColor: theme.base === 'dark' ? 'black' : theme.color.light,
+  boxSizing: 'border-box',
+  lineHeight: '17px',
+}));
 
 export const Image = styled.img`
   max-width: 100%;
@@ -90,8 +91,10 @@ export const Background = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: 0;
   overflow: hidden;
+  z-index: 0;
+  pointer-events: none;
 `;
 
 export const circle1Anim = keyframes`

code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx

@@ -124,6 +124,12 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
           </Button>
         )}
         <Main>
+          <Background>
+            <Circle1 />
+            <Circle2 />
+            <Circle3 />
+          </Background>
+
           <Header>
             <Modal.Title asChild>
               <ModalTitle>
@@ -280,11 +286,6 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                 ) : null)}
             </Content>
           </Modal.Description>
-          <Background>
-            <Circle1 />
-            <Circle2 />
-            <Circle3 />
-          </Background>
         </Main>
       </ModalContent>
     </ModalWrapper>

code/builders/builder-manager/package.json

@@ -51,7 +51,7 @@
     "@types/ejs": "^3.1.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "browser-assert": "^1.2.1",
-    "ejs": "^3.1.8",
+    "ejs": "^3.1.10",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0",
     "esbuild-plugin-alias": "^0.2.1",
     "express": "^4.17.3",

code/e2e-tests/addon-docs.spec.ts

@@ -200,6 +200,12 @@ test.describe('addon-docs', () => {
       expectedReactVersionRange = /^17/;
     } else if (templateName.includes('react16')) {
       expectedReactVersionRange = /^16/;
+    } else if (
+      templateName.includes('nextjs/prerelease') ||
+      templateName.includes('react-vite/prerelease') ||
+      templateName.includes('react-webpack/prerelease')
+    ) {
+      expectedReactVersionRange = /^19/;
     }
 
     // Arrange - Get the actual versions

code/e2e-tests/module-mocking.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+import process from 'process';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+
+test.describe('module-mocking', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('should assert story lifecycle order', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    await sbPage.navigateToStory('lib/test/before-each', 'before-each-order');
+
+    await sbPage.viewAddonPanel('Actions');
+    const logItem = await page.locator('#storybook-panel-root #panel-tab-content');
+    await expect(logItem).toBeVisible();
+
+    const expectedTexts = [
+      '1 - [from loaders]',
+      '2 - [from meta beforeEach]',
+      '3 - [from story beforeEach]',
+      '4 - [from decorator]',
+      '5 - [from onClick]',
+    ];
+
+    // Assert that each LI text content contains the expected text in order
+    for (let i = 0; i < expectedTexts.length; i++) {
+      const nthText = await logItem.locator(`li >> nth=${i}`).innerText();
+      expect(nthText).toMatch(expectedTexts[i]);
+    }
+  });
+
+  test('should assert that utils import is mocked', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    await sbPage.navigateToStory('lib/test/module-mocking', 'basic');
+
+    await sbPage.viewAddonPanel('Actions');
+    const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
+      hasText: 'foo: []',
+    });
+    await expect(logItem).toBeVisible();
+  });
+});