ci(#10336): stabilize
This commit is contained in:
parent
9982ead9e6
commit
388ecfb1ea
8 changed files with 68 additions and 9 deletions
4
.github/workflows/storybook.yml
vendored
4
.github/workflows/storybook.yml
vendored
|
@ -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:
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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>;
|
||||
*/
|
||||
|
|
|
@ -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>;
|
|
@ -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 {
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue