add storybook-msw to storybook

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -1,6 +1,17 @@
 import '@umbraco-ui/uui';
 import '@umbraco-ui/uui-css/dist/uui-css.css';
 
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
+import { onUnhandledRequest } from '../src/mocks/browser';
+import { handlers } from '../src/mocks/handlers';
+
+// Initialize MSW
+initialize({onUnhandledRequest});
+
+// Provide the MSW addon decorator globally
+export const decorators = [mswDecorator];
+
 export const parameters = {
 	actions: { argTypesRegex: '^on.*' },
 	controls: {
@@ -10,4 +21,9 @@ export const parameters = {
 			date: /Date$/,
 		},
 	},
+	msw: {
+		handlers: {
+			global: handlers
+		}
+	}
 };

src/Umbraco.Web.UI.Client/package-lock.json

@@ -42,6 +42,7 @@
         "eslint-plugin-storybook": "^0.6.1",
         "lit-html": "^2.2.7",
         "msw": "^0.44.2",
+        "msw-storybook-addon": "^1.6.3",
         "prettier": "2.7.1",
         "typescript": "^4.7.4",
         "vite": "^3.0.3"
@@ -16998,6 +16999,19 @@
         }
       }
     },
+    "node_modules/msw-storybook-addon": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.6.3.tgz",
+      "integrity": "sha512-Ps80WdRmXsmenoTwfrgKMNpQD8INUUFyUFyZOecx8QjuqSlL++UYrLaGyACXN2goOn+/VS6rb0ZapbjrasPClg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "^6.0.0",
+        "is-node-process": "^1.0.1"
+      },
+      "peerDependencies": {
+        "msw": ">=0.35.0 <1.0.0"
+      }
+    },
     "node_modules/msw/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -37629,6 +37643,16 @@
         }
       }
     },
+    "msw-storybook-addon": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.6.3.tgz",
+      "integrity": "sha512-Ps80WdRmXsmenoTwfrgKMNpQD8INUUFyUFyZOecx8QjuqSlL++UYrLaGyACXN2goOn+/VS6rb0ZapbjrasPClg==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "^6.0.0",
+        "is-node-process": "^1.0.1"
+      }
+    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",

src/Umbraco.Web.UI.Client/package.json

@@ -67,6 +67,7 @@
     "eslint-plugin-storybook": "^0.6.1",
     "lit-html": "^2.2.7",
     "msw": "^0.44.2",
+    "msw-storybook-addon": "^1.6.3",
     "prettier": "2.7.1",
     "typescript": "^4.7.4",
     "vite": "^3.0.3"

src/Umbraco.Web.UI.Client/src/mocks/browser.ts

@@ -1,15 +1,18 @@
-import { setupWorker } from 'msw';
+import { MockedRequest, setupWorker } from 'msw';
+
 import { handlers } from './handlers';
 
 const worker = setupWorker(...handlers);
 
+export const onUnhandledRequest = (req: MockedRequest) => {
+	if (req.url.pathname.startsWith('/node_modules/')) return;
+	if (req.url.pathname.startsWith('/src/')) return;
+	if (req.destination === 'image') return;
+
+	console.warn('Found an unhandled %s request to %s', req.method, req.url.href);
+};
+
 export const startMockServiceWorker = () =>
 	worker.start({
-		onUnhandledRequest: (req) => {
-			if (req.url.pathname.startsWith('/node_modules/')) return;
-			if (req.url.pathname.startsWith('/src/')) return;
-			if (req.destination === 'image') return;
-
-			console.warn('Found an unhandled %s request to %s', req.method, req.url.href);
-		},
+		onUnhandledRequest,
 	});