wip

.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
 	stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-	staticDirs: ['./public'],
+	staticDirs: [{ from: './public', to: '/storybook' }],
 	addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
 	core: {
 		builder: 'webpack5',

.storybook/preview.js

@@ -1,6 +1,8 @@
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import docJson from './documentation.json';
 
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
 const docToCleanup = [...docJson.components, ...docJson.directives, ...docJson.pipes];
 
 for (const doc of docToCleanup) {
@@ -50,9 +52,11 @@ export const parameters = {
 // and a story's runtime (browser). However, we cannot call `setupWorker`
 // in Node environment, so need to check if we're in a browser.
 if (typeof global.process === 'undefined') {
-	const { worker } = require('./msw/browser');
-	// Start the mocking when each story is loaded.
-	// Repetitive calls to the `.start()` method do not register a new worker,
-	// but check whether there's an existing once, reusing it, if so.
-	worker.start();
+	// Initialize MSW
+	initialize({
+		serviceWorker: {
+			url: '/storybook/mockServiceWorker.js',
+		},
+	});
 }
+export const decorators = [mswDecorator];