diff options
Diffstat (limited to 'packages/frontend/src/components/global')
19 files changed, 365 insertions, 57 deletions
diff --git a/packages/frontend/src/components/global/MkA.stories.ts b/packages/frontend/src/components/global/MkA.stories.ts index e3d56c63c3..91ea368263 100644 --- a/packages/frontend/src/components/global/MkA.stories.ts +++ b/packages/frontend/src/components/global/MkA.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkA, } satisfies Meta<typeof MkA>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkA, }, - props: Object.keys(argTypes), - template: '<MkA v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkA v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkAcct.stories.ts b/packages/frontend/src/components/global/MkAcct.stories.ts index a710c227a0..90f66bc182 100644 --- a/packages/frontend/src/components/global/MkAcct.stories.ts +++ b/packages/frontend/src/components/global/MkAcct.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkAcct, } satisfies Meta<typeof MkAcct>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkAcct, }, - props: Object.keys(argTypes), - template: '<MkAcct v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkAcct v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkAd.stories.ts b/packages/frontend/src/components/global/MkAd.stories.ts index 687bf30ab5..9f4dc320ba 100644 --- a/packages/frontend/src/components/global/MkAd.stories.ts +++ b/packages/frontend/src/components/global/MkAd.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkAd, } satisfies Meta<typeof MkAd>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkAd, }, - props: Object.keys(argTypes), - template: '<MkAd v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkAd v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts new file mode 100644 index 0000000000..ca3db80b2e --- /dev/null +++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts @@ -0,0 +1,64 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkAvatar from './MkAvatar.vue'; +export const Default = { + render(args) { + return { + components: { + MkAvatar, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkAvatar v-bind="props" />', + }; + }, + args: { + size: 48, + user: { + avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', + }, + }, + decorators: [ + (Story, context) => ({ + // eslint-disable-next-line quotes + template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`, + }), + ], + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkAvatar>; +export const ProfilePage = { + ...Default, + args: { + ...Default.args, + size: 120, + indicator: true, + user: { + ...Default.args.user, + onlineStatus: 'unknown', + }, + }, +}; +export const ProfilePageCat = { + ...ProfilePage, + args: { + ...ProfilePage.args, + user: { + ...ProfilePage.args.user, + isCat: true, + }, + }, +}; diff --git a/packages/frontend/src/components/global/MkAvatar.stories.ts b/packages/frontend/src/components/global/MkAvatar.stories.ts index 644a1f2f34..6cd9ca0a9b 100644 --- a/packages/frontend/src/components/global/MkAvatar.stories.ts +++ b/packages/frontend/src/components/global/MkAvatar.stories.ts @@ -1,23 +1,80 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable import/no-default-export */ -import { Meta, StoryObj } from '@storybook/vue3'; -import MkAvatar from './MkAvatar.vue'; +import { Meta } from '@storybook/vue3'; const meta = { title: 'components/global/MkAvatar', component: MkAvatar, } satisfies Meta<typeof MkAvatar>; +export default meta; +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkAvatar from './MkAvatar.vue'; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkAvatar, }, - props: Object.keys(argTypes), - template: '<MkAvatar v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkAvatar v-bind="props" />', }; }, + args: { + size: 48, + user: { + avatarUrl: + 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', + }, + }, + decorators: [ + (Story, context) => ({ + // eslint-disable-next-line quotes + template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`, + }), + ], parameters: { layout: 'centered', }, } satisfies StoryObj<typeof MkAvatar>; -export default meta; +export const ProfilePage = { + ...Default, + args: { + ...Default.args, + size: 120, + indicator: true, + user: { + ...Default.args.user, + onlineStatus: 'unknown', + }, + }, +}; +export const ProfilePageCat = { + ...ProfilePage, + args: { + ...ProfilePage.args, + user: { + ...ProfilePage.args.user, + isCat: true, + // avatarUrl: 'https://millionlive-theaterdays.idolmaster-official.jp/assets/data/webp/common/footer/icon_app.png.webp', + // avatarUrl: 'https://cdn.imastodon.net/accounts/avatars/000/144/021/original/8137afa4114ab85f.png', + // avatarUrl: 'https://avatars.githubusercontent.com/u/4439005?v=4', + // avatarUrl: 'https://avatars.githubusercontent.com/u/7973572?v=4', + // avatarUrl: 'https://avatars.githubusercontent.com/u/6533808?v=4', + // avatarUrl: 'https://avatars.githubusercontent.com/u/7106976?v=4', + avatarUrl: 'https://avatars.githubusercontent.com/u/3396686?v=4', + }, + }, +}; diff --git a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts index cc9d4d668a..76c70b9aba 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts +++ b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkCustomEmoji, } satisfies Meta<typeof MkCustomEmoji>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkCustomEmoji, }, - props: Object.keys(argTypes), - template: '<MkCustomEmoji v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkCustomEmoji v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkEllipsis.stories.ts b/packages/frontend/src/components/global/MkEllipsis.stories.ts index cdae6b11b5..5b8b7ca062 100644 --- a/packages/frontend/src/components/global/MkEllipsis.stories.ts +++ b/packages/frontend/src/components/global/MkEllipsis.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkEllipsis, } satisfies Meta<typeof MkEllipsis>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkEllipsis, }, - props: Object.keys(argTypes), - template: '<MkEllipsis v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkEllipsis v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkEmoji.stories.ts b/packages/frontend/src/components/global/MkEmoji.stories.ts index 7c48937c7a..cca084e2db 100644 --- a/packages/frontend/src/components/global/MkEmoji.stories.ts +++ b/packages/frontend/src/components/global/MkEmoji.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkEmoji, } satisfies Meta<typeof MkEmoji>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkEmoji, }, - props: Object.keys(argTypes), - template: '<MkEmoji v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkEmoji v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkError.stories.ts b/packages/frontend/src/components/global/MkError.stories.ts index d04d57f01f..ce7f40f56d 100644 --- a/packages/frontend/src/components/global/MkError.stories.ts +++ b/packages/frontend/src/components/global/MkError.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkError, } satisfies Meta<typeof MkError>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkError, }, - props: Object.keys(argTypes), - template: '<MkError v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkError v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkLoading.stories.ts b/packages/frontend/src/components/global/MkLoading.stories.ts index 4fe0d4ff34..a83c41a0ea 100644 --- a/packages/frontend/src/components/global/MkLoading.stories.ts +++ b/packages/frontend/src/components/global/MkLoading.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkLoading, } satisfies Meta<typeof MkLoading>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkLoading, }, - props: Object.keys(argTypes), - template: '<MkLoading v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkLoading v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts index 23869d98e7..18407d188c 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkMisskeyFlavoredMarkdown, } satisfies Meta<typeof MkMisskeyFlavoredMarkdown>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkMisskeyFlavoredMarkdown, }, - props: Object.keys(argTypes), - template: '<MkMisskeyFlavoredMarkdown v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkMisskeyFlavoredMarkdown v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkPageHeader.stories.ts b/packages/frontend/src/components/global/MkPageHeader.stories.ts index aa7c5b5f8a..6f0b9dd344 100644 --- a/packages/frontend/src/components/global/MkPageHeader.stories.ts +++ b/packages/frontend/src/components/global/MkPageHeader.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkPageHeader, } satisfies Meta<typeof MkPageHeader>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkPageHeader, }, - props: Object.keys(argTypes), - template: '<MkPageHeader v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkPageHeader v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts index 0dfa7ab6e9..611aa01790 100644 --- a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts +++ b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkPageHeader_tabs, } satisfies Meta<typeof MkPageHeader_tabs>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkPageHeader_tabs, }, - props: Object.keys(argTypes), - template: '<MkPageHeader_tabs v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkPageHeader_tabs v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkSpacer.stories.ts b/packages/frontend/src/components/global/MkSpacer.stories.ts index 1ca0f7da95..f5e7b2eb9b 100644 --- a/packages/frontend/src/components/global/MkSpacer.stories.ts +++ b/packages/frontend/src/components/global/MkSpacer.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkSpacer, } satisfies Meta<typeof MkSpacer>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkSpacer, }, - props: Object.keys(argTypes), - template: '<MkSpacer v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkSpacer v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkStickyContainer.stories.ts b/packages/frontend/src/components/global/MkStickyContainer.stories.ts index cad5cd06fa..180fdddb1a 100644 --- a/packages/frontend/src/components/global/MkStickyContainer.stories.ts +++ b/packages/frontend/src/components/global/MkStickyContainer.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkStickyContainer, } satisfies Meta<typeof MkStickyContainer>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkStickyContainer, }, - props: Object.keys(argTypes), - template: '<MkStickyContainer v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkStickyContainer v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkTime.stories.ts b/packages/frontend/src/components/global/MkTime.stories.ts index c1d5fd6644..d45dc70f28 100644 --- a/packages/frontend/src/components/global/MkTime.stories.ts +++ b/packages/frontend/src/components/global/MkTime.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkTime, } satisfies Meta<typeof MkTime>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkTime, }, - props: Object.keys(argTypes), - template: '<MkTime v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkTime v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkUrl.stories.ts b/packages/frontend/src/components/global/MkUrl.stories.ts index 7e6c813ce0..e3b2c4ceba 100644 --- a/packages/frontend/src/components/global/MkUrl.stories.ts +++ b/packages/frontend/src/components/global/MkUrl.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkUrl, } satisfies Meta<typeof MkUrl>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkUrl, }, - props: Object.keys(argTypes), - template: '<MkUrl v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkUrl v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/MkUserName.stories.ts b/packages/frontend/src/components/global/MkUserName.stories.ts index 68deaa4fec..ec708c61c8 100644 --- a/packages/frontend/src/components/global/MkUserName.stories.ts +++ b/packages/frontend/src/components/global/MkUserName.stories.ts @@ -7,13 +7,24 @@ const meta = { component: MkUserName, } satisfies Meta<typeof MkUserName>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { MkUserName, }, - props: Object.keys(argTypes), - template: '<MkUserName v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<MkUserName v-bind="props" />', }; }, parameters: { diff --git a/packages/frontend/src/components/global/RouterView.stories.ts b/packages/frontend/src/components/global/RouterView.stories.ts index 45a574cf56..86e25b4757 100644 --- a/packages/frontend/src/components/global/RouterView.stories.ts +++ b/packages/frontend/src/components/global/RouterView.stories.ts @@ -7,13 +7,24 @@ const meta = { component: RouterView, } satisfies Meta<typeof RouterView>; export const Default = { - render(args, { argTypes }) { + render(args) { return { components: { RouterView, }, - props: Object.keys(argTypes), - template: '<RouterView v-bind="$props" />', + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '<RouterView v-bind="props" />', }; }, parameters: { |