Merge branch 'next' into docs_vite_builder_updates

.circleci/config.yml

@@ -84,7 +84,7 @@ commands:
 jobs:
   pretty-docs:
     executor:
-      class: small
+      class: medium
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -92,7 +92,7 @@ jobs:
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+            - prettydocs-yarn-2-cache-v7--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
       - run:
           name: Install
           command: |
@@ -100,7 +100,7 @@ jobs:
             yarn install
       - save_cache:
           name: Save Yarn cache
-          key: prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+          key: prettydocs-yarn-2-cache-v7--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
           paths:
             - ~/.yarn/berry/cache
       - run:
@@ -499,11 +499,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 12
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 12
+          parallelism: 14
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -523,7 +523,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 3
+          parallelism: 5
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -555,11 +555,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 23
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 23
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -579,7 +579,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 3
+          parallelism: 5
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -609,14 +609,14 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 38
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 38
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -640,3 +640,4 @@ workflows:
       #     parallelism: 4
       #     requires:
       #       - create-sandboxes
+

.yarnrc.yml

@@ -1,11 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 installStatePath: ./.yarn/root-install-state.gz
 
 nodeLinker: node-modules
 
 npmPublishAccess: public
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.0.cjs

code/.yarnrc.yml

@@ -25,5 +25,5 @@ plugins:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-3.5.1.cjs
+yarnPath: ../.yarn/releases/yarn-4.0.0.cjs
 installStatePath: '../.yarn/code-install-state.gz'

code/addons/docs/README.md

@@ -146,7 +146,6 @@ export default {
         jsxOptions: {},
         csfPluginOptions: null,
         mdxPluginOptions: {},
-        transcludeMarkdown: true,
       },
     },
   ],
