Upgrade storybook to latest version.

Author: novykh

.storybook/main.js

@@ -1,16 +1,11 @@
-import path from "path"
-import { fileURLToPath } from "url"
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
+const path = require("path")
 
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-webpack5-compiler-babel",
+    "@storybook/addon-docs"
   ],
   framework: {
     name: "@storybook/react-webpack5",
@@ -69,4 +64,4 @@ const config = {
     return config
   },
 }
-export default config
+module.exports = config

.storybook/preview.js

@@ -15,7 +15,7 @@ const preview = {
       },
     },
     layout: "centered",
-    backgrounds: { disable: true },
+    backgrounds: { disabled: true },
   },
 
   decorators: [

jest/config.js

@@ -27,6 +27,9 @@ module.exports = {
     },
   },
   testPathIgnorePatterns: ["/node_modules/"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!(strip-indent|redent|@testing-library/jest-dom)/)",
+  ],
   reporters: ["default"],
   cacheDirectory: "<rootDir>/.jest-tmp",
 }

package.json

@@ -44,7 +44,6 @@
     "@elastic/react-search-ui": "^1.24.2",
     "@elastic/search-ui-site-search-connector": "^1.24.2",
     "@prismicio/client": "^7.21.6",
-    "@storybook/test": "^8.6.17",
     "@styled-system/css": "^5.1.5",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.18",
@@ -70,13 +69,11 @@
     "@babel/plugin-transform-runtime": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
-    "@storybook/addon-essentials": "^8.6.17",
-    "@storybook/addon-interactions": "^8.6.17",
-    "@storybook/addon-links": "^8.6.17",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/blocks": "^8.6.17",
-    "@storybook/react": "^8.6.17",
-    "@storybook/react-webpack5": "^8.6.17",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-links": "10.2.10",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/react-webpack5": "10.2.10",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -88,7 +85,7 @@
     "eslint": "^10.0.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "10.2.10",
     "globals": "^17.3.0",
     "html-loader": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -106,7 +103,7 @@
     "react-dom": "^19.2.4",
     "rimraf": "^6.1.3",
     "sass-loader": "^16.0.7",
-    "storybook": "^8.6.17",
+    "storybook": "10.2.10",
     "styled-components": "^6.3.10",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^4.0.0",

src/components/drops/drop/index.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react"
-import { action } from "@storybook/addon-actions"
+import { action } from "storybook/actions"
 import Flex from "@/components/templates/flex"
 import Drop from "."