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 2329165.

* chore: do not reuse build dir

* build: scripts

* ci: tweak

* revert: re-revert debug

This reverts commit 596ef05.

* chore: detect changes manually

* fix: syntax

* ci: do not use only-changed

* ci: fix command

* revert: re-re-revert debug

This reverts commit b027170.

* ci: use build dir

* revert: re-re-re-revert debug

This reverts commit 529ab12.

* ci: fix path

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

This reverts commit 0b0c0b9.

* ci: fix typo

* ci: only show story files

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

This reverts commit 9f5b88d.

* ci: skip when no stories found

* ci: use skip

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

This reverts commit 0df4bdc.

* ci: fix micromatch version

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

This reverts commit 63063b0.

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

This reverts commit 01d9669.

* chore: pin tabler icon width globally

* ci: notify when Chromatic skips

* ci: fix endpoint

---------

Co-authored-by: syuilo <[email protected]>

.github/workflows/storybook.yml

@@ -2,17 +2,16 @@ name: Storybook
 
 on:
   push:
-    branches:
-      - master
-      - develop
-  pull_request:
     branches-ignore:
       - l10n_develop
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
+    env:
+      NODE_OPTIONS: "--max_old_space_size=7168"
+
     steps:
     - uses: actions/[email protected]
       with:
@@ -36,21 +35,34 @@ jobs:
       run: pnpm --filter misskey-js build
     - name: Build storybook
       run: pnpm --filter frontend build-storybook
+    - name: Publish to Chromatic
+      if: github.ref == 'refs/heads/master'
+      run: pnpm --filter frontend chromatic --exit-once-uploaded -d storybook-static
       env:
-        NODE_OPTIONS: "--max_old_space_size=7168"
+        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
     - name: Publish to Chromatic
+      if: github.ref != 'refs/heads/master'
       id: chromatic
-      uses: chromaui/action@v1
-      with:
-        exitOnceUploaded: true
-        projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-        storybookBuildDir: storybook-static
-        workingDir: packages/frontend
-    - name: Compare on Chromatic
-      if: github.event_name == 'pull_request_target'
-      run: pnpm --filter frontend chromatic -d storybook-static --exit-once-uploaded --patch-build ${{ github.head_ref }}...${{ github.base_ref }}
+      run: |
+        CHROMATIC_PARAMETER="$(node packages/frontend/.storybook/changes.js $(git diff-tree --no-commit-id --name-only -r ${{ github.event.before }} HEAD | xargs))"
+        if [ "$CHROMATIC_PARAMETER" = " --skip" ]; then
+          echo "skip=true" >> $GITHUB_OUTPUT
+        fi
+        pnpm --filter frontend chromatic --exit-once-uploaded -d storybook-static $(echo "$CHROMATIC_PARAMETER")
       env:
         CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    - name: Notify that Chromatic will skip testing
+      uses: actions/[email protected]
+      if: github.ref != 'refs/heads/master' && steps.chromatic.outputs.skip == 'true'
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          github.rest.repos.createCommitComment({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            commit_sha: context.sha,
+            body: 'Chromatic will skip testing but you may still have to [review the changes on Chromatic](https://www.chromatic.com/pullrequests?appId=6428f7d7b962f0b79f97d6e4).'
+          })
     - name: Upload Artifacts
       uses: actions/upload-artifact@v3
       with:

package.json

@@ -16,6 +16,7 @@
 	"scripts": {
 		"build-pre": "node ./scripts/build-pre.js",
 		"build": "pnpm build-pre && pnpm -r build && pnpm gulp",
+		"build-storybook": "pnpm --filter frontend build-storybook",
 		"start": "pnpm check:connect && cd packages/backend && node ./built/boot/index.js",
 		"start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/index.js",
 		"init": "pnpm migrate",

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"
+	]
 }

packages/frontend/package.json

@@ -98,6 +98,7 @@
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
 		"@types/matter-js": "0.18.2",
+		"@types/micromatch": "3.1.1",
 		"@types/node": "18.15.11",
 		"@types/punycode": "2.1.0",
 		"@types/sanitize-html": "2.9.0",
@@ -112,8 +113,8 @@
 		"@typescript-eslint/parser": "5.57.1",
 		"@vitest/coverage-c8": "^0.29.8",
 		"@vue/runtime-core": "3.2.47",
-		"astring": "^1.8.4",
-		"chokidar-cli": "^3.0.0",
+		"astring": "1.8.4",
+		"chokidar-cli": "3.0.0",
 		"chromatic": "6.17.3",
 		"cross-env": "7.0.3",
 		"cypress": "12.9.0",
@@ -122,6 +123,7 @@
 		"eslint-plugin-vue": "9.10.0",
 		"fast-glob": "3.2.12",
 		"happy-dom": "8.9.0",
+		"micromatch": "3.1.10",
 		"msw": "1.2.1",
 		"msw-storybook-addon": "1.8.0",
 		"prettier": "2.8.7",
@@ -131,6 +133,7 @@
 		"storybook": "7.0.2",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
+		"vite-plugin-turbosnap": "^1.0.1",
 		"vitest": "0.29.8",
 		"vitest-fetch-mock": "0.2.2",
 		"vue-eslint-parser": "9.1.1",

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

@@ -22,7 +22,7 @@ export const Default = {
 					};
 				},
 			},
-			template: '<MkA v-bind="props">Text</MkA>',
+			template: '<MkA v-bind="props">Misskey</MkA>',
 		};
 	},
 	async play({ canvasElement }) {

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

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { waitFor } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
 import MkPageHeader from './MkPageHeader.vue';
 export const Empty = {
@@ -22,16 +23,16 @@ export const Empty = {
 			template: '<MkPageHeader v-bind="props" />',
 		};
 	},
+	async play() {
+		const wait = new Promise((resolve) => setTimeout(resolve, 800));
+		await waitFor(async () => await wait);
+	},
 	args: {
 		static: true,
 		tabs: [],
 	},
 	parameters: {
 		layout: 'centered',
-		chromatic: {
-			/* This component has animations that are implemented with JavaScript. So it's unstable to take a snapshot. */
-			disableSnapshot: true,
-		},
 	},
 } satisfies StoryObj<typeof MkPageHeader>;
 export const OneTab = {

packages/frontend/src/style.scss

@@ -127,6 +127,7 @@ hr {
 }
 
 .ti {
+	width: 1.28em;
 	vertical-align: -12%;
 	line-height: 1em;