chore(js): Bump storybook (#36399)

docs-ui/storybook/main.ts

@@ -11,6 +11,7 @@ const toPath = (p: string) => path.join(process.cwd(), p);
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.*'],
+  framework: '@storybook/react',
   core: {
     builder: 'webpack5',
   },
@@ -21,9 +22,15 @@ const config: StorybookConfig = {
     },
     '@storybook/addon-a11y',
     '@storybook/addon-links',
+    '@storybook/addon-docs',
     'storybook-dark-mode',
   ],
 
+  features: {
+    emotionAlias: false,
+    babelModeV7: true,
+  },
+
   // For whatever reason the `babel` config override is not present in
   // storybooks StorybookConfig type.
   //
@@ -45,6 +52,11 @@ const config: StorybookConfig = {
         'emotion-theming': toPath('node_modules/@emotion/react'),
         '@babel/preset-react': toPath('node_modules/@babel/preset-react'),
       },
+      // See: https://github.com/storybookjs/storybook/issues/17458
+      fallback: {
+        ...webpackConf?.resolve?.fallback,
+        assert: toPath('commonjs-assert'),
+      },
     },
   }),
 };

docs-ui/storybook/preview.tsx

@@ -1,6 +1,7 @@
 import 'focus-visible';
 import 'docs-ui/index.js';
 
+import {ThemeProvider} from '@emotion/react';
 import {DocsContainer, Meta} from '@storybook/addon-docs';
 import {addDecorator, addParameters, DecoratorFn, Parameters} from '@storybook/react';
 import {themes} from '@storybook/theming';
@@ -10,7 +11,6 @@ import DocsLinks from 'docs-ui/components/docsLinks';
 import DoDont from 'docs-ui/components/doDont';
 import Sample from 'docs-ui/components/sample';
 import TableOfContents from 'docs-ui/components/tableOfContents';
-import {ThemeProvider} from 'emotion-theming';
 import {useDarkMode} from 'storybook-dark-mode';
 
 import GlobalStyles from 'sentry/styles/global';
@@ -133,7 +133,7 @@ addParameters({
      * show/hide tool bar
      * @type {Boolean}
      */
-    isToolshown: true,
+    showToolbar: true,
     /**
      * function to sort stories in the tree view
      * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`

package.json

@@ -161,21 +161,22 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "assert": "^2.0.0",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
     "@size-limit/preset-small-lib": "^5.0.5",
-    "@storybook/addon-a11y": "6.3.13",
-    "@storybook/addon-actions": "6.3.13",
-    "@storybook/addon-docs": "6.3.13",
-    "@storybook/addon-essentials": "6.3.13",
-    "@storybook/addon-links": "6.5.8",
-    "@storybook/addon-storysource": "6.3.13",
-    "@storybook/addons": "6.3.13",
-    "@storybook/builder-webpack5": "6.3.13",
-    "@storybook/manager-webpack5": "6.3.13",
-    "@storybook/react": "6.3.13",
+    "@storybook/addon-a11y": "6.5.9",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-docs": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/addon-storysource": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
     "@storybook/router": "6.5.9",
-    "@storybook/theming": "6.3.13",
+    "@storybook/theming": "6.5.9",
     "@types/node": "^18.0.0",
     "@visual-snapshot/jest": "6.0.2",
     "babel-gettext-extractor": "^4.1.3",