build(#10336): mock assets

packages/frontend/.storybook/main.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path';
 import type { StorybookConfig } from '@storybook/vue3-vite';
 import { mergeConfig } from 'vite';
 import { getConfig } from '../vite.config';
@@ -23,6 +24,7 @@ const config = {
 		const x = mergeConfig(config, {
 			...original,
 			build,
+			assetsInclude: [resolve(__dirname, '../node_modules/@tabler/icons-webfont/**/*.{css,eot,ttf,woff,woff2}')],
 		});
 		return x;
 	},

packages/frontend/.storybook/mocks.ts

@@ -0,0 +1,16 @@
+import { type SharedOptions, rest } from 'msw';
+
+export const onUnhandledRequest = ((req, print) => {
+	if (req.url.hostname !== 'localhost' || /^\/(?:client-assets\/|fluent-emojis?\/|iframe.html$|node_modules\/|sb-|static-assets\/|vite\/)/.test(req.url.pathname)) {
+		return
+	}
+	print.warning()
+}) satisfies SharedOptions['onUnhandledRequest'];
+
+export const commonHandlers = [
+	rest.get('/twemoji/:codepoints.svg', async (req, res, ctx) => {
+		const { codepoints } = req.params;
+		const file = await import(`../node_modules/@discordapp/twemoji/dist/svg/${codepoints}.svg?raw`);
+		return res(ctx.set('Content-Type', 'image/svg+xml'), ctx.body(file.default));
+	}),
+];

packages/frontend/.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="../node_modules/@tabler/icons-webfont/tabler-icons.min.css">
 <script>
   window.global = window;
 </script>

packages/frontend/.storybook/preview.ts

@@ -1,10 +1,13 @@
 import { type Preview, setup } from '@storybook/vue3';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import locale from './locale';
+import { commonHandlers, onUnhandledRequest } from './mocks';
 import theme from './theme';
 import '../src/style.scss';
 
-initialize();
+initialize({
+	onUnhandledRequest,
+});
 localStorage.setItem("locale", JSON.stringify(locale));
 Promise.all([
 	import('../src/components'),
@@ -23,6 +26,11 @@ const preview = {
 	decorators: [
 		mswDecorator,
 	],
+	parameters: {
+		msw: {
+			handlers: commonHandlers,
+		},
+	},
 } satisfies Preview;
 
 export default preview;