build(#10336): write stories for MkAcct
This commit is contained in:
Acid Chicken (硫酸鶏)
54
packages/frontend/.storybook/fakes.ts
Normal file
54
packages/frontend/.storybook/fakes.ts
Normal file
@@ -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
|
||||
@@ -21,9 +21,6 @@ const config = {
|
||||
core: {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
features: {
|
||||
interactionsDebugger: true,
|
||||
},
|
||||
async viteFinal(config, options) {
|
||||
return mergeConfig(config, {
|
||||
plugins: [
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>;
|
||||
@@ -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>;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user