Upgrade storybook/react to version 7 using npx storybook@latest upgrade --prerelease command following https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700

.storybook/main.js

@@ -8,9 +8,9 @@ module.exports = {
     '@storybook/addon-interactions',
     '@storybook/preset-create-react-app',
   ],
-  framework: '@storybook/react',
+  framework: {
-  core: {
+    name: '@storybook/react-webpack5',
-    builder: '@storybook/builder-webpack5',
+    options: {},
   },
   webpackFinal: async config => {
     config.resolve.plugins = config.resolve.plugins || [];
@@ -21,4 +21,7 @@ module.exports = {
     );
     return config;
   },
+  docs: {
+    autodocs: true,
+  },
 };

package.json

@@ -30,8 +30,8 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src --no-error-on-unmatched-pattern",
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix --no-error-on-unmatched-pattern",
     "fix": "npm run format:write && npm run lint:fix",
-    "storybook": "start-storybook -p 6006 -s public",
+    "storybook": "storybook dev -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "storybook build -s public",
     "chromatic": "npx chromatic --project-token=chpt_df2240e310a4eff"
   },
   "eslintConfig": {
@@ -63,16 +63,15 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-links": "^7.0.11",
-    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/node-logger": "^7.0.11",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-create-react-app": "^7.0.11",
-    "@storybook/node-logger": "^6.5.16",
+    "@storybook/react": "^7.0.11",
-    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react-webpack5": "^7.0.11",
-    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.0.14-next.2",
-    "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -98,6 +97,7 @@
     "msw": "^1.2.1",
     "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
+    "storybook": "^7.0.11",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "webpack": "^5.76.2"
   },