From 38d0b6216715feb3c3d8e78d9256b5f63ccf5500 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Tue, 4 Apr 2023 09:38:34 +0900 Subject: [PATCH] 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 `` * 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` --- .github/workflows/storybook.yml | 56 + .gitignore | 1 + CONTRIBUTING.md | 110 + packages/frontend/.gitignore | 1 + packages/frontend/.storybook/.gitignore | 9 + packages/frontend/.storybook/fakes.ts | 54 + packages/frontend/.storybook/generate.tsx | 406 ++ packages/frontend/.storybook/main.ts | 35 + packages/frontend/.storybook/manager.ts | 12 + packages/frontend/.storybook/mocks.ts | 16 + .../frontend/.storybook/preload-locale.ts | 9 + packages/frontend/.storybook/preload-theme.ts | 39 + .../frontend/.storybook/preview-head.html | 4 + packages/frontend/.storybook/preview.ts | 113 + packages/frontend/.storybook/tsconfig.json | 22 + packages/frontend/package.json | 34 + packages/frontend/public/mockServiceWorker.js | 303 + .../components/MkAnalogClock.stories.impl.ts | 28 + .../src/components/MkButton.stories.impl.ts | 30 + .../src/components/MkCaptcha.stories.impl.ts | 2 + .../frontend/src/components/MkContextMenu.vue | 2 +- packages/frontend/src/components/MkMenu.vue | 20 +- .../frontend/src/components/MkUrlPreview.vue | 2 +- ...kYoutubePlayer.vue => MkYouTubePlayer.vue} | 0 .../src/components/global/MkA.stories.impl.ts | 47 + .../components/global/MkAcct.stories.impl.ts | 43 + .../frontend/src/components/global/MkAcct.vue | 1 - .../components/global/MkAd.stories.impl.ts | 120 + .../frontend/src/components/global/MkAd.vue | 2 +- .../global/MkAvatar.stories.impl.ts | 66 + .../src/components/global/MkAvatar.vue | 1 + .../global/MkCustomEmoji.stories.impl.ts | 45 + .../global/MkEllipsis.stories.impl.ts | 32 + .../src/components/global/MkEllipsis.vue | 16 +- .../components/global/MkEmoji.stories.impl.ts | 31 + .../components/global/MkError.stories.meta.ts | 5 + .../global/MkLoading.stories.impl.ts | 60 + .../src/components/global/MkLoading.vue | 8 +- .../MkMisskeyFlavoredMarkdown.stories.impl.ts | 74 + .../global/MkPageHeader.stories.impl.ts | 98 + .../global/MkPageHeader.tabs.stories.impl.ts | 3 + .../components/global/MkPageHeader.tabs.vue | 18 +- .../global/MkStickyContainer.stories.impl.ts | 3 + .../components/global/MkTime.stories.impl.ts | 312 + .../frontend/src/components/global/MkTime.vue | 6 +- .../components/global/MkUrl.stories.impl.ts | 77 + .../global/MkUserName.stories.impl.ts | 57 + .../global/RouterView.stories.impl.ts | 3 + packages/frontend/src/index.mdx | 12 + .../src/pages/user/activity.following.vue | 5 +- .../src/pages/user/activity.heatmap.vue | 3 + .../src/pages/user/activity.notes.vue | 5 +- .../frontend/src/pages/user/activity.pv.vue | 5 +- packages/frontend/src/scripts/achievements.ts | 3 + packages/frontend/src/scripts/test-utils.ts | 6 + packages/frontend/tsconfig.json | 3 + packages/frontend/vite.config.ts | 13 +- packages/misskey-js/package.json | 2 +- pnpm-lock.yaml | 5580 ++++++++++++++++- 59 files changed, 7708 insertions(+), 365 deletions(-) create mode 100644 .github/workflows/storybook.yml create mode 100644 packages/frontend/.gitignore create mode 100644 packages/frontend/.storybook/.gitignore create mode 100644 packages/frontend/.storybook/fakes.ts create mode 100644 packages/frontend/.storybook/generate.tsx create mode 100644 packages/frontend/.storybook/main.ts create mode 100644 packages/frontend/.storybook/manager.ts create mode 100644 packages/frontend/.storybook/mocks.ts create mode 100644 packages/frontend/.storybook/preload-locale.ts create mode 100644 packages/frontend/.storybook/preload-theme.ts create mode 100644 packages/frontend/.storybook/preview-head.html create mode 100644 packages/frontend/.storybook/preview.ts create mode 100644 packages/frontend/.storybook/tsconfig.json create mode 100644 packages/frontend/public/mockServiceWorker.js create mode 100644 packages/frontend/src/components/MkAnalogClock.stories.impl.ts create mode 100644 packages/frontend/src/components/MkButton.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCaptcha.stories.impl.ts rename packages/frontend/src/components/{MkYoutubePlayer.vue => MkYouTubePlayer.vue} (100%) create mode 100644 packages/frontend/src/components/global/MkA.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkAcct.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkAd.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkAvatar.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkEllipsis.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkEmoji.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkError.stories.meta.ts create mode 100644 packages/frontend/src/components/global/MkLoading.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkPageHeader.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkPageHeader.tabs.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkStickyContainer.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkTime.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkUrl.stories.impl.ts create mode 100644 packages/frontend/src/components/global/MkUserName.stories.impl.ts create mode 100644 packages/frontend/src/components/global/RouterView.stories.impl.ts create mode 100644 packages/frontend/src/index.mdx create mode 100644 packages/frontend/src/scripts/test-utils.ts diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml new file mode 100644 index 000000000..eda28c5f7 --- /dev/null +++ b/.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/checkout@v3.3.0 + 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/setup-node@v3.6.0 + 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 diff --git a/.gitignore b/.gitignore index 29420311b..fbe224550 100644 --- a/.gitignore +++ b/.gitignore @@ -56,6 +56,7 @@ api-docs.json /files ormconfig.json temp +/packages/frontend/src/**/*.stories.ts # blender backups *.blend1 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 887d17961..fece05d7a 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: '', + }; + }, + args: { + foo: 'bar', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; +``` + +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? diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore new file mode 100644 index 000000000..1aa0ac14e --- /dev/null +++ b/packages/frontend/.gitignore @@ -0,0 +1 @@ +/storybook-static diff --git a/packages/frontend/.storybook/.gitignore b/packages/frontend/.storybook/.gitignore new file mode 100644 index 000000000..649b36b84 --- /dev/null +++ b/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 diff --git a/packages/frontend/.storybook/fakes.ts b/packages/frontend/.storybook/fakes.ts new file mode 100644 index 000000000..b620cf68a --- /dev/null +++ b/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 diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx new file mode 100644 index 000000000..f2c87016c --- /dev/null +++ b/packages/frontend/.storybook/generate.tsx @@ -0,0 +1,406 @@ +import { existsSync, readFileSync } from 'node:fs'; +import { writeFile } from 'node:fs/promises'; +import { basename, dirname } from 'node:path/posix'; +import { GENERATOR, type State, generate } from 'astring'; +import type * as estree from 'estree'; +import glob from 'fast-glob'; +import { format } from 'prettier'; + +interface SatisfiesExpression extends estree.BaseExpression { + type: 'SatisfiesExpression'; + expression: estree.Expression; + reference: estree.Identifier; +} + +const generator = { + ...GENERATOR, + SatisfiesExpression(node: SatisfiesExpression, state: State) { + switch (node.expression.type) { + case 'ArrowFunctionExpression': { + state.write('('); + this[node.expression.type](node.expression, state); + state.write(')'); + break; + } + default: { + // @ts-ignore + this[node.expression.type](node.expression, state); + break; + } + } + state.write(' satisfies ', node as unknown as estree.Expression); + this[node.reference.type](node.reference, state); + }, +}; + +type SplitCamel< + T extends string, + YC extends string = '', + YN extends readonly string[] = [] +> = T extends `${infer XH}${infer XR}` + ? XR extends '' + ? [...YN, Uncapitalize<`${YC}${XH}`>] + : XH extends Uppercase + ? SplitCamel, [...YN, YC]> + : SplitCamel + : YN; + +// @ts-ignore +type SplitKebab = T extends `${infer XH}-${infer XR}` + ? [XH, ...SplitKebab] + : [T]; + +type ToKebab = T extends readonly [ + infer XO extends string +] + ? XO + : T extends readonly [ + infer XH extends string, + ...infer XR extends readonly string[] + ] + ? `${XH}${XR extends readonly string[] ? `-${ToKebab}` : ''}` + : ''; + +// @ts-ignore +type ToPascal = T extends readonly [ + infer XH extends string, + ...infer XR extends readonly string[] +] + ? `${Capitalize}${ToPascal}` + : ''; + +function h( + component: T['type'], + props: Omit +): T { + const type = component.replace(/(?:^|-)([a-z])/g, (_, c) => c.toUpperCase()); + return Object.assign(props || {}, { type }) as T; +} + +declare global { + namespace JSX { + type Element = estree.Node; + type ElementClass = never; + type ElementAttributesProperty = never; + type ElementChildrenAttribute = never; + type IntrinsicAttributes = never; + type IntrinsicClassAttributes = never; + type IntrinsicElements = { + [T in keyof typeof generator as ToKebab>>]: { + [K in keyof Omit< + Parameters<(typeof generator)[T]>[0], + 'type' + >]?: Parameters<(typeof generator)[T]>[0][K]; + }; + }; + } +} + +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 = + as estree.Literal; + const identifier = + as estree.Identifier; + const parameters = ( + as estree.Identifier} + value={ as estree.Literal} + kind={'init' as const} + /> as estree.Property, + ...(hasMsw + ? [ + as estree.Identifier} + value={ as estree.Identifier} + kind={'init' as const} + shorthand + /> as estree.Property, + ] + : []), + ]} + /> + ) as estree.ObjectExpression; + const program = ( + as estree.Literal} + specifiers={[ + as estree.Identifier} + imported={ as estree.Identifier} + /> as estree.ImportSpecifier, + ...(hasImplStories + ? [] + : [ + as estree.Identifier} + imported={ as estree.Identifier} + /> as estree.ImportSpecifier, + ]), + ]} + /> as estree.ImportDeclaration, + ...(hasMsw + ? [ + as estree.Literal} + specifiers={[ + as estree.Identifier} + /> as estree.ImportNamespaceSpecifier, + ]} + /> as estree.ImportDeclaration, + ] + : []), + ...(hasImplStories + ? [] + : [ + as estree.Literal} + specifiers={[ + as estree.ImportDefaultSpecifier, + ]} + /> as estree.ImportDeclaration, + ]), + ...(hasMetaStories + ? [ + as estree.Literal} + specifiers={[ + as estree.Identifier} + /> as estree.ImportNamespaceSpecifier, + ]} + /> as estree.ImportDeclaration, + ] + : []), + as estree.Identifier} + init={ + as estree.Identifier} + value={literal} + kind={'init' as const} + /> as estree.Property, + as estree.Identifier} + value={identifier} + kind={'init' as const} + /> as estree.Property, + ...(hasMetaStories + ? [ + as estree.Identifier} + /> as estree.SpreadElement, + ] + : []) + ]} + /> as estree.ObjectExpression + } + reference={`} /> as estree.Identifier} + /> as estree.Expression + } + /> as estree.VariableDeclarator, + ]} + /> as estree.VariableDeclaration, + ...(hasImplStories + ? [] + : [ + as estree.Identifier} + init={ + as estree.Identifier} + value={ + as estree.Identifier, + ]} + body={ + as estree.Identifier} + value={ + as estree.Property, + ]} + /> as estree.ObjectExpression + } + kind={'init' as const} + /> as estree.Property, + as estree.Identifier} + value={ + as estree.Identifier} + value={ as estree.Identifier} + kind={'init' as const} + shorthand + /> as estree.Property, + ]} + /> as estree.ObjectExpression + } + /> as estree.ReturnStatement, + ]} + /> as estree.BlockStatement + } + /> as estree.FunctionExpression + } + method + kind={'init' as const} + /> as estree.Property, + as estree.Identifier} + value={ + as estree.Identifier} + value={ + as estree.ThisExpression} + property={ as estree.Identifier} + /> as estree.MemberExpression + } + /> as estree.SpreadElement, + ]} + /> as estree.ObjectExpression + } + /> as estree.ReturnStatement, + ]} + /> as estree.BlockStatement + } + /> as estree.FunctionExpression + } + method + kind={'init' as const} + /> as estree.Property, + ]} + /> as estree.ObjectExpression + } + kind={'init' as const} + /> as estree.Property, + as estree.Identifier} + value={`} /> as estree.Literal} + kind={'init' as const} + /> as estree.Property, + ]} + /> as estree.ObjectExpression + } + /> as estree.ReturnStatement, + ]} + /> as estree.BlockStatement + } + /> as estree.FunctionExpression + } + method + kind={'init' as const} + /> as estree.Property, + as estree.Identifier} + value={parameters} + kind={'init' as const} + /> as estree.Property, + ]} + /> as estree.ObjectExpression + } + reference={`} /> as estree.Identifier} + /> as estree.Expression + } + /> as estree.VariableDeclarator, + ]} + /> as estree.VariableDeclaration + } + /> as estree.ExportNamedDeclaration, + ]), + ) as estree.Identifier} + /> as estree.ExportDefaultDeclaration, + ]} + /> + ) as estree.Program; + return format( + '/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' + + '/* eslint-disable import/no-default-export */\n' + + generate(program, { generator }) + + (hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''), + { + parser: 'babel-ts', + singleQuote: true, + useTabs: true, + } + ); +} + +// promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then( +glob('src/components/global/**/*.vue').then( + (components) => + Promise.all( + components.map((component) => { + const stories = component.replace(/\.vue$/, '.stories.ts'); + return writeFile(stories, toStories(component)); + }) + ) +); diff --git a/packages/frontend/.storybook/main.ts b/packages/frontend/.storybook/main.ts new file mode 100644 index 000000000..1e57c97b6 --- /dev/null +++ b/packages/frontend/.storybook/main.ts @@ -0,0 +1,35 @@ +import { resolve } from 'node:path'; +import type { StorybookConfig } from '@storybook/vue3-vite'; +import { mergeConfig } from 'vite'; +const config = { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-links', + '@storybook/addon-storysource', + resolve(__dirname, '../node_modules/storybook-addon-misskey-theme'), + ], + framework: { + name: '@storybook/vue3-vite', + options: {}, + }, + docs: { + autodocs: 'tag', + }, + core: { + disableTelemetry: true, + }, + async viteFinal(config, options) { + return mergeConfig(config, { + build: { + target: [ + 'chrome108', + 'firefox109', + 'safari16', + ], + }, + }); + }, +} satisfies StorybookConfig; +export default config; diff --git a/packages/frontend/.storybook/manager.ts b/packages/frontend/.storybook/manager.ts new file mode 100644 index 000000000..5653deee8 --- /dev/null +++ b/packages/frontend/.storybook/manager.ts @@ -0,0 +1,12 @@ +import { addons } from '@storybook/manager-api'; +import { create } from '@storybook/theming/create'; + +addons.setConfig({ + theme: create({ + base: 'dark', + brandTitle: 'Misskey Storybook', + brandUrl: 'https://misskey-hub.net', + brandImage: 'data:image/png;base64,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', + brandTarget: '_blank', + }), +}); diff --git a/packages/frontend/.storybook/mocks.ts b/packages/frontend/.storybook/mocks.ts new file mode 100644 index 000000000..41c3c5c4d --- /dev/null +++ b/packages/frontend/.storybook/mocks.ts @@ -0,0 +1,16 @@ +import { type SharedOptions, rest } from 'msw'; + +export const onUnhandledRequest = ((req, print) => { + if (req.url.hostname !== 'localhost' || /^\/(?:client-assets\/|fluent-emojis?\/|iframe.html$|node_modules\/|src\/|sb-|static-assets\/|vite\/)/.test(req.url.pathname)) { + return + } + print.warning() +}) satisfies SharedOptions['onUnhandledRequest']; + +export const commonHandlers = [ + rest.get('/twemoji/:codepoints.svg', async (req, res, ctx) => { + const { codepoints } = req.params; + const value = await fetch(`https://unpkg.com/@discordapp/twemoji@14.1.2/dist/svg/${codepoints}.svg`).then((response) => response.blob()); + return res(ctx.set('Content-Type', 'image/svg+xml'), ctx.body(value)); + }), +]; diff --git a/packages/frontend/.storybook/preload-locale.ts b/packages/frontend/.storybook/preload-locale.ts new file mode 100644 index 000000000..a54164742 --- /dev/null +++ b/packages/frontend/.storybook/preload-locale.ts @@ -0,0 +1,9 @@ +import { writeFile } from 'node:fs/promises'; +import { resolve } from 'node:path'; +import * as locales from '../../../locales'; + +writeFile( + resolve(__dirname, 'locale.ts'), + `export default ${JSON.stringify(locales['ja-JP'], undefined, 2)} as const;`, + 'utf8', +) diff --git a/packages/frontend/.storybook/preload-theme.ts b/packages/frontend/.storybook/preload-theme.ts new file mode 100644 index 000000000..1ff8f71ec --- /dev/null +++ b/packages/frontend/.storybook/preload-theme.ts @@ -0,0 +1,39 @@ +import { readFile, writeFile } from 'node:fs/promises'; +import { resolve } from 'node:path'; +import * as JSON5 from 'json5'; + +const keys = [ + '_dark', + '_light', + 'l-light', + 'l-coffee', + 'l-apricot', + 'l-rainy', + 'l-botanical', + 'l-vivid', + 'l-cherry', + 'l-sushi', + 'l-u0', + 'd-dark', + 'd-persimmon', + 'd-astro', + 'd-future', + 'd-botanical', + 'd-green-lime', + 'd-green-orange', + 'd-cherry', + 'd-ice', + 'd-u0', +] + +Promise.all(keys.map((key) => readFile(resolve(__dirname, `../src/themes/${key}.json5`), 'utf8'))).then((sources) => { + writeFile( + resolve(__dirname, './themes.ts'), + `export default ${JSON.stringify( + Object.fromEntries(sources.map((source, i) => [keys[i], JSON5.parse(source)])), + undefined, + 2, + )} as const;`, + 'utf8' + ); +}); diff --git a/packages/frontend/.storybook/preview-head.html b/packages/frontend/.storybook/preview-head.html new file mode 100644 index 000000000..01912da28 --- /dev/null +++ b/packages/frontend/.storybook/preview-head.html @@ -0,0 +1,4 @@ + + diff --git a/packages/frontend/.storybook/preview.ts b/packages/frontend/.storybook/preview.ts new file mode 100644 index 000000000..b2974276a --- /dev/null +++ b/packages/frontend/.storybook/preview.ts @@ -0,0 +1,113 @@ +import { addons } from '@storybook/addons'; +import { FORCE_REMOUNT } from '@storybook/core-events'; +import { type Preview, setup } from '@storybook/vue3'; +import isChromatic from 'chromatic/isChromatic'; +import { initialize, mswDecorator } from 'msw-storybook-addon'; +import locale from './locale'; +import { commonHandlers, onUnhandledRequest } from './mocks'; +import themes from './themes'; +import '../src/style.scss'; + +const appInitialized = Symbol(); + +let moduleInitialized = false; +let unobserve = () => {}; +let misskeyOS = null; + +function loadTheme(applyTheme: typeof import('../src/scripts/theme')['applyTheme']) { + unobserve(); + const theme = themes[document.documentElement.dataset.misskeyTheme]; + if (theme) { + applyTheme(themes[document.documentElement.dataset.misskeyTheme]); + } else if (isChromatic()) { + applyTheme(themes['l-light']); + } + const observer = new MutationObserver((entries) => { + for (const entry of entries) { + if (entry.attributeName === 'data-misskey-theme') { + const target = entry.target as HTMLElement; + const theme = themes[target.dataset.misskeyTheme]; + if (theme) { + applyTheme(themes[target.dataset.misskeyTheme]); + } else { + target.removeAttribute('style'); + } + } + } + }); + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-misskey-theme'], + }); + unobserve = () => observer.disconnect(); +} + +initialize({ + onUnhandledRequest, +}); +localStorage.setItem("locale", JSON.stringify(locale)); +queueMicrotask(() => { + Promise.all([ + import('../src/components'), + import('../src/directives'), + import('../src/widgets'), + import('../src/scripts/theme'), + import('../src/store'), + import('../src/os'), + ]).then(([{ default: components }, { default: directives }, { default: widgets }, { applyTheme }, { defaultStore }, os]) => { + setup((app) => { + moduleInitialized = true; + if (app[appInitialized]) { + return; + } + app[appInitialized] = true; + loadTheme(applyTheme); + components(app); + directives(app); + widgets(app); + misskeyOS = os; + if (isChromatic()) { + defaultStore.set('animation', false); + } + }); + }); +}); + +const preview = { + decorators: [ + (Story, context) => { + const story = Story(); + if (!moduleInitialized) { + const channel = addons.getChannel(); + (globalThis.requestIdleCallback || setTimeout)(() => { + channel.emit(FORCE_REMOUNT, { storyId: context.id }); + }); + } + return story; + }, + mswDecorator, + (Story, context) => { + return { + setup() { + return { + context, + popups: misskeyOS.popups, + }; + }, + template: + '' + + '', + }; + }, + ], + parameters: { + controls: { + exclude: /^__/, + }, + msw: { + handlers: commonHandlers, + }, + }, +} satisfies Preview; + +export default preview; diff --git a/packages/frontend/.storybook/tsconfig.json b/packages/frontend/.storybook/tsconfig.json new file mode 100644 index 000000000..01aa9db6e --- /dev/null +++ b/packages/frontend/.storybook/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "strict": true, + "allowUnusedLabels": false, + "allowUnreachableCode": false, + "exactOptionalPropertyTypes": true, + "noFallthroughCasesInSwitch": true, + "noImplicitOverride": true, + "noImplicitReturns": true, + "noPropertyAccessFromIndexSignature": true, + "noUncheckedIndexedAccess": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "checkJs": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react", + "jsxFactory": "h" + }, + "files": ["./generate.tsx", "./preload-locale.ts", "./preload-theme.ts"] +} diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 0e7392982..d97f1284c 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", diff --git a/packages/frontend/public/mockServiceWorker.js b/packages/frontend/public/mockServiceWorker.js new file mode 100644 index 000000000..e915a1eb0 --- /dev/null +++ b/packages/frontend/public/mockServiceWorker.js @@ -0,0 +1,303 @@ +/* eslint-disable */ +/* tslint:disable */ + +/** + * Mock Service Worker (1.1.0). + * @see https://github.com/mswjs/msw + * - Please do NOT modify this file. + * - Please do NOT serve this file on production. + */ + +const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70' +const activeClientIds = new Set() + +self.addEventListener('install', function () { + self.skipWaiting() +}) + +self.addEventListener('activate', function (event) { + event.waitUntil(self.clients.claim()) +}) + +self.addEventListener('message', async function (event) { + const clientId = event.source.id + + if (!clientId || !self.clients) { + return + } + + const client = await self.clients.get(clientId) + + if (!client) { + return + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }) + + switch (event.data) { + case 'KEEPALIVE_REQUEST': { + sendToClient(client, { + type: 'KEEPALIVE_RESPONSE', + }) + break + } + + case 'INTEGRITY_CHECK_REQUEST': { + sendToClient(client, { + type: 'INTEGRITY_CHECK_RESPONSE', + payload: INTEGRITY_CHECKSUM, + }) + break + } + + case 'MOCK_ACTIVATE': { + activeClientIds.add(clientId) + + sendToClient(client, { + type: 'MOCKING_ENABLED', + payload: true, + }) + break + } + + case 'MOCK_DEACTIVATE': { + activeClientIds.delete(clientId) + break + } + + case 'CLIENT_CLOSED': { + activeClientIds.delete(clientId) + + const remainingClients = allClients.filter((client) => { + return client.id !== clientId + }) + + // Unregister itself when there are no more clients + if (remainingClients.length === 0) { + self.registration.unregister() + } + + break + } + } +}) + +self.addEventListener('fetch', function (event) { + const { request } = event + const accept = request.headers.get('accept') || '' + + // Bypass server-sent events. + if (accept.includes('text/event-stream')) { + return + } + + // Bypass navigation requests. + if (request.mode === 'navigate') { + return + } + + // Opening the DevTools triggers the "only-if-cached" request + // that cannot be handled by the worker. Bypass such requests. + if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { + return + } + + // Bypass all requests when there are no active clients. + // Prevents the self-unregistered worked from handling requests + // after it's been deleted (still remains active until the next reload). + if (activeClientIds.size === 0) { + return + } + + // Generate unique request ID. + const requestId = Math.random().toString(16).slice(2) + + event.respondWith( + handleRequest(event, requestId).catch((error) => { + if (error.name === 'NetworkError') { + console.warn( + '[MSW] Successfully emulated a network error for the "%s %s" request.', + request.method, + request.url, + ) + return + } + + // At this point, any exception indicates an issue with the original request/response. + console.error( + `\ +[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`, + request.method, + request.url, + `${error.name}: ${error.message}`, + ) + }), + ) +}) + +async function handleRequest(event, requestId) { + const client = await resolveMainClient(event) + const response = await getResponse(event, client, requestId) + + // Send back the response clone for the "response:*" life-cycle events. + // Ensure MSW is active and ready to handle the message, otherwise + // this message will pend indefinitely. + if (client && activeClientIds.has(client.id)) { + ;(async function () { + const clonedResponse = response.clone() + sendToClient(client, { + type: 'RESPONSE', + payload: { + requestId, + type: clonedResponse.type, + ok: clonedResponse.ok, + status: clonedResponse.status, + statusText: clonedResponse.statusText, + body: + clonedResponse.body === null ? null : await clonedResponse.text(), + headers: Object.fromEntries(clonedResponse.headers.entries()), + redirected: clonedResponse.redirected, + }, + }) + })() + } + + return response +} + +// Resolve the main client for the given event. +// Client that issues a request doesn't necessarily equal the client +// that registered the worker. It's with the latter the worker should +// communicate with during the response resolving phase. +async function resolveMainClient(event) { + const client = await self.clients.get(event.clientId) + + if (client?.frameType === 'top-level') { + return client + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }) + + return allClients + .filter((client) => { + // Get only those clients that are currently visible. + return client.visibilityState === 'visible' + }) + .find((client) => { + // Find the client ID that's recorded in the + // set of clients that have registered the worker. + return activeClientIds.has(client.id) + }) +} + +async function getResponse(event, client, requestId) { + const { request } = event + const clonedRequest = request.clone() + + function passthrough() { + // Clone the request because it might've been already used + // (i.e. its body has been read and sent to the client). + const headers = Object.fromEntries(clonedRequest.headers.entries()) + + // Remove MSW-specific request headers so the bypassed requests + // comply with the server's CORS preflight check. + // Operate with the headers as an object because request "Headers" + // are immutable. + delete headers['x-msw-bypass'] + + return fetch(clonedRequest, { headers }) + } + + // Bypass mocking when the client is not active. + if (!client) { + return passthrough() + } + + // Bypass initial page load requests (i.e. static assets). + // The absence of the immediate/parent client in the map of the active clients + // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet + // and is not ready to handle requests. + if (!activeClientIds.has(client.id)) { + return passthrough() + } + + // Bypass requests with the explicit bypass header. + // Such requests can be issued by "ctx.fetch()". + if (request.headers.get('x-msw-bypass') === 'true') { + return passthrough() + } + + // Notify the client that a request has been intercepted. + const clientMessage = await sendToClient(client, { + type: 'REQUEST', + payload: { + id: requestId, + url: request.url, + method: request.method, + headers: Object.fromEntries(request.headers.entries()), + cache: request.cache, + mode: request.mode, + credentials: request.credentials, + destination: request.destination, + integrity: request.integrity, + redirect: request.redirect, + referrer: request.referrer, + referrerPolicy: request.referrerPolicy, + body: await request.text(), + bodyUsed: request.bodyUsed, + keepalive: request.keepalive, + }, + }) + + switch (clientMessage.type) { + case 'MOCK_RESPONSE': { + return respondWithMock(clientMessage.data) + } + + case 'MOCK_NOT_FOUND': { + return passthrough() + } + + case 'NETWORK_ERROR': { + const { name, message } = clientMessage.data + const networkError = new Error(message) + networkError.name = name + + // Rejecting a "respondWith" promise emulates a network error. + throw networkError + } + } + + return passthrough() +} + +function sendToClient(client, message) { + return new Promise((resolve, reject) => { + const channel = new MessageChannel() + + channel.port1.onmessage = (event) => { + if (event.data && event.data.error) { + return reject(event.data.error) + } + + resolve(event.data) + } + + client.postMessage(message, [channel.port2]) + }) +} + +function sleep(timeMs) { + return new Promise((resolve) => { + setTimeout(resolve, timeMs) + }) +} + +async function respondWithMock(response) { + await sleep(response.delay) + return new Response(response.body, response) +} diff --git a/packages/frontend/src/components/MkAnalogClock.stories.impl.ts b/packages/frontend/src/components/MkAnalogClock.stories.impl.ts new file mode 100644 index 000000000..05190aa26 --- /dev/null +++ b/packages/frontend/src/components/MkAnalogClock.stories.impl.ts @@ -0,0 +1,28 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { StoryObj } from '@storybook/vue3'; +import MkAnalogClock from './MkAnalogClock.vue'; +export const Default = { + render(args) { + return { + components: { + MkAnalogClock, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '', + }; + }, + parameters: { + layout: 'fullscreen', + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/MkButton.stories.impl.ts b/packages/frontend/src/components/MkButton.stories.impl.ts new file mode 100644 index 000000000..e1c1c54d1 --- /dev/null +++ b/packages/frontend/src/components/MkButton.stories.impl.ts @@ -0,0 +1,30 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +/* eslint-disable import/no-duplicates */ +import { StoryObj } from '@storybook/vue3'; +import MkButton from './MkButton.vue'; +export const Default = { + render(args) { + return { + components: { + MkButton, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: 'Text', + }; + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/MkCaptcha.stories.impl.ts b/packages/frontend/src/components/MkCaptcha.stories.impl.ts new file mode 100644 index 000000000..6ac437a27 --- /dev/null +++ b/packages/frontend/src/components/MkCaptcha.stories.impl.ts @@ -0,0 +1,2 @@ +import MkCaptcha from './MkCaptcha.vue'; +void MkCaptcha; diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue index 5bdf47724..b81c806b0 100644 --- a/packages/frontend/src/components/MkContextMenu.vue +++ b/packages/frontend/src/components/MkContextMenu.vue @@ -17,8 +17,8 @@ import { onMounted, onBeforeUnmount } from 'vue'; import MkMenu from './MkMenu.vue'; import { MenuItem } from './types/menu.vue'; import contains from '@/scripts/contains'; -import * as os from '@/os'; import { defaultStore } from '@/store'; +import * as os from '@/os'; const props = defineProps<{ items: MenuItem[]; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 9e3022896..e513a65a3 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -1,5 +1,5 @@