test(#10336): add components/Mk[A-B].* stories

2023-04-04 22:15:17 +09:00 · 2023-04-04 22:15:17 +09:00 · 80161afc14
parent 31233467ac
commit 80161afc14
20 changed files with 562 additions and 100 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -245,7 +245,6 @@ You can override the default story by creating a impl story file (`MyComponent.s

 ```ts
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable import/no-duplicates */
 import { StoryObj } from '@storybook/vue3';
 import MyComponent from './MyComponent.vue';
 export const Default = {
--- a/packages/frontend/.storybook/fakes.ts
+++ b/packages/frontend/.storybook/fakes.ts
@ -1,54 +1,73 @@
 import type { entities } from 'misskey-js'

-export const userDetailed = {
-	id: 'someuserid',
-	username: 'miskist',
-	host: 'misskey-hub.net',
-	name: 'Misskey User',
-	onlineStatus: 'unknown',
-	avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
-	avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
-	emojis: [],
-	bannerBlurhash: 'eQA^IW^-MH8w9tE8I=S^o{$*R4RikXtSxutRozjEnNR.RQadoyozog',
-	bannerColor: '#000000',
-	bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
-	birthday: '2014-06-20',
-	createdAt: '2016-12-28T22:49:51.000Z',
-	description: 'I am a cool user!',
-	ffVisibility: 'public',
-	fields: [
-		{
-			name: 'Website',
-			value: 'https://misskey-hub.net',
-		},
-	],
-	followersCount: 1024,
-	followingCount: 16,
-	hasPendingFollowRequestFromYou: false,
-	hasPendingFollowRequestToYou: false,
-	isAdmin: false,
-	isBlocked: false,
-	isBlocking: false,
-	isBot: false,
-	isCat: false,
-	isFollowed: false,
-	isFollowing: false,
-	isLocked: false,
-	isModerator: false,
-	isMuted: false,
-	isSilenced: false,
-	isSuspended: false,
-	lang: 'en',
-	location: 'Fediverse',
-	notesCount: 65536,
-	pinnedNoteIds: [],
-	pinnedNotes: [],
-	pinnedPage: null,
-	pinnedPageId: null,
-	publicReactions: false,
-	securityKeys: false,
-	twoFactorEnabled: false,
-	updatedAt: null,
-	uri: null,
-	url: null,
-} satisfies entities.UserDetailed
+export function abuseUserReport() {
+	return {
+		id: 'someabusereportid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		comment: 'This user is a spammer!',
+		resolved: false,
+		reporterId: 'reporterid',
+		targetUserId: 'targetuserid',
+		assigneeId: 'assigneeid',
+		reporter: userDetailed('reporterid', 'reporter', 'misskey-hub.net', 'Reporter'),
+		targetUser: userDetailed('targetuserid', 'target', 'misskey-hub.net', 'Target'),
+		assignee: userDetailed('assigneeid', 'assignee', 'misskey-hub.net', 'Assignee'),
+		me: null,
+		forwarded: false,
+	};
+}
+
+export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed {
+	return {
+		id,
+		username,
+		host,
+		name,
+		onlineStatus: 'unknown',
+		avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+		avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
+		emojis: [],
+		bannerBlurhash: 'eQA^IW^-MH8w9tE8I=S^o{$*R4RikXtSxutRozjEnNR.RQadoyozog',
+		bannerColor: '#000000',
+		bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		birthday: '2014-06-20',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		description: 'I am a cool user!',
+		ffVisibility: 'public',
+		fields: [
+			{
+				name: 'Website',
+				value: 'https://misskey-hub.net',
+			},
+		],
+		followersCount: 1024,
+		followingCount: 16,
+		hasPendingFollowRequestFromYou: false,
+		hasPendingFollowRequestToYou: false,
+		isAdmin: false,
+		isBlocked: false,
+		isBlocking: false,
+		isBot: false,
+		isCat: false,
+		isFollowed: false,
+		isFollowing: false,
+		isLocked: false,
+		isModerator: false,
+		isMuted: false,
+		isSilenced: false,
+		isSuspended: false,
+		lang: 'en',
+		location: 'Fediverse',
+		notesCount: 65536,
+		pinnedNoteIds: [],
+		pinnedNotes: [],
+		pinnedPage: null,
+		pinnedPageId: null,
+		publicReactions: false,
+		securityKeys: false,
+		twoFactorEnabled: false,
+		updatedAt: null,
+		uri: null,
+		url: null,
+	};
+}
--- a/packages/frontend/.storybook/generate.tsx
+++ b/packages/frontend/.storybook/generate.tsx
@ -118,7 +118,7 @@ function toStories(component: string): string {
 				.replace(/[-.]|^(?=\d)/g, '_')
 				.replace(/(?<=^[^A-Z_]*$)/, '_')}
 		/> as estree.Identifier;
-	const parameters = (
+	const parameters =
 		<object-expression
 			properties={[
 				<property
@ -137,9 +137,8 @@ function toStories(component: string): string {
 					  ]
 					: []),
 			]}
-		/>
-	) as estree.ObjectExpression;
-	const program = (
+		/> as estree.ObjectExpression;
+	const program =
 		<program
 			body={[
 				<import-declaration
@ -379,11 +378,11 @@ function toStories(component: string): string {
 					declaration={(<identifier name='meta' />) as estree.Identifier}
 				/> as estree.ExportDefaultDeclaration,
 			]}
-		/>
-	) as estree.Program;
+		/> as estree.Program;
 	return format(
 		'/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' +
 			'/* eslint-disable import/no-default-export */\n' +
+			'/* eslint-disable import/no-duplicates */\n' +
 			generate(program, { generator }) +
 			(hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
 		{
@ -394,13 +393,13 @@ function toStories(component: string): string {
 	);
 }

-// glob('src/{components,pages,ui,widgets}/**/*.vue').then(
-glob('src/components/global/**/*.vue').then(
-	(components) =>
-		Promise.all(
-			components.map((component) => {
-				const stories = component.replace(/\.vue$/, '.stories.ts');
-				return writeFile(stories, toStories(component));
-			})
-		)
-);
+// glob('src/{components,pages,ui,widgets}/**/*.vue')
+Promise.all([
+	glob('src/components/global/*.vue'),
+	glob('src/components/Mk{A,B}*.vue'),
+])
+	.then((globs) => globs.flat())
+	.then((components) => Promise.all(components.map((component) => {
+		const stories = component.replace(/\.vue$/, '.stories.ts');
+		return writeFile(stories, toStories(component));
+	})));
--- a/packages/frontend/.storybook/mocks.ts
+++ b/packages/frontend/.storybook/mocks.ts
@ -8,6 +8,16 @@ export const onUnhandledRequest = ((req, print) => {
 }) satisfies SharedOptions['onUnhandledRequest'];

 export const commonHandlers = [
+	rest.get('/fluent-emoji/:codepoints.png', async (req, res, ctx) => {
+		const { codepoints } = req.params;
+		const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
+		return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
+	}),
+	rest.get('/fluent-emojis/:codepoints.png', async (req, res, ctx) => {
+		const { codepoints } = req.params;
+		const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
+		return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
+	}),
 	rest.get('/twemoji/:codepoints.svg', async (req, res, ctx) => {
 		const { codepoints } = req.params;
 		const value = await fetch(`https://unpkg.com/@discordapp/twemoji@14.1.2/dist/svg/${codepoints}.svg`).then((response) => response.blob());
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@ -74,23 +74,24 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
-		"@storybook/addon-essentials": "7.0.2",
-		"@storybook/addon-interactions": "7.0.2",
-		"@storybook/addon-links": "7.0.2",
-		"@storybook/addon-storysource": "7.0.2",
-		"@storybook/addons": "7.0.2",
-		"@storybook/blocks": "7.0.2",
-		"@storybook/core-events": "7.0.2",
-		"@storybook/jest": "0.1.0",
-		"@storybook/manager-api": "7.0.2",
-		"@storybook/preview-api": "7.0.2",
-		"@storybook/react": "7.0.2",
-		"@storybook/react-vite": "7.0.2",
-		"@storybook/testing-library": "0.0.14-next.1",
-		"@storybook/theming": "7.0.2",
-		"@storybook/types": "7.0.2",
-		"@storybook/vue3": "7.0.2",
-		"@storybook/vue3-vite": "7.0.2",
+		"@storybook/addon-actions": "^7.0.2",
+		"@storybook/addon-essentials": "^7.0.2",
+		"@storybook/addon-interactions": "^7.0.2",
+		"@storybook/addon-links": "^7.0.2",
+		"@storybook/addon-storysource": "^7.0.2",
+		"@storybook/addons": "^7.0.2",
+		"@storybook/blocks": "^7.0.2",
+		"@storybook/core-events": "^7.0.2",
+		"@storybook/jest": "~0.1.0",
+		"@storybook/manager-api": "^7.0.2",
+		"@storybook/preview-api": "^7.0.2",
+		"@storybook/react": "^7.0.2",
+		"@storybook/react-vite": "^7.0.2",
+		"@storybook/testing-library": "~0.0.14-next.1",
+		"@storybook/theming": "^7.0.2",
+		"@storybook/types": "^7.0.2",
+		"@storybook/vue3": "^7.0.2",
+		"@storybook/vue3-vite": "^7.0.2",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/vue": "^6.6.1",
 		"@types/escape-regexp": "0.0.1",
@ -128,7 +129,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"start-server-and-test": "2.0.0",
-		"storybook": "7.0.2",
+		"storybook": "^7.0.2",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vitest": "^0.29.8",
--- a/packages/frontend/src/components/MkAbuseReport.stories.impl.ts
+++ b/packages/frontend/src/components/MkAbuseReport.stories.impl.ts
@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { abuseUserReport } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAbuseReport from './MkAbuseReport.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAbuseReport,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						resolved: action('resolved'),
+					};
+				},
+			},
+			template: '<MkAbuseReport v-bind="props" v-on="events" />',
+		};
+	},
+	args: {
+		report: abuseUserReport(),
+	},
+	parameters: {
+		layout: 'fullscreen',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/admin/resolve-abuse-user-report', async (req, res, ctx) => {
+					action('POST /api/admin/resolve-abuse-user-report')(await req.json());
+					return res(ctx.json({}));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAbuseReport>;
--- a/packages/frontend/src/components/MkAbuseReportWindow.stories.impl.ts
+++ b/packages/frontend/src/components/MkAbuseReportWindow.stories.impl.ts
@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAbuseReportWindow from './MkAbuseReportWindow.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAbuseReportWindow,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						'closed': action('closed'),
+					};
+				},
+			},
+			template: '<MkAbuseReportWindow v-bind="props" v-on="events" />',
+		};
+	},
+	args: {
+		user: userDetailed(),
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/report-abuse', async (req, res, ctx) => {
+					action('POST /api/users/report-abuse')(await req.json());
+					return res(ctx.json({}));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAbuseReportWindow>;
--- a/packages/frontend/src/components/MkAchievements.stories.impl.ts
+++ b/packages/frontend/src/components/MkAchievements.stories.impl.ts
@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAchievements from './MkAchievements.vue';
+import { ACHIEVEMENT_TYPES } from '@/scripts/achievements';
+export const Empty = {
+	render(args) {
+		return {
+			components: {
+				MkAchievements,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkAchievements v-bind="props" />',
+		};
+	},
+	args: {
+		user: userDetailed(),
+	},
+	parameters: {
+		layout: 'fullscreen',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/achievements', (req, res, ctx) => {
+					return res(ctx.json([]));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAchievements>;
+export const All = {
+	...Empty,
+	parameters: {
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/achievements', (req, res, ctx) => {
+					return res(ctx.json(ACHIEVEMENT_TYPES.map((name) => ({ name, unlockedAt: 0 }))));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAchievements>;
--- a/packages/frontend/src/components/MkAnalogClock.stories.impl.ts
+++ b/packages/frontend/src/components/MkAnalogClock.stories.impl.ts
@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { StoryObj } from '@storybook/vue3';
 import MkAnalogClock from './MkAnalogClock.vue';
+import isChromatic from 'chromatic';
 export const Default = {
 	render(args) {
 		return {
@ -22,6 +23,14 @@ export const Default = {
 			template: '<MkAnalogClock v-bind="props" />',
 		};
 	},
+	args: {
+		now: isChromatic() ? () => new Date('2023-01-01T10:10:30') : undefined,
+	},
+	decorators: [
+		() => ({
+			template: '<div style="container-type:inline-size;height:100%"><div style="height:100cqmin;margin:auto;width:100cqmin"><story/></div></div>',
+		}),
+	],
 	parameters: {
 		layout: 'fullscreen',
 	},
--- a/packages/frontend/src/components/MkAnalogClock.vue
+++ b/packages/frontend/src/components/MkAnalogClock.vue
@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
 	graduations?: 'none' | 'dots' | 'numbers';
 	fadeGraduations?: boolean;
 	sAnimation?: 'none' | 'elastic' | 'easeOut';
+	now?: () => Date;
 }>(), {
 	numbers: false,
 	thickness: 0.1,
@ -107,6 +108,7 @@ const props = withDefaults(defineProps<{
 	graduations: 'dots',
 	fadeGraduations: true,
 	sAnimation: 'elastic',
+	now: () => new Date(),
 });

 const graduationsMajor = computed(() => {
@ -145,11 +147,17 @@ let disableSAnimate = $ref(false);
 let sOneRound = false;

 function tick() {
-	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	const now = props.now();
+	now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + props.offset);
+	const previousS = s.value;
+	const previousM = m.value;
+	const previousH = h.value;
 	s = now.getSeconds();
 	m = now.getMinutes();
 	h = now.getHours();
+	if (previousS === s && previousM === m && previousH === h) {
+		return;
+	}
 	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
 	mAngle = Math.PI * (m + s / 60) / 30;
 	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
--- a/packages/frontend/src/components/MkAsUi.stories.impl.ts
+++ b/packages/frontend/src/components/MkAsUi.stories.impl.ts
@ -0,0 +1,2 @@
+import MkAsUi from './MkAsUi.vue';
+void MkAsUi;
--- a/packages/frontend/src/components/MkAutocomplete.stories.impl.ts
+++ b/packages/frontend/src/components/MkAutocomplete.stories.impl.ts
@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAutocomplete from './MkAutocomplete.vue';
+import MkInput from './MkInput.vue';
+const common = {
+	render(args) {
+		return {
+			components: {
+				MkAutocomplete,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						open: action('open'),
+						closed: action('closed'),
+					};
+				},
+			},
+			template: '<MkAutocomplete v-bind="props" v-on="events" :textarea="textarea" />',
+		};
+	},
+	args: {
+		close: action('close'),
+		x: 0,
+		y: 0,
+	},
+	decorators: [
+		(_, context) => ({
+			components: {
+				MkInput,
+			},
+			data() {
+				return {
+					q: context.args.q,
+					textarea: null,
+				};
+			},
+			methods: {
+				inputMounted() {
+					this.textarea = this.$refs.input.$refs.inputEl;
+				},
+			},
+			template: '<MkInput v-model="q" ref="input" @vue:mounted="inputMounted"/><story v-if="textarea" :q="q" :textarea="textarea"/>',
+		}),
+	],
+	parameters: {
+		controls: {
+			exclude: ['textarea'],
+		},
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAutocomplete>;
+export const User = {
+	...common,
+	args: {
+		...common.args,
+		type: 'user',
+		q: 'm',
+	},
+	parameters: {
+		...common.parameters,
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/search-by-username-and-host', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('44', 'mizuki', 'misskey-hub.net', 'Mizuki'),
+						userDetailed('49', 'momoko', 'misskey-hub.net', 'Momoko'),
+					]));
+				}),
+			],
+		},
+	},
+};
+export const Hashtag = {
+	...common,
+	args: {
+		...common.args,
+		type: 'hashtag',
+		q: '気象',
+	},
+	parameters: {
+		...common.parameters,
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/hashtags/search', (req, res, ctx) => {
+					return res(ctx.json([
+						'気象警報注意報',
+						'気象警報',
+						'気象情報',
+					]));
+				}),
+			],
+		},
+	},
+};
+export const Emoji = {
+	...common,
+	args: {
+		...common.args,
+		type: 'emoji',
+		q: 'smile',
+	},
+} satisfies StoryObj<typeof MkAutocomplete>;
+export const MfmTag = {
+	...common,
+	args: {
+		...common.args,
+		type: 'mfmTag',
+	},
+} satisfies StoryObj<typeof MkAutocomplete>;
--- a/packages/frontend/src/components/MkAvatars.stories.impl.ts
+++ b/packages/frontend/src/components/MkAvatars.stories.impl.ts
@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAvatars from './MkAvatars.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAvatars,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkAvatars v-bind="props" />',
+		};
+	},
+	args: {
+		userIds: ['17', '20', '18'],
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/show', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('17'),
+						userDetailed('20'),
+						userDetailed('18'),
+					]));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAvatars>;
--- a/packages/frontend/src/components/MkButton.stories.impl.ts
+++ b/packages/frontend/src/components/MkButton.stories.impl.ts
@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-/* eslint-disable import/no-duplicates */
+import { action } from '@storybook/addon-actions';
 import { StoryObj } from '@storybook/vue3';
 import MkButton from './MkButton.vue';
 export const Default = {
@ -20,11 +20,60 @@ export const Default = {
 						...this.args,
 					};
 				},
