feat: add support for Storybook v8

examples/react-esm/.storybook/main.mjs

@@ -1,13 +1,13 @@
 const config = {
   stories: ['../../stories/**/*.stories.*'],
-  addons: ['storybook-addon-performance'],
+  addons: ['@storybook/addon-webpack5-compiler-babel', 'storybook-addon-performance'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    docsPage: 'automatic'
-  }
+    docsPage: 'automatic',
+  },
 };
 
-export default config;
+export default config;

examples/react-esm/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { themes } from '@storybook/theming';
 
 addons.setConfig({

examples/react-esm/package.json

@@ -14,13 +14,16 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/react": "7.0.0-beta.2",
-    "@storybook/react-webpack5": "7.0.0-beta.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "babel-loader": "^9.1.3",
     "http-server": "^14.1.1",
-    "storybook": "7.0.0-beta.2",
+    "storybook": "^8.0.0",
     "storybook-addon-performance": "workspace:*",
-    "typescript": "^4.9.5",
+    "typescript": "^5.6.3",
     "webpack": "^5.90.0"
   },
   "scripts": {

examples/react-v16.8/.storybook/main.js

@@ -1,11 +1,11 @@
 module.exports = {
   stories: ['../../stories/**/*.stories.*'],
-  addons: ['storybook-addon-performance'],
+  addons: ['@storybook/addon-webpack5-compiler-babel', 'storybook-addon-performance'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    docsPage: 'automatic'
-  }
+    docsPage: 'automatic',
+  },
 };

examples/react-v16.8/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { themes } from '@storybook/theming';
 
 addons.setConfig({

examples/react-v16.8/package.json

@@ -13,13 +13,16 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/react": "^7.0.0",
-    "@storybook/react-webpack5": "^7.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "babel-loader": "^9.1.3",
     "http-server": "^14.1.1",
-    "storybook": "^7.0.0",
+    "storybook": "^8.0.0",
     "storybook-addon-performance": "workspace:*",
-    "typescript": "^4.9.5",
+    "typescript": "^5.6.3",
     "webpack": "^5.90.0"
   },
   "scripts": {

examples/react-v17/.storybook/main.js

@@ -1,11 +1,11 @@
 module.exports = {
   stories: ['../../stories/**/*.stories.*'],
-  addons: ['storybook-addon-performance'],
+  addons: ['@storybook/addon-webpack5-compiler-babel', 'storybook-addon-performance'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    docsPage: 'automatic'
-  }
+    docsPage: 'automatic',
+  },
 };

examples/react-v17/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { themes } from '@storybook/theming';
 
 addons.setConfig({

examples/react-v17/package.json

@@ -13,13 +13,16 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/react": "7.0.0-beta.2",
-    "@storybook/react-webpack5": "7.0.0-beta.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "babel-loader": "^9.1.3",
     "http-server": "^14.1.1",
-    "storybook": "7.0.0-beta.2",
+    "storybook": "^8.0.0",
     "storybook-addon-performance": "workspace:*",
-    "typescript": "^4.9.5",
+    "typescript": "^5.6.3",
     "webpack": "^5.90.0"
   },
   "scripts": {

examples/react-v18/.storybook/main.js

@@ -1,11 +1,11 @@
 module.exports = {
   stories: ['../../stories/**/*.stories.*'],
-  addons: ['storybook-addon-performance'],
+  addons: ['@storybook/addon-webpack5-compiler-babel', 'storybook-addon-performance'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    docsPage: 'automatic'
-  }
+    docsPage: 'automatic',
+  },
 };

examples/react-v18/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { themes } from '@storybook/theming';
 
 addons.setConfig({

examples/react-v18/package.json

@@ -13,13 +13,16 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/react": "7.0.0-beta.2",
-    "@storybook/react-webpack5": "7.0.0-beta.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "babel-loader": "^9.1.3",
     "http-server": "^14.1.1",
-    "storybook": "7.0.0-beta.2",
+    "storybook": "^8.0.0",
     "storybook-addon-performance": "workspace:*",
-    "typescript": "^4.9.5",
+    "typescript": "^5.6.3",
     "webpack": "^5.90.0"
   },
   "scripts": {

packages/storybook-addon-performance-cli/package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.11",
-    "@types/node": "^16.18.76",
+    "@types/node": "^20.14.8",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.56.0",
@@ -47,7 +47,7 @@
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "tsup": "^6.7.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.6.3"
   },
   "engines": {
     "node": ">=20.0.0"

packages/storybook-addon-performance/package.json

@@ -23,23 +23,22 @@
     "/dist"
   ],
   "dependencies": {
-    "@storybook/manager-api": "^7.6.10",
-    "@storybook/theming": "^7.6.10",
-    "@storybook/types": "^7.6.10",
     "@xstate/react": "^3.2.2",
     "xstate": "^4.38.3"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "devDependencies": {
-    "@storybook/channels": "^7.6.10",
-    "@storybook/components": "^7.6.10",
-    "@storybook/core-events": "^7.6.10",
-    "@storybook/preview-api": "^7.6.10",
+    "@storybook/channels": "^8.0.0",
+    "@storybook/components": "^8.0.0",
+    "@storybook/core-events": "^8.0.0",
+    "@storybook/icons": "^1.2.12",
+    "@storybook/manager": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
+    "@storybook/types": "^8.0.0",
     "@testing-library/react": "^10.4.9",
     "@types/jest": "^29.5.11",
+    "@types/node": "^20.14.8",
     "@types/react": "16.9.17",
     "@types/react-dom": "16.9.17",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -57,8 +56,8 @@
     "react-dom": "^16.14.0",
     "tiny-invariant": "^1.3.1",
     "ts-jest": "^29.1.2",
-    "tsup": "^6.7.0",
-    "typescript": "^4.9.5"
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
   },
   "config": {
     "prettier_target": "src/**/*.{ts,tsx,js,jsx,md,json} test/**/*.{ts,tsx,js,jsx,md,json} examples/**/*.{ts,tsx,js,jsx,md,json}"

packages/storybook-addon-performance/src/panel/task-result/expanding-result.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import { styled } from '@storybook/theming';
 import * as Expand from './parts';
-import { Button, Icons } from '@storybook/components';
+import { Button } from '@storybook/components';
+import { ArrowDownIcon, ArrowRightIcon } from '@storybook/icons';
 import { useActor } from '@xstate/react';
 import useRequiredContext from '../../use-required-context';
 import ServiceContext from '../service-context';
@@ -71,11 +72,7 @@ const IconContainer = styled.span`
 `;
 
 function ExpandIcon({ isExpanded }: ExpandedArgs) {
-  return (
-    <IconContainer>
-      <Icons icon={isExpanded ? 'arrowdown' : 'arrowright'} />
-    </IconContainer>
-  );
+  return <IconContainer>{isExpanded ? <ArrowDownIcon /> : <ArrowRightIcon />}</IconContainer>;
 }
 
 export function ExpandingResult({ name, result, getExpanded }: Props) {
@@ -97,10 +94,8 @@ export function ExpandingResult({ name, result, getExpanded }: Props) {
       {isExpanded ? (
         <Expand.Section>
           {
-            // @ts-ignore
             <Button
-              secondary
-              small
+              size="small"
               disabled={!nextEventsInclude('START_ONE', state.nextEvents)}
               onClick={() => send({ type: 'START_ONE', taskName: name })}
             >

packages/storybook-addon-performance/src/panel/top-bar.tsx

@@ -1,4 +1,5 @@
-import { Button, Form, Icons, IconsProps } from '@storybook/components';
+import { Button, Form } from '@storybook/components';
+import { DownloadIcon, LockIcon, UnlockIcon, UploadIcon } from '@storybook/icons';
 import { styled } from '@storybook/theming';
 import React, { ChangeEvent } from 'react';
 import useRequiredContext from '../use-required-context';
@@ -59,12 +60,6 @@ const MetaSettings = styled.div`
   flex-direction: row;
 `;
 
-const ResponsiveIcon = styled(Icons)`
-  @media screen and (max-width: ${TABLET_BREAKPOINT}px) {
-    margin-right: 0px !important;
-  }
-`;
-
 const ResponsiveText = styled.span`
   @media screen and (max-width: ${TABLET_BREAKPOINT}px) {
     display: none;
@@ -99,12 +94,6 @@ export default function Topbar() {
     unpin: nextEventsInclude('UNPIN', state.nextEvents) && current.results != null,
   };
 
-  const icons: { pin: IconsProps['icon']; save: IconsProps['icon']; load: IconsProps['icon'] } = {
-    pin: pinned ? 'lock' : 'unlock',
-    save: 'download',
-    load: 'upload',
-  };
-
   return (
     <Container>
       <Segment>
@@ -114,8 +103,8 @@ export default function Topbar() {
             css={{
               textTransform: 'uppercase',
             }}
-            primary
-            small
+            variant="solid"
+            size="small"
             onClick={() => send({ type: 'START_ALL' })}
             disabled={!enabled.start}
             id={selectors.startAllButtonId}
@@ -169,13 +158,12 @@ export default function Topbar() {
           {
             <Button
               id={selectors.pinButtonId}
-              secondary
-              outline={!pinned}
-              small
+              variant={!pinned ? 'outline' : undefined}
+              size="small"
               disabled={pinned ? !enabled.unpin : !enabled.pin}
               onClick={() => send({ type: pinned ? 'UNPIN' : 'PIN' })}
             >
-              <ResponsiveIcon icon={icons.pin} aria-label={icons.pin} />
+              {pinned ? <LockIcon aria-label="lock" /> : <UnlockIcon aria-label="unlock" />}
               <ResponsiveText>{pinned ? 'Unpin baseline' : 'Pin as baseline'}</ResponsiveText>
             </Button>
           }
@@ -185,30 +173,27 @@ export default function Topbar() {
           {
             <Button
               id={selectors.saveButtonId}
-              secondary
-              small
-              outline
+              size="small"
+              variant="outline"
               disabled={current.results == null}
               onClick={() => send({ type: 'SAVE' })}
             >
-              <ResponsiveIcon icon={icons.save} aria-label={icons.save} />
+              <DownloadIcon aria-label="save" />
               <ResponsiveText>Save result</ResponsiveText>
             </Button>
           }
           {
             <Button
-              secondary
-              small
-              outline
+              size="small"
+              variant="outline"
               onClick={() => {
                 document.getElementById(selectors.loadButtonId)?.click();
               }}
             >
-              <ResponsiveIcon icon={icons.load} aria-label={icons.load} />
+              <UploadIcon aria-label="load" />
               <ResponsiveText>Load result</ResponsiveText>
             </Button>
           }
-          {/* @ts-expect-error */}
           <Form.Input
             style={{ display: 'none' }}
             id={selectors.loadButtonId}

packages/storybook-addon-performance/tsup.config.js

@@ -1,3 +1,4 @@
+import { globalPackages } from '@storybook/manager/globals';
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
@@ -7,4 +8,5 @@ export default defineConfig({
   clean: true,
   minify: false,
   platform: 'browser',
+  external: globalPackages,
 });