Update to storybook v9 (#14196)

Author: swissspidy

.storybook/main.cjs

@@ -20,7 +20,8 @@
 const { readFileSync } = require('fs');
 const webpack = require('webpack');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const { loadCsf } = require('@storybook/csf-tools');
+// eslint-disable-next-line node/no-missing-require
+const { loadCsf } = require('storybook/internal/csf-tools');
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 module.exports = {
@@ -33,6 +34,7 @@ module.exports = {
     '../packages/design-system/src/**/stories/index.js',
     '../packages/animation/src/**/stories/*.js',
   ],
+
   experimental_indexers: (indexers) => {
     const createIndex = (fileName, opts) => {
       const code = readFileSync(fileName, {
@@ -51,32 +53,25 @@ module.exports = {
       ...(indexers || []),
     ];
   },
+
   addons: [
     '@storybook/addon-a11y/register',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        actions: true,
-        backgrounds: true,
-        controls: false,
-        // See https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/83
-        docs: false,
-        viewport: true,
-        toolbars: true,
-      },
-    },
     '@storybook/addon-webpack5-compiler-babel',
   ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
+
   core: {
     disableTelemetry: true,
   },
+
   docs: {
     disabled: true,
   },
+
   //eslint-disable-next-line require-await -- Negligible.
   webpackFinal: async (webpackConfig) => {
     // webpack < 5 used to include polyfills for node.js core modules by default.
@@ -94,6 +89,8 @@ module.exports = {
         module: false,
         assert: false,
         perf_hooks: false,
+        crypto: false,
+        worker_threads: false,
       },
     };
 
@@ -256,4 +253,12 @@ module.exports = {
     );
     return webpackConfig;
   },
+
+  features: {
+    actions: true,
+    backgrounds: true,
+    controls: false,
+    viewport: true,
+    toolbars: true,
+  },
 };

.storybook/preview.js

@@ -18,7 +18,8 @@
  * External dependencies
  */
 import { ThemeProvider } from 'styled-components';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+// eslint-disable-next-line import/no-unresolved
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 import {
   theme as designSystemTheme,
   lightMode,
@@ -56,7 +57,7 @@ window.wp.media = {
 
 const { ipad, ipad10p, ipad12p } = INITIAL_VIEWPORTS;
 
-/** @type { import('@storybook/react').Preview } */
+/** @type { import('@storybook/react-webpack5').Preview } */
 const preview = {
   parameters: {
     a11y: {