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, 34 insertions, 0 deletions

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 0e73929826..d97f1284c2 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -4,6 +4,9 @@
 	"scripts": {
 		"watch": "vite",
 		"build": "vite build",
+		"storybook-dev": "chokidar 'src/**/*.{mdx,ts,vue}' -d 1000 -t 1000 --initial -i '**/*.stories.ts' -c 'pkill -f node_modules/storybook/index.js; node_modules/.bin/tsc -p .storybook && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js && node_modules/.bin/storybook dev -p 6006 --ci'",
+		"build-storybook": "tsc -p .storybook && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js && storybook build",
+		"chromatic": "chromatic",
 		"test": "vitest --run",
 		"test-and-coverage": "vitest --run --coverage",
 		"typecheck": "vue-tsc --noEmit",
@@ -71,8 +74,27 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
+		"@storybook/addon-essentials": "7.0.0-rc.10",
+		"@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.10",
+		"@storybook/blocks": "7.0.0-rc.10",
+		"@storybook/core-events": "7.0.0-rc.10",
+		"@storybook/jest": "0.0.10",
+		"@storybook/manager-api": "7.0.0-rc.10",
+		"@storybook/preview-api": "7.0.0-rc.10",
+		"@storybook/react": "7.0.0-rc.10",
+		"@storybook/react-vite": "7.0.0-rc.10",
+		"@storybook/testing-library": "0.0.14-next.1",
+		"@storybook/theming": "7.0.0-rc.10",
+		"@storybook/types": "7.0.0-rc.10",
+		"@storybook/vue3": "7.0.0-rc.10",
+		"@storybook/vue3-vite": "7.0.0-rc.10",
+		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/vue": "^6.6.1",
 		"@types/escape-regexp": "0.0.1",
+		"@types/estree": "^1.0.0",
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
 		"@types/matter-js": "0.18.2",
@@ -80,6 +102,7 @@
 		"@types/punycode": "2.1.0",
 		"@types/sanitize-html": "2.9.0",
 		"@types/seedrandom": "3.0.5",
+		"@types/testing-library__jest-dom": "^5.14.5",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "9.0.1",
@@ -89,13 +112,24 @@
 		"@typescript-eslint/parser": "5.57.0",
 		"@vitest/coverage-c8": "^0.29.8",
 		"@vue/runtime-core": "3.2.47",
+		"astring": "^1.8.4",
+		"chokidar-cli": "^3.0.0",
+		"chromatic": "^6.17.2",
 		"cross-env": "7.0.3",
 		"cypress": "12.9.0",
 		"eslint": "8.37.0",
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.10.0",
+		"fast-glob": "^3.2.12",
 		"happy-dom": "8.9.0",
+		"msw": "^1.1.0",
+		"msw-storybook-addon": "^1.8.0",
+		"prettier": "^2.8.4",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"start-server-and-test": "2.0.0",
+		"storybook": "7.0.0-rc.10",
+		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vitest": "^0.29.8",
 		"vitest-fetch-mock": "^0.2.2",