chore: update storybook (#11936)

.github/workflows/ci.yaml

@@ -516,7 +516,8 @@ jobs:
           NODE_OPTIONS: "--max_old_space_size=4096"
           STORYBOOK: true
         with:
-          buildScriptName: "storybook:build"
+          # Do a fast, testing build for change previews
+          buildScriptName: "storybook:ci"
           exitOnceUploaded: true
           # This will prevent CI from failing when Chromatic detects visual changes
           exitZeroOnChanges: true
@@ -530,6 +531,8 @@ jobs:
           # Run TurboSnap to trace file dependencies to related stories
           # and tell chromatic to only take snapshots of relevent stories
           onlyChanged: true
+          # Avoid uploading single files, because that's very slow
+          zip: true
 
       # This is a separate step for mainline only that auto accepts and changes
       # instead of holding CI up. Since we squash/merge, this is defensive to
@@ -547,6 +550,7 @@ jobs:
           autoAcceptChanges: true
           # This will prevent CI from failing when Chromatic detects visual changes
           exitZeroOnChanges: true
+          # Do a full build with documentation for mainline builds
           buildScriptName: "storybook:build"
           projectToken: 695c25b6cb65
           workingDir: "./site"
@@ -554,6 +558,8 @@ jobs:
           # Run TurboSnap to trace file dependencies to related stories
           # and tell chromatic to only take snapshots of relevent stories
           onlyChanged: true
+          # Avoid uploading single files, because that's very slow
+          zip: true
 
   offlinedocs:
     name: offlinedocs
@@ -726,7 +732,7 @@ jobs:
 
             # Define specific tags
             tags=("$tag" "main" "latest")
-            
+
             # Create and push a multi-arch manifest for each tag
             # we are adding `latest` tag and keeping `main` for backward
             # compatibality

site/package.json

@@ -20,10 +20,12 @@
     "gen:provisioner": "protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=./e2e/ --ts_proto_opt=outputJsonMethods=false,outputEncodeMethods=encode-no-creation,outputClientImpl=false,nestJs=false,outputPartialMethods=false,fileSuffix=Generated,suffix=hey -I ../provisionersdk/proto ../provisionersdk/proto/provisioner.proto && pnpm exec prettier --ignore-path '/dev/null' --cache --write './e2e/provisionerGenerated.ts'",
     "storybook": "STORYBOOK=true storybook dev -p 6006",
     "storybook:build": "storybook build",
+    "storybook:ci": "storybook build --test",
     "test": "jest --selectProjects test",
     "test:ci": "jest --selectProjects test --silent",
     "test:coverage": "jest --selectProjects test --collectCoverage",
     "test:watch": "jest --selectProjects test --watch",
+    "test:storybook": "test-storybook",
     "stats": "STATS=true pnpm build && npx http-server ./stats -p 8081 -c-1",
     "deadcode": "ts-prune | grep -v \".stories\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
   },
@@ -94,17 +96,16 @@
   "devDependencies": {
     "@octokit/types": "12.3.0",
     "@playwright/test": "1.39.0",
-    "@storybook/addon-actions": "7.5.2",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.5.2",
-    "@storybook/addon-mdx-gfm": "7.5.2",
-    "@storybook/addon-themes": "7.6.4",
-    "@storybook/jest": "0.2.3",
-    "@storybook/preview-api": "7.6.9",
-    "@storybook/react": "7.5.2",
-    "@storybook/react-vite": "7.5.2",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-actions": "7.6.11",
+    "@storybook/addon-essentials": "7.6.11",
+    "@storybook/addon-interactions": "7.6.11",
+    "@storybook/addon-links": "7.6.11",
+    "@storybook/addon-mdx-gfm": "7.6.11",
+    "@storybook/addon-themes": "7.6.11",
+    "@storybook/preview-api": "7.6.11",
+    "@storybook/react": "7.6.11",
+    "@storybook/react-vite": "7.6.11",
+    "@storybook/test": "7.6.11",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "6.1.2",
@@ -132,7 +133,7 @@
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-react": "4.1.0",
-    "chromatic": "9.0.0",
+    "chromatic": "10.6.1",
     "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "3.6.0",
@@ -161,7 +162,7 @@
     "protobufjs": "7.2.4",
     "rxjs": "7.8.1",
     "ssh2": "1.14.0",
-    "storybook": "7.5.2",
+    "storybook": "7.6.11",
     "storybook-addon-react-router-v6": "2.0.0",
     "storybook-react-context": "0.6.0",
     "ts-node": "10.9.1",

site/src/components/InfoTooltip/InfoTooltip.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, waitFor, within } from "@storybook/testing-library";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
 import { InfoTooltip } from "./InfoTooltip";
 
 const meta = {