ci(#10336): stabilize

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',