[Storybook] upgrade Storybook to v8 (#7659)

.browserslistrc

@@ -2,5 +2,7 @@ last 2 versions
 not dead
 not IE 11
 Safari 7
+# adding as part of Storybook upgrade to v8 https://github.com/babel/babel/issues/16171#issuecomment-2015227043
+not op_mob >= 1
 
 # Safari 7 for PhantomJS support

.storybook/main.ts

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-babel',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -34,6 +35,9 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -101,7 +101,6 @@ const preview: Preview = {
     },
   },
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
     options: {
       showPanel: true, // default to showing the controls panel

package.json

@@ -59,6 +59,7 @@
   ],
   "dependencies": {
     "@hello-pangea/dnd": "^16.6.0",
+    "@storybook/test": "^8.0.5",
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
     "@types/react-window": "^1.8.8",
@@ -118,13 +119,13 @@
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-webpack5": "^7.5.2",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -188,7 +189,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -233,7 +234,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^7.5.2",
+    "storybook": "^8.0.5",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

src/components/selectable/selectable_templates/selectable_template_sitewide.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render, waitForEuiPopoverOpen } from '../../../test/rtl';
 import { shouldRenderCustomStyles } from '../../../test/internal';
@@ -170,7 +170,7 @@ describe('EuiSelectableTemplateSitewide', () => {
         ).not.toBeInTheDocument();
       });
 
-      test('toggles the selectable popover for keyboard users', () => {
+      test('toggles the selectable popover for keyboard users', async () => {
         const { getByTestSubject } = render(
           <EuiSelectableTemplateSitewide
             options={options}
@@ -179,7 +179,7 @@ describe('EuiSelectableTemplateSitewide', () => {
         );
         // fireEvent doesn't seem to work: https://github.com/testing-library/user-event/issues/179#issuecomment-1125146667
         getByTestSubject('mobilePopoverButton').focus();
-        userEvent.keyboard('{enter}');
+        await waitFor(() => userEvent.keyboard('{enter}'));
         waitForEuiPopoverOpen();
 
         expect(getByTestSubject('euiSelectableList')).toBeInTheDocument();