Fix storyshots for ui-core

scm-ui/ui-components/.storybook/main.js

@@ -39,8 +39,14 @@ module.exports = {
   },
   typescript: { reactDocgen: false },
   stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    "storybook-addon-i18next",
+    "storybook-addon-themes",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
   framework: "@storybook/react",
-  addons: ["storybook-addon-i18next", "storybook-addon-themes", "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
   webpackFinal: async (config) => {
     // add our themes to webpack entry points
     config.entry = {

scm-ui/ui-core/.storybook/main.js

@@ -22,7 +22,6 @@ const ReactDOM = require("react-dom");
 
 const root = path.resolve("..");
 
-
 const themedir = path.join(root, "ui-styles", "src");
 
 ReactDOM.createPortal = (node) => node;
@@ -46,7 +45,7 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-a11y",
-    "storybook-addon-pseudo-states"
+    "storybook-addon-pseudo-states",
   ],
   framework: "@storybook/react",
   webpackFinal: async (config) => {
@@ -75,6 +74,9 @@ module.exports = {
     // to filter our themes from the output.
     config.plugins.push(new RemoveThemesPlugin());
 
+    // force node version of "decode-named-character-reference" instead of browser version which does not work in web worker
+    config.resolve.alias["decode-named-character-reference"] = require.resolve("decode-named-character-reference");
+
     // force cjs instead of esm
     // https://github.com/tannerlinsley/react-query/issues/3513
     config.resolve.alias["react-query/devtools"] = require.resolve("react-query/devtools");

scm-ui/ui-core/.storybook/preview.js

@@ -17,9 +17,9 @@
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import { withI18next } from "storybook-addon-i18next";
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import withApiProvider from "./withApiProvider";
-import { withThemes } from 'storybook-addon-themes/react';
+import { withThemes } from "storybook-addon-themes/react";
 
 let i18n = i18next;
 
@@ -27,7 +27,7 @@ let i18n = i18next;
 // and not for storyshots
 if (!process.env.JEST_WORKER_ID) {
   const Backend = require("i18next-fetch-backend");
-  i18n = i18n.use(Backend.default);
+  i18n = i18n.use(Backend);
 }
 
 i18n.use(initReactI18next).init({
@@ -58,18 +58,18 @@ export const decorators = [
     },
   }),
   withApiProvider,
-  withThemes
+  withThemes,
 ];
 
-const Decorator = ({children, themeName}) => {
+const Decorator = ({ children, themeName }) => {
   useEffect(() => {
     const link = document.querySelector("#ui-theme");
     if (link && link["data-theme"] !== themeName) {
-      link.href = `ui-theme-${themeName}.css`;
+      link.href = `/ui-theme-${themeName}.css`;
       link["data-theme"] = themeName;
     }
   }, [themeName]);
-  return <>{children}</>
+  return <>{children}</>;
 };
 
 export const parameters = {
@@ -83,5 +83,5 @@ export const parameters = {
       { name: "highcontrast", color: "#050514" },
       { name: "dark", color: "#121212" },
     ],
-  }
+  },
 };