Merge pull request #774 from umbraco/feature/storybook-msw-iife

Feature/storybook msw iife

src/Umbraco.Web.UI.Client/.storybook/main.ts

@@ -22,12 +22,19 @@ const config: StorybookConfig = {
 		name: '@storybook/web-components-vite',
 		options: {},
 	},
-	staticDirs: ['../public-assets'],
+	staticDirs: ['../public-assets', '../public'],
 	typescript: {
 		check: true,
 	},
 	docs: {
 		autodocs: true,
 	},
+	managerHead(head, { configType }) {
+		const base = process.env.VITE_BASE_PATH || '/';
+		const injections = [
+			`<base href="${base}" />`, // This decide how storybook's main frame visit stories
+		];
+		return configType === 'PRODUCTION' ? `${injections.join('')}${head}` : head;
+	},
 };
 export default config;

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

@@ -4,12 +4,11 @@ import '../src/css/umb-css.css';
 import 'element-internals-polyfill';
 import '@umbraco-ui/uui';
 
-import { handlers } from '../src/mocks/browser-handlers';
 import { html } from 'lit';
-import { initialize, mswDecorator } from 'msw-storybook-addon';
-import { onUnhandledRequest } from '../src/mocks';
 import { setCustomElements } from '@storybook/web-components';
 
+import { startMockServiceWorker } from '../src/mocks';
+
 import { UMB_MODAL_CONTEXT_TOKEN, UmbModalManagerContext } from '../src/packages/core/modal';
 import { UmbDataTypeStore } from '../src/packages/settings/data-types/repository/data-type.store.ts';
 import { UmbDocumentStore } from '../src/packages/documents/documents/repository/document.store.ts';
@@ -26,6 +25,9 @@ import '../src/packages/core/components';
 
 import { manifests as documentManifests } from '../src/packages/documents';
 
+// MSW
+startMockServiceWorker({ serviceWorker: { url: (import.meta.env.VITE_BASE_PATH ?? '/') + 'mockServiceWorker.js' } });
+
 class UmbStoryBookElement extends UmbLitElement {
 	_umbIconRegistry = new UmbIconRegistry();
 
@@ -77,12 +79,8 @@ const documentTreeStoreProvider = (story) => html`
 	>
 `;
 
-// Initialize MSW
-initialize({ onUnhandledRequest });
-
 // Provide the MSW addon decorator globally
 export const decorators = [
-	mswDecorator,
 	storybookProvider,
 	documentStoreProvider,
 	documentTreeStoreProvider,
@@ -127,11 +125,6 @@ export const parameters = {
 			date: /Date$/,
 		},
 	},
-	msw: {
-		handlers: {
-			global: handlers,
-		},
-	},
 	backgrounds: {
 		default: 'Greyish',
 		values: [

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

@@ -137,13 +137,13 @@
 		"@rollup/plugin-commonjs": "^25.0.0",
 		"@rollup/plugin-json": "^6.0.0",
 		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@storybook/addon-a11y": "7.0.18",
-		"@storybook/addon-actions": "7.0.18",
-		"@storybook/addon-essentials": "7.0.18",
-		"@storybook/addon-links": "7.0.18",
+		"@storybook/addon-a11y": "7.0.20",
+		"@storybook/addon-actions": "7.0.20",
+		"@storybook/addon-essentials": "7.0.20",
+		"@storybook/addon-links": "7.0.20",
 		"@storybook/mdx2-csf": "^1.1.0",
-		"@storybook/web-components": "7.0.18",
-		"@storybook/web-components-vite": "7.0.18",
+		"@storybook/web-components": "7.0.20",
+		"@storybook/web-components-vite": "7.0.20",
 		"@types/chai": "^4.3.4",
 		"@types/lodash-es": "^4.17.6",
 		"@types/mocha": "^10.0.0",
@@ -165,10 +165,9 @@
 		"eslint-plugin-local-rules": "^1.3.2",
 		"eslint-plugin-storybook": "^0.6.12",
 		"eslint-plugin-wc": "^1.4.0",
-		"msw": "^1.1.0",
-		"msw-storybook-addon": "^1.8.0",
+		"msw": "^1.2.1",
 		"openapi-typescript-codegen": "^0.24.0",
-		"playwright-msw": "^2.1.0",
+		"playwright-msw": "^2.1.1",
 		"plop": "^3.1.1",
 		"prettier": "2.8.8",
 		"react": "^18.2.0",
@@ -180,7 +179,7 @@
 		"rollup-plugin-import-css": "^3.2.1",
 		"rollup-plugin-url": "^3.0.1",
 		"rollup-plugin-web-worker-loader": "^1.6.1",
-		"storybook": "7.0.18",
+		"storybook": "7.0.20",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.6",
 		"typescript": "^5.1.3",

src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts

@@ -18,39 +18,3 @@ export default {
 export const Step3Database: Story<UmbInstallerDatabaseElement> = () =>
 	html`<umb-installer-database></umb-installer-database>`;
 Step3Database.storyName = 'Step 3: Database';
-
-export const Step3DatabasePreconfigured: Story<UmbInstallerDatabaseElement> = () =>
-	html`<umb-installer-database></umb-installer-database>`;
-Step3DatabasePreconfigured.storyName = 'Step 3: Database (preconfigured)';
-Step3DatabasePreconfigured.parameters = {
-	msw: {
-		handlers: {
-			global: null,
-			others: [
-				rest.get('/umbraco/backoffice/install/settings', (_req, res, ctx) => {
-					return res(
-						ctx.status(200),
-						ctx.json<InstallSettingsResponseModel>({
-							user: { consentLevels: [], minCharLength: 2, minNonAlphaNumericLength: 2 },
-							databases: [
-								{
-									id: '1',
-									sortOrder: -1,
-									displayName: 'SQLite',
-									defaultDatabaseName: 'Umbraco',
-									providerName: 'Microsoft.Data.SQLite',
-									isConfigured: true,
-									requiresServer: false,
-									serverPlaceholder: undefined,
-									requiresCredentials: false,
-									supportsIntegratedAuthentication: false,
-									requiresConnectionTest: false,
-								},
-							],
-						})
-					);
-				}),
-			],
-		},
-	},
-};

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

@@ -1,5 +1,5 @@
 const { setupWorker } = window.MockServiceWorker;
-import type { MockedRequest, setupWorker as setupWorkType, rest } from 'msw';
+import type { MockedRequest, setupWorker as setupWorkType, rest, StartOptions } from 'msw';
 import { handlers } from './browser-handlers.js';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
@@ -11,11 +11,12 @@ export const onUnhandledRequest = (req: MockedRequest) => {
 	}
 };
 
-export const startMockServiceWorker = () =>
+export const startMockServiceWorker = (config?: StartOptions) =>
 	worker.start({
 		onUnhandledRequest,
 		// TODO: this can not rely on a VITE variable
 		quiet: import.meta.env.VITE_MSW_QUIET === 'on',
+		...config,
 	});
 
 declare global {