+				events() {
+					return {
+						click: action('click'),
+					};
+				},
 			},
-			template: '<MkButton v-bind="props">Text</MkButton>',
+			template: '<MkButton v-bind="props" v-on="events">Text</MkButton>',
 		};
 	},
+	args: {
+	},
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkButton>;
+export const Primary = {
+	...Default,
+	args: {
+		...Default.args,
+		primary: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Gradate = {
+	...Default,
+	args: {
+		...Default.args,
+		gradate: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Rounded = {
+	...Default,
+	args: {
+		...Default.args,
+		rounded: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Danger = {
+	...Default,
+	args: {
+		...Default.args,
+		danger: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Small = {
+	...Default,
+	args: {
+		...Default.args,
+		small: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Large = {
+	...Default,
+	args: {
+		...Default.args,
+		large: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
--- a/packages/frontend/src/components/global/MkAcct.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAcct.stories.impl.ts
@ -25,7 +25,7 @@ export const Default = {
 	},
 	args: {
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			host: null,
 		},
 	},
@ -37,7 +37,7 @@ export const Detail = {
 	...Default,
 	args: {
 		...Default.args,
-		user: userDetailed,
+		user: userDetailed(),
 		detail: true,
 	},
 } satisfies StoryObj<typeof MkAcct>;
--- a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts
@ -24,7 +24,7 @@ const common = {
 		};
 	},
 	args: {
-		user: userDetailed,
+		user: userDetailed(),
 	},
 	decorators: [
 		(Story, context) => ({
@ -49,7 +49,7 @@ export const ProfilePageCat = {
 	args: {
 		...ProfilePage.args,
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			isCat: true,
 		},
 	},
--- a/packages/frontend/src/components/global/MkError.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkError.stories.impl.ts
@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { StoryObj } from '@storybook/vue3';
+import MkError from './MkError.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkError,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						retry: action('retry'),
+					};
+				},
+			},
+			template: '<MkError v-bind="props" v-on="events" />',
+		};
+	},
+	args: {
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkError>;
--- a/packages/frontend/src/components/global/MkTime.vue
+++ b/packages/frontend/src/components/global/MkTime.vue
@ -8,6 +8,7 @@
 </template>

 <script lang="ts" setup>
+import isChromatic from 'chromatic/isChromatic';
 import { onUnmounted } from 'vue';
 import { i18n } from '@/i18n';
 import { dateTimeFormat } from '@/scripts/intl-const';
@ -17,7 +18,7 @@ const props = withDefaults(defineProps<{
 	origin?: Date | null;
 	mode?: 'relative' | 'absolute' | 'detail';
 }>(), {
-	origin: null,
+	origin: isChromatic() ? new Date('2023-04-01T00:00:00Z') : null,
 	mode: 'relative',
 });

--- a/packages/frontend/src/components/global/MkUserName.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkUserName.stories.impl.ts
@ -26,10 +26,10 @@ export const Default = {
 		};
 	},
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed.name);
+		await expect(canvasElement).toHaveTextContent(userDetailed().name);
 	},
 	args: {
-		user: userDetailed,
+		user: userDetailed(),
 	},
 	parameters: {
 		layout: 'centered',
@ -38,12 +38,12 @@ export const Default = {
 export const Anonymous = {
 	...Default,
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed.username);
+		await expect(canvasElement).toHaveTextContent(userDetailed().username);
 	},
 	args: {
 		...Default.args,
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			name: null,
 		},
 	},
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -763,6 +763,9 @@ importers:
        specifier: next
        version: 4.1.0(vue@3.2.47)
    devDependencies:
+      '@storybook/addon-actions':
+        specifier: ^7.0.2
+        version: 7.0.2(react-dom@18.2.0)(react@18.2.0)
      '@storybook/addon-essentials':
        specifier: 7.0.2
        version: 7.0.2(react-dom@18.2.0)(react@18.2.0)