Merge branch 'next' into patch

.circleci/config.yml

@@ -84,23 +84,23 @@ commands:
 jobs:
   pretty-docs:
     executor:
-      class: small
+      class: medium
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - 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: |
             cd scripts
             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 { staticPath, targetEndpoint } = await parseStaticDir(relativeDir);
+        const normalizedDir =
+          staticDirsValue && !isAbsolute(dir)
+            ? getDirectoryFromWorkingDir({
+                configDir: options.configDir,
+                workingDir: process.cwd(),
+                directory: dir,
+              })
+            : dir;
+
+        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/package.json

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