build(#10336): Storybook & Chromatic & msw (#10365)

* build(#10336): init

* fix(#10336): invalid name conversion

* build(#10336): load locales and vite config

* refactor(#10336): remove unused imports

* build(#10336): separate definitions and generated codes

* refactor(#10336): remove hatches

* refactor(#10336): module semantics

* refactor(#10336): remove unused common preferences

* fix: typo

* build(#10336): mock assets

* build(#10336): impl `SatisfiesExpression`

* build(#10336): control themes

* refactor(#10336): semantics

* build(#10336): make .storybook as an individual TypeScript project

* style(#10336): use single quote

* build(#10336): avoid intrinsic component names

* chore: suppress linter

* style: typing

* build(#10336): update dependencies

* docs: note about Storybook

* build(#10336): sync

* build(#10336): full reload server on change

* chore: use defaultStore instead

* build(#10336): show popups on Story

* refactor(#10336): remove redundant div

* docs: fix

* build(#10336): interactions

* build(#10336): add an interaction test for `<MkA/>`

* build(#10336): bump storybook

* docs(#10336): mention to pre-build misskey-js

* build(#10336): write stories for `MkAcct`

* build(#10336): write stories for `MkAd`

* build(#10336): fix missing type definition

* build(#10336): use `toHaveTextContent`

* build(#10336): write some stories

* build(#10336): hide internal args

* build(#10336): generate `components/global` stories only

* build(#10336): write stories for `MkMisskeyFlavoredMarkdown`

* fix: conflict errors

* build(#10336): subcomponents on sidebar

* refactor: restore `SatisfiesExpression`

* docs(#10336): note development status

* build(#10336): use chokidar-cli

* docs(#10336): note chokidar-cli mode

* chore(#10336): untrack generated stories files

* fix: pointer handling

* build(#10336): finalize

* chore: add static option to `MkLoading`

* refactor(#10336): bind to local args

* fix: missing case

* revert: restore `SatisfiesExpression`

This reverts commit f246699f38a28befbfccc11e9eade22cbaace4f3.

* build(#10336): make storybook buildable

* build(#10336): staticify assets

* build(#10336): staticified directory structure

* build(#10336): normalize path for Windows

* ci(#10336): create actions

* build(#10336): ignore tsc errors

* build(#10336): ignore tsc errors

* build(#10336): missing dependencies

* build(#10336): missing dependencies

* build(#10336): use fast-glob

* fix: invalid lockfile

* ci(#10336): increase heap size

* build(#10336): use unpkg for storybook tabler icons

* build(#10336): use unpkg for storybook twemojis

* build(#10336): disable `ProfilePageCat`

* build(#10336): blur `MkA` before interaction ends

* ci(#10336): stabilize

* ci(#10336): fetch-depth

* build(#10336): isChromatic

* ci(#10336): notify on changes

* ci(#10336): fix typo

* ci(#10336): missing working directory

* ci(#10336): skip build

* ci(#10336): fix path

* build(#10336): fails on Windows

* build(#10336): available on Windows

* ci(#10336): disable animation on chromatic

* ci(#10336): add static option to `PageHeader.tabs`

* chore: void

* ci(#10336): change parameters

* docs(#10336): update CONTRIBUTING

* docs(#10336): note about meta overriding and etc.

* ci(#10336): use Chromatic for checks

* ci(#10336): use `pull_request` instead of `pull_request_target` for now

* ci(#10336): use `exitOnceUploaded`

* ci(#10336): reuse built storybook

* ci(#10336): back to `pull_request_target`

* chore: unused dependencies

* style(#10336): reduce prettier indents

* style: note about `TSSatisfiesExpression`

1 files changed, 110 insertions, 0 deletions

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 887d17961f..fece05d7a9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -203,6 +203,116 @@ niraxは、Misskeyで使用しているオリジナルのフロントエンド�
 vue-routerとの最大の違いは、niraxは複数のルーターが存在することを許可している点です。
 これにより、アプリ内ウィンドウでブラウザとは個別にルーティングすることなどが可能になります。
 
+## Storybook
+
+Misskey uses [Storybook](https://storybook.js.org/) for UI development.
+
+### Setup & Run
+
+#### Universal
+
+##### Setup
+
+```bash
+pnpm --filter misskey-js build
+pnpm --filter frontend tsc -p .storybook && (node packages/frontend/.storybook/preload-locale.js & node packages/frontend/.storybook/preload-theme.js)
+```
+
+##### Run
+
+```bash
+node packages/frontend/.storybook/generate.js && pnpm --filter frontend storybook dev
+```
+
+#### macOS & Linux
+
+##### Setup
+
+```bash
+pnpm --filter misskey-js build
+```
+
+##### Run
+
+```bash
+pnpm --filter frontend storybook-dev
+```
+
+### Usage
+
+When you create a new component (in this example, `MyComponent.vue`), the story file (`MyComponent.stories.ts`) will be automatically generated by the `.storybook/generate.js` script.
+You can override the default story by creating a impl story file (`MyComponent.stories.impl.ts`).
+
+```ts
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MyComponent from './MyComponent.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MyComponent,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MyComponent v-bind="props" />',
+		};
+	},
+	args: {
+		foo: 'bar',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAvatar>;
+```
+
+If you want to opt-out from the automatic generation, create a `MyComponent.stories.impl.ts` file and add the following line to the file.
+
+```ts
+import MyComponent from './MyComponent.vue';
+void MyComponent;
+```
+
+You can override the component meta by creating a meta story file (`MyComponent.stories.meta.ts`).
+
+```ts
+export const argTypes = {
+	scale: {
+		control: {
+			type: 'range',
+			min: 1,
+			max: 4,
+		},
+};
+```
+
+Also, you can use msw to mock API requests in the storybook. Creating a `MyComponent.stories.msw.ts` file to define the mock handlers.
+
+```ts
+import { rest } from 'msw';
+export const handlers = [
+	rest.post('/api/notes/timeline', (req, res, ctx) => {
+		return res(
+			ctx.json([]),
+		);
+	}),
+];
+```
+
+Don't forget to re-run the `.storybook/generate.js` script after adding, editing, or removing the above files.
+
 ## Notes
 ### How to resolve conflictions occurred at pnpm-lock.yaml?