build(#10336): separate definitions and generated codes

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',
 	},

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

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

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

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

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

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

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

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