build(#10336): Storybook & Chromatic & msw

.github/workflows/storybook.yml

@@ -0,0 +1,56 @@
+name: Storybook
+
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request_target:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/[email protected]
+      with:
+        fetch-depth: 0
+        submodules: true
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 7
+        run_install: false
+    - name: Use Node.js 18.x
+      uses: actions/[email protected]
+      with:
+        node-version: 18.x
+        cache: 'pnpm'
+    - run: corepack enable
+    - run: pnpm i --frozen-lockfile
+    - name: Check pnpm-lock.yaml
+      run: git diff --exit-code pnpm-lock.yaml
+    - name: Build misskey-js
+      run: pnpm --filter misskey-js build
+    - name: Build storybook
+      run: pnpm --filter frontend build-storybook
+      env:
+        NODE_OPTIONS: "--max_old_space_size=7168"
+    - name: Publish to Chromatic
+      id: chromatic
+      uses: chromaui/action@v1
+      with:
+        exitOnceUploaded: true
+        projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+        storybookBuildDir: storybook-static
+        workingDir: packages/frontend
+    - name: Compare on Chromatic
+      if: github.event_name == 'pull_request_target'
+      run: pnpm --filter frontend chromatic -d storybook-static --exit-once-uploaded --patch-build ${{ github.head_ref }}...${{ github.base_ref }}
+      env:
+        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    - name: Upload Artifacts
+      uses: actions/upload-artifact@v3
+      with:
+        name: storybook
+        path: packages/frontend/storybook-static

.gitignore

@@ -56,6 +56,7 @@ api-docs.json
 /files
 ormconfig.json
 temp
+/packages/frontend/src/**/*.stories.ts
 
 # blender backups
 *.blend1

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?
 

packages/frontend/.gitignore

@@ -0,0 +1 @@
+/storybook-static

packages/frontend/.storybook/.gitignore

@@ -0,0 +1,9 @@
+# (cd path/to/frontend; pnpm tsc -p .storybook)
+# (cd path/to/frontend; node .storybook/generate.js)
+/generate.js
+# (cd path/to/frontend; node .storybook/preload-locale.js)
+/preload-locale.js
+/locale.ts
+# (cd path/to/frontend; node .storybook/preload-theme.js)
+/preload-theme.js
+/themes.ts

packages/frontend/.storybook/fakes.ts

@@ -0,0 +1,54 @@
+import type { entities } from 'misskey-js'
+
+export const userDetailed = {
+	id: 'someuserid',
+	username: 'miskist',
+	host: 'misskey-hub.net',
+	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