build(#10336): write some stories

packages/frontend/.storybook/generate.tsx

@@ -100,8 +100,10 @@ declare global {
 function toStories(component: string): string {
 	const msw = `${component.slice(0, -'.vue'.length)}.msw`;
 	const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`;
+	const metaStories = `${component.slice(0, -'.vue'.length)}.stories.meta`;
 	const hasMsw = existsSync(`${msw}.ts`);
 	const hasImplStories = existsSync(`${implStories}.ts`);
+	const hasMetaStories = existsSync(`${metaStories}.ts`);
 	const base = basename(component);
 	const dir = dirname(component);
 	const literal = (
@@ -212,6 +214,24 @@ function toStories(component: string): string {
 								/>
 							) as estree.ImportDeclaration,
 					  ]),
+				...(hasMetaStories
+					? [
+							(
+								<import-declaration
+									source={
+										(<literal value={`./${basename(metaStories)}`} />) as estree.Literal
+									}
+									specifiers={[
+										(
+											<import-namespace-specifier
+												local={(<identifier name='storiesMeta' />) as estree.Identifier}
+											/>
+										) as estree.ImportNamespaceSpecifier,
+									]}
+								/>
+							) as estree.ImportDeclaration,
+						]
+					: []),
 				(
 					<variable-declaration
 						kind={'const' as const}
@@ -248,6 +268,19 @@ function toStories(component: string): string {
 																		kind={'init' as const}
 																	/>
 																) as estree.Property,
+																...(hasMetaStories
+																	? [
+																			(
+																				<spread-element
+																					argument={
+																						(
+																							<identifier name='storiesMeta' />
+																						) as estree.Identifier
+																					}
+																				/>
+																			) as estree.SpreadElement,
+																		]
+																	: [])
 															]}
 														/>
 													) as estree.ObjectExpression

packages/frontend/src/components/global/MkAd.stories.ts

@@ -47,17 +47,17 @@ const common = {
 		await expect(a).not.toBeInTheDocument();
 		await expect(i).not.toBeInTheDocument();
 		buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-		await expect(buttons).toHaveLength(args._hasReduce ? 2 : 1);
+		await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1);
-		const reduce = args._hasReduce ? buttons[0] : null;
+		const reduce = args.__hasReduce ? buttons[0] : null;
-		const back = buttons[args._hasReduce ? 1 : 0];
+		const back = buttons[args.__hasReduce ? 1 : 0];
 		if (reduce) {
 			await expect(reduce).toBeInTheDocument();
-			await expect(reduce.textContent).toBe(
+			await expect(reduce).toHaveTextContent(
 				i18n.ts._ad.reduceFrequencyOfThisAd
 			);
 		}
 		await expect(back).toBeInTheDocument();
-		await expect(back.textContent).toBe(i18n.ts._ad.back);
+		await expect(back).toHaveTextContent(i18n.ts._ad.back);
 		await userEvent.click(back);
 		if (reduce) {
 			await expect(reduce).not.toBeInTheDocument();
@@ -75,7 +75,7 @@ const common = {
 			radio: 1,
 			url: '#test',
 		},
-		_hasReduce: true,
+		__hasReduce: true,
 	},
 	parameters: {
 		layout: 'centered',
@@ -125,6 +125,6 @@ export const ZeroRatio = {
 			...Square.args.specify,
 			ratio: 0,
 		},
-		_hasReduce: false,
+		__hasReduce: false,
 	},
 };

packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MkCustomEmoji from './MkCustomEmoji.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkCustomEmoji,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCustomEmoji v-bind="props" />',
+		};
+	},
+	args: {
+		name: 'mi',
+		url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkCustomEmoji>;
+export const Normal = {
+	...Default,
+	args: {
+		...Default.args,
+		normal: true,
+	},
+};
+export const Missing = {
+	...Default,
+	args: {
+		name: Default.args.name,
+	},
+};

packages/frontend/src/components/global/MkCustomEmoji.stories.ts

@@ -1,11 +1,15 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta } from '@storybook/vue3';
-import MkCustomEmoji from './MkCustomEmoji.vue';
 const meta = {
 	title: 'components/global/MkCustomEmoji',
 	component: MkCustomEmoji,
 } satisfies Meta<typeof MkCustomEmoji>;
+export default meta;
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MkCustomEmoji from './MkCustomEmoji.vue';
 export const Default = {
 	render(args) {
 		return {
@@ -27,8 +31,24 @@ export const Default = {
 			template: '<MkCustomEmoji v-bind="props" />',
 		};
 	},
+	args: {
+		name: 'mi',
+		url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+	},
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkCustomEmoji>;
-export default meta;
+export const Normal = {
+	...Default,
+	args: {
+		...Default.args,
+		normal: true,
+	},
+};
+export const Missing = {
+	...Default,
+	args: {
+		name: Default.args.name,
+	},
+};

packages/frontend/src/components/global/MkEmoji.stories.impl.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MkEmoji from './MkEmoji.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkEmoji,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEmoji v-bind="props" />',
+		};
+	},
+	args: {
+		emoji: '❤',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkEmoji>;

packages/frontend/src/components/global/MkEmoji.stories.ts

@@ -1,11 +1,15 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta } from '@storybook/vue3';
-import MkEmoji from './MkEmoji.vue';
 const meta = {
 	title: 'components/global/MkEmoji',
 	component: MkEmoji,
 } satisfies Meta<typeof MkEmoji>;
+export default meta;
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MkEmoji from './MkEmoji.vue';
 export const Default = {
 	render(args) {
 		return {
@@ -27,8 +31,10 @@ export const Default = {
 			template: '<MkEmoji v-bind="props" />',
 		};
 	},
+	args: {
+		emoji: '❤',
+	},
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkEmoji>;
-export default meta;

packages/frontend/src/components/global/MkError.stories.meta.ts

@@ -0,0 +1,5 @@
+export const argTypes = {
+	retry: {
+		action: 'retry',
+	},
+}

packages/frontend/src/components/global/MkError.stories.ts

@@ -2,9 +2,11 @@
 /* eslint-disable import/no-default-export */
 import { Meta, StoryObj } from '@storybook/vue3';
 import MkError from './MkError.vue';
+import * as storiesMeta from './MkError.stories.meta';
 const meta = {
 	title: 'components/global/MkError',
 	component: MkError,
+	...storiesMeta,
 } satisfies Meta<typeof MkError>;
 export const Default = {
 	render(args) {

packages/frontend/src/components/global/MkError.vue

@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? '_transition_zoom' : ''" appear>
+<Transition :name="animation ? '_transition_zoom' : ''" appear>
 	<div :class="$style.root">
 		<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
@@ -11,7 +11,9 @@
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
+const animation = $ref(defaultStore.reactiveState.animation);
 const emit = defineEmits<{
 	(ev: 'retry'): void;
 }>();