ci(#10336): stabilize

.github/workflows/storybook.yml

@@ -35,6 +35,10 @@ jobs:
       run: pnpm --filter frontend build-storybook
       env:
         NODE_OPTIONS: "--max_old_space_size=7168"
+    - name: Publish to Chromatic
+      run: "pnpm --filter frontend chromatic -d storybook-static || :"
+      env:
+        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
     - name: Upload Artifacts
       uses: actions/upload-artifact@v3
       with:

packages/frontend/.storybook/fakes.ts

@@ -3,7 +3,7 @@ import type { entities } from 'misskey-js'
 export const userDetailed = {
 	id: 'someuserid',
 	username: 'miskist',
-	host: null,
+	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',

packages/frontend/package.json

@@ -6,6 +6,7 @@
 		"build": "vite build",
 		"storybook-dev": "chokidar 'src/**/*.{mdx,ts,vue}' -d 1000 -t 1000 --initial -i '**/*.stories.ts' -c 'pkill -f node_modules/storybook/index.js; node_modules/.bin/tsc -p .storybook && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js && node_modules/.bin/storybook dev -p 6006 --ci'",
 		"build-storybook": "node_modules/.bin/tsc -p .storybook && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js && node_modules/.bin/storybook build",
+		"chromatic": "chromatic",
 		"test": "vitest --run",
 		"test-and-coverage": "vitest --run --coverage",
 		"typecheck": "vue-tsc --noEmit",

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

@@ -24,7 +24,10 @@ export const Default = {
 		};
 	},
 	args: {
-		user: userDetailed,
+		user: {
+			...userDetailed,
+			host: null,
+		},
 	},
 	parameters: {
 		layout: 'centered',
@@ -34,6 +37,7 @@ export const Detail = {
 	...Default,
 	args: {
 		...Default.args,
+		user: userDetailed,
 		detail: true,
 	},
 } satisfies StoryObj<typeof MkAcct>;

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

@@ -44,9 +44,6 @@ export const ProfilePage = {
 		indicator: true,
 	},
 } satisfies StoryObj<typeof MkAvatar>;
-/* Your story couldn’t be captured because it exceeds our 25,000,000px limit. Its dimensions are 5,504,893x5,504,892px. Possible ways to resolve:
- * * Separate pages into components
- * * Minimize the number of very large elements in a story
 export const ProfilePageCat = {
 	...ProfilePage,
 	args: {
@@ -56,5 +53,13 @@ export const ProfilePageCat = {
 			isCat: true,
 		},
 	},
+	parameters: {
+		chromatic: {
+			/* Your story couldn’t be captured because it exceeds our 25,000,000px limit. Its dimensions are 5,504,893x5,504,892px. Possible ways to resolve:
+			 * * Separate pages into components
+			 * * Minimize the number of very large elements in a story
+			 */
+			disableSnapshot: true,
+		},
+	},
 } satisfies StoryObj<typeof MkAvatar>;
- */

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

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

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

@@ -1,9 +1,19 @@
 <template>
-<span :class="$style.root">
+<span :class="[$style.root, { [$style.static]: static }]">
 	<span :class="$style.dot">.</span><span :class="$style.dot">.</span><span :class="$style.dot">.</span>
 </span>
 </template>
 
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = withDefaults(defineProps<{
+	static?: boolean;
+}>(), {
+	static: false,
+});
+</script>
+
 <style lang="scss" module>
 @keyframes ellipsis {
 	0%, 80%, 100% {
@@ -15,7 +25,9 @@
 }
 
 .root {
-	
+	&.static > .dot {
+		animation-play-state: paused;
+	}
 }
 
 .dot {

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { StoryObj } from '@storybook/vue3';
+import isChromatic from 'chromatic/isChromatic';
 import MkLoading from './MkLoading.vue';
 export const Default = {
 	render(args) {
@@ -23,7 +24,7 @@ export const Default = {
 		};
 	},
 	args: {
-		static: true,
+		static: isChromatic,
 	},
 	parameters: {
 		layout: 'centered',