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: '<MkAcct v-bind="props" />',
+ };
+ },
+ args: {
+ user: userDetailed,
+ },
+ parameters: {
+ layout: 'centered',
+ },
+} satisfies StoryObj<typeof MkAcct>;
+export const Detail = {
+ ...Default,
+ args: {
+ ...Default.args,
+ detail: true,
+ },
+} satisfies StoryObj<typeof MkAcct>;
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<typeof MkAcct>;
+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: '<MkAcct v-bind="props" />',
};
},
+ args: {
+ user: userDetailed,
+ },
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkAcct>;
-export default meta;
+export const Detail = {
+ ...Default,
+ args: {
+ ...Default.args,
+ detail: true,
+ },
+} satisfies StoryObj<typeof MkAcct>;
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 @@
<template>
<span>
<span>@{{ user.username }}</span>
- <span v-if="user.host || detail || $store.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
+ <span v-if="user.host || detail || showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
</span>
</template>
@@ -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);
</script>
-
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}