[heft] update storybook to be compatible with v9

Also adds support for serve mode detection when using the heft-rspack-plugin

Author: Taylor

build-tests-samples/heft-storybook-react-tutorial-storykit/package.json

@@ -12,27 +12,24 @@
   },
   "devDependencies": {
     "@babel/core": "~7.20.0",
-    "@storybook/addon-actions": "~6.4.18",
-    "@storybook/addon-essentials": "~6.4.18",
-    "@storybook/addon-links": "~6.4.18",
-    "@storybook/cli": "~6.4.18",
-    "@storybook/components": "~6.4.18",
-    "@storybook/core-events": "~6.4.18",
-    "@storybook/react": "~6.4.18",
-    "@storybook/theming": "~6.4.18",
+    "@storybook/cli": "~9.1.6",
+    "@storybook/react": "~9.1.6",
+    "@storybook/react-webpack5": "~9.1.6",
     "@types/heft-jest": "1.0.1",
     "@types/node": "20.17.19",
-    "@types/react-dom": "17.0.25",
-    "@types/react": "17.0.74",
+    "@types/react-dom": "~19.2.3",
+    "@types/react": "~19.2.7",
     "@types/webpack-env": "1.18.8",
     "babel-loader": "~8.2.3",
     "css-loader": "~5.2.7",
     "jest": "~29.3.1",
-    "react-dom": "~17.0.2",
-    "react": "~17.0.2",
+    "react-dom": "~19.2.1",
+    "react": "~19.2.1",
     "style-loader": "~2.0.0",
     "terser-webpack-plugin": "~3.0.8",
     "typescript": "~5.8.2",
-    "webpack": "~4.47.0"
+    "webpack": "~5.98.0",
+    "storybook": "~9.1.6",
+    "@testing-library/dom": "~7.21.4"
   }
 }

build-tests-samples/heft-storybook-react-tutorial/.storybook/main.js

@@ -1,4 +1,7 @@
+const path = require('path');
+
 module.exports = {
   stories: ['../lib/**/*.stories.js'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
+  // naively referencing the name of the package causes storybook to fail to resolve it
+  framework: path.resolve(require.resolve('@storybook/react-webpack5/preset'), '..')
 };

build-tests-samples/heft-storybook-react-tutorial/config/heft.json

@@ -33,8 +33,8 @@
             "pluginPackage": "@rushstack/heft-storybook-plugin",
             "options": {
               "storykitPackageName": "heft-storybook-react-tutorial-storykit",
-              "cliPackageName": "@storybook/react",
-              "cliCallingConvention": "storybook6",
+              "cliPackageName": "storybook",
+              "cliCallingConvention": "storybook9",
               "staticBuildOutputFolder": "dist-storybook"
             }
           }

build-tests-samples/heft-storybook-react-tutorial/package.json

@@ -12,8 +12,8 @@
     "_phase:test": "heft run --only test -- --clean"
   },
   "dependencies": {
-    "react-dom": "~17.0.2",
-    "react": "~17.0.2",
+    "react-dom": "~19.2.1",
+    "react": "~19.2.1",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
@@ -23,13 +23,14 @@
     "@rushstack/heft-lint-plugin": "workspace:*",
     "@rushstack/heft-storybook-plugin": "workspace:*",
     "@rushstack/heft-typescript-plugin": "workspace:*",
-    "@rushstack/heft-webpack4-plugin": "workspace:*",
-    "@rushstack/webpack4-module-minifier-plugin": "workspace:*",
-    "@storybook/react": "~6.4.18",
+    "@rushstack/heft-webpack5-plugin": "workspace:*",
+    "@rushstack/webpack5-module-minifier-plugin": "workspace:*",
+    "@storybook/react-webpack5": "~9.1.6",
+    "@storybook/react": "~9.1.6",
     "@types/heft-jest": "1.0.1",
     "@types/node": "20.17.19",
-    "@types/react": "17.0.74",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/webpack-env": "1.18.8",
     "css-loader": "~5.2.7",
     "eslint": "~9.37.0",
@@ -39,6 +40,8 @@
     "source-map-loader": "~1.1.3",
     "style-loader": "~2.0.0",
     "typescript": "~5.8.2",
-    "webpack": "~4.47.0"
+    "webpack": "~5.98.0",
+    "storybook": "~9.1.6",
+    "@testing-library/dom": "~7.21.4"
   }
 }

