-
-
+
+
{{ item.text }}
-
+
-
+
{{ item.text }}
-
+
{{ item.text }}
-
-
diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts
new file mode 100644
index 000000000..7d8a42a03
--- /dev/null
+++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts
@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import { i18n } from '@/i18n';
+import MkAd from './MkAd.vue';
+const common = {
+ render(args) {
+ return {
+ components: {
+ MkAd,
+ },
+ setup() {
+ return {
+ args,
+ };
+ },
+ computed: {
+ props() {
+ return {
+ ...this.args,
+ };
+ },
+ },
+ template: '
',
+ };
+ },
+ async play({ canvasElement, args }) {
+ const canvas = within(canvasElement);
+ const a = canvas.getByRole
('link');
+ await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
+ const img = within(a).getByRole('img');
+ await expect(img).toBeInTheDocument();
+ let buttons = canvas.getAllByRole('button');
+ await expect(buttons).toHaveLength(1);
+ const i = buttons[0];
+ await expect(i).toBeInTheDocument();
+ await userEvent.click(i);
+ await expect(a).not.toBeInTheDocument();
+ await expect(i).not.toBeInTheDocument();
+ buttons = canvas.getAllByRole('button');
+ 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).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
+ }
+ await expect(back).toBeInTheDocument();
+ await expect(back).toHaveTextContent(i18n.ts._ad.back);
+ await userEvent.click(back);
+ if (reduce) {
+ await expect(reduce).not.toBeInTheDocument();
+ }
+ await expect(back).not.toBeInTheDocument();
+ const aAgain = canvas.getByRole('link');
+ await expect(aAgain).toBeInTheDocument();
+ const imgAgain = within(aAgain).getByRole('img');
+ await expect(imgAgain).toBeInTheDocument();
+ },
+ args: {
+ prefer: [],
+ specify: {
+ id: 'someadid',
+ radio: 1,
+ url: '#test',
+ },
+ __hasReduce: true,
+ },
+ parameters: {
+ layout: 'centered',
+ },
+} satisfies StoryObj;
+export const Square = {
+ ...common,
+ args: {
+ ...common.args,
+ specify: {
+ ...common.args.specify,
+ place: 'square',
+ imageUrl:
+ 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+ },
+ },
+} satisfies StoryObj;
+export const Horizontal = {
+ ...common,
+ args: {
+ ...common.args,
+ specify: {
+ ...common.args.specify,
+ place: 'horizontal',
+ imageUrl:
+ 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+ },
+ },
+} satisfies StoryObj;
+export const HorizontalBig = {
+ ...common,
+ args: {
+ ...common.args,
+ specify: {
+ ...common.args.specify,
+ place: 'horizontal-big',
+ imageUrl:
+ 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+ },
+ },
+} satisfies StoryObj;
+export const ZeroRatio = {
+ ...Square,
+ args: {
+ ...Square.args,
+ specify: {
+ ...Square.args.specify,
+ ratio: 0,
+ },
+ __hasReduce: false,
+ },
+} satisfies StoryObj;
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index b8f749bd1..5799f99d5 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -20,13 +20,13 @@
+
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
new file mode 100644
index 000000000..f6811b674
--- /dev/null
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+export const Default = {
+ render(args) {
+ return {
+ components: {
+ MkMisskeyFlavoredMarkdown,
+ },
+ setup() {
+ return {
+ args,
+ };
+ },
+ computed: {
+ props() {
+ return {
+ ...this.args,
+ };
+ },
+ },
+ template: '',
+ };
+ },
+ async play({ canvasElement, args }) {
+ const canvas = within(canvasElement);
+ if (args.plain) {
+ const aiHelloMiskist = canvas.getByText('@ai *Hello*, #Miskist!');
+ await expect(aiHelloMiskist).toBeInTheDocument();
+ } else {
+ const ai = canvas.getByText('@ai');
+ await expect(ai).toBeInTheDocument();
+ await expect(ai.closest('a')).toHaveAttribute('href', '/@ai');
+ const hello = canvas.getByText('Hello');
+ await expect(hello).toBeInTheDocument();
+ await expect(hello.style.fontStyle).toBe('oblique');
+ const miskist = canvas.getByText('#Miskist');
+ await expect(miskist).toBeInTheDocument();
+ await expect(miskist).toHaveAttribute('href', args.isNote ?? true ? '/tags/Miskist' : '/user-tags/Miskist');
+ }
+ const heart = canvas.getByAltText('❤');
+ await expect(heart).toBeInTheDocument();
+ await expect(heart).toHaveAttribute('src', '/twemoji/2764.svg');
+ },
+ args: {
+ text: '@ai *Hello*, #Miskist! ❤',
+ },
+ parameters: {
+ layout: 'centered',
+ },
+} satisfies StoryObj;
+export const Plain = {
+ ...Default,
+ args: {
+ ...Default.args,
+ plain: true,
+ },
+} satisfies StoryObj;
+export const Nowrap = {
+ ...Default,
+ args: {
+ ...Default.args,
+ nowrap: true,
+ },
+} satisfies StoryObj;
+export const IsNotNote = {
+ ...Default,
+ args: {
+ ...Default.args,
+ isNote: false,
+ },
+} satisfies StoryObj;
diff --git a/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts b/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts
new file mode 100644
index 000000000..5519d60fc
--- /dev/null
+++ b/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts
@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import MkPageHeader from './MkPageHeader.vue';
+export const Empty = {
+ render(args) {
+ return {
+ components: {
+ MkPageHeader,
+ },
+ setup() {
+ return {
+ args,
+ };
+ },
+ computed: {
+ props() {
+ return {
+ ...this.args,
+ };
+ },
+ },
+ template: '',
+ };
+ },
+ args: {
+ static: true,
+ tabs: [],
+ },
+ parameters: {
+ layout: 'centered',
+ chromatic: {
+ /* This component has animations that are implemented with JavaScript. So it's unstable to take a snapshot. */
+ disableSnapshot: true,
+ },
+ },
+} satisfies StoryObj;
+export const OneTab = {
+ ...Empty,
+ args: {
+ ...Empty.args,
+ tab: 'sometabkey',
+ tabs: [
+ {
+ key: 'sometabkey',
+ title: 'Some Tab Title',
+ },
+ ],
+ },
+} satisfies StoryObj;
+export const Icon = {
+ ...OneTab,
+ args: {
+ ...OneTab.args,
+ tabs: [
+ {
+ ...OneTab.args.tabs[0],
+ icon: 'ti ti-home',
+ },
+ ],
+ },
+} satisfies StoryObj;
+export const IconOnly = {
+ ...Icon,
+ args: {
+ ...Icon.args,
+ tabs: [
+ {
+ ...Icon.args.tabs[0],
+ title: undefined,
+ iconOnly: true,
+ },
+ ],
+ },
+} satisfies StoryObj;
+export const SomeTabs = {
+ ...Empty,
+ args: {
+ ...Empty.args,
+ tab: 'princess',
+ tabs: [
+ {
+ key: 'princess',
+ title: 'Princess',
+ icon: 'ti ti-crown',
+ },
+ {
+ key: 'fairy',
+ title: 'Fairy',
+ icon: 'ti ti-snowflake',
+ },
+ {
+ key: 'angel',
+ title: 'Angel',
+ icon: 'ti ti-feather',
+ },
+ ],
+ },
+} satisfies StoryObj;
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.impl.ts b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.impl.ts
new file mode 100644
index 000000000..6d4460d59
--- /dev/null
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.impl.ts
@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import MkPageHeader_tabs from './MkPageHeader.tabs.vue';
+void MkPageHeader_tabs;
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index 42760da08..9e1da64e6 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -33,14 +33,18 @@