build(#10336): separate definitions and generated codes

packages/frontend/.storybook/generate.tsx

-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

+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

 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

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