build-tests-samples/heft-storybook-react-tutorial/src/ToggleSwitch.stories.tsx

@@ -1,8 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 // See LICENSE in the project root for license information.
 
-import * as React from 'react';
-import type { ComponentStory, ComponentMeta } from 'heft-storybook-react-tutorial-storykit';
+import type { Meta, StoryObj } from 'heft-storybook-react-tutorial-storykit';
 
 import { ToggleSwitch } from './ToggleSwitch';
 
@@ -13,14 +12,15 @@ export default {
     leftColor: { control: 'color' },
     rightColor: { control: 'color' }
   }
-} as ComponentMeta<typeof ToggleSwitch>;
+} as Meta<typeof ToggleSwitch>;
 
-const Template: ComponentStory<typeof ToggleSwitch> = (args) => <ToggleSwitch {...args} />;
-
-// eslint-disable-next-line
-export const Primary: any = Template.bind({});
-Primary.args = {};
+export const Primary: StoryObj<typeof ToggleSwitch> = {
+  args: {
+    leftColor: '#880000',
+    rightColor: '#008000'
+  }
+};
 
-// eslint-disable-next-line
-export const Secondary: any = Template.bind({});
-Secondary.args = {};
+export const Secondary: StoryObj<typeof ToggleSwitch> = {
+  args: {}
+};

build-tests-samples/heft-storybook-react-tutorial/src/index.tsx

@@ -2,11 +2,11 @@
 // See LICENSE in the project root for license information.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { ExampleApp } from './ExampleApp';
 
 import './index.css';
 
 const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
-ReactDOM.render(<ExampleApp />, rootDiv);
+createRoot(rootDiv).render(<ExampleApp />);

build-tests-samples/heft-storybook-react-tutorial/tsconfig.json

@@ -23,8 +23,9 @@
 
     "module": "esnext",
     "moduleResolution": "node",
-    "target": "es5",
-    "lib": ["es5", "scripthost", "es2015.collection", "es2015.promise", "es2015.iterable", "dom"]
+    "target": "es2020",
+    "lib": ["es2020", "scripthost", "dom"],
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules", "lib"]

common/config/rush/browser-approved-packages.json

@@ -50,6 +50,14 @@
       "name": "@rushstack/rush-vscode-command-webview",
       "allowedCategories": [ "vscode-extensions" ]
     },
+    {
+      "name": "@storybook/react-webpack5",
+      "allowedCategories": [ "libraries", "tests" ]
+    },
+    {
+      "name": "@testing-library/dom",
+      "allowedCategories": [ "tests" ]
+    },
     {
       "name": "@ungap/structured-clone",
       "allowedCategories": [ "libraries" ]
@@ -98,6 +106,10 @@
       "name": "scheduler",
       "allowedCategories": [ "vscode-extensions" ]
     },
+    {
+      "name": "storybook",
+      "allowedCategories": [ "tests" ]
+    },
     {
       "name": "tslib",
       "allowedCategories": [ "libraries", "tests", "vscode-extensions" ]

common/config/rush/nonbrowser-approved-packages.json

@@ -208,7 +208,7 @@
     },
     {
       "name": "@rushstack/heft-rspack-plugin",
-      "allowedCategories": [ "tests" ]
+      "allowedCategories": [ "libraries", "tests" ]
     },
     {
       "name": "@rushstack/heft-sass-load-themed-styles-plugin",

common/config/subspaces/default/common-versions.json

@@ -147,6 +147,10 @@
     "@rushstack/set-webpack-public-path-plugin": [
       // This is used by the webpack 4 localization plugin tests
       "^4.1.16"
-    ]
+    ],
+    "@types/react": ["~19.2.7"],
+    "@types/react-dom": ["~19.2.3"],
+    "react": ["~19.2.1"],
+    "react-dom": ["~19.2.1"]
   }
 }