Upgrade from Storybook v7 -> Storybook v8

.changeset/rich-planets-allow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Upgrade from Storybook v7 -> Storybook v8.

polaris-react/.storybook/addons/global-controls-panel/manager.jsx

@@ -7,9 +7,8 @@ import {
   Link,
 } from '@storybook/components';
 import {PureArgsTable} from '@storybook/blocks';
-import {addons, types} from '@storybook/manager-api';
+import {useGlobals, addons, types} from '@storybook/manager-api';
 import {styled} from '@storybook/theming';
-import {useGlobals} from '@storybook/api';
 
 addons.register('global-controls', () => {
   addons.add('grid-options/panel', {

polaris-react/.storybook/main.js

@@ -1,8 +1,10 @@
+import {dirname, join} from 'path';
 import path from 'node:path';
 import {mergeConfig} from 'vite';
 
 module.exports = {
-  framework: '@storybook/react-vite',
+  framework: getAbsolutePath('@storybook/react-vite'),
+
   core: {
     disableTelemetry: true,
   },
@@ -18,9 +20,9 @@ module.exports = {
     },
   ],
   addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-toolbars',
-    '@storybook/addon-viewport',
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-toolbars'),
+    getAbsolutePath('@storybook/addon-viewport'),
     './addons/global-controls-panel/preset.js',
   ],
   // This Vite config is only used by Storybook for building the preview iframe
@@ -65,3 +67,7 @@ module.exports = {
     });
   },
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

polaris-react/package.json

@@ -74,16 +74,15 @@
     "@shopify/postcss-plugin": "^5.0.1",
     "@shopify/react-testing": "^4.1.0",
     "@shopify/storybook-a11y-test": "1.1.3",
-    "@storybook/addon-a11y": "^7.6.4",
-    "@storybook/addon-toolbars": "^7.6.4",
-    "@storybook/addon-viewport": "^7.6.4",
-    "@storybook/api": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/components": "^7.6.4",
-    "@storybook/manager-api": "^7.6.4",
-    "@storybook/preview-api": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
+    "@storybook/addon-a11y": "^8.0.0",
+    "@storybook/addon-toolbars": "^8.0.0",
+    "@storybook/addon-viewport": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/components": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
     "@types/node": "^16.11.11",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -109,7 +108,7 @@
     "rimraf": "^3.0.0",
     "sass-loader": "^12.4.0",
     "serve": "^14.2.0",
-    "storybook": "^7.6.4",
+    "storybook": "^8.0.0",
     "vite": "^4.4.9",
     "vite-plugin-replace": "^0.1.1"
   },