diff --git a/scm-ui/ui-components/.storybook/main.js b/scm-ui/ui-components/.storybook/main.js index 48a3928607..36811f2e22 100644 --- a/scm-ui/ui-components/.storybook/main.js +++ b/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 = { diff --git a/scm-ui/ui-core/.storybook/main.js b/scm-ui/ui-core/.storybook/main.js index 8c0cffafa5..3def6f30dd 100644 --- a/scm-ui/ui-core/.storybook/main.js +++ b/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"); diff --git a/scm-ui/ui-core/.storybook/preview.js b/scm-ui/ui-core/.storybook/preview.js index 861683871e..0962c2f3e6 100644 --- a/scm-ui/ui-core/.storybook/preview.js +++ b/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" }, ], - } + }, };