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,50 +107,109 @@ function toStories(component: string): string {
 						/>,
 					]}
 				/>,
-				<export-named-declaration
-					declaration={
-						<variable-declaration
-							kind="const"
-							declarations={[
-								<variable-declarator
-									id={<identifier name="Default" />}
-									init={
-										<object-expression
-											properties={[
-												<property
-													key={<identifier name="components" />}
-													value={
-														<object-expression
-															properties={[
-																<property
-																	key={identifier}
-																	value={identifier}
-																	kind="init"
-																	shorthand
-																/>,
-															]}
-														/>
-													}
-													kind="init"
-												/>,
-												<property
-													key={<identifier name="template" />}
-													value={<literal value={`<${identifier.name} />`} />}
-													kind="init"
-												/>,
-												<property
-													key={<identifier name="parameters" />}
-													value={parameters}
-													kind="init"
-												/>,
-											]}
-										/>
-									}
-								/>,
-							]}
-						/>
-					}
-				/>,
+				...hasImplStories
+					? [
+						]
+					: [
+							<export-named-declaration
+								declaration={
+									<variable-declaration
+										kind="const"
+										declarations={[
+											<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
+																										key={<identifier name="components" />}
+																										value={
+																											<object-expression
+																												properties={[
+																													<property
+																														key={identifier}
+																														value={identifier}
+																														kind="init"
+																														shorthand
+																													/>,
+																												]}
+																											/>
+																										}
+																										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} v-bind="$props" />`} />}
+																										kind="init"
+																									/>,
+																								]}
+																							/>
+																						}
+																					/>,
+																				]}
+																			/>
+																		}
+																	/>
+																}
+																method
+																kind="init"
+															/>,
+															<property
+																key={<identifier name="parameters" />}
+																value={parameters}
+																kind="init"
+															/>,
+														]}
+													/>
+												}
+											/>,
+										]}
+									/>
+								}
+							/>,
+						],
 				<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 = {
-	components: {
-		MkAbuseReport,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAbuseReport,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAbuseReport v-bind="$props" />',
+		};
 	},
-	template: '<MkAbuseReport />',
 	parameters: {
 		layout: 'centered',
 	},

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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