[wip] add custom-emojis-manager2.stories.impl.ts

packages/frontend/.storybook/fake-utils.ts

@@ -83,13 +83,47 @@ export function choose<T>(array: T[]): T {
 }
 
 export function firstName(): string {
-	return firstNameDict[Math.floor(Math.random() * firstNameDict.length)];
+	return choose(firstNameDict);
 }
 
 export function lastName(): string {
-	return lastNameDict[Math.floor(Math.random() * lastNameDict.length)];
+	return choose(lastNameDict);
 }
 
 export function country(): string {
-	return countryDict[Math.floor(Math.random() * countryDict.length)];
+	return choose(countryDict);
+}
+
+export function imageDataUrl(options?: {
+	size?: {
+		width?: number,
+		height?: number,
+	},
+	color?: {
+		red?: number,
+		green?: number,
+		blue?: number,
+		alpha?: number,
+	}
+}): string {
+	const canvas = document.createElement('canvas');
+	canvas.width = options?.size?.width ?? 100;
+	canvas.height = options?.size?.height ?? 100;
+
+	const ctx = canvas.getContext('2d');
+	if (!ctx) {
+		throw new Error('Failed to get 2d context');
+	}
+
+	ctx.beginPath()
+
+	const red = options?.color?.red ?? integer(0, 255);
+	const green = options?.color?.green ?? integer(0, 255);
+	const blue = options?.color?.blue ?? integer(0, 255);
+	const alpha = options?.color?.alpha ?? 0;
+	ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2, true);
+	ctx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+	ctx.fill();
+
+	return canvas.toDataURL('image/png', 1.0);
 }

packages/frontend/.storybook/generate.tsx

@@ -413,6 +413,7 @@ function toStories(component: string): Promise<string> {
 		glob('src/components/MkRoleSelectDialog.vue'),
 		glob('src/components/grid/MkGrid.vue'),
 		glob('src/pages/user/home.vue'),
+		glob('src/pages/admin/custom-emojis-manager2.vue'),
 	]);
 	const components = globs.flat();
 	await Promise.all(components.map(async (component) => {

packages/frontend/src/pages/admin/custom-emojis-manager2.stories.impl.ts

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { delay, http, HttpResponse } from 'msw';
+import { StoryObj } from '@storybook/vue3';
+import { entities } from 'misskey-js';
+import { commonHandlers } from '../../../.storybook/mocks.js';
+import custom_emojis_manager2 from './custom-emojis-manager2.vue';
+
+function createRender(params: {
+	emojis: entities.EmojiDetailedAdmin[];
+}) {
+	return {
+		render(args) {
+			return {
+				components: {
+					custom_emojis_manager2,
+				},
+				setup() {
+					return {
+						args,
+					};
+				},
+				computed: {
+					props() {
+						return {
+							...this.args,
+						};
+					},
+				},
+				template: '<custom_emojis_manager2 v-bind="props" />',
+			};
+		},
+		args: {
+
+		},
+		parameters: {
+			layout: 'fullscreen',
+			msw: {
+				handlers: [
+					...commonHandlers,
+					http.post('/api/admin/emoji/v2/list', async (req) => {
+						await delay(100);
+						const body = req.body as entities.AdminEmojiV2ListRequest;
+
+						const emojis = params.emojis;
+						const limit = body.limit ?? 10;
+						const page = body.page ?? 1;
+						const result = emojis.slice((page - 1) * limit, page * limit);
+
+						return HttpResponse.json({
+							emojis: result,
+							count: Math.min(emojis.length, limit),
+							allCount: emojis.length,
+							allPages: Math.ceil(emojis.length / limit),
+						});
+					}),
+				],
+			},
+		},
+	} satisfies StoryObj<typeof custom_emojis_manager2>;
+}
+
+export const Default = createRender({
+	emojis: [],
+});