From ada6434ebad152ec0036fc98443ee2e5d43ba303 Mon Sep 17 00:00:00 2001
From: Taylor <ubermous@users.noreply.github.com>
Date: Mon, 14 Oct 2024 10:51:05 +1300
Subject: [PATCH 1/5] feat: storybook v8 support

Also adds new parameter to use the new test build mode in Storybook v8
---
 ...-plugin-storybook-v8_2024-10-13-21-52.json | 10 +++++++
 .../heft-storybook-plugin/heft-plugin.json    |  5 ++++
 .../src/StorybookPlugin.ts                    | 27 ++++++++++++++++++-
 .../src/schemas/storybook.schema.json         |  2 +-
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 common/changes/@rushstack/heft-storybook-plugin/heft-storybook-plugin-storybook-v8_2024-10-13-21-52.json

diff --git a/common/changes/@rushstack/heft-storybook-plugin/heft-storybook-plugin-storybook-v8_2024-10-13-21-52.json b/common/changes/@rushstack/heft-storybook-plugin/heft-storybook-plugin-storybook-v8_2024-10-13-21-52.json
new file mode 100644
index 00000000000..b5bbef7de0e
--- /dev/null
+++ b/common/changes/@rushstack/heft-storybook-plugin/heft-storybook-plugin-storybook-v8_2024-10-13-21-52.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@rushstack/heft-storybook-plugin",
+      "comment": "Add support for Storybook v8",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@rushstack/heft-storybook-plugin"
+}
\ No newline at end of file
diff --git a/heft-plugins/heft-storybook-plugin/heft-plugin.json b/heft-plugins/heft-storybook-plugin/heft-plugin.json
index 7421e93abe5..2b552d232db 100644
--- a/heft-plugins/heft-storybook-plugin/heft-plugin.json
+++ b/heft-plugins/heft-storybook-plugin/heft-plugin.json
@@ -13,6 +13,11 @@
           "longName": "--storybook",
           "description": "(EXPERIMENTAL) Used by the \"@rushstack/heft-storybook-plugin\" package to launch Storybook.",
           "parameterKind": "flag"
+        },
+        {
+          "longName": "--storybook-test",
+          "description": "Executes a stripped down build-storybook for testing purposes.",
+          "parameterKind": "flag"
         }
       ]
     }
