build(#10336): write some stories
This commit is contained in:
parent
85f50f3875
commit
671ce6a531
|
@ -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
|
||||
? [
|
||||
(
|
||||
<import-declaration
|
||||
source={
|
||||
(<literal value={`./${basename(metaStories)}`} />) as estree.Literal
|
||||
}
|
||||
specifiers={[
|
||||
(
|
||||
<import-namespace-specifier
|
||||
local={(<identifier name='storiesMeta' />) as estree.Identifier}
|
||||
/>
|
||||
) as estree.ImportNamespaceSpecifier,
|
||||
]}
|
||||
/>
|
||||
) as estree.ImportDeclaration,
|
||||
]
|
||||
: []),
|
||||
(
|
||||
<variable-declaration
|
||||
kind={'const' as const}
|
||||
|
@ -248,6 +268,19 @@ function toStories(component: string): string {
|
|||
kind={'init' as const}
|
||||
/>
|
||||
) as estree.Property,
|
||||
...(hasMetaStories
|
||||
? [
|
||||
(
|
||||
<spread-element
|
||||
argument={
|
||||
(
|
||||
<identifier name='storiesMeta' />
|
||||
) as estree.Identifier
|
||||
}
|
||||
/>
|
||||
) as estree.SpreadElement,
|
||||
]
|
||||
: [])
|
||||
]}
|
||||
/>
|
||||
) as estree.ObjectExpression
|
||||
|
|
|
@ -47,17 +47,17 @@ const common = {
|
|||
await expect(a).not.toBeInTheDocument();
|
||||
await expect(i).not.toBeInTheDocument();
|
||||
buttons = canvas.getAllByRole<HTMLButtonElement>('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,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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: '<MkCustomEmoji v-bind="props" />',
|
||||
};
|
||||
},
|
||||
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<typeof MkCustomEmoji>;
|
||||
export const Normal = {
|
||||
...Default,
|
||||
args: {
|
||||
...Default.args,
|
||||
normal: true,
|
||||
},
|
||||
};
|
||||
export const Missing = {
|
||||
...Default,
|
||||
args: {
|
||||
name: Default.args.name,
|
||||
},
|
||||
};
|
|
@ -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<typeof MkCustomEmoji>;
|
||||
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: '<MkCustomEmoji v-bind="props" />',
|
||||
};
|
||||
},
|
||||
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<typeof MkCustomEmoji>;
|
||||
export default meta;
|
||||
export const Normal = {
|
||||
...Default,
|
||||
args: {
|
||||
...Default.args,
|
||||
normal: true,
|
||||
},
|
||||
};
|
||||
export const Missing = {
|
||||
...Default,
|
||||
args: {
|
||||
name: Default.args.name,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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: '<MkEmoji v-bind="props" />',
|
||||
};
|
||||
},
|
||||
args: {
|
||||
emoji: '❤',
|
||||
},
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkEmoji>;
|
|
@ -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<typeof MkEmoji>;
|
||||
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: '<MkEmoji v-bind="props" />',
|
||||
};
|
||||
},
|
||||
args: {
|
||||
emoji: '❤',
|
||||
},
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkEmoji>;
|
||||
export default meta;
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
export const argTypes = {
|
||||
retry: {
|
||||
action: 'retry',
|
||||
},
|
||||
}
|
|
@ -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<typeof MkError>;
|
||||
export const Default = {
|
||||
render(args) {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" appear>
|
||||
<Transition :name="animation ? '_transition_zoom' : ''" appear>
|
||||
<div :class="$style.root">
|
||||
<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
|
||||
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
|
||||
|
@ -11,7 +11,9 @@
|
|||
<script lang="ts" setup>
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
const animation = $ref(defaultStore.reactiveState.animation);
|
||||
const emit = defineEmits<{
|
||||
(ev: 'retry'): void;
|
||||
}>();
|
||||
|
|
Loading…
Reference in New Issue