ci(#10336): use TurboSnap (#10494)

* ci(#10336): use TurboSnap

* build: fix version

* ci(#10336): update build dir

* chore(#10336): fire changes

* chore: stabilize icon width on `PageHeader`

* chore: fire changes

* ci: invalid ignore

* ci: trace logs

* chore: debug

* revert: debug

This reverts commit 2329165e252640504ef17e97389e0460ada83e70.

* chore: do not reuse build dir

* build: scripts

* ci: tweak

* revert: re-revert debug

This reverts commit 596ef05d9eabe11c0ec3125fa4a87071d59b9b2f.

* chore: detect changes manually

* fix: syntax

* ci: do not use only-changed

* ci: fix command

* revert: re-re-revert debug

This reverts commit b027170d7504277006ce9abac386df8c38d55fd2.

* ci: use build dir

* revert: re-re-re-revert debug

This reverts commit 529ab126ed63ec10eeeaaee3e9ef581b75e739c9.

* ci: fix path

* revert: re-re-re-re-revert debug

This reverts commit 0b0c0b9ea48d37d617b777e9f602ccf8a2400381.

* ci: fix typo

* ci: only show story files

* revert: re-re-re-re-re-revert debug

This reverts commit 9f5b88df3225f23efd72bb099cfebe359af7acdb.

* ci: skip when no stories found

* ci: use skip

* revert: re-re-re-re-re-re-revert debug

This reverts commit 0df4bdc30bbf425c8682594d500a6d986517e721.

* ci: fix micromatch version

* revert: re-re-re-re-re-re-re-revert debug

This reverts commit 63063b02bbcb37e85b93afe3f919b185425ddcf0.

* revert: re-re-re-re-re-re-re-re-revert debug

This reverts commit 01d9669e2a2c758c478bad5379fe19768e2096bc.

* chore: pin tabler icon width globally

* ci: notify when Chromatic skips

* ci: fix endpoint

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

packages/frontend/.storybook/.gitignore

@@ -1,9 +1,7 @@
-# (cd path/to/frontend; pnpm tsc -p .storybook)
-# (cd path/to/frontend; node .storybook/generate.js)
+/changes.js
 /generate.js
-# (cd path/to/frontend; node .storybook/preload-locale.js)
 /preload-locale.js
 /locale.ts
-# (cd path/to/frontend; node .storybook/preload-theme.js)
+/main.js
 /preload-theme.js
 /themes.ts

packages/frontend/.storybook/changes.ts

@@ -0,0 +1,80 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import micromatch from 'micromatch';
+import main from './main';
+
+interface Stats {
+	readonly modules: readonly {
+		readonly id: string;
+		readonly name: string;
+		readonly reasons: readonly {
+			readonly moduleName: string;
+		}[];
+	}[];
+}
+
+fs.readFile(
+	path.resolve(__dirname, '../storybook-static/preview-stats.json')
+).then((buffer) => {
+	const stats: Stats = JSON.parse(buffer.toString());
+	const keys = new Set(stats.modules.map((stat) => stat.id));
+	const map = new Map(
+		Array.from(keys, (key) => [
+			key,
+			new Set(
+				stats.modules
+					.filter((stat) => stat.id === key)
+					.flatMap((stat) => stat.reasons)
+					.map((reason) => reason.moduleName)
+			),
+		])
+	);
+	const modules = new Set(
+		process.argv
+			.slice(2)
+			.map((arg) =>
+				path.relative(
+					path.resolve(__dirname, '..'),
+					path.resolve(__dirname, '../../..', arg)
+				)
+			)
+			.map((path) => (path.startsWith('.') ? path : `./${path}`))
+	);
+	if (
+		micromatch(Array.from(modules), [
+			'../../assets/**',
+			'../../fluent-emojis/**',
+			'../../locales/**',
+			'../../misskey-assets/**',
+			'assets/**',
+			'public/**',
+			'../../pnpm-lock.yaml',
+		]).length
+	) {
+		return;
+	}
+	for (;;) {
+		const oldSize = modules.size;
+		for (const module of Array.from(modules)) {
+			if (map.has(module)) {
+				for (const dependency of Array.from(map.get(module)!)) {
+					modules.add(dependency);
+				}
+			}
+		}
+		if (modules.size === oldSize) {
+			break;
+		}
+	}
+	const stories = micromatch(
+		Array.from(modules),
+		main.stories.map((story) => `./${path.relative('..', story)}`)
+	);
+	if (stories.length) {
+		for (const story of stories) {
+			process.stdout.write(` --only-story-files ${story}`);
+		}
+	} else {
+		process.stdout.write(` --skip`);
+	}
+});

packages/frontend/.storybook/main.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'node:path';
 import type { StorybookConfig } from '@storybook/vue3-vite';
 import { mergeConfig } from 'vite';
+import turbosnap from 'vite-plugin-turbosnap';
 const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: [
@@ -20,8 +21,13 @@ const config = {
 	core: {
 		disableTelemetry: true,
 	},
-	async viteFinal(config, options) {
+	async viteFinal(config) {
 		return mergeConfig(config, {
+			plugins: [
+				turbosnap({
+					rootDir: config.root ?? process.cwd(),
+				}),
+			],
 			build: {
 				target: [
 					'chrome108',

packages/frontend/.storybook/tsconfig.json

@@ -18,5 +18,10 @@
 		"jsx": "react",
 		"jsxFactory": "h"
 	},
-	"files": ["./generate.tsx", "./preload-locale.ts", "./preload-theme.ts"]
+	"files": [
+		"./changes.ts",
+		"./generate.tsx",
+		"./preload-locale.ts",
+		"./preload-theme.ts"
+	]
 }