diff --git a/examples/react-esm/.storybook/main.mjs b/examples/react-esm/.storybook/main.mjs
index 16fccc0..2ee7c80 100644
--- a/examples/react-esm/.storybook/main.mjs
+++ b/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;
\ No newline at end of file
+export default config;
diff --git a/examples/react-esm/.storybook/manager.js b/examples/react-esm/.storybook/manager.js
index e247fbf..8360d8b 100644
--- a/examples/react-esm/.storybook/manager.js
+++ b/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({
diff --git a/examples/react-esm/package.json b/examples/react-esm/package.json
index c4b7d61..ad4047c 100644
--- a/examples/react-esm/package.json
+++ b/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": {
diff --git a/examples/react-v16.8/.storybook/main.js b/examples/react-v16.8/.storybook/main.js
index 966dae1..bfe7cc1 100644
--- a/examples/react-v16.8/.storybook/main.js
+++ b/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',
+ },
};
diff --git a/examples/react-v16.8/.storybook/manager.js b/examples/react-v16.8/.storybook/manager.js
index e247fbf..8360d8b 100644
--- a/examples/react-v16.8/.storybook/manager.js
+++ b/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({
diff --git a/examples/react-v16.8/package.json b/examples/react-v16.8/package.json
index b9a778d..4d2f094 100644
--- a/examples/react-v16.8/package.json
+++ b/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": {
diff --git a/examples/react-v17/.storybook/main.js b/examples/react-v17/.storybook/main.js
index 966dae1..bfe7cc1 100644
--- a/examples/react-v17/.storybook/main.js
+++ b/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',
+ },
};
diff --git a/examples/react-v17/.storybook/manager.js b/examples/react-v17/.storybook/manager.js
index e247fbf..8360d8b 100644
--- a/examples/react-v17/.storybook/manager.js
+++ b/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({
diff --git a/examples/react-v17/package.json b/examples/react-v17/package.json
index cf86809..0eb32cb 100644
--- a/examples/react-v17/package.json
+++ b/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": {
diff --git a/examples/react-v18/.storybook/main.js b/examples/react-v18/.storybook/main.js
index 966dae1..bfe7cc1 100644
--- a/examples/react-v18/.storybook/main.js
+++ b/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',
+ },
};
diff --git a/examples/react-v18/.storybook/manager.js b/examples/react-v18/.storybook/manager.js
index e247fbf..8360d8b 100644
--- a/examples/react-v18/.storybook/manager.js
+++ b/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({
diff --git a/examples/react-v18/package.json b/examples/react-v18/package.json
index 2c93d47..1435e0d 100644
--- a/examples/react-v18/package.json
+++ b/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": {
diff --git a/packages/storybook-addon-performance-cli/package.json b/packages/storybook-addon-performance-cli/package.json
index 72527e5..09936e0 100644
--- a/packages/storybook-addon-performance-cli/package.json
+++ b/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"
diff --git a/packages/storybook-addon-performance/package.json b/packages/storybook-addon-performance/package.json
index 80a6e86..e557b5c 100644
--- a/packages/storybook-addon-performance/package.json
+++ b/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}"
diff --git a/packages/storybook-addon-performance/src/panel/task-result/expanding-result.tsx b/packages/storybook-addon-performance/src/panel/task-result/expanding-result.tsx
index 14b3f88..7724883 100644
--- a/packages/storybook-addon-performance/src/panel/task-result/expanding-result.tsx
+++ b/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 (
-
-
-
- );
+ return {isExpanded ? : };
}
export function ExpandingResult({ name, result, getExpanded }: Props) {
@@ -97,10 +94,8 @@ export function ExpandingResult({ name, result, getExpanded }: Props) {
{isExpanded ? (
{
- // @ts-ignore