From 388ecfb1ea01fb3983ded12c1d7a1fc977fc3d81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Sun, 2 Apr 2023 14:59:19 +0900 Subject: [PATCH] ci(#10336): stabilize --- .github/workflows/storybook.yml | 4 +++ packages/frontend/.storybook/fakes.ts | 2 +- packages/frontend/package.json | 1 + .../components/global/MkAcct.stories.impl.ts | 6 +++- .../global/MkAvatar.stories.impl.ts | 13 +++++--- .../global/MkEllipsis.stories.impl.ts | 32 +++++++++++++++++++ .../src/components/global/MkEllipsis.vue | 16 ++++++++-- .../global/MkLoading.stories.impl.ts | 3 +- 8 files changed, 68 insertions(+), 9 deletions(-) create mode 100644 packages/frontend/src/components/global/MkEllipsis.stories.impl.ts diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index a8871d979..42ecf148e 100644 --- a/.github/workflows/storybook.yml +++ b/.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: diff --git a/packages/frontend/.storybook/fakes.ts b/packages/frontend/.storybook/fakes.ts index e3146ecce..b620cf68a 100644 --- a/packages/frontend/.storybook/fakes.ts +++ b/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', diff --git a/packages/frontend/package.json b/packages/frontend/package.json index e7c33b225..3d88219c8 100644 --- a/packages/frontend/package.json +++ b/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", diff --git a/packages/frontend/src/components/global/MkAcct.stories.impl.ts b/packages/frontend/src/components/global/MkAcct.stories.impl.ts index 79d993dec..7dfa1a14f 100644 --- a/packages/frontend/src/components/global/MkAcct.stories.impl.ts +++ b/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; diff --git a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts index 2936664a8..6153f8129 100644 --- a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts @@ -44,9 +44,6 @@ export const ProfilePage = { indicator: true, }, } satisfies StoryObj; -/* 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; - */ diff --git a/packages/frontend/src/components/global/MkEllipsis.stories.impl.ts b/packages/frontend/src/components/global/MkEllipsis.stories.impl.ts new file mode 100644 index 000000000..4ed035aed --- /dev/null +++ b/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: '', + }; + }, + args: { + static: isChromatic, + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/global/MkEllipsis.vue b/packages/frontend/src/components/global/MkEllipsis.vue index b3cf69c07..c8f6cd339 100644 --- a/packages/frontend/src/components/global/MkEllipsis.vue +++ b/packages/frontend/src/components/global/MkEllipsis.vue @@ -1,9 +1,19 @@ + +