diff options
Diffstat (limited to '')
9 files changed, 160 insertions, 14 deletions
diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx index b167f232e3..f7d0f6fc08 100644 --- a/packages/frontend/.storybook/generate.tsx +++ b/packages/frontend/.storybook/generate.tsx @@ -100,8 +100,10 @@ declare global { function toStories(component: string): string { const msw = `${component.slice(0, -'.vue'.length)}.msw`; const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`; + const metaStories = `${component.slice(0, -'.vue'.length)}.stories.meta`; const hasMsw = existsSync(`${msw}.ts`); const hasImplStories = existsSync(`${implStories}.ts`); + const hasMetaStories = existsSync(`${metaStories}.ts`); const base = basename(component); const dir = dirname(component); const literal = ( @@ -212,6 +214,24 @@ function toStories(component: string): string { /> ) as estree.ImportDeclaration, ]), + ...(hasMetaStories + ? [ + ( + <import-declaration + source={ + (<literal value={`./${basename(metaStories)}`} />) as estree.Literal + } + specifiers={[ + ( + <import-namespace-specifier + local={(<identifier name='storiesMeta' />) as estree.Identifier} + /> + ) as estree.ImportNamespaceSpecifier, + ]} + /> + ) as estree.ImportDeclaration, + ] + : []), ( <variable-declaration kind={'const' as const} @@ -248,6 +268,19 @@ function toStories(component: string): string { kind={'init' as const} /> ) as estree.Property, + ...(hasMetaStories + ? [ + ( + <spread-element + argument={ + ( + <identifier name='storiesMeta' /> + ) as estree.Identifier + } + /> + ) as estree.SpreadElement, + ] + : []) ]} /> ) as estree.ObjectExpression diff --git a/packages/frontend/src/components/global/MkAd.stories.ts b/packages/frontend/src/components/global/MkAd.stories.ts index 23afa7c366..d852b911ee 100644 --- a/packages/frontend/src/components/global/MkAd.stories.ts +++ b/packages/frontend/src/components/global/MkAd.stories.ts @@ -47,17 +47,17 @@ const common = { await expect(a).not.toBeInTheDocument(); await expect(i).not.toBeInTheDocument(); buttons = canvas.getAllByRole<HTMLButtonElement>('button'); - await expect(buttons).toHaveLength(args._hasReduce ? 2 : 1); - const reduce = args._hasReduce ? buttons[0] : null; - const back = buttons[args._hasReduce ? 1 : 0]; + await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1); + const reduce = args.__hasReduce ? buttons[0] : null; + const back = buttons[args.__hasReduce ? 1 : 0]; if (reduce) { await expect(reduce).toBeInTheDocument(); - await expect(reduce.textContent).toBe( + await expect(reduce).toHaveTextContent( i18n.ts._ad.reduceFrequencyOfThisAd ); } await expect(back).toBeInTheDocument(); - await expect(back.textContent).toBe(i18n.ts._ad.back); + await expect(back).toHaveTextContent(i18n.ts._ad.back); await userEvent.click(back); if (reduce) { await expect(reduce).not.toBeInTheDocument(); @@ -75,7 +75,7 @@ const common = { radio: 1, url: '#test', }, - _hasReduce: true, + __hasReduce: true, }, parameters: { layout: 'centered', @@ -125,6 +125,6 @@ export const ZeroRatio = { ...Square.args.specify, ratio: 0, }, - _hasReduce: false, + __hasReduce: false, }, }; diff --git a/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts b/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts new file mode 100644 index 0000000000..b31b303e7f --- /dev/null +++ b/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts @@ -0,0 +1,46 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkCustomEmoji from './MkCustomEmoji.vue'; +export const Default = { + render(args) { + return { + components: { + MkCustomEmoji, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkCustomEmoji v-bind="props" />', + }; + }, + args: { + name: 'mi', + url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkCustomEmoji>; +export const Normal = { + ...Default, + args: { + ...Default.args, + normal: true, + }, +}; +export const Missing = { + ...Default, + args: { + name: Default.args.name, + }, +}; diff --git a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts index 76c70b9aba..5624eef5b1 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts +++ b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts @@ -1,11 +1,15 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable import/no-default-export */ -import { Meta, StoryObj } from '@storybook/vue3'; -import MkCustomEmoji from './MkCustomEmoji.vue'; +import { Meta } from '@storybook/vue3'; const meta = { title: 'components/global/MkCustomEmoji', component: MkCustomEmoji, } satisfies Meta<typeof MkCustomEmoji>; +export default meta; +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkCustomEmoji from './MkCustomEmoji.vue'; export const Default = { render(args) { return { @@ -27,8 +31,24 @@ export const Default = { template: '<MkCustomEmoji v-bind="props" />', }; }, + args: { + name: 'mi', + url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', + }, parameters: { layout: 'centered', }, } satisfies StoryObj<typeof MkCustomEmoji>; -export default meta; +export const Normal = { + ...Default, + args: { + ...Default.args, + normal: true, + }, +}; +export const Missing = { + ...Default, + args: { + name: Default.args.name, + }, +}; diff --git a/packages/frontend/src/components/global/MkEmoji.stories.impl.ts b/packages/frontend/src/components/global/MkEmoji.stories.impl.ts new file mode 100644 index 0000000000..53adf646ff --- /dev/null +++ b/packages/frontend/src/components/global/MkEmoji.stories.impl.ts @@ -0,0 +1,32 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkEmoji from './MkEmoji.vue'; +export const Default = { + render(args) { + return { + components: { + MkEmoji, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkEmoji v-bind="props" />', + }; + }, + args: { + emoji: '❤', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkEmoji>; diff --git a/packages/frontend/src/components/global/MkEmoji.stories.ts b/packages/frontend/src/components/global/MkEmoji.stories.ts index cca084e2db..e3e81a76ab 100644 --- a/packages/frontend/src/components/global/MkEmoji.stories.ts +++ b/packages/frontend/src/components/global/MkEmoji.stories.ts @@ -1,11 +1,15 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable import/no-default-export */ -import { Meta, StoryObj } from '@storybook/vue3'; -import MkEmoji from './MkEmoji.vue'; +import { Meta } from '@storybook/vue3'; const meta = { title: 'components/global/MkEmoji', component: MkEmoji, } satisfies Meta<typeof MkEmoji>; +export default meta; +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkEmoji from './MkEmoji.vue'; export const Default = { render(args) { return { @@ -27,8 +31,10 @@ export const Default = { template: '<MkEmoji v-bind="props" />', }; }, + args: { + emoji: '❤', + }, parameters: { layout: 'centered', }, } satisfies StoryObj<typeof MkEmoji>; -export default meta; diff --git a/packages/frontend/src/components/global/MkError.stories.meta.ts b/packages/frontend/src/components/global/MkError.stories.meta.ts new file mode 100644 index 0000000000..7c94421963 --- /dev/null +++ b/packages/frontend/src/components/global/MkError.stories.meta.ts @@ -0,0 +1,5 @@ +export const argTypes = { + retry: { + action: 'retry', + }, +} diff --git a/packages/frontend/src/components/global/MkError.stories.ts b/packages/frontend/src/components/global/MkError.stories.ts index ce7f40f56d..274117f950 100644 --- a/packages/frontend/src/components/global/MkError.stories.ts +++ b/packages/frontend/src/components/global/MkError.stories.ts @@ -2,9 +2,11 @@ /* eslint-disable import/no-default-export */ import { Meta, StoryObj } from '@storybook/vue3'; import MkError from './MkError.vue'; +import * as storiesMeta from './MkError.stories.meta'; const meta = { title: 'components/global/MkError', component: MkError, + ...storiesMeta, } satisfies Meta<typeof MkError>; export const Default = { render(args) { diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue index 7390a9dfb9..bb3dc82cb4 100644 --- a/packages/frontend/src/components/global/MkError.vue +++ b/packages/frontend/src/components/global/MkError.vue @@ -1,5 +1,5 @@ <template> -<Transition :name="$store.state.animation ? '_transition_zoom' : ''" appear> +<Transition :name="animation ? '_transition_zoom' : ''" appear> <div :class="$style.root"> <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p> @@ -11,7 +11,9 @@ <script lang="ts" setup> import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; +import { defaultStore } from '@/store'; +const animation = $ref(defaultStore.reactiveState.animation); const emit = defineEmits<{ (ev: 'retry'): void; }>(); |