feat(nova-react-test-utils): support Storybook 8

change/@nova-examples-f9f9d2cb-a207-419b-970c-5300e7d32b99.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "migrate to Storybook 8",
+  "packageName": "@nova/examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@nova-react-test-utils-a7ef1c7e-3ec2-43e8-9097-68de43319aff.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "support Storybook 8",
+  "packageName": "@nova/react-test-utils",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/examples/.storybook/main.ts

@@ -1,14 +1,16 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc")
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: {
       strictMode: true,
     },
@@ -25,19 +27,6 @@ const config: StorybookConfig = {
             exclude: /node_modules/,
             loader: "@graphitation/embedded-document-artefact-loader/webpack",
           },
-          {
-            test: /\.(tsx|ts)$/,
-            use: [
-              {
-                loader: require.resolve("esbuild-loader"),
-                options: {
-                  loader: "tsx",
-                  target: "es2020",
-                },
-              },
-            ],
-            exclude: /node_modules/,
-          },
           {
             test: /\.(graphql)$/,
             loader: "@graphql-tools/webpack-loader",
@@ -48,3 +37,7 @@ const config: StorybookConfig = {
   },
 };
 export default config;
+
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}

packages/examples/package.json

@@ -17,8 +17,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@nova/react": "2.6.4",
     "@nova/graphql-compiler": "1.0.2",
+    "@nova/react": "2.6.4",
     "@nova/react-test-utils": "5.6.0",
     "@nova/types": "1.5.1",
     "graphql": "^15.5.0",
@@ -28,10 +28,6 @@
     "relay-runtime": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
     "@graphitation/embedded-document-artefact-loader": "^0.8.5",
     "@graphitation/graphql-codegen-typescript-typemap-plugin": "^0.1.9",
     "@graphitation/graphql-js-tag": "^0.9.4",
@@ -40,27 +36,25 @@
     "@graphql-codegen/typescript": "^3.0.2",
     "@graphql-codegen/typescript-resolvers": "^3.1.1",
     "@graphql-tools/webpack-loader": "^6.7.1",
-    "@storybook/addon-essentials": "^7.6.19",
-    "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-links": "^7.6.19",
-    "@storybook/blocks": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/react-webpack5": "^7.6.19",
-    "@storybook/test": "^7.6.19",
-    "@storybook/types": "^7.6.19",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@storybook/types": "^8.4.5",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^15.0.0",
     "@types/jest": "^29.2.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^16.0.0",
     "@types/relay-runtime": "^18.0.0",
-    "esbuild-loader": "^3.0.1",
     "monorepo-scripts": "*",
-    "prop-types": "15.8.1",
     "relay-compiler": "^18.0.0",
     "relay-test-utils": "^18.0.0",
-    "storybook": "^7.6.19",
+    "storybook": "^8.4.5",
     "typescript": "^5.6.0"
   },
   "sideEffects": false

packages/examples/src/testing-utils/executePlayFunction.ts

@@ -1,12 +1,12 @@
 import type { ReactRenderer } from "@storybook/react";
 import type {
-  ComposedStoryPlayContext,
+  PlayFunctionContext,
   ComposedStoryFn,
 } from "@storybook/types";
 import { act, waitFor } from "@testing-library/react/pure";
 
 type PlayFunctionThatReturnsPromise = (
-  options: ComposedStoryPlayContext<ReactRenderer>,
+  options: Partial<PlayFunctionContext<ReactRenderer>>,
 ) => Promise<void>;
 
 // This function is a workaround for the issues with React 18 that if someone
@@ -20,7 +20,7 @@ type PlayFunctionThatReturnsPromise = (
 // be true.
 export const executePlayFunction = async (
   Story: ComposedStoryFn<ReactRenderer>,
-  options: ComposedStoryPlayContext<ReactRenderer>,
+  options: Partial<PlayFunctionContext<ReactRenderer>>,
 ) => {
   let playFunctionCompleted = false;
   const playFunction = Story.play as PlayFunctionThatReturnsPromise;

packages/nova-react-test-utils/package.json

@@ -76,10 +76,10 @@
     "@apollo/client": "^3.4.15",
     "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
     "@graphitation/apollo-mock-client": "^0.11.9",
-    "@storybook/addon-actions": "^7.6.19",
-    "@storybook/preview-api": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/types": "^7.6.19",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/preview-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/types": "^8.4.5",
     "@testing-library/react": "^15.0.0",
     "@types/jest": "^29.2.0",
     "@types/react-relay": "^16.0.0",

packages/nova-react-test-utils/src/shared/storybook-nova-decorator-shared.tsx

@@ -5,7 +5,6 @@ import type { MockResolvers } from "@graphitation/graphql-js-operation-payload-g
 import type {
   Addon_LegacyStoryFn,
   ComposedStoryFn,
-  ComposedStoryPlayContext,
   PlayFunctionContext,
 } from "@storybook/types";
 import { makeDecorator } from "@storybook/preview-api";
@@ -134,8 +133,8 @@ export const getDecorator = <E extends NovaMockEnvironment<"storybook">>(
 // This function is used to create play function context for a story used inside unit test, leveraging composeStories/composeStory.
 export const prepareStoryContextForTest = (
   story: ComposedStoryFn<ReactRenderer>,
-  canvasElement?: HTMLElement,
-): ComposedStoryPlayContext<ReactRenderer> => ({
+  canvasElement: HTMLElement,
+): Partial<PlayFunctionContext<ReactRenderer>> => ({
   canvasElement,
   id: story.id,
   parameters: story.parameters,