From 671ce6a5319c1e62846a4531fc3327db0663f2ca 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: Sat, 1 Apr 2023 04:20:38 +0900 Subject: [PATCH] build(#10336): write some stories --- packages/frontend/.storybook/generate.tsx | 33 +++++++++++++ .../src/components/global/MkAd.stories.ts | 14 +++--- .../global/MkCustomEmoji.stories.impl.ts | 46 +++++++++++++++++++ .../global/MkCustomEmoji.stories.ts | 26 +++++++++-- .../components/global/MkEmoji.stories.impl.ts | 32 +++++++++++++ .../src/components/global/MkEmoji.stories.ts | 12 +++-- .../components/global/MkError.stories.meta.ts | 5 ++ .../src/components/global/MkError.stories.ts | 2 + .../src/components/global/MkError.vue | 4 +- 9 files changed, 160 insertions(+), 14 deletions(-) create mode 100644 packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkEmoji.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkError.stories.meta.ts diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx index b167f232e..f7d0f6fc0 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 + ? [ + ( + ) as estree.Literal + } + specifiers={[ + ( + ) as estree.Identifier} + /> + ) as estree.ImportNamespaceSpecifier, + ]} + /> + ) as estree.ImportDeclaration, + ] + : []), ( ) as estree.Property, + ...(hasMetaStories + ? [ + ( + + ) 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 23afa7c36..d852b911e 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('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 000000000..b31b303e7 --- /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: '', + }; + }, + 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; +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 76c70b9ab..5624eef5b 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; +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: '', }; }, + 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; -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 000000000..53adf646f --- /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: '', + }; + }, + args: { + emoji: '❤', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/global/MkEmoji.stories.ts b/packages/frontend/src/components/global/MkEmoji.stories.ts index cca084e2d..e3e81a76a 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; +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: '', }; }, + args: { + emoji: '❤', + }, parameters: { layout: 'centered', }, } satisfies StoryObj; -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 000000000..7c9442196 --- /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 ce7f40f56..274117f95 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; export const Default = { render(args) { diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue index 7390a9dfb..bb3dc82cb 100644 --- a/packages/frontend/src/components/global/MkError.vue +++ b/packages/frontend/src/components/global/MkError.vue @@ -1,5 +1,5 @@