build(#10336): separate definitions and generated codes

packages/frontend/.storybook/generate.tsx

@@ -1,4 +1,5 @@
-import * as fs from 'node:fs/promises';
+import { existsSync, readFileSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
 import { basename, dirname } from 'node:path/posix';
 import { promisify } from 'node:util';
 import { generate } from 'astring';
@@ -12,6 +13,10 @@ function h<T extends estree.Node>(component: T['type'], props: Omit<T, 'type'>):
 }
 
 function toStories(component: string): string {
+	const msw = `${component.slice(0, -'.vue'.length)}.msw`;
+	const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`;
+	const hasMsw = existsSync(`${msw}.ts`);
+	const hasImplStories = existsSync(`${implStories}.ts`);
 	const base = basename(component);
 	const dir = dirname(component);
 	const literal = (
@@ -27,7 +32,17 @@ function toStories(component: string): string {
 					key={<identifier name="layout" />}
 					value={<literal value={`${dir}/`.startsWith('src/pages/') || base === 'MkAnalogClock.vue' ? 'fullscreen' : 'centered'} />}
 					kind="init"
-				/>
+				/>,
+				...hasMsw
+					? [
+							<property
+								key={<identifier name="msw" />}
+								value={<identifier name="msw" />}
+								kind="init"
+								shorthand
+							/>,
+						]
+					: [],
 			]}
 		/>
 	);
@@ -47,6 +62,18 @@ function toStories(component: string): string {
 						/>,
 					]}
 				/>,
+				...hasMsw
+					? [
+							<import-declaration
+								source={<literal value={`./${basename(msw)}`} />}
+								specifiers={[
+									<import-namespace-specifier
+										local={<identifier name="msw" />}
+									/>,
+								]}
+							/>,
+						]
+					: [],
 				<import-declaration
 					source={<literal value={`./${base}`} />}
 					specifiers={[
@@ -80,6 +107,10 @@ function toStories(component: string): string {
 						/>,
 					]}
 				/>,
+				...hasImplStories
+					? [
+						]
+					: [
 							<export-named-declaration
 								declaration={
 									<variable-declaration
@@ -88,6 +119,31 @@ function toStories(component: string): string {
 											<variable-declarator
 												id={<identifier name="Default" />}
 												init={
+													<object-expression
+														properties={[
+															<property
+																key={<identifier name="render" />}
+																value={
+																	<function-expression
+																		id={<identifier name="render" />}
+																		params={[
+																			<identifier name="args" />,
+																			<object-pattern
+																				properties={[
+																					<property
+																						key={<identifier name="argTypes" />}
+																						value={<identifier name="argTypes" />}
+																						kind="init"
+																						shorthand
+																					/>,
+																				]}
+																			/>,
+																		]}
+																		body={
+																			<block-statement
+																				body={[
+																					<return-statement
+																						argument={
 																							<object-expression
 																								properties={[
 																									<property
@@ -107,8 +163,37 @@ function toStories(component: string): string {
 																										kind="init"
 																									/>,
 																									<property
+																										key={<identifier name="props" />}
+																										value={
+																											<call-expression
+																												callee={
+																													<member-expression
+																														object={<identifier name="Object" />}
+																														property={<identifier name="keys" />}
+																													/>
+																												}
+																												arguments={[
+																													<identifier name="argTypes" />,
+																												]}
+																											/>
+																										}
+																										kind="init"
+																									/>,
+																									<property
 																										key={<identifier name="template" />}
-													value={<literal value={`<${identifier.name} />`} />}
+																										value={<literal value={`<${identifier.name} v-bind="$props" />`} />}
+																										kind="init"
+																									/>,
+																								]}
+																							/>
+																						}
+																					/>,
+																				]}
+																			/>
+																		}
+																	/>
+																}
+																method
 																kind="init"
 															/>,
 															<property
@@ -124,6 +209,7 @@ function toStories(component: string): string {
 									/>
 								}
 							/>,
+						],
 				<export-default-declaration
 					declaration={<identifier name="meta" />}
 				/>,
@@ -131,7 +217,7 @@ function toStories(component: string): string {
 		/>
 	) as unknown as estree.Program;
 	return format(
-		generate(program),
+		generate(program) + (hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
 		{
 			parser: 'babel-ts',
 			singleQuote: true,
@@ -143,11 +229,6 @@ function toStories(component: string): string {
 promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then((components) => Promise.all(
 	components.map((component) => {
 		const stories = component.replace(/\.vue$/, '.stories.ts');
-		fs.stat(stories).then(
-			() => {},
-			() => {
-				fs.writeFile(stories, toStories(component));
-			}
-		);
+		return writeFile(stories, toStories(component));
 	})
 ));

packages/frontend/.storybook/manager.ts

@@ -0,0 +1,12 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+	theme: create({
+		base: 'dark',
+		brandTitle: 'Misskey Storybook',
+		brandUrl: 'https://misskey-hub.net',
+		brandImage: 'https://github.com/misskey-dev/assets/blob/main/misskey.svg?raw=true',
+		brandTarget: '_blank',
+	}),
+});

packages/frontend/.storybook/preview.ts

@@ -1,8 +1,10 @@
 import { type Preview, setup } from '@storybook/vue3';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
 import locale from './locale';
 import theme from './theme';
 import '../src/style.scss';
 
+initialize();
 localStorage.setItem("locale", JSON.stringify(locale));
 Promise.all([
 	import('../src/components'),
@@ -15,12 +17,22 @@ Promise.all([
 		directives(app);
 		widgets(app);
 	});
-})
+});
 
 const preview = {
+	decorators: [
+		mswDecorator,
+	],
 	parameters: {
 		layout: 'centered',
 	},
+	argTypes: {
+		default: {
+			control: {
+				type: 'text',
+			},
+		},
+	},
 } satisfies Preview;
 
 export default preview;

packages/frontend/package.json

@@ -76,7 +76,9 @@
 		"@storybook/addon-interactions": "^7.0.0-rc.4",
 		"@storybook/addon-links": "^7.0.0-rc.4",
 		"@storybook/blocks": "^7.0.0-rc.4",
+		"@storybook/manager-api": "7.0.0-rc.4",
 		"@storybook/testing-library": "^0.0.14-next.1",
+		"@storybook/theming": "7.0.0-rc.4",
 		"@storybook/vue3": "^7.0.0-rc.4",
 		"@storybook/vue3-vite": "^7.0.0-rc.4",
 		"@testing-library/vue": "^6.6.1",
@@ -105,6 +107,8 @@
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.9.0",
 		"happy-dom": "8.9.0",
+		"msw": "^1.1.0",
+		"msw-storybook-addon": "^1.8.0",
 		"prettier": "^2.8.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

packages/frontend/src/components/MkAbuseReport.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAbuseReport,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAbuseReport,
 			},
-	template: '<MkAbuseReport />',
+			props: Object.keys(argTypes),
+			template: '<MkAbuseReport v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkAbuseReportWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAbuseReportWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAbuseReportWindow,
 			},
-	template: '<MkAbuseReportWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkAbuseReportWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkAchievements.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAchievements,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAchievements,
 			},
-	template: '<MkAchievements />',
+			props: Object.keys(argTypes),
+			template: '<MkAchievements v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkAnalogClock.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAnalogClock,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAnalogClock,
 			},
-	template: '<MkAnalogClock />',
+			props: Object.keys(argTypes),
+			template: '<MkAnalogClock v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'fullscreen',
 	},

packages/frontend/src/components/MkAsUi.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAsUi,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAsUi,
 			},
-	template: '<MkAsUi />',
+			props: Object.keys(argTypes),
+			template: '<MkAsUi v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkAutocomplete.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAutocomplete,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAutocomplete,
 			},
-	template: '<MkAutocomplete />',
+			props: Object.keys(argTypes),
+			template: '<MkAutocomplete v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkAvatars.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkAvatars,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkAvatars,
 			},
-	template: '<MkAvatars />',
+			props: Object.keys(argTypes),
+			template: '<MkAvatars v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkButton.stories.impl.ts

@@ -0,0 +1,14 @@
+export const Default = {
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkButton v-bind="$props">Text</MkButton>',
+		};
+	},
+	parameters: {
+		layout: 'centered',
+	},
+};

packages/frontend/src/components/MkButton.stories.ts

@@ -4,13 +4,18 @@ const meta = {
 	title: 'components/MkButton',
 	component: MkButton,
 };
+export default meta;
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkButton,
 			},
-	template: '<MkButton />',
+			props: Object.keys(argTypes),
+			template: '<MkButton v-bind="$props">Text</MkButton>',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},
 };
-export default meta;

packages/frontend/src/components/MkCaptcha.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkCaptcha,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkCaptcha,
 			},
-	template: '<MkCaptcha />',
+			props: Object.keys(argTypes),
+			template: '<MkCaptcha v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkChannelFollowButton.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkChannelFollowButton,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkChannelFollowButton,
 			},
-	template: '<MkChannelFollowButton />',
+			props: Object.keys(argTypes),
+			template: '<MkChannelFollowButton v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkChannelPreview.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkChannelPreview,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkChannelPreview,
 			},
-	template: '<MkChannelPreview />',
+			props: Object.keys(argTypes),
+			template: '<MkChannelPreview v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkChart.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkChart,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkChart,
 			},
-	template: '<MkChart />',
+			props: Object.keys(argTypes),
+			template: '<MkChart v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkChartLegend.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkChartLegend,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkChartLegend,
 			},
-	template: '<MkChartLegend />',
+			props: Object.keys(argTypes),
+			template: '<MkChartLegend v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkChartTooltip.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkChartTooltip,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkChartTooltip,
 			},
-	template: '<MkChartTooltip />',
+			props: Object.keys(argTypes),
+			template: '<MkChartTooltip v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkCheckbox.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkCheckbox,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkCheckbox,
 			},
-	template: '<MkCheckbox />',
+			props: Object.keys(argTypes),
+			template: '<MkCheckbox v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkClickerGame.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkClickerGame,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkClickerGame,
 			},
-	template: '<MkClickerGame />',
+			props: Object.keys(argTypes),
+			template: '<MkClickerGame v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkClipPreview.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkClipPreview,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkClipPreview,
 			},
-	template: '<MkClipPreview />',
+			props: Object.keys(argTypes),
+			template: '<MkClipPreview v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkCode.core.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkCode_core,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkCode_core,
 			},
-	template: '<MkCode_core />',
+			props: Object.keys(argTypes),
+			template: '<MkCode_core v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkCode.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkCode,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkCode,
 			},
-	template: '<MkCode />',
+			props: Object.keys(argTypes),
+			template: '<MkCode v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkContainer.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkContainer,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkContainer,
 			},
-	template: '<MkContainer />',
+			props: Object.keys(argTypes),
+			template: '<MkContainer v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkContextMenu.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkContextMenu,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkContextMenu,
 			},
-	template: '<MkContextMenu />',
+			props: Object.keys(argTypes),
+			template: '<MkContextMenu v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkCropperDialog.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkCropperDialog,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkCropperDialog,
 			},
-	template: '<MkCropperDialog />',
+			props: Object.keys(argTypes),
+			template: '<MkCropperDialog v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkCwButton.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkCwButton,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkCwButton,
 			},
-	template: '<MkCwButton />',
+			props: Object.keys(argTypes),
+			template: '<MkCwButton v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDateSeparatedList.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDateSeparatedList,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDateSeparatedList,
 			},
-	template: '<MkDateSeparatedList />',
+			props: Object.keys(argTypes),
+			template: '<MkDateSeparatedList v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDialog.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDialog,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDialog,
 			},
-	template: '<MkDialog />',
+			props: Object.keys(argTypes),
+			template: '<MkDialog v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDigitalClock.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDigitalClock,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDigitalClock,
 			},
-	template: '<MkDigitalClock />',
+			props: Object.keys(argTypes),
+			template: '<MkDigitalClock v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDonation.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDonation,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDonation,
 			},
-	template: '<MkDonation />',
+			props: Object.keys(argTypes),
+			template: '<MkDonation v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDrive.file.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive_file,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDrive_file,
 			},
-	template: '<MkDrive_file />',
+			props: Object.keys(argTypes),
+			template: '<MkDrive_file v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDrive.folder.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive_folder,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDrive_folder,
 			},
-	template: '<MkDrive_folder />',
+			props: Object.keys(argTypes),
+			template: '<MkDrive_folder v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDrive.navFolder.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive_navFolder,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDrive_navFolder,
 			},
-	template: '<MkDrive_navFolder />',
+			props: Object.keys(argTypes),
+			template: '<MkDrive_navFolder v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDrive.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDrive,
 			},
-	template: '<MkDrive />',
+			props: Object.keys(argTypes),
+			template: '<MkDrive v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDriveFileThumbnail.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDriveFileThumbnail,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDriveFileThumbnail,
 			},
-	template: '<MkDriveFileThumbnail />',
+			props: Object.keys(argTypes),
+			template: '<MkDriveFileThumbnail v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDriveSelectDialog.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDriveSelectDialog,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDriveSelectDialog,
 			},
-	template: '<MkDriveSelectDialog />',
+			props: Object.keys(argTypes),
+			template: '<MkDriveSelectDialog v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkDriveWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkDriveWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkDriveWindow,
 			},
-	template: '<MkDriveWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkDriveWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkEmojiPicker.section.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPicker_section,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkEmojiPicker_section,
 			},
-	template: '<MkEmojiPicker_section />',
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPicker_section v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkEmojiPicker.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPicker,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkEmojiPicker,
 			},
-	template: '<MkEmojiPicker />',
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPicker v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkEmojiPickerDialog.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPickerDialog,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkEmojiPickerDialog,
 			},
-	template: '<MkEmojiPickerDialog />',
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPickerDialog v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkEmojiPickerWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPickerWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkEmojiPickerWindow,
 			},
-	template: '<MkEmojiPickerWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPickerWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFeaturedPhotos.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFeaturedPhotos,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFeaturedPhotos,
 			},
-	template: '<MkFeaturedPhotos />',
+			props: Object.keys(argTypes),
+			template: '<MkFeaturedPhotos v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFileCaptionEditWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFileCaptionEditWindow,
 			},
-	template: '<MkFileCaptionEditWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkFileCaptionEditWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFileListForAdmin.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFileListForAdmin,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFileListForAdmin,
 			},
-	template: '<MkFileListForAdmin />',
+			props: Object.keys(argTypes),
+			template: '<MkFileListForAdmin v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFlashPreview.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFlashPreview,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFlashPreview,
 			},
-	template: '<MkFlashPreview />',
+			props: Object.keys(argTypes),
+			template: '<MkFlashPreview v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFoldableSection.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFoldableSection,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFoldableSection,
 			},
-	template: '<MkFoldableSection />',
+			props: Object.keys(argTypes),
+			template: '<MkFoldableSection v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFolder.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFolder,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFolder,
 			},
-	template: '<MkFolder />',
+			props: Object.keys(argTypes),
+			template: '<MkFolder v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFollowButton.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFollowButton,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFollowButton,
 			},
-	template: '<MkFollowButton />',
+			props: Object.keys(argTypes),
+			template: '<MkFollowButton v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkForgotPassword.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkForgotPassword,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkForgotPassword,
 			},
-	template: '<MkForgotPassword />',
+			props: Object.keys(argTypes),
+			template: '<MkForgotPassword v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkFormDialog.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkFormDialog,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkFormDialog,
 			},
-	template: '<MkFormDialog />',
+			props: Object.keys(argTypes),
+			template: '<MkFormDialog v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkGalleryPostPreview.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkGalleryPostPreview,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkGalleryPostPreview,
 			},
-	template: '<MkGalleryPostPreview />',
+			props: Object.keys(argTypes),
+			template: '<MkGalleryPostPreview v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkGoogle.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkGoogle,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkGoogle,
 			},
-	template: '<MkGoogle />',
+			props: Object.keys(argTypes),
+			template: '<MkGoogle v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkHeatmap.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkHeatmap,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkHeatmap,
 			},
-	template: '<MkHeatmap />',
+			props: Object.keys(argTypes),
+			template: '<MkHeatmap v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkImageViewer.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkImageViewer,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkImageViewer,
 			},
-	template: '<MkImageViewer />',
+			props: Object.keys(argTypes),
+			template: '<MkImageViewer v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkImgWithBlurhash.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkImgWithBlurhash,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkImgWithBlurhash,
 			},
-	template: '<MkImgWithBlurhash />',
+			props: Object.keys(argTypes),
+			template: '<MkImgWithBlurhash v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkInfo.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkInfo,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkInfo,
 			},
-	template: '<MkInfo />',
+			props: Object.keys(argTypes),
+			template: '<MkInfo v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkInput.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkInput,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkInput,
 			},
-	template: '<MkInput />',
+			props: Object.keys(argTypes),
+			template: '<MkInput v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkInstanceCardMini.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkInstanceCardMini,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkInstanceCardMini,
 			},
-	template: '<MkInstanceCardMini />',
+			props: Object.keys(argTypes),
+			template: '<MkInstanceCardMini v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkInstanceStats.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkInstanceStats,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkInstanceStats,
 			},
-	template: '<MkInstanceStats />',
+			props: Object.keys(argTypes),
+			template: '<MkInstanceStats v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkInstanceTicker.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkInstanceTicker,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkInstanceTicker,
 			},
-	template: '<MkInstanceTicker />',
+			props: Object.keys(argTypes),
+			template: '<MkInstanceTicker v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkKeyValue.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkKeyValue,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkKeyValue,
 			},
-	template: '<MkKeyValue />',
+			props: Object.keys(argTypes),
+			template: '<MkKeyValue v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkLaunchPad.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkLaunchPad,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkLaunchPad,
 			},
-	template: '<MkLaunchPad />',
+			props: Object.keys(argTypes),
+			template: '<MkLaunchPad v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkLink.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkLink,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkLink,
 			},
-	template: '<MkLink />',
+			props: Object.keys(argTypes),
+			template: '<MkLink v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMarquee.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMarquee,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMarquee,
 			},
-	template: '<MkMarquee />',
+			props: Object.keys(argTypes),
+			template: '<MkMarquee v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMediaBanner.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaBanner,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMediaBanner,
 			},
-	template: '<MkMediaBanner />',
+			props: Object.keys(argTypes),
+			template: '<MkMediaBanner v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMediaImage.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaImage,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMediaImage,
 			},
-	template: '<MkMediaImage />',
+			props: Object.keys(argTypes),
+			template: '<MkMediaImage v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMediaList.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaList,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMediaList,
 			},
-	template: '<MkMediaList />',
+			props: Object.keys(argTypes),
+			template: '<MkMediaList v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMediaVideo.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaVideo,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMediaVideo,
 			},
-	template: '<MkMediaVideo />',
+			props: Object.keys(argTypes),
+			template: '<MkMediaVideo v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMention.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMention,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMention,
 			},
-	template: '<MkMention />',
+			props: Object.keys(argTypes),
+			template: '<MkMention v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMenu.child.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMenu_child,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMenu_child,
 			},
-	template: '<MkMenu_child />',
+			props: Object.keys(argTypes),
+			template: '<MkMenu_child v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMenu.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMenu,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMenu,
 			},
-	template: '<MkMenu />',
+			props: Object.keys(argTypes),
+			template: '<MkMenu v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkMiniChart.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkMiniChart,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkMiniChart,
 			},
-	template: '<MkMiniChart />',
+			props: Object.keys(argTypes),
+			template: '<MkMiniChart v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkModal.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkModal,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkModal,
 			},
-	template: '<MkModal />',
+			props: Object.keys(argTypes),
+			template: '<MkModal v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkModalPageWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkModalPageWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkModalPageWindow,
 			},
-	template: '<MkModalPageWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkModalPageWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkModalWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkModalWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkModalWindow,
 			},
-	template: '<MkModalWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkModalWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNote.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNote,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNote,
 			},
-	template: '<MkNote />',
+			props: Object.keys(argTypes),
+			template: '<MkNote v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNoteDetailed.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteDetailed,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNoteDetailed,
 			},
-	template: '<MkNoteDetailed />',
+			props: Object.keys(argTypes),
+			template: '<MkNoteDetailed v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNoteHeader.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteHeader,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNoteHeader,
 			},
-	template: '<MkNoteHeader />',
+			props: Object.keys(argTypes),
+			template: '<MkNoteHeader v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNotePreview.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotePreview,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNotePreview,
 			},
-	template: '<MkNotePreview />',
+			props: Object.keys(argTypes),
+			template: '<MkNotePreview v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNoteSimple.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteSimple,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNoteSimple,
 			},
-	template: '<MkNoteSimple />',
+			props: Object.keys(argTypes),
+			template: '<MkNoteSimple v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNoteSub.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteSub,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNoteSub,
 			},
-	template: '<MkNoteSub />',
+			props: Object.keys(argTypes),
+			template: '<MkNoteSub v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNotes.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotes,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNotes,
 			},
-	template: '<MkNotes />',
+			props: Object.keys(argTypes),
+			template: '<MkNotes v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNotification.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotification,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNotification,
 			},
-	template: '<MkNotification />',
+			props: Object.keys(argTypes),
+			template: '<MkNotification v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNotificationSettingWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotificationSettingWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNotificationSettingWindow,
 			},
-	template: '<MkNotificationSettingWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkNotificationSettingWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNotifications.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotifications,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNotifications,
 			},
-	template: '<MkNotifications />',
+			props: Object.keys(argTypes),
+			template: '<MkNotifications v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNumber.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNumber,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNumber,
 			},
-	template: '<MkNumber />',
+			props: Object.keys(argTypes),
+			template: '<MkNumber v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkNumberDiff.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkNumberDiff,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkNumberDiff,
 			},
-	template: '<MkNumberDiff />',
+			props: Object.keys(argTypes),
+			template: '<MkNumberDiff v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkObjectView.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkObjectView,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkObjectView,
 			},
-	template: '<MkObjectView />',
+			props: Object.keys(argTypes),
+			template: '<MkObjectView v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkObjectView.value.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkObjectView_value,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkObjectView_value,
 			},
-	template: '<MkObjectView_value />',
+			props: Object.keys(argTypes),
+			template: '<MkObjectView_value v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkOmit.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkOmit,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkOmit,
 			},
-	template: '<MkOmit />',
+			props: Object.keys(argTypes),
+			template: '<MkOmit v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPagePreview.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPagePreview,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPagePreview,
 			},
-	template: '<MkPagePreview />',
+			props: Object.keys(argTypes),
+			template: '<MkPagePreview v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPageWindow.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPageWindow,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPageWindow,
 			},
-	template: '<MkPageWindow />',
+			props: Object.keys(argTypes),
+			template: '<MkPageWindow v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPagination.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPagination,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPagination,
 			},
-	template: '<MkPagination />',
+			props: Object.keys(argTypes),
+			template: '<MkPagination v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPlusOneEffect.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPlusOneEffect,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPlusOneEffect,
 			},
-	template: '<MkPlusOneEffect />',
+			props: Object.keys(argTypes),
+			template: '<MkPlusOneEffect v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPoll.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPoll,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPoll,
 			},
-	template: '<MkPoll />',
+			props: Object.keys(argTypes),
+			template: '<MkPoll v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPollEditor.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPollEditor,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPollEditor,
 			},
-	template: '<MkPollEditor />',
+			props: Object.keys(argTypes),
+			template: '<MkPollEditor v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPopupMenu.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPopupMenu,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPopupMenu,
 			},
-	template: '<MkPopupMenu />',
+			props: Object.keys(argTypes),
+			template: '<MkPopupMenu v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/components/MkPostForm.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: MkPostForm,
 };
 export const Default = {
+	render(args, { argTypes }) {
+		return {
 			components: {
 				MkPostForm,
 			},
-	template: '<MkPostForm />',
+			props: Object.keys(argTypes),
+			template: '<MkPostForm v-bind="$props" />',
+		};
+	},
 	parameters: {
 		layout: 'centered',
 	},