@@ -157,16 +156,9 @@ export default {
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 
-The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
 
-```mdx
-import { Meta } from '@storybook/addon-docs';
-import Changelog from '../CHANGELOG.md';
+> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
 
-<Meta title="Changelog" />
-
-<Changelog />
-```
 
 ## TypeScript configuration
 

code/addons/interactions/src/preview.ts

@@ -19,7 +19,6 @@ const fn = JestMock.fn.bind(JestMock);
 // Aliasing `fn` to `action` here, so we get a more descriptive label in the UI.
 const { action } = instrument({ action: fn }, { retain: true });
 const channel = addons.getChannel();
-const seen = new Set<any>();
 const spies: any[] = [];
 
 channel.on(FORCE_REMOUNT, () => spies.forEach((mock) => mock?.mockClear?.()));
@@ -28,8 +27,6 @@ channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => {
 });
 
 const addSpies = (id: string, val: any, key?: string): any => {
-  if (seen.has(val)) return val;
-  seen.add(val);
   try {
     if (Object.prototype.toString.call(val) === '[object Object]') {
       // We have to mutate the original object for this to survive HMR.
@@ -40,7 +37,8 @@ const addSpies = (id: string, val: any, key?: string): any => {
     if (Array.isArray(val)) {
       return val.map((item, index) => addSpies(id, item, `${key}[${index}]`));
     }
-    if (typeof val === 'function' && val.isAction) {
+    // eslint-disable-next-line no-underscore-dangle
+    if (typeof val === 'function' && val.isAction && !val._isMockFunction) {
       Object.defineProperty(val, 'name', { value: key, writable: false });
       Object.defineProperty(val, '__storyId__', { value: id, writable: false });
       const spy = action(val);

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -33,6 +33,7 @@ addToGlobalContext('cliVersion', versions.storybook);
 export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
   tsConfig?: string;
+  test: boolean;
   docs: boolean;
   compodoc: boolean;
   compodocArgs: string[];

code/frameworks/angular/src/builders/build-storybook/schema.json

@@ -49,6 +49,11 @@
       "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
       "default": false
     },
+    "test": {
+      "type": "boolean",
+      "description": "Build the static version of the sandbox optimized for testing purposes",
+      "default": false
+    },
     "compodoc": {
       "type": "boolean",
       "description": "Execute compodoc before.",

code/lib/cli/src/generate.ts

@@ -259,6 +259,7 @@ command('build')
   )
   .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
   .option('--docs', 'Build a documentation-only site using addon-docs')
+  .option('--test', 'Build stories optimized for testing purposes.')
   .action(async (options) => {
     process.env.NODE_ENV = process.env.NODE_ENV || 'production';
     logger.setLevel(program.loglevel);

code/lib/cli/src/sandbox-templates.ts

@@ -67,6 +67,7 @@ export type Template = {
   modifications?: {
     skipTemplateStories?: boolean;
     mainConfig?: Partial<StorybookConfig>;
+    testBuild?: boolean;
     disableDocs?: boolean;
   };
   /**
@@ -559,7 +560,27 @@ const benchTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
   },
-} satisfies Record<`bench/${string}`, Template & { isInternal: true }>;
+  'bench/react-vite-default-ts-test-build': {
+    ...baseTemplates['react-vite/default-ts'],
+    name: 'Bench (react-vite/default-ts, test-build)',
+    isInternal: true,
+    modifications: {
+      skipTemplateStories: true,
+      testBuild: true,
+    },
+    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
+  },
+  'bench/react-webpack-18-ts-test-build': {
+    ...baseTemplates['react-webpack/18-ts'],
+    name: 'Bench (react-webpack/18-ts, test-build)',
+    isInternal: true,
+    modifications: {
+      skipTemplateStories: true,
+      testBuild: true,
+    },
+    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
+  },
+} satisfies Record<string, Template & { isInternal: true }>;
 
 export const allTemplates: Record<TemplateKey, Template> = {
   ...baseTemplates,
@@ -580,6 +601,8 @@ export const normal: TemplateKey[] = [
   'bench/react-vite-default-ts',
   'bench/react-webpack-18-ts',
   'bench/react-vite-default-ts-nodocs',
+  'bench/react-vite-default-ts-test-build',
+  'bench/react-webpack-18-ts-test-build',
 ];
 export const merged: TemplateKey[] = [
   ...normal,

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

@@ -17,7 +17,7 @@ import type {
   StorybookConfig,
 } from '@storybook/types';
 import { printConfig, readConfig, readCsf } from '@storybook/csf-tools';
-import { join } from 'path';
+import { join, isAbsolute } from 'path';
 import { dedent } from 'ts-dedent';
 import fetch from 'node-fetch';
 import type { Channel } from '@storybook/channels';
@@ -61,15 +61,16 @@ export const favicon = async (
     const lists = await Promise.all(
       statics.map(async (dir) => {
         const results = [];
-        const relativeDir = staticDirsValue
-          ? getDirectoryFromWorkingDir({
-              configDir: options.configDir,
-              workingDir: process.cwd(),
-              directory: dir,
-            })
-          : dir;
+        const normalizedDir =
+          staticDirsValue && !isAbsolute(dir)
+            ? getDirectoryFromWorkingDir({
+                configDir: options.configDir,
+                workingDir: process.cwd(),
+                directory: dir,
+              })
+            : dir;
 
-        const { staticPath, targetEndpoint } = await parseStaticDir(relativeDir);
+        const { staticPath, targetEndpoint } = await parseStaticDir(normalizedDir);
 
         if (targetEndpoint === '/') {
           const url = 'favicon.svg';

code/lib/core-server/src/utils/server-statics.ts

@@ -6,7 +6,7 @@ import chalk from 'chalk';
 import type { Router } from 'express';
 import express from 'express';
 import { pathExists } from 'fs-extra';
-import path, { basename } from 'path';
+import path, { basename, isAbsolute } from 'path';
 import isEqual from 'lodash/isEqual.js';
 
 import { dedent } from 'ts-dedent';
@@ -30,14 +30,15 @@ export async function useStatics(router: Router, options: Options) {
     await Promise.all(
       statics.map(async (dir) => {
         try {
-          const relativeDir = staticDirs
-            ? getDirectoryFromWorkingDir({
-                configDir: options.configDir,
-                workingDir: process.cwd(),
-                directory: dir,
-              })
-            : dir;
-          const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(relativeDir);
+          const normalizedDir =
+            staticDirs && !isAbsolute(dir)
+              ? getDirectoryFromWorkingDir({
+                  configDir: options.configDir,
+                  workingDir: process.cwd(),
+                  directory: dir,
+                })
+              : dir;
+          const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(normalizedDir);
 
           // Don't log for the internal static dir
           if (!targetEndpoint.startsWith('/sb-')) {

code/lib/core-server/src/utils/watch-story-specifiers.ts

@@ -33,7 +33,7 @@ export function watchStorySpecifiers(
   const wp = new Watchpack({
     // poll: true, // Slow!!! Enable only in special cases
     followSymlinks: false,
-    ignored: ['**/.git', 'node_modules'],
+    ignored: ['**/.git', '**/node_modules'],
   });
   wp.watch({
     directories: uniq(specifiers.map((ns) => ns.directory)),

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

@@ -412,6 +412,10 @@ export const init: ModuleFn<SubAPI, SubState> = ({
 
         if (!entry) throw new Error(`Unknown id or title: '${titleOrId}'`);
 
+        store.setState({
+          settings: { ...store.getState().settings, lastTrackedStoryId: entry.id },
+        });
+
         // We want to navigate to the first ancestor entry that is a leaf
         const leafEntry = api.findLeafEntry(hash, entry.id);
         const fullId = leafEntry.refId ? `${leafEntry.refId}_${leafEntry.id}` : leafEntry.id;

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

@@ -899,6 +899,16 @@ describe('stories API', () => {
       api.selectStory('intro');
       expect(navigate).toHaveBeenCalledWith('/docs/intro--docs');
     });
+    it('updates lastTrackedStoryId', () => {
+      const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };
+      const moduleArgs = createMockModuleArgs({ initialState });
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      api.setIndex({ v: 4, entries: navigationEntries });
+      api.selectStory('a--1');
+      expect(store.getState().settings.lastTrackedStoryId).toBe('a--1');
+    });
     describe('deprecated api', () => {
       it('allows navigating to a combination of title + name', () => {
         const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };

code/package.json

@@ -286,7 +286,7 @@
       "built": false
     }
   },
-  "packageManager": "yarn@3.5.1",
+  "packageManager": "yarn@4.0.0",
   "engines": {
     "node": ">=18.0.0"
   },

docs/builders/builder-api.md

@@ -36,7 +36,7 @@ To opt into a builder, the user must add it as a dependency and then edit their
 
 ## Builder API
 
-In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/code/lib/core-common/src/types.ts#L170-L189), exposing the following configuration options and entry points:
+In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/core-common.ts#L183-L203), exposing the following configuration options and entry points:
 
 <!-- prettier-ignore-start -->
 

docs/configure/features-and-behavior.md

@@ -2,7 +2,7 @@
 title: 'Features and behavior'
 ---
 
-To control the layout of Storybook’s UI you can use `addons.setConfig` in your [`.storybook/manager.js`](./overview.md#configure-story-rendering):
+To control the layout of Storybook’s UI you can use `addons.setConfig` in your `.storybook/manager.js`:
 
 <!-- prettier-ignore-start -->
 
@@ -56,4 +56,4 @@ You can use URL parameters to configure some of the available features:
 | **showPanel**       |   `panel`    | `false`, `right`, `bottom` |
 | **selectedPanel**   | `addonPanel` |        Any panel ID        |
 | **showTabs**        |    `tabs`    |           `true`           |
-|       ---           | `instrument` |      `false`, `true`       |
+| ---                 | `instrument` |      `false`, `true`       |

docs/configure/sidebar-and-urls.md

@@ -16,7 +16,7 @@ By default, Storybook will treat your top-level nodes as “roots”. Roots are
 
 ![Storybook sidebar story roots](./sidebar-roots.png)
 
-If you’d prefer to show top-level nodes as folders rather than roots, you can set the `sidebar.showRoots` option to `false` in [`./storybook/manager.js`](./overview.md#configure-story-rendering):
+If you’d prefer to show top-level nodes as folders rather than roots, you can set the `sidebar.showRoots` option to `false` in [`./storybook/manager.js`](./features-and-behavior.md):
 
 <!-- prettier-ignore-start -->
 

docs/configure/theming.md

@@ -26,7 +26,7 @@ Make sure you have installed [`@storybook/manager-api`](https://www.npmjs.com/pa
 
 <!-- prettier-ignore-end -->
 
-As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering):
+As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./features-and-behavior.md):
 
 <!-- prettier-ignore-start -->
 
@@ -44,7 +44,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co
 
 [Storybook Docs](../writing-docs/introduction.md) uses the same theme system as Storybook’s UI but is themed independently from the main UI.
 
-Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./overview.md#configure-story-rendering):
+Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./features-and-behavior.md):
 
 <!-- prettier-ignore-start -->
 

docs/snippets/common/storybook-auto-docs-standalone-page.mdx.mdx

@@ -0,0 +1,63 @@
+```mdx
+{/* src/GettingStarted.mdx */}
+
+# Getting Started
+
+Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
+
+## Table of Contents
+
+- [Design Resources](#design-resources)
+  - [Figma](#figma)
+  - [UI/UX Design Guidelines](#uiux-design-guidelines)
+  - [Design Assets](#design-assets)
+
+- [Development Resources](#development-resources)
+  - [Coding Standards](#coding-standards)
+  - [Version Control](#version-control)
+  - [Development Tools](#development-tools)
+
+---
+
+## Design Resources
+
+### Figma
+
+[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly.
+
+- **Get Access**: If you're not already part of the Figma project, request access from the project lead or manager.
+
+### UI/UX Design Guidelines
+
+Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
+
+- [UI/UX Guidelines Document](https://your-design-guidelines-link.com)
+
+### Design Assets
+
+All the essential design assets like logos, icons, and brand guidelines can be found in the Figma project. Ensure you have access and familiarize yourself with these assets for consistency.
+
+---
+
+## Development Resources
+
+### Coding Standards
+
+Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
+
+- [Coding Standards Document](https://your-coding-standards-link.com)
+
+### Version Control
+
+We use Git for version control. Make sure you have Git installed and are familiar with its basics.
+
+### Development Tools
+
+Your development environment is critical. Here are some tools and resources to help you set up your workspace:
+
+- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
+
+- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies.
+
+---
+```

docs/snippets/common/storybook-custom-docs-markdown.mdx.mdx

@@ -0,0 +1,13 @@
+```mdx
+{/* Changelog.mdx */}
+
+import { Meta, Markdown } from "@storybook/blocks";
+
+import Readme from "../../Changelog.md?raw";
+
+<Meta title="Changelog" />
+
+# Changelog
+
+<Markdown>{Readme}</Markdown>
+```

docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx

@@ -1,21 +0,0 @@
-```js
-// .storybook/main.js|ts
-
-export default {
-  stories: [
-    //👇 Changes the load order of our stories. First loads the Changelog page
-    '../src/Changelog.mdx',
-    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-  ],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        transcludeMarkdown: true, //👈 Set transcludeMarkdown to true
-      },
-    },
-  ],
-};
-```

docs/writing-docs/mdx.md

@@ -161,7 +161,7 @@ While MDX2 supports a variety of runtimes ([React](https://mdxjs.com/packages/re
 
 ## Breaking changes
 
-There are many breaking changes if you move from MDX 1 to version 2. As far as we know, all of these are due to changes in the MDX library itself rather than changes to Storybook’s usage. Nevertheless, as an MDX user, you will probably need to update your MDX files as part of the upgrade. MDX has published their own [Migration guide](https://mdxjs.com/migrating/v2/#update-mdx-files). Here we try to summarize some of the fundamental changes for Storybook users.
+There are many breaking changes if you move from MDX 1 to version 2. As far as we know, all of these are due to changes in the MDX library itself rather than changes to Storybook’s usage. Nevertheless, as an MDX user, you will probably need to update your MDX files as part of the upgrade. MDX has published its own [Migration guide](https://mdxjs.com/migrating/v2/#update-mdx-files). Here, we try to summarize some of the fundamental changes for Storybook users.
 
 ### Custom components apply differently
 
@@ -284,6 +284,24 @@ However, providing the `Meta` Doc Block may not be required for certain use case
 
 Once the custom MDX documentation is loaded, Storybook will infer the title and location using the same heuristic rules to generate [auto-title stories](../configure/sidebar-and-urls.md#csf-30-auto-titles) and render it in the sidebar as a `Docs` entry.
 
+#### Working with standalone documentation pages
+
+Writing standalone documentation pages is a common use case that applies not only on a per-component but also on a per-project basis. For example, you might want to document your project's onboarding process with instructions on using it. To do so, you can create a new MDX file containing your documentation using a similar structure and content:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-auto-docs-standalone-page.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+![MDX guidelines page](./mdx-standalone-page.png)
+
+When Storybook loads the documentation, it will infer the placement of the page in the sidebar navigation menu using the file's physical location and render it as a `Docs` entry.
+
 ### Fully control custom documentation
 
 Documentation can be expensive to maintain and keep up to date when applied to every project component. To help simplify this process, Storybook provides a set of useful UI components (i.e., Doc Blocks) to help cover more advanced cases. If you need additional content, use them to help create your custom documentation.
@@ -312,6 +330,28 @@ If you need to document multiple components in a single documentation page, you
 
 <!-- prettier-ignore-end -->
 
+### Generate documentation from Markdown
+
+If you need to extend your documentation with additional content written in Markdown, you can use the `Markdown` Doc Block to import the available content, and Storybook will render it alongside your existing documentation. For example, if you have a `CHANGELOG.md` file, you can import it and render it in your documentation page as follows:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-custom-docs-markdown.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+
+ℹ️ The `Markdown` Doc Block provides additional configuration options to customize the rendering of your documentation. For more information, refer to the [API documentation](../api/doc-block-markdown.md).
+
+</div>
+
+![Changelog markdown in an MDX story](./mdx-markdown-docs-import.png)
+
 ### Linking to other stories and pages
 
 Another way to improve documentation is by linking to other stories and pages. Suppose you already have a component story with the following unique identifier, `some--id`, and you want to link it to your documentation page. In that case, you can use the `path` query string to redirect to the documentation entry related to the story:
@@ -340,42 +380,6 @@ However, cross-linking documentation isn't restricted to documentation pages. Yo
 💡 By applying this pattern with the Controls addon, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values.
 </div>
 
-<!--
-TODO: Uncomment once support for `transcludeMarkdown` is confirmed
-
-### Creating a Changelog story
-
-One common use case for documentation-only MDX is importing a project's `CHANGELOG.md`, so that users can easily refer to the CHANGELOG via a documentation node in Storybook.
-
-First, ensure that `transcludeMarkdown` is set to `true` in `main.js`:
-
-<!-- prettier-ignore-start - ->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-main-enable-transcludemarkdown.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end - ->
-
-Then, import the markdown and treat the imported file as a component in the MDX file:
-
-```mdx
-import { Meta } from '@storybook/blocks';
-
-import Changelog from '../CHANGELOG.md';
-
-<Meta title="Changelog" />
-
-<Changelog />
-```
-
-
-![Changelog markdown in an MDX story](./changelog-mdx-md-transcludemarkdown-optimized.png)
-
--->
-
 ## Troubleshooting
 
 ### The MDX documentation doesn't render in my environment
@@ -384,7 +388,7 @@ As Storybook relies on MDX 2 to render documentation, some technical limitations
 
 #### Storybook doesn't create documentation for my component stories
 
-If you run into a situation where Storybook is not able to able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`).
+If you run into a situation where Storybook is not able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`).
 
 #### The documentation doesn't render using `stories.mdx`
 

docs/writing-stories/build-pages-with-storybook.md

@@ -287,6 +287,8 @@ Another mocking approach is to use libraries that intercept calls at a lower lev
 
 Like the [import mocking](##mocking-imports) above, once you have a mock, you’ll still want to set the return value of the mock per-story basis. Do this in Storybook with a [decorator](./decorators.md) that reads the story's [parameters](./parameters.md).
 
+<IfRenderer renderer={['react', 'solid']}>
+
 ### Avoiding mocking dependencies
 
 It's possible to avoid mocking the dependencies of connected "container" components entirely by passing them around via props or React context. However, it requires a strict split of the container and presentational component logic. For example, if you have a component responsible for data fetching logic and rendering DOM, it will need to be mocked as previously described.
@@ -394,3 +396,5 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
 />
 
 <!-- prettier-ignore-end -->
+
+</IfRenderer>

docs/writing-tests/test-runner.md

@@ -199,7 +199,7 @@ Listed below are the available hooks and an overview of how to use them.
 
 | Hook         | Description                                                                                        |
 | ------------ | -------------------------------------------------------------------------------------------------- |
-| `prepare`    | Prepares the browser for tests<br/>`async prepare({ page, browserContext, testRunnerConfig }() {}` |
+| `prepare`    | Prepares the browser for tests<br/>`async prepare({ page, browserContext, testRunnerConfig }) {}`  |
 | `setup`      | Executes once before all the tests run<br/>`setup() {}`                                            |
 | `preRender`  | Executes before a story is rendered<br/>`async preRender(page, context) {}`                        |
 | `postRender` | Executes after the story is rendered<br/>`async postRender(page, context) {}`                      |

package.json

@@ -12,5 +12,5 @@
     "test": "cd code; yarn test",
     "upload-bench": "cd scripts; yarn upload-bench"
   },
-  "packageManager": "yarn@3.5.1"
+  "packageManager": "yarn@4.0.0"
 }

scripts/.yarnrc.yml

@@ -23,5 +23,5 @@ plugins:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-3.5.1.cjs
+yarnPath: ../.yarn/releases/yarn-4.0.0.cjs
 installStatePath: '../.yarn/scripts-install-state.gz'

scripts/bench/bench.schema

@@ -18,6 +18,15 @@ buildSbPreviewSize: INTEGER,
 buildStaticSize: INTEGER,
 buildPrebuildSize: INTEGER,
 buildPreviewSize: INTEGER,
+testBuildTime: INTEGER,
+testBuildSize: INTEGER,
+testBuildSbAddonsSize: INTEGER,
+testBuildSbCommonSize: INTEGER,
+testBuildSbManagerSize: INTEGER,
+testBuildSbPreviewSize: INTEGER,
+testBuildStaticSize: INTEGER,
+testBuildPrebuildSize: INTEGER,
+testBuildPreviewSize: INTEGER,
 devPreviewResponsive: INTEGER,
 devManagerResponsive: INTEGER,
 devManagerHeaderVisible: INTEGER,

scripts/bench/types.ts

@@ -38,6 +38,24 @@ export interface BenchResults {
   buildPrebuildSize: number;
   /** Total size of everything else (user's stories & components & CSS & assets etc.) */
   buildPreviewSize: number;
+  /** Full `sb build` time */
+  testBuildTime: number;
+  /** Size of the storybook-static directory in total */
+  testBuildSize: number;
+  /** Size of the storybook-static/sb-addons in total */
+  testBuildSbAddonsSize: number;
+  /** Size of the storybook-static/sb-common-assets */
+  testBuildSbCommonSize: number;
+  /** Size of the storybook-static/sb-manager */
+  testBuildSbManagerSize: number;
+  /** Size of storybook-static/sb-preview */
+  testBuildSbPreviewSize: number;
+  /** Size of the `static` directory if it exists */
+  testBuildStaticSize: number;
+  /** Total size of `sb-x` above */
+  testBuildPrebuildSize: number;
+  /** Total size of everything else (user's stories & components & CSS & assets etc.) */
+  testBuildPreviewSize: number;
   /** Time to wait-on iframe.html */
   devPreviewResponsive: number;
   /** Time to wait-on index.html */

scripts/package.json

@@ -201,7 +201,7 @@
     "verdaccio": "^5.19.1",
     "verdaccio-auth-memory": "^10.2.0"
   },
-  "packageManager": "yarn@3.3.0",
+  "packageManager": "yarn@4.0.0",
   "engines": {
     "node": ">=18.0.0"
   }

scripts/release/publish.ts

@@ -124,7 +124,7 @@ const publishAllPackages = async ({
   dryRun?: boolean;
 }) => {
   console.log(`📦 Publishing all packages...`);
-  const command = `yarn workspaces foreach --parallel --no-private --verbose npm publish --tolerate-republish --tag ${tag}`;
+  const command = `yarn workspaces foreach --all --parallel --no-private --verbose npm publish --tolerate-republish --tag ${tag}`;
   if (verbose) {
     console.log(`📦 Executing: ${command}`);
   }

scripts/tasks/build.ts

@@ -12,10 +12,14 @@ export const build: Task = {
   async ready({ builtSandboxDir }) {
     return pathExists(builtSandboxDir);
   },
-  async run({ sandboxDir }, { dryRun, debug }) {
+  async run({ sandboxDir, template }, { dryRun, debug }) {
     const start = now();
 
-    await exec(`yarn build-storybook --quiet`, { cwd: sandboxDir }, { dryRun, debug });
+    await exec(
+      `yarn build-storybook --quiet ${template.modifications?.testBuild ? '--test' : ''}`,
+      { cwd: sandboxDir },
+      { dryRun, debug }
+    );
 
     const buildTime = now() - start;
     const dir = join(sandboxDir, 'storybook-static');

scripts/upload-bench.ts

@@ -34,6 +34,15 @@ const defaults: Record<keyof BenchResults, null> = {
   buildStaticSize: null,
   buildPrebuildSize: null,
   buildPreviewSize: null,
+  testBuildTime: null,
+  testBuildSize: null,
+  testBuildSbAddonsSize: null,
+  testBuildSbCommonSize: null,
+  testBuildSbManagerSize: null,
+  testBuildSbPreviewSize: null,
+  testBuildStaticSize: null,
+  testBuildPrebuildSize: null,
+  testBuildPreviewSize: null,
   devPreviewResponsive: null,
   devManagerResponsive: null,
   devManagerHeaderVisible: null,

yarn.lock

@@ -2,7 +2,8 @@
 # Manual changes might be lost - proceed with caution!
 
 __metadata:
-  version: 6
+  version: 8
+  cacheKey: 10
 
 "@storybook/root@workspace:.":
   version: 0.0.0-use.local