diff --git a/packages/frontend/.storybook/fakes.ts b/packages/frontend/.storybook/fakes.ts new file mode 100644 index 0000000000..e3146ecced --- /dev/null +++ b/packages/frontend/.storybook/fakes.ts @@ -0,0 +1,54 @@ +import type { entities } from 'misskey-js' + +export const userDetailed = { + id: 'someuserid', + username: 'miskist', + host: null, + name: 'Misskey User', + onlineStatus: 'unknown', + avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', + avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay', + emojis: [], + bannerBlurhash: 'eQA^IW^-MH8w9tE8I=S^o{$*R4RikXtSxutRozjEnNR.RQadoyozog', + bannerColor: '#000000', + bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true', + birthday: '2014-06-20', + createdAt: '2016-12-28T22:49:51.000Z', + description: 'I am a cool user!', + ffVisibility: 'public', + fields: [ + { + name: 'Website', + value: 'https://misskey-hub.net', + }, + ], + followersCount: 1024, + followingCount: 16, + hasPendingFollowRequestFromYou: false, + hasPendingFollowRequestToYou: false, + isAdmin: false, + isBlocked: false, + isBlocking: false, + isBot: false, + isCat: false, + isFollowed: false, + isFollowing: false, + isLocked: false, + isModerator: false, + isMuted: false, + isSilenced: false, + isSuspended: false, + lang: 'en', + location: 'Fediverse', + notesCount: 65536, + pinnedNoteIds: [], + pinnedNotes: [], + pinnedPage: null, + pinnedPageId: null, + publicReactions: false, + securityKeys: false, + twoFactorEnabled: false, + updatedAt: null, + uri: null, + url: null, +} satisfies entities.UserDetailed diff --git a/packages/frontend/.storybook/main.ts b/packages/frontend/.storybook/main.ts index b6b7a62726..eebaabe325 100644 --- a/packages/frontend/.storybook/main.ts +++ b/packages/frontend/.storybook/main.ts @@ -21,9 +21,6 @@ const config = { core: { disableTelemetry: true, }, - features: { - interactionsDebugger: true, - }, async viteFinal(config, options) { return mergeConfig(config, { plugins: [ diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 3d1a808538..a22870b3ee 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -76,7 +76,7 @@ "@storybook/addon-interactions": "7.0.0-rc.10", "@storybook/addon-links": "7.0.0-rc.10", "@storybook/addon-storysource": "7.0.0-rc.10", - "@storybook/addons": "7.0.0-rc.5", + "@storybook/addons": "7.0.0-rc.10", "@storybook/blocks": "7.0.0-rc.10", "@storybook/core-events": "7.0.0-rc.10", "@storybook/jest": "0.0.10", diff --git a/packages/frontend/src/components/global/MkAcct.stories.impl.ts b/packages/frontend/src/components/global/MkAcct.stories.impl.ts new file mode 100644 index 0000000000..3fce64c51d --- /dev/null +++ b/packages/frontend/src/components/global/MkAcct.stories.impl.ts @@ -0,0 +1,40 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import { userDetailed } from '../../../.storybook/fakes'; +import MkAcct from './MkAcct.vue'; +export const Default = { + render(args) { + return { + components: { + MkAcct, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...args, + }; + }, + }, + template: '', + }; + }, + args: { + user: userDetailed, + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; +export const Detail = { + ...Default, + args: { + ...Default.args, + detail: true, + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/global/MkAcct.stories.ts b/packages/frontend/src/components/global/MkAcct.stories.ts index 90f66bc182..adac7e0c3e 100644 --- a/packages/frontend/src/components/global/MkAcct.stories.ts +++ b/packages/frontend/src/components/global/MkAcct.stories.ts @@ -1,11 +1,16 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable import/no-default-export */ -import { Meta, StoryObj } from '@storybook/vue3'; -import MkAcct from './MkAcct.vue'; +import { Meta } from '@storybook/vue3'; const meta = { title: 'components/global/MkAcct', component: MkAcct, } satisfies Meta; +export default meta; +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import { userDetailed } from '../../../.storybook/fakes'; +import MkAcct from './MkAcct.vue'; export const Default = { render(args) { return { @@ -27,8 +32,17 @@ export const Default = { template: '', }; }, + args: { + user: userDetailed, + }, parameters: { layout: 'centered', }, } satisfies StoryObj; -export default meta; +export const Detail = { + ...Default, + args: { + ...Default.args, + detail: true, + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue index 2a43ded9e1..6d68072c07 100644 --- a/packages/frontend/src/components/global/MkAcct.vue +++ b/packages/frontend/src/components/global/MkAcct.vue @@ -1,7 +1,7 @@ @@ -9,6 +9,7 @@ import * as misskey from 'misskey-js'; import { toUnicode } from 'punycode/'; import { host as hostRaw } from '@/config'; +import { defaultStore } from '@/store'; defineProps<{ user: misskey.entities.UserDetailed; @@ -16,5 +17,5 @@ defineProps<{ }>(); const host = toUnicode(hostRaw); +const showFullAcct = $ref(defaultStore.state.showFullAcct); - diff --git a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts index 6de5768af8..e92db93bf5 100644 --- a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable import/no-duplicates */ import { StoryObj } from '@storybook/vue3'; +import { userDetailed } from '../../../.storybook/fakes'; import MkAvatar from './MkAvatar.vue'; export const Default = { render(args) { @@ -25,9 +26,7 @@ export const Default = { }, args: { size: 48, - user: { - avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', - }, + user: userDetailed, }, decorators: [ (Story, context) => ({ @@ -45,10 +44,6 @@ export const ProfilePage = { ...Default.args, size: 120, indicator: true, - user: { - ...Default.args.user, - onlineStatus: 'unknown', - }, }, }; export const ProfilePageCat = { @@ -56,7 +51,7 @@ export const ProfilePageCat = { args: { ...ProfilePage.args, user: { - ...ProfilePage.args.user, + ...userDetailed, isCat: true, }, }, diff --git a/packages/frontend/src/components/global/MkAvatar.stories.ts b/packages/frontend/src/components/global/MkAvatar.stories.ts index 4d819982ee..20ae0b23b4 100644 --- a/packages/frontend/src/components/global/MkAvatar.stories.ts +++ b/packages/frontend/src/components/global/MkAvatar.stories.ts @@ -9,6 +9,7 @@ export default meta; /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable import/no-duplicates */ import { StoryObj } from '@storybook/vue3'; +import { userDetailed } from '../../../.storybook/fakes'; import MkAvatar from './MkAvatar.vue'; export const Default = { render(args) { @@ -33,10 +34,7 @@ export const Default = { }, args: { size: 48, - user: { - avatarUrl: - 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true', - }, + user: userDetailed, }, decorators: [ (Story, context) => ({ @@ -54,10 +52,6 @@ export const ProfilePage = { ...Default.args, size: 120, indicator: true, - user: { - ...Default.args.user, - onlineStatus: 'unknown', - }, }, }; export const ProfilePageCat = { @@ -65,7 +59,7 @@ export const ProfilePageCat = { args: { ...ProfilePage.args, user: { - ...ProfilePage.args.user, + ...userDetailed, isCat: true, }, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6899bb0e13..79750eef2b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -779,8 +779,8 @@ importers: specifier: 7.0.0-rc.10 version: 7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0) '@storybook/addons': - specifier: 7.0.0-rc.5 - version: 7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0-rc.10 + version: 7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0) '@storybook/blocks': specifier: 7.0.0-rc.10 version: 7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0) @@ -5064,15 +5064,15 @@ packages: regenerator-runtime: 0.13.11 dev: true - /@storybook/addons@7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-KDSoMW/y39eAMbeSmwmYEiYu3KomabJCYdsfmD65i0DqwuOFrkG3im3wPkF3F88rZDuzWzVZMl3Z15n56uVXKA==} + /@storybook/addons@7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-3funGKp6w/uqrTl/0Vsz/oTMmOziSl+JEotjf0G5SBJfaa6gBaz2feddUcRl47I9MNfRYRV01m5a4bCR1QJnwQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@storybook/manager-api': 7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0) - '@storybook/preview-api': 7.0.0-rc.5 - '@storybook/types': 7.0.0-rc.5 + '@storybook/manager-api': 7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': 7.0.0-rc.10 + '@storybook/types': 7.0.0-rc.10 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: true @@ -5216,17 +5216,6 @@ packages: telejson: 7.0.4 dev: true - /@storybook/channel-postmessage@7.0.0-rc.5: - resolution: {integrity: sha512-NBnIKiACAnLpsVe7bf9B2XE4tH+4HgTJh8Mvj1Dpu1jxu2cJ3j20x3IGgELXCXSEicUbXCqr+O1Zc7CHBXYV+g==} - dependencies: - '@storybook/channels': 7.0.0-rc.5 - '@storybook/client-logger': 7.0.0-rc.5 - '@storybook/core-events': 7.0.0-rc.5 - '@storybook/global': 5.0.0 - qs: 6.11.1 - telejson: 7.0.4 - dev: true - /@storybook/channel-websocket@7.0.0-rc.10: resolution: {integrity: sha512-18xZYdV3CqiGpxIF8os5Vm+T76p+5lx0t8fRTpiPuOfuPF72QYdqmUuXF/tLH4hzj/qwPp56y6Nb7My7pcGPug==} dependencies: @@ -5248,10 +5237,6 @@ packages: resolution: {integrity: sha512-LNjI2etxaK5hbBHziNbDzK5VajGU0BLcD04CO3LbGRC14hJvDfVnvymJeDbbgT1b7RPUwl/vv/azO1kVHDax/A==} dev: true - /@storybook/channels@7.0.0-rc.5: - resolution: {integrity: sha512-/T4iJQsTj42bs+d2sG8aLyInKh1IjZeK0vPoJRK9gvy3YfxTj3yodZ60s2yywKJCgGjg5zJMFxYMWqSVmHIdnw==} - dev: true - /@storybook/cli@7.0.0-rc.10: resolution: {integrity: sha512-UTncMAUO6+WvXW0IrUDBlN94X5BDCre4qvlZLnPU6LDDZ53MOjESO4U+k/3B/ARRNFaFoiDh+hfkBLg3ulLqgg==} hasBin: true @@ -5314,12 +5299,6 @@ packages: '@storybook/global': 5.0.0 dev: true - /@storybook/client-logger@7.0.0-rc.5: - resolution: {integrity: sha512-YkqjJb2jK6/jT4zm9cmdMVZeOyzoDxiyK3BedhoXKMRDMz+7+E7tcOZEXsuvTGekJe459TTnwYLfvUvObaXNKw==} - dependencies: - '@storybook/global': 5.0.0 - dev: true - /@storybook/codemod@7.0.0-rc.10: resolution: {integrity: sha512-BHAtI/G5/TyjV/714W06oMaEa3A7GGTGK4KGlEvC/g1i3bCeXMCGWCR1fp850OFX/AyQF5iETtAZx+vk7mvurQ==} dependencies: @@ -5401,10 +5380,6 @@ packages: resolution: {integrity: sha512-Z4S6H1E5FuG7eiVozqcqNBSADt0kCDZeXlpR/gIOYLmTd/BDIQ2QhLt+G41BbEvck8nRnC7lZ9DXuref8V3pDA==} dev: true - /@storybook/core-events@7.0.0-rc.5: - resolution: {integrity: sha512-n9+TqgrgkXN5V+mNdgdnojUVqhKOsyL3DNfOmAsbLEewhg5z6+QDYxOe/FBe1usGI2DV+ihwb/knMZzuYXN5ow==} - dev: true - /@storybook/core-server@7.0.0-rc.10: resolution: {integrity: sha512-S+E8WRU4vik+lNbXukVSsZPrRgsujFpy9RvgLckH/QI4T2SYe94mAuKGVkW/720jBD4DNss+IUGQQvkafLPl5A==} dependencies: @@ -5582,31 +5557,6 @@ packages: ts-dedent: 2.2.0 dev: true - /@storybook/manager-api@7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-MsNj/cPIOlL7HJ8ReYahUvJVfvZDtNfacUYSFuQjQwdnp0u3pbC5mGZPd32tAGj7lLaLzcqqo1yR+NAgwpZUBw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@storybook/channels': 7.0.0-rc.5 - '@storybook/client-logger': 7.0.0-rc.5 - '@storybook/core-events': 7.0.0-rc.5 - '@storybook/csf': 0.0.2-next.10 - '@storybook/global': 5.0.0 - '@storybook/router': 7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0) - '@storybook/theming': 7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.0.0-rc.5 - dequal: 2.0.3 - lodash: 4.17.21 - memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - semver: 7.3.8 - store2: 2.14.2 - telejson: 7.0.4 - ts-dedent: 2.2.0 - dev: true - /@storybook/manager@7.0.0-rc.10: resolution: {integrity: sha512-WmGyBFPCaW7ee57nSaPCb5teeI3mUBL+cRY3wXi7n+tzCHuWlYM/AWmQgOtb2goMgt7iZn76+uL9JUfTbvfRCg==} dev: true @@ -5648,27 +5598,6 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview-api@7.0.0-rc.5: - resolution: {integrity: sha512-cuyFIT/4MXfoqN6d5AK/KH7Yp0cifuOmcBj4+9xrmrPK47m4F8eHZ/mX6rXE6rVFNsWv65Al5An6WCM1CDImJg==} - dependencies: - '@storybook/channel-postmessage': 7.0.0-rc.5 - '@storybook/channels': 7.0.0-rc.5 - '@storybook/client-logger': 7.0.0-rc.5 - '@storybook/core-events': 7.0.0-rc.5 - '@storybook/csf': 0.0.2-next.10 - '@storybook/global': 5.0.0 - '@storybook/types': 7.0.0-rc.5 - '@types/qs': 6.9.7 - dequal: 2.0.3 - lodash: 4.17.21 - memoizerific: 1.11.3 - qs: 6.11.1 - slash: 3.0.0 - synchronous-promise: 2.0.17 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - dev: true - /@storybook/preview@7.0.0-rc.10: resolution: {integrity: sha512-885uU20XL54s31lAyIu5MaiD4t23gJ0X/JEMz2/LTvfluYDtQg66gXhMibKqEPgMHcPOND5ZrGoYPdaLDG20Dw==} dev: true @@ -5777,19 +5706,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/router@7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-s23O2OOQ4+CvySk3QC/PXhDJChc4jjyQu/h3gLMKF7bfWx0bd5KR4LnP3rCKLIMkxoJYFPUayPMgwEEeN/ENSw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@storybook/client-logger': 7.0.0-rc.5 - memoizerific: 1.11.3 - qs: 6.11.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@storybook/semver@7.3.2: resolution: {integrity: sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==} engines: {node: '>=10'} @@ -5869,20 +5785,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/theming@7.0.0-rc.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-OzwybDA2+4FWg85tcTNQkVI0JnHkwCRG9HM1qx9hOZJHNRfxmJFjJePOnBoXM6CjVlz0S1PJUwCmMHNH8OTvEw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@emotion/use-insertion-effect-with-fallbacks': 1.0.0(react@18.2.0) - '@storybook/client-logger': 7.0.0-rc.5 - '@storybook/global': 5.0.0 - memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@storybook/types@7.0.0-rc.10: resolution: {integrity: sha512-aKyz4eJaWsywqX8kL2syTL8jGZFildIw/Z5o5S13KZwR+Vdijss2sNoDIAUK5XgSi9vxG/Jd13CS5zTEBaSpMA==} dependencies: @@ -5892,15 +5794,6 @@ packages: file-system-cache: 2.0.2 dev: true - /@storybook/types@7.0.0-rc.5: - resolution: {integrity: sha512-gLKUY7EfPYenz0Y1jw90AUAUlKTHOj9p7J3d8GcI5x5buHdU+M7Q1jotPWzDwRFI24y3Ob31oyCBhysIw8S2Aw==} - dependencies: - '@storybook/channels': 7.0.0-rc.5 - '@types/babel__core': 7.20.0 - '@types/express': 4.17.17 - file-system-cache: 2.0.2 - dev: true - /@storybook/vue3-vite@7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2)(vite@4.2.1)(vue@3.2.47): resolution: {integrity: sha512-gNUlREXPv9C61VqmLW9MmlAFAgki9o60+CKwMDLp3Ey/WxEwH+JGOmhc5ne6H4du9FZLnDbBa3zphkS0Ve7qWw==} engines: {node: ^14.18 || >=16}