Merge pull request #7008 from valadas/storybook-fix20260218

Upgraded Storybook to v10

Author: bdukes

DNN Platform/Modules/ResourceManager/ResourceManager.Web/eslint.config.ts

@@ -46,4 +46,4 @@ export default (tseslint.config(
             "@typescript-eslint/no-unsafe-return": "off"
         },
     }
-));
+));

Dnn.AdminExperience/ClientSide/Dnn.React.Common/.storybook/main.js

@@ -1,4 +1,8 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 import { join, dirname } from "path";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
 
 /**
 * This function is used to resolve the absolute path of a package.
@@ -17,13 +21,37 @@ const config = {
     addons: [
         getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
         getAbsolutePath("@storybook/addon-onboarding"),
-        getAbsolutePath("@storybook/addon-docs")
+        getAbsolutePath("@storybook/addon-docs"),
     ],
     framework: {
         name: getAbsolutePath("@storybook/react-webpack5"),
         options: {}
     },
     webpackFinal: async (config) => {
+        // Helper to check if a rule matches SVG files
+        const matchesSvg = (rule) => rule.test instanceof RegExp && rule.test.test('.svg');
+
+        // Exclude SVG from the default asset/resource rule (top-level and inside oneOf blocks)
+        config.module.rules.forEach((rule) => {
+            if (matchesSvg(rule)) {
+                rule.exclude = /\.svg$/i;
+            }
+            if (rule.oneOf) {
+                rule.oneOf.forEach((subRule) => {
+                    if (matchesSvg(subRule)) {
+                        subRule.exclude = /\.svg$/i;
+                    }
+                });
+            }
+        });
+
+        // Add @svgr/webpack to handle SVG imports as React components
+        config.module.rules.push({
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            use: ["@svgr/webpack"],
+        });
+
         config.module.rules.push({
             test: /\.less$/,
             use: [

Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json

@@ -56,10 +56,10 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.28.5",
     "@eslint/compat": "^1.4.0",
-    "@storybook/addon-docs": "9.1.13",
-    "@storybook/addon-onboarding": "10.1.11",
-    "@storybook/addon-webpack5-compiler-swc": "4.0.1",
-    "@storybook/react-webpack5": "9.1.13",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-onboarding": "10.2.10",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.2",
+    "@storybook/react-webpack5": "10.2.10",
     "@svgr/webpack": "^8.1.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^10.0.0",
@@ -77,7 +77,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-storybook": "9.1.13",
+    "eslint-plugin-storybook": "10.2.10",
     "eslint-webpack-plugin": "^5.0.2",
     "file-loader": "6.2.0",
     "less": "4.4.2",
@@ -90,7 +90,7 @@
     "react-dom": "^16.14.0",
     "react-hot-loader": "^4.13.1",
     "react-test-renderer": "^17.0.2",
-    "storybook": "9.1.17",
+    "storybook": "10.2.10",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.3",
     "url-loader": "4.1.1",

Dnn.AdminExperience/ClientSide/Styles.Web/eslint.config.ts

@@ -42,4 +42,4 @@ export default tseslint.config(
             "@typescript-eslint/no-deprecated": "warn",
         },
     },
-);
+);