diff --git a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
index 9a50bd122e5..de34b00cafe 100644
--- a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
+++ b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
@@ -57,7 +57,8 @@ enum StorybookBuildMode {
  */
 enum StorybookCliVersion {
   STORYBOOK7 = 'storybook7',
-  STORYBOOK6 = 'storybook6'
+  STORYBOOK6 = 'storybook6',
+  STORYBOOK8 = 'storybook8'
 }
 
 /**
@@ -179,6 +180,13 @@ const DEFAULT_STORYBOOK_CLI_CONFIG: Record<StorybookCliVersion, IStorybookCliCal
       watch: ['sb', 'dev'],
       build: ['sb', 'build']
     }
+  },
+  [StorybookCliVersion.STORYBOOK8]: {
+    packageName: 'storybook',
+    command: {
+      watch: ['sb', 'dev'],
+      build: ['sb', 'build']
+    }
   }
 };
 
@@ -186,6 +194,7 @@ const DEFAULT_STORYBOOK_CLI_CONFIG: Record<StorybookCliVersion, IStorybookCliCal
 export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPluginOptions> {
   private _logger!: IScopedLogger;
   private _isServeMode: boolean = false;
+  private _isTestMode: boolean = false;
 
   /**
    * Generate typings for Sass files before TypeScript compilation.
@@ -198,6 +207,8 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     this._logger = taskSession.logger;
     const storybookParameter: CommandLineFlagParameter =
       taskSession.parameters.getFlagParameter('--storybook');
+    const storybookTestParameter: CommandLineFlagParameter =
+      taskSession.parameters.getFlagParameter('--storybook-test');
 
     const parseResult: IParsedPackageNameOrError = PackageName.tryParse(options.storykitPackageName);
     if (parseResult.error) {
@@ -208,6 +219,10 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
       );
     }
 
+    if (storybookTestParameter.value) {
+      this._isTestMode = true;
+    }
+
     // Only tap if the --storybook flag is present.
     if (storybookParameter.value) {
       const configureWebpackTap: () => Promise<false> = async () => {
@@ -267,6 +282,13 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
       ? StorybookBuildMode.WATCH
       : StorybookBuildMode.BUILD;
 
+    if (buildMode === StorybookBuildMode.WATCH && this._isTestMode) {
+      throw new Error('The --storybook-test flag is not supported in watch mode');
+    }
+    if (this._isTestMode && (storybookCliVersion === StorybookCliVersion.STORYBOOK6 || storybookCliVersion === StorybookCliVersion.STORYBOOK7)) {
+      throw new Error('The --storybook-test flag is not supported in storybook6 and storybook7');
+    }
+
     this._logger.terminal.writeVerboseLine(`Probing for "${storykitPackageName}"`);
     // Example: "/path/to/my-project/node_modules/my-storykit"
     let storykitFolderPath: string;
@@ -408,6 +430,9 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     if (!verbose) {
       storybookArgs.push('--quiet');
     }
+    if (this._isTestMode) {
+      storybookArgs.push('--test');
+    }
 
     if (this._isServeMode) {
       // Instantiate storybook runner synchronously for incremental builds
diff --git a/heft-plugins/heft-storybook-plugin/src/schemas/storybook.schema.json b/heft-plugins/heft-storybook-plugin/src/schemas/storybook.schema.json
index 80224149c95..b0eb7ebf506 100644
--- a/heft-plugins/heft-storybook-plugin/src/schemas/storybook.schema.json
+++ b/heft-plugins/heft-storybook-plugin/src/schemas/storybook.schema.json
@@ -15,7 +15,7 @@
     "cliCallingConvention": {
       "title": "Specifies the calling convention of the storybook CLI based on the storybook version.",
       "description": "Specify how the Storybook CLI should be invoked. Possible values: \"storybook6\" or \"storybook7\", defaults to \"storybook7\".",
-      "enum": ["storybook6", "storybook7"]
+      "enum": ["storybook6", "storybook7", "storybook8"]
     },
     "cliPackageName": {
       "title": "The NPM package that Heft should use to launch the Storybook toolchain.",

From 28406f407fef9ff207fc866e188704001f61ab6a Mon Sep 17 00:00:00 2001
From: Taylor <ubermous@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:48:58 +1300
Subject: [PATCH 2/5] code review feedback

---
 .../src/StorybookPlugin.ts                    | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
index de34b00cafe..524cb617c1d 100644
--- a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
+++ b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
@@ -56,8 +56,8 @@ enum StorybookBuildMode {
  * Storybook CLI versions
  */
 enum StorybookCliVersion {
-  STORYBOOK7 = 'storybook7',
   STORYBOOK6 = 'storybook6',
+  STORYBOOK7 = 'storybook7',
   STORYBOOK8 = 'storybook8'
 }
 
@@ -195,6 +195,7 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
   private _logger!: IScopedLogger;
   private _isServeMode: boolean = false;
   private _isTestMode: boolean = false;
+  private _storybookTestFlagName: '--storybook-test' = '--storybook-test';
 
   /**
    * Generate typings for Sass files before TypeScript compilation.
@@ -207,8 +208,9 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     this._logger = taskSession.logger;
     const storybookParameter: CommandLineFlagParameter =
       taskSession.parameters.getFlagParameter('--storybook');
-    const storybookTestParameter: CommandLineFlagParameter =
-      taskSession.parameters.getFlagParameter('--storybook-test');
+    const storybookTestParameter: CommandLineFlagParameter = taskSession.parameters.getFlagParameter(
+      this._storybookTestFlagName
+    );
 
     const parseResult: IParsedPackageNameOrError = PackageName.tryParse(options.storykitPackageName);
     if (parseResult.error) {
@@ -283,10 +285,16 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
       : StorybookBuildMode.BUILD;
 
     if (buildMode === StorybookBuildMode.WATCH && this._isTestMode) {
-      throw new Error('The --storybook-test flag is not supported in watch mode');
+      throw new Error(`The ${this._storybookTestFlagName} flag is not supported in watch mode`);
     }
-    if (this._isTestMode && (storybookCliVersion === StorybookCliVersion.STORYBOOK6 || storybookCliVersion === StorybookCliVersion.STORYBOOK7)) {
-      throw new Error('The --storybook-test flag is not supported in storybook6 and storybook7');
+    if (
+      this._isTestMode &&
+      (storybookCliVersion === StorybookCliVersion.STORYBOOK6 ||
+        storybookCliVersion === StorybookCliVersion.STORYBOOK7)
+    ) {
+      throw new Error(
+        `The ${this._storybookTestFlagName} flag is only supported in Storybook version 8 and above.`
+      );
     }
 
     this._logger.terminal.writeVerboseLine(`Probing for "${storykitPackageName}"`);

From 90bebd3c68ee50d6ed0cef530f66826da189a8d0 Mon Sep 17 00:00:00 2001
From: Ian Clanton-Thuon <iclanton@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:54:26 -0700
Subject: [PATCH 3/5] fixup! code review feedback

---
 .../heft-storybook-plugin/src/StorybookPlugin.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
index 524cb617c1d..0befdc1e48e 100644
--- a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
+++ b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
@@ -190,12 +190,13 @@ const DEFAULT_STORYBOOK_CLI_CONFIG: Record<StorybookCliVersion, IStorybookCliCal
   }
 };
 
+const STORYBOOK_TEST_FLAG_NAME: '--storybook-test' = '--storybook-test';
+
 /** @public */
 export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPluginOptions> {
   private _logger!: IScopedLogger;
   private _isServeMode: boolean = false;
   private _isTestMode: boolean = false;
-  private _storybookTestFlagName: '--storybook-test' = '--storybook-test';
 
   /**
    * Generate typings for Sass files before TypeScript compilation.
@@ -208,9 +209,8 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     this._logger = taskSession.logger;
     const storybookParameter: CommandLineFlagParameter =
       taskSession.parameters.getFlagParameter('--storybook');
-    const storybookTestParameter: CommandLineFlagParameter = taskSession.parameters.getFlagParameter(
-      this._storybookTestFlagName
-    );
+    const storybookTestParameter: CommandLineFlagParameter =
+      taskSession.parameters.getFlagParameter(STORYBOOK_TEST_FLAG_NAME);
 
     const parseResult: IParsedPackageNameOrError = PackageName.tryParse(options.storykitPackageName);
     if (parseResult.error) {
@@ -285,7 +285,7 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
       : StorybookBuildMode.BUILD;
 
     if (buildMode === StorybookBuildMode.WATCH && this._isTestMode) {
-      throw new Error(`The ${this._storybookTestFlagName} flag is not supported in watch mode`);
+      throw new Error(`The ${STORYBOOK_TEST_FLAG_NAME} flag is not supported in watch mode`);
     }
     if (
       this._isTestMode &&
@@ -293,7 +293,7 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
         storybookCliVersion === StorybookCliVersion.STORYBOOK7)
     ) {
       throw new Error(
-        `The ${this._storybookTestFlagName} flag is only supported in Storybook version 8 and above.`
+        `The ${STORYBOOK_TEST_FLAG_NAME} flag is only supported in Storybook version 8 and above.`
       );
     }
 

From d6dfabeed5abec4844ffa81c29070457ce92389c Mon Sep 17 00:00:00 2001
From: Taylor <ubermous@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:18:41 +1300
Subject: [PATCH 4/5] fix storybook v8 printing addon compatibility error

---
 .../heft-storybook-plugin/src/StorybookPlugin.ts      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
index 0befdc1e48e..438050e2001 100644
--- a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
+++ b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
@@ -523,6 +523,17 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     const originalArgv: string[] = process.argv;
     const node: string = originalArgv[0];
     process.argv = [node, command, ...args];
+    // npm_config_user_agent is used by Storybook to determine the package manager
+    // in a Rush monorepo it can't determine it automatically so it raises a benign error
+    // Storybook failed to check addon compatibility Error: Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2
+    // hardcode it to NPM to suppress the error
+    //
+    // This only happens for dev server mode, not for build mode, so does not need to be in _invokeAsSubprocessAsync
+    //
+    // Storing the original env and restoring it like happens with argv does not seem to work
+    // At the time when storybook checks env.npm_config_user_agent it has been reset to undefined
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    process.env.npm_config_user_agent = 'npm';
 
     // invoke command synchronously
     require(command);

From e8bd19403390f1e26d7f0c3e8d2b6eae5b3a9e86 Mon Sep 17 00:00:00 2001
From: Taylor <ubermous@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:42:32 +1300
Subject: [PATCH 5/5] only supply npm_config_user_agent env var to Storybook 8

---
 .../src/StorybookPlugin.ts                    | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
index 438050e2001..9d396767630 100644
--- a/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
+++ b/heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts
@@ -276,8 +276,7 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     options: IStorybookPluginOptions
   ): Promise<IRunStorybookOptions> {
     const { storykitPackageName, staticBuildOutputFolder } = options;
-    const storybookCliVersion: `${StorybookCliVersion}` =
-      options.cliCallingConvention ?? DEFAULT_STORYBOOK_VERSION;
+    const storybookCliVersion: `${StorybookCliVersion}` = this._getStorybookVersion(options);
     const storyBookCliConfig: IStorybookCliCallingConfig = DEFAULT_STORYBOOK_CLI_CONFIG[storybookCliVersion];
     const cliPackageName: string = options.cliPackageName ?? storyBookCliConfig.packageName;
     const buildMode: StorybookBuildMode = taskSession.parameters.watch
@@ -407,6 +406,7 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     let { workingDirectory, outputFolder } = runStorybookOptions;
     this._logger.terminal.writeLine('Running Storybook compilation');
     this._logger.terminal.writeVerboseLine(`Loading Storybook module "${resolvedModulePath}"`);
+    const storybookCliVersion: `${StorybookCliVersion}` = this._getStorybookVersion(options);
 
     /**
      * Support \'cwdPackageName\' option
@@ -445,7 +445,11 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     if (this._isServeMode) {
       // Instantiate storybook runner synchronously for incremental builds
       // this ensure that the process is not killed when heft watcher detects file changes
-      this._invokeSync(resolvedModulePath, storybookArgs);
+      this._invokeSync(
+        resolvedModulePath,
+        storybookArgs,
+        storybookCliVersion === StorybookCliVersion.STORYBOOK8
+      );
     } else {
       await this._invokeAsSubprocessAsync(resolvedModulePath, storybookArgs, workingDirectory);
     }
@@ -516,7 +520,7 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
    * @param args - storybook args
    * @param cwd - working directory
    */
-  private _invokeSync(command: string, args: string[]): void {
+  private _invokeSync(command: string, args: string[], patchNpmConfigUserAgent: boolean): void {
     this._logger.terminal.writeLine('Launching ' + command);
 
     // simulate storybook cli command
@@ -533,7 +537,9 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
     // Storing the original env and restoring it like happens with argv does not seem to work
     // At the time when storybook checks env.npm_config_user_agent it has been reset to undefined
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    process.env.npm_config_user_agent = 'npm';
+    if (patchNpmConfigUserAgent) {
+      process.env.npm_config_user_agent = 'npm';
+    }
 
     // invoke command synchronously
     require(command);
@@ -543,4 +549,8 @@ export default class StorybookPlugin implements IHeftTaskPlugin<IStorybookPlugin
 
     this._logger.terminal.writeVerboseLine('Completed synchronous portion of launching startupModulePath');
   }
+
+  private _getStorybookVersion(options: IStorybookPluginOptions): `${StorybookCliVersion}` {
+    return options.cliCallingConvention ?? DEFAULT_STORYBOOK_VERSION;
+  }
 }