SWREI/switched
0
0
Fork 0
Code

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

Browse Source 
* 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 f246699f38.

* 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`
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-04 09:38:34 +09:00 committed by GitHub
parent 8a0201fe9c
commit 38d0b62167
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 7708 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
.github/workflows/storybook.yml vendored Normal file
View File

@ -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

1
.gitignore vendored
View File

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

110
CONTRIBUTING.md
View File

@ -203,6 +203,116 @@ niraxは、Misskeyで使用しているオリジナルのフロントエンド
vue-routerとの最大の違いは、niraxは複数のルーターが存在することを許可している点です。 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 ## Notes
### How to resolve conflictions occurred at pnpm-lock.yaml? ### How to resolve conflictions occurred at pnpm-lock.yaml?

1
packages/frontend/.gitignore vendored Normal file
View File

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

9
packages/frontend/.storybook/.gitignore vendored Normal file
View File

@ -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

54
packages/frontend/.storybook/fakes.ts Normal file
View File

@ -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

406
packages/frontend/.storybook/generate.tsx Normal file
View File

@ -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<XH>
? SplitCamel<XR, Lowercase<XH>, [...YN, YC]>
: SplitCamel<XR, `${YC}${XH}`, YN>
: YN;
// @ts-ignore
type SplitKebab<T extends string> = T extends `${infer XH}-${infer XR}`
? [XH, ...SplitKebab<XR>]
: [T];
type ToKebab<T extends readonly string[]> = 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<XR>}` : ''}`
: '';
// @ts-ignore
type ToPascal<T extends readonly string[]> = T extends readonly [
infer XH extends string,
...infer XR extends readonly string[]
]
? `${Capitalize<XH>}${ToPascal<XR>}`
: '';
function h<T extends estree.Node>(
component: T['type'],
props: Omit<T, 'type'>
): 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<T> = never;
type IntrinsicElements = {
[T in keyof typeof generator as ToKebab<SplitCamel<Uncapitalize<T>>>]: {
[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 =
<literal
value={component
.slice('src/'.length, -'.vue'.length)
.replace(/\./g, '/')}
/> as estree.Literal;
const identifier =
<identifier
name={base
.slice(0, -'.vue'.length)
.replace(/[-.]|^(?=\d)/g, '_')
.replace(/(?<=^[^A-Z_]*$)/, '_')}
/> as estree.Identifier;
const parameters = (
<object-expression
properties={[
<property
key={<identifier name='layout' /> as estree.Identifier}
value={<literal value={`${dir}/`.startsWith('src/pages/') ? 'fullscreen' : 'centered'}/> as estree.Literal}
kind={'init' as const}
/> as estree.Property,
...(hasMsw
? [
<property
key={<identifier name='msw' /> as estree.Identifier}
value={<identifier name='msw' /> as estree.Identifier}
kind={'init' as const}
shorthand
/> as estree.Property,
]
: []),
]}
/>
) as estree.ObjectExpression;
const program = (
<program
body={[
<import-declaration
source={<literal value='@storybook/vue3' /> as estree.Literal}
specifiers={[
<import-specifier
local={<identifier name='Meta' /> as estree.Identifier}
imported={<identifier name='Meta' /> as estree.Identifier}
/> as estree.ImportSpecifier,
...(hasImplStories
? []
: [
<import-specifier
local={<identifier name='StoryObj' /> as estree.Identifier}
imported={<identifier name='StoryObj' /> as estree.Identifier}
/> as estree.ImportSpecifier,
]),
]}
/> as estree.ImportDeclaration,
...(hasMsw
? [
<import-declaration
source={<literal value={`./${basename(msw)}`} /> as estree.Literal}
specifiers={[
<import-namespace-specifier
local={<identifier name='msw' /> as estree.Identifier}
/> as estree.ImportNamespaceSpecifier,
]}
/> as estree.ImportDeclaration,
]
: []),
...(hasImplStories
? []
: [
<import-declaration
source={<literal value={`./${base}`} /> as estree.Literal}
specifiers={[
<import-default-specifier local={identifier} /> as estree.ImportDefaultSpecifier,
]}
/> as estree.ImportDeclaration,
]),
...(hasMetaStories
? [
<import-declaration
source={<literal value={`./${basename(metaStories)}`} /> as estree.Literal}
specifiers={[
<import-namespace-specifier
local={<identifier name='storiesMeta' /> as estree.Identifier}
/> as estree.ImportNamespaceSpecifier,
]}
/> as estree.ImportDeclaration,
]
: []),
<variable-declaration
kind={'const' as const}
declarations={[
<variable-declarator
id={<identifier name='meta' /> as estree.Identifier}
init={
<satisfies-expression
expression={
<object-expression
properties={[
<property
key={<identifier name='title' /> as estree.Identifier}
value={literal}
kind={'init' as const}
/> as estree.Property,
<property
key={<identifier name='component' /> as estree.Identifier}
value={identifier}
kind={'init' as const}
/> as estree.Property,
...(hasMetaStories
? [
<spread-element
argument={<identifier name='storiesMeta' /> as estree.Identifier}
/> as estree.SpreadElement,
]
: [])
]}
/> as estree.ObjectExpression
}
reference={<identifier name={`Meta<typeof ${identifier.name}>`} /> as estree.Identifier}
/> as estree.Expression
}
/> as estree.VariableDeclarator,
]}
/> as estree.VariableDeclaration,
...(hasImplStories
? []
: [
<export-named-declaration
declaration={
<variable-declaration
kind={'const' as const}
declarations={[
<variable-declarator
id={<identifier name='Default' /> as estree.Identifier}
init={
<satisfies-expression
expression={
<object-expression
properties={[
<property
key={<identifier name='render' /> as estree.Identifier}
value={
<function-expression
params={[
<identifier name='args' /> as estree.Identifier,
]}
body={
<block-statement
body={[
<return-statement
argument={
<object-expression
properties={[
<property
key={<identifier name='components' /> as estree.Identifier}
value={
<object-expression
properties={[
<property key={identifier} value={identifier} kind={'init' as const} shorthand /> as estree.Property,
]}
/> as estree.ObjectExpression
}
kind={'init' as const}
/> as estree.Property,
<property
key={<identifier name='setup' /> as estree.Identifier}
value={
<function-expression
params={[]}
body={
<block-statement
body={[
<return-statement
argument={
<object-expression
properties={[
<property
key={<identifier name='args' /> as estree.Identifier}
value={<identifier name='args' /> 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,
<property
key={<identifier name='computed' /> as estree.Identifier}
value={
<object-expression
properties={[
<property
key={<identifier name='props' /> as estree.Identifier}
value={
<function-expression
params={[]}
body={
<block-statement
body={[
<return-statement
argument={
<object-expression
properties={[
<spread-element
argument={
<member-expression
object={<this-expression /> as estree.ThisExpression}
property={<identifier name='args' /> 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,
<property
key={<identifier name='template' /> as estree.Identifier}
value={<literal value={`<${identifier.name} v-bind="props" />`} /> 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,
<property
key={<identifier name='parameters' /> as estree.Identifier}
value={parameters}
kind={'init' as const}
/> as estree.Property,
]}
/> as estree.ObjectExpression
}
reference={<identifier name={`StoryObj<typeof ${identifier.name}>`} /> as estree.Identifier}
/> as estree.Expression
}
/> as estree.VariableDeclarator,
]}
/> as estree.VariableDeclaration
}
/> as estree.ExportNamedDeclaration,
]),
<export-default-declaration
declaration={(<identifier name='meta' />) 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));
})
)
);

35
packages/frontend/.storybook/main.ts Normal file
View File

@ -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;

12
packages/frontend/.storybook/manager.ts Normal file
View File

File diff suppressed because one or more lines are too long

16
packages/frontend/.storybook/mocks.ts Normal file
View File

@ -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));
}),
];

9
packages/frontend/.storybook/preload-locale.ts Normal file
View File

@ -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',
)

39
packages/frontend/.storybook/preload-theme.ts Normal file
View File

@ -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'
);
});

4
packages/frontend/.storybook/preview-head.html Normal file
View File

@ -0,0 +1,4 @@
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@2.12.0/tabler-icons.min.css">
<script>
window.global = window;
</script>

113
packages/frontend/.storybook/preview.ts Normal file
View File

@ -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:
'<component :is="popup.component" v-for="popup in popups" :key="popup.id" v-bind="popup.props" v-on="popup.events"/>' +
'<story />',
};
},
],
parameters: {
controls: {
exclude: /^__/,
},
msw: {
handlers: commonHandlers,
},
},
} satisfies Preview;
export default preview;

22
packages/frontend/.storybook/tsconfig.json Normal file
View File

@ -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"]
}

34
packages/frontend/package.json
View File

@ -4,6 +4,9 @@
"scripts": { "scripts": {
"watch": "vite", "watch": "vite",
"build": "vite build", "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": "vitest --run",
"test-and-coverage": "vitest --run --coverage", "test-and-coverage": "vitest --run --coverage",
"typecheck": "vue-tsc --noEmit", "typecheck": "vue-tsc --noEmit",
@ -71,8 +74,27 @@
"vuedraggable": "next" "vuedraggable": "next"
}, },
"devDependencies": { "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", "@testing-library/vue": "^6.6.1",
"@types/escape-regexp": "0.0.1", "@types/escape-regexp": "0.0.1",
"@types/estree": "^1.0.0",
"@types/gulp": "4.0.10", "@types/gulp": "4.0.10",
"@types/gulp-rename": "2.0.1", "@types/gulp-rename": "2.0.1",
"@types/matter-js": "0.18.2", "@types/matter-js": "0.18.2",
@ -80,6 +102,7 @@
"@types/punycode": "2.1.0", "@types/punycode": "2.1.0",
"@types/sanitize-html": "2.9.0", "@types/sanitize-html": "2.9.0",
"@types/seedrandom": "3.0.5", "@types/seedrandom": "3.0.5",
"@types/testing-library__jest-dom": "^5.14.5",
"@types/throttle-debounce": "5.0.0", "@types/throttle-debounce": "5.0.0",
"@types/tinycolor2": "1.4.3", "@types/tinycolor2": "1.4.3",
"@types/uuid": "9.0.1", "@types/uuid": "9.0.1",
@ -89,13 +112,24 @@
"@typescript-eslint/parser": "5.57.0", "@typescript-eslint/parser": "5.57.0",
"@vitest/coverage-c8": "^0.29.8", "@vitest/coverage-c8": "^0.29.8",
"@vue/runtime-core": "3.2.47", "@vue/runtime-core": "3.2.47",
"astring": "^1.8.4",
"chokidar-cli": "^3.0.0",
"chromatic": "^6.17.2",
"cross-env": "7.0.3", "cross-env": "7.0.3",
"cypress": "12.9.0", "cypress": "12.9.0",
"eslint": "8.37.0", "eslint": "8.37.0",
"eslint-plugin-import": "2.27.5", "eslint-plugin-import": "2.27.5",
"eslint-plugin-vue": "9.10.0", "eslint-plugin-vue": "9.10.0",
"fast-glob": "^3.2.12",
"happy-dom": "8.9.0", "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", "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", "summaly": "github:misskey-dev/summaly",
"vitest": "^0.29.8", "vitest": "^0.29.8",
"vitest-fetch-mock": "^0.2.2", "vitest-fetch-mock": "^0.2.2",

303
packages/frontend/public/mockServiceWorker.js Normal file
View File

@ -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)
}

28
packages/frontend/src/components/MkAnalogClock.stories.impl.ts Normal file
View File

@ -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: '<MkAnalogClock v-bind="props" />',
};
},
parameters: {
layout: 'fullscreen',
},
} satisfies StoryObj<typeof MkAnalogClock>;

30
packages/frontend/src/components/MkButton.stories.impl.ts Normal file
View File

@ -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: '<MkButton v-bind="props">Text</MkButton>',
};
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkButton>;

2
packages/frontend/src/components/MkCaptcha.stories.impl.ts Normal file
View File

@ -0,0 +1,2 @@
import MkCaptcha from './MkCaptcha.vue';
void MkCaptcha;

2
packages/frontend/src/components/MkContextMenu.vue
View File

@ -17,8 +17,8 @@ import { onMounted, onBeforeUnmount } from 'vue';
import MkMenu from './MkMenu.vue'; import MkMenu from './MkMenu.vue';
import { MenuItem } from './types/menu.vue'; import { MenuItem } from './types/menu.vue';
import contains from '@/scripts/contains'; import contains from '@/scripts/contains';
import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import * as os from '@/os';
const props = defineProps<{ const props = defineProps<{
items: MenuItem[]; items: MenuItem[];

20
packages/frontend/src/components/MkMenu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div role="menu">
<div <div
ref="itemsEl" v-hotkey="keymap" ref="itemsEl" v-hotkey="keymap"
class="_popup _shadow" class="_popup _shadow"
@ -8,37 +8,37 @@
@contextmenu.self="e => e.preventDefault()" @contextmenu.self="e => e.preventDefault()"
> >
<template v-for="(item, i) in items2"> <template v-for="(item, i) in items2">
<div v-if="item === null" :class="$style.divider"></div> <div v-if="item === null" role="separator" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" :class="[$style.label, $style.item]"> <span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item]">
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</span> </span>
<span v-else-if="item.type === 'pending'" :tabindex="i" :class="[$style.pending, $style.item]"> <span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span> <span><MkEllipsis/></span>
</span> </span>
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</MkA> </MkA>
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="$style.item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="$style.item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</a> </a>
<button v-else-if="item.type === 'user'" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> <MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</button> </button>
<span v-else-if="item.type === 'switch'" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <span v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</MkSwitch> <MkSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</MkSwitch>
</span> </span>
<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)"> <button v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span> <span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
</button> </button>
<button v-else :tabindex="i" class="_button" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <button v-else :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>

2
packages/frontend/src/components/MkUrlPreview.vue
View File

@ -150,7 +150,7 @@ function adjustTweetHeight(message: any) {
} }
const openPlayer = (): void => { const openPlayer = (): void => {
os.popup(defineAsyncComponent(() => import('@/components/MkYoutubePlayer.vue')), { os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), {
url: requestUrl.href, url: requestUrl.href,
}); });
}; };

0
packages/frontend/src/components/MkYoutubePlayer.vue → packages/frontend/src/components/MkYouTubePlayer.vue
View File

47
packages/frontend/src/components/global/MkA.stories.impl.ts Normal file
View File

@ -0,0 +1,47 @@
/* 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 MkA from './MkA.vue';
import { tick } from '@/scripts/test-utils';
export const Default = {
render(args) {
return {
components: {
MkA,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkA v-bind="props">Text</MkA>',
};
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
await userEvent.click(a, { button: 2 });
await tick();
const menu = canvas.getByRole('menu');
await expect(menu).toBeInTheDocument();
await userEvent.click(a, { button: 0 });
a.blur();
await tick();
await expect(menu).not.toBeInTheDocument();
},
args: {
to: '#test',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkA>;

43
packages/frontend/src/components/global/MkAcct.stories.impl.ts Normal file
View File

@ -0,0 +1,43 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { userDetailed } from '../../../.storybook/fakes';
import MkAcct from './MkAcct.vue';
export const Default = {
render(args) {
return {
components: {
MkAcct,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAcct v-bind="props" />',
};
},
args: {
user: {
...userDetailed,
host: null,
},
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkAcct>;
export const Detail = {
...Default,
args: {
...Default.args,
user: userDetailed,
detail: true,
},
} satisfies StoryObj<typeof MkAcct>;

1
packages/frontend/src/components/global/MkAcct.vue
View File

@ -18,4 +18,3 @@ defineProps<{
const host = toUnicode(hostRaw); const host = toUnicode(hostRaw);
</script> </script>

120
packages/frontend/src/components/global/MkAd.stories.impl.ts Normal file
View File

@ -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: '<MkAd v-bind="props" />',
};
},
async play({ canvasElement, args }) {
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
const img = within(a).getByRole('img');
await expect(img).toBeInTheDocument();
let buttons = canvas.getAllByRole<HTMLButtonElement>('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<HTMLButtonElement>('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<HTMLAnchorElement>('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<typeof MkAd>;
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<typeof MkAd>;
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<typeof MkAd>;
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<typeof MkAd>;
export const ZeroRatio = {
...Square,
args: {
...Square.args,
specify: {
...Square.args.specify,
ratio: 0,
},
__hasReduce: false,
},
} satisfies StoryObj<typeof MkAd>;

2
packages/frontend/src/components/global/MkAd.vue
View File

@ -20,13 +20,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { i18n } from '@/i18n';
import { instance } from '@/instance'; import { instance } from '@/instance';
import { host } from '@/config'; import { host } from '@/config';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import * as os from '@/os'; import * as os from '@/os';
import { $i } from '@/account'; import { $i } from '@/account';
import { i18n } from '@/i18n';
type Ad = (typeof instance)['ads'][number]; type Ad = (typeof instance)['ads'][number];

66
packages/frontend/src/components/global/MkAvatar.stories.impl.ts Normal file
View File

@ -0,0 +1,66 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { userDetailed } from '../../../.storybook/fakes';
import MkAvatar from './MkAvatar.vue';
const common = {
render(args) {
return {
components: {
MkAvatar,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAvatar v-bind="props" />',
};
},
args: {
user: userDetailed,
},
decorators: [
(Story, context) => ({
// eslint-disable-next-line quotes
template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`,
}),
],
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkAvatar>;
export const ProfilePage = {
...common,
args: {
...common.args,
size: 120,
indicator: true,
},
} satisfies StoryObj<typeof MkAvatar>;
export const ProfilePageCat = {
...ProfilePage,
args: {
...ProfilePage.args,
user: {
...userDetailed,
isCat: true,
},
},
parameters: {
...ProfilePage.parameters,
chromatic: {
/* Your story couldn’t be captured because it exceeds our 25,000,000px limit. Its dimensions are 5,504,893x5,504,892px. Possible ways to resolve:
* * Separate pages into components
* * Minimize the number of very large elements in a story
*/
disableSnapshot: true,
},
},
} satisfies StoryObj<typeof MkAvatar>;

1
packages/frontend/src/components/global/MkAvatar.vue
View File

@ -148,6 +148,7 @@ watch(() => props.user.avatarBlurhash, () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 50%; padding: 50%;
pointer-events: none;
&.mask { &.mask {
-webkit-mask: -webkit-mask:

45
packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts Normal file
View File

@ -0,0 +1,45 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import MkCustomEmoji from './MkCustomEmoji.vue';
export const Default = {
render(args) {
return {
components: {
MkCustomEmoji,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkCustomEmoji v-bind="props" />',
};
},
args: {
name: 'mi',
url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkCustomEmoji>;
export const Normal = {
...Default,
args: {
...Default.args,
normal: true,
},
} satisfies StoryObj<typeof MkCustomEmoji>;
export const Missing = {
...Default,
args: {
name: Default.args.name,
},
} satisfies StoryObj<typeof MkCustomEmoji>;

32
packages/frontend/src/components/global/MkEllipsis.stories.impl.ts Normal file
View File

@ -0,0 +1,32 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import isChromatic from 'chromatic/isChromatic';
import MkEllipsis from './MkEllipsis.vue';
export const Default = {
render(args) {
return {
components: {
MkEllipsis,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkEllipsis v-bind="props" />',
};
},
args: {
static: isChromatic(),
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkEllipsis>;

16
packages/frontend/src/components/global/MkEllipsis.vue
View File

@ -1,9 +1,19 @@
<template> <template>
<span :class="$style.root"> <span :class="[$style.root, { [$style.static]: static }]">
<span :class="$style.dot">.</span><span :class="$style.dot">.</span><span :class="$style.dot">.</span> <span :class="$style.dot">.</span><span :class="$style.dot">.</span><span :class="$style.dot">.</span>
</span> </span>
</template> </template>
<script lang="ts" setup>
import { } from 'vue';
const props = withDefaults(defineProps<{
static?: boolean;
}>(), {
static: false,
});
</script>
<style lang="scss" module> <style lang="scss" module>
@keyframes ellipsis { @keyframes ellipsis {
0%, 80%, 100% { 0%, 80%, 100% {
@ -15,7 +25,9 @@
} }
.root { .root {
&.static > .dot {
animation-play-state: paused;
}
} }
.dot { .dot {

31
packages/frontend/src/components/global/MkEmoji.stories.impl.ts Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import MkEmoji from './MkEmoji.vue';
export const Default = {
render(args) {
return {
components: {
MkEmoji,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkEmoji v-bind="props" />',
};
},
args: {
emoji: '❤',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkEmoji>;

5
packages/frontend/src/components/global/MkError.stories.meta.ts Normal file
View File

@ -0,0 +1,5 @@
export const argTypes = {
retry: {
action: 'retry',
},
};

60
packages/frontend/src/components/global/MkLoading.stories.impl.ts Normal file
View File

@ -0,0 +1,60 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import isChromatic from 'chromatic/isChromatic';
import MkLoading from './MkLoading.vue';
export const Default = {
render(args) {
return {
components: {
MkLoading,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkLoading v-bind="props" />',
};
},
args: {
static: isChromatic(),
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkLoading>;
export const Inline = {
...Default,
args: {
...Default.args,
inline: true,
},
} satisfies StoryObj<typeof MkLoading>;
export const Colored = {
...Default,
args: {
...Default.args,
colored: true,
},
} satisfies StoryObj<typeof MkLoading>;
export const Mini = {
...Default,
args: {
...Default.args,
mini: true,
},
} satisfies StoryObj<typeof MkLoading>;
export const Em = {
...Default,
args: {
...Default.args,
em: true,
},
} satisfies StoryObj<typeof MkLoading>;

8
packages/frontend/src/components/global/MkLoading.vue
View File

@ -6,7 +6,7 @@
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g> </g>
</svg> </svg>
<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"> <svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)"> <g transform="matrix(1.125,0,0,1.125,12,12)">
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g> </g>
@ -19,11 +19,13 @@
import { } from 'vue'; import { } from 'vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
static?: boolean;
inline?: boolean; inline?: boolean;
colored?: boolean; colored?: boolean;
mini?: boolean; mini?: boolean;
em?: boolean; em?: boolean;
}>(), { }>(), {
static: false,
inline: false, inline: false,
colored: true, colored: true,
mini: false, mini: false,
@ -97,5 +99,9 @@ const props = withDefaults(defineProps<{
.fg { .fg {
animation: spinner 0.5s linear infinite; animation: spinner 0.5s linear infinite;
&.static {
animation-play-state: paused;
}
} }
</style> </style>

74
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts Normal file
View File

@ -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: '<MkMisskeyFlavoredMarkdown v-bind="props" />',
};
},
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<typeof MkMisskeyFlavoredMarkdown>;
export const Plain = {
...Default,
args: {
...Default.args,
plain: true,
},
} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;
export const Nowrap = {
...Default,
args: {
...Default.args,
nowrap: true,
},
} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;
export const IsNotNote = {
...Default,
args: {
...Default.args,
isNote: false,
},
} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;

98
packages/frontend/src/components/global/MkPageHeader.stories.impl.ts Normal file
View File

@ -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: '<MkPageHeader v-bind="props" />',
};
},
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<typeof MkPageHeader>;
export const OneTab = {
...Empty,
args: {
...Empty.args,
tab: 'sometabkey',
tabs: [
{
key: 'sometabkey',
title: 'Some Tab Title',
},
],
},
} satisfies StoryObj<typeof MkPageHeader>;
export const Icon = {
...OneTab,
args: {
...OneTab.args,
tabs: [
{
...OneTab.args.tabs[0],
icon: 'ti ti-home',
},
],
},
} satisfies StoryObj<typeof MkPageHeader>;
export const IconOnly = {
...Icon,
args: {
...Icon.args,
tabs: [
{
...Icon.args.tabs[0],
title: undefined,
iconOnly: true,
},
],
},
} satisfies StoryObj<typeof MkPageHeader>;
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<typeof MkPageHeader>;

3
packages/frontend/src/components/global/MkPageHeader.tabs.stories.impl.ts Normal file
View File

@ -0,0 +1,3 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import MkPageHeader_tabs from './MkPageHeader.tabs.vue';
void MkPageHeader_tabs;

14
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View File

@ -33,14 +33,18 @@
<script lang="ts"> <script lang="ts">
export type Tab = { export type Tab = {
key: string; key: string;
onClick?: (ev: MouseEvent) => void;
} & (
| {
iconOnly?: false;
title: string; title: string;
icon?: string; icon?: string;
iconOnly?: boolean; }
onClick?: (ev: MouseEvent) => void; | {
} & {
iconOnly: true; iconOnly: true;
iccn: string; icon: string;
}; }
);
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>

3
packages/frontend/src/components/global/MkStickyContainer.stories.impl.ts Normal file
View File

@ -0,0 +1,3 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import MkStickyContainer from './MkStickyContainer.vue';
void MkStickyContainer;

312
packages/frontend/src/components/global/MkTime.stories.impl.ts Normal file
View File

@ -0,0 +1,312 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { expect } from '@storybook/jest';
import { StoryObj } from '@storybook/vue3';
import MkTime from './MkTime.vue';
import { i18n } from '@/i18n';
import { dateTimeFormat } from '@/scripts/intl-const';
const now = new Date('2023-04-01T00:00:00.000Z');
const future = new Date(8640000000000000);
const oneHourAgo = new Date(now.getTime() - 3600000);
const oneDayAgo = new Date(now.getTime() - 86400000);
const oneWeekAgo = new Date(now.getTime() - 604800000);
const oneMonthAgo = new Date(now.getTime() - 2592000000);
const oneYearAgo = new Date(now.getTime() - 31536000000);
export const Empty = {
render(args) {
return {
components: {
MkTime,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkTime v-bind="props" />',
};
},
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.ts._ago.invalid);
},
args: {
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeFuture = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.ts._ago.future);
},
args: {
...Empty.args,
time: future,
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteFuture = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: future,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailFuture = {
...Empty,
async play(context) {
await AbsoluteFuture.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeFuture.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: future,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeNow = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.ts._ago.justNow);
},
args: {
...Empty.args,
time: now,
origin: now,
mode: 'relative',
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteNow = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: now,
origin: now,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailNow = {
...Empty,
async play(context) {
await AbsoluteNow.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeNow.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: now,
origin: now,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeOneHourAgo = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.hoursAgo', { n: 1 }));
},
args: {
...Empty.args,
time: oneHourAgo,
origin: now,
mode: 'relative',
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteOneHourAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: oneHourAgo,
origin: now,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailOneHourAgo = {
...Empty,
async play(context) {
await AbsoluteOneHourAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeOneHourAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: oneHourAgo,
origin: now,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeOneDayAgo = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.daysAgo', { n: 1 }));
},
args: {
...Empty.args,
time: oneDayAgo,
origin: now,
mode: 'relative',
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteOneDayAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: oneDayAgo,
origin: now,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailOneDayAgo = {
...Empty,
async play(context) {
await AbsoluteOneDayAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeOneDayAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: oneDayAgo,
origin: now,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeOneWeekAgo = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.weeksAgo', { n: 1 }));
},
args: {
...Empty.args,
time: oneWeekAgo,
origin: now,
mode: 'relative',
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteOneWeekAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: oneWeekAgo,
origin: now,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailOneWeekAgo = {
...Empty,
async play(context) {
await AbsoluteOneWeekAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeOneWeekAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: oneWeekAgo,
origin: now,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeOneMonthAgo = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.monthsAgo', { n: 1 }));
},
args: {
...Empty.args,
time: oneMonthAgo,
origin: now,
mode: 'relative',
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteOneMonthAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: oneMonthAgo,
origin: now,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailOneMonthAgo = {
...Empty,
async play(context) {
await AbsoluteOneMonthAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeOneMonthAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: oneMonthAgo,
origin: now,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;
export const RelativeOneYearAgo = {
...Empty,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.yearsAgo', { n: 1 }));
},
args: {
...Empty.args,
time: oneYearAgo,
origin: now,
mode: 'relative',
},
} satisfies StoryObj<typeof MkTime>;
export const AbsoluteOneYearAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
},
args: {
...Empty.args,
time: oneYearAgo,
origin: now,
mode: 'absolute',
},
} satisfies StoryObj<typeof MkTime>;
export const DetailOneYearAgo = {
...Empty,
async play(context) {
await AbsoluteOneYearAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(' (');
await RelativeOneYearAgo.play(context);
await expect(context.canvasElement).toHaveTextContent(')');
},
args: {
...Empty.args,
time: oneYearAgo,
origin: now,
mode: 'detail',
},
} satisfies StoryObj<typeof MkTime>;

6
packages/frontend/src/components/global/MkTime.vue
View File

@ -14,8 +14,10 @@ import { dateTimeFormat } from '@/scripts/intl-const';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
time: Date | string | number | null; time: Date | string | number | null;
origin?: Date | null;
mode?: 'relative' | 'absolute' | 'detail'; mode?: 'relative' | 'absolute' | 'detail';
}>(), { }>(), {
origin: null,
mode: 'relative', mode: 'relative',
}); });
@ -25,7 +27,7 @@ const _time = props.time == null ? NaN :
const invalid = Number.isNaN(_time); const invalid = Number.isNaN(_time);
const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid; const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
let now = $ref((new Date()).getTime()); let now = $ref((props.origin ?? new Date()).getTime());
const relative = $computed<string>(() => { const relative = $computed<string>(() => {
if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
if (invalid) return i18n.ts._ago.invalid; if (invalid) return i18n.ts._ago.invalid;
@ -46,7 +48,7 @@ const relative = $computed<string>(() => {
let tickId: number; let tickId: number;
function tick() { function tick() {
now = (new Date()).getTime(); now = props.origin ?? (new Date()).getTime();
const ago = (now - _time) / 1000/*ms*/; const ago = (now - _time) / 1000/*ms*/;
const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000; const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;

77
packages/frontend/src/components/global/MkUrl.stories.impl.ts Normal file
View File

@ -0,0 +1,77 @@
/* 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 { rest } from 'msw';
import { commonHandlers } from '../../../.storybook/mocks';
import MkUrl from './MkUrl.vue';
export const Default = {
render(args) {
return {
components: {
MkUrl,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkUrl v-bind="props">Text</MkUrl>',
};
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
await expect(a).toHaveAttribute('href', 'https://misskey-hub.net/');
await userEvent.hover(a);
/*
await tick(); // FIXME: wait for network request
const anchors = canvas.getAllByRole<HTMLAnchorElement>('link');
const popup = anchors.find(anchor => anchor !== a)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
await expect(popup).toBeInTheDocument();
await expect(popup).toHaveAttribute('href', 'https://misskey-hub.net/');
await expect(popup).toHaveTextContent('Misskey Hub');
await expect(popup).toHaveTextContent('Misskeyはオープンソースの分散型ソーシャルネットワーキングプラットフォームです。');
await expect(popup).toHaveTextContent('misskey-hub.net');
const icon = within(popup).getByRole('img');
await expect(icon).toBeInTheDocument();
await expect(icon).toHaveAttribute('src', 'https://misskey-hub.net/favicon.ico');
*/
await userEvent.unhover(a);
},
args: {
url: 'https://misskey-hub.net/',
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
rest.get('/url', (req, res, ctx) => {
return res(ctx.json({
title: 'Misskey Hub',
icon: 'https://misskey-hub.net/favicon.ico',
description: 'Misskeyはオープンソースの分散型ソーシャルネットワーキングプラットフォームです。',
thumbnail: null,
player: {
url: null,
width: null,
height: null,
allow: [],
},
sitename: 'misskey-hub.net',
sensitive: false,
url: 'https://misskey-hub.net/',
}));
}),
],
},
},
} satisfies StoryObj<typeof MkUrl>;

57
packages/frontend/src/components/global/MkUserName.stories.impl.ts Normal file
View File

@ -0,0 +1,57 @@
/* 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 { userDetailed } from '../../../.storybook/fakes';
import MkUserName from './MkUserName.vue';
export const Default = {
render(args) {
return {
components: {
MkUserName,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkUserName v-bind="props"/>',
};
},
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(userDetailed.name);
},
args: {
user: userDetailed,
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkUserName>;
export const Anonymous = {
...Default,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(userDetailed.username);
},
args: {
...Default.args,
user: {
...userDetailed,
name: null,
},
},
} satisfies StoryObj<typeof MkUserName>;
export const Wrap = {
...Default,
args: {
...Default.args,
nowrap: false,
},
} satisfies StoryObj<typeof MkUserName>;

3
packages/frontend/src/components/global/RouterView.stories.impl.ts Normal file
View File

@ -0,0 +1,3 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import RouterView from './RouterView.vue';
void RouterView;

12
packages/frontend/src/index.mdx Normal file
View File

@ -0,0 +1,12 @@
import { Meta } from '@storybook/blocks'
<Meta title="index" />
# Welcome to Misskey Storybook
This project uses [Storybook](https://storybook.js.org/) to develop and document components.
You can find more information about the usage of Storybook in this project in the CONTRIBUTING.md file placed in the root of this repository.
The Misskey Storybook is under development and not all components are documented yet.
Contributions are welcome! Please refer to [#10336](https://github.com/misskey-dev/misskey/issues/10336) for more information.
Thank you for your support!

5
packages/frontend/src/pages/user/activity.following.vue
View File

@ -77,7 +77,10 @@ async function renderChart() {
barPercentage: 0.7, barPercentage: 0.7,
categoryPercentage: 0.7, categoryPercentage: 0.7,
fill: true, fill: true,
} satisfies ChartDataset, extra); /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
} satisfies ChartData, extra);
*/
}, extra);
} }
chartInstance = new Chart(chartEl, { chartInstance = new Chart(chartEl, {

3
packages/frontend/src/pages/user/activity.heatmap.vue
View File

@ -113,6 +113,9 @@ async function renderChart() {
const a = c.chart.chartArea ?? {}; const a = c.chart.chartArea ?? {};
return (a.bottom - a.top) / 7 - marginEachCell; return (a.bottom - a.top) / 7 - marginEachCell;
}, },
/* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
}] satisfies ChartData[],
*/
}], }],
}, },
options: { options: {

5
packages/frontend/src/pages/user/activity.notes.vue
View File

@ -76,7 +76,10 @@ async function renderChart() {
borderRadius: 4, borderRadius: 4,
barPercentage: 0.9, barPercentage: 0.9,
fill: true, fill: true,
} satisfies ChartDataset, extra); /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
} satisfies ChartData, extra);
*/
}, extra);
} }
chartInstance = new Chart(chartEl, { chartInstance = new Chart(chartEl, {

5
packages/frontend/src/pages/user/activity.pv.vue
View File

@ -77,7 +77,10 @@ async function renderChart() {
barPercentage: 0.7, barPercentage: 0.7,
categoryPercentage: 0.7, categoryPercentage: 0.7,
fill: true, fill: true,
} satisfies ChartDataset, extra); /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
} satisfies ChartData, extra);
*/
}, extra);
} }
chartInstance = new Chart(chartEl, { chartInstance = new Chart(chartEl, {

3
packages/frontend/src/scripts/achievements.ts
View File

@ -443,11 +443,14 @@ export const ACHIEVEMENT_BADGES = {
bg: 'linear-gradient(0deg, rgb(144, 224, 255), rgb(255, 168, 252))', bg: 'linear-gradient(0deg, rgb(144, 224, 255), rgb(255, 168, 252))',
frame: 'bronze', frame: 'bronze',
}, },
/* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
} as const satisfies Record<typeof ACHIEVEMENT_TYPES[number], { } as const satisfies Record<typeof ACHIEVEMENT_TYPES[number], {
img: string; img: string;
bg: string | null; bg: string | null;
frame: 'bronze' | 'silver' | 'gold' | 'platinum'; frame: 'bronze' | 'silver' | 'gold' | 'platinum';
}>; }>;
*/
} as const;
export const claimedAchievements: typeof ACHIEVEMENT_TYPES[number][] = ($i && $i.achievements) ? $i.achievements.map(x => x.name) : []; export const claimedAchievements: typeof ACHIEVEMENT_TYPES[number][] = ($i && $i.achievements) ? $i.achievements.map(x => x.name) : [];

6
packages/frontend/src/scripts/test-utils.ts Normal file
View File

@ -0,0 +1,6 @@
/// <reference types="@testing-library/jest-dom"/>
export async function tick(): Promise<void> {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
await new Promise((globalThis.requestIdleCallback ?? setTimeout) as never);
}

3
packages/frontend/tsconfig.json
View File

@ -43,5 +43,8 @@
".eslintrc.js", ".eslintrc.js",
"./**/*.ts", "./**/*.ts",
"./**/*.vue" "./**/*.vue"
],
"exclude": [
".storybook/**/*",
] ]
} }

13
packages/frontend/vite.config.ts
View File

@ -1,7 +1,6 @@
import path from 'path'; import path from 'path';
import pluginVue from '@vitejs/plugin-vue'; import pluginVue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite'; import { type UserConfig, defineConfig } from 'vite';
import { configDefaults as vitestConfigDefaults } from 'vitest/config';
import locales from '../../locales'; import locales from '../../locales';
import meta from '../../package.json'; import meta from '../../package.json';
@ -38,7 +37,7 @@ function toBase62(n: number): string {
return result; return result;
} }
export default defineConfig(({ command, mode }) => { export function getConfig(): UserConfig {
return { return {
base: '/vite/', base: '/vite/',
@ -62,7 +61,7 @@ export default defineConfig(({ command, mode }) => {
css: { css: {
modules: { modules: {
generateScopedName: (name, filename, css) => { generateScopedName(name, filename, _css): string {
const id = (path.relative(__dirname, filename.split('?')[0]) + '-' + name).replace(/[\\\/\.\?&=]/g, '-').replace(/(src-|vue-)/g, ''); const id = (path.relative(__dirname, filename.split('?')[0]) + '-' + name).replace(/[\\\/\.\?&=]/g, '-').replace(/(src-|vue-)/g, '');
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
return 'x' + toBase62(hash(id)).substring(0, 4); return 'x' + toBase62(hash(id)).substring(0, 4);
@ -132,4 +131,8 @@ export default defineConfig(({ command, mode }) => {
}, },
}, },
}; };
}); }
const config = defineConfig(({ command, mode }) => getConfig());
export default config;

2
packages/misskey-js/package.json
View File

@ -21,11 +21,11 @@
}, },
"devDependencies": { "devDependencies": {
"@microsoft/api-extractor": "7.34.4", "@microsoft/api-extractor": "7.34.4",
"@swc/jest": "0.2.24",
"@types/jest": "29.5.0", "@types/jest": "29.5.0",
"@types/node": "18.15.11", "@types/node": "18.15.11",
"@typescript-eslint/eslint-plugin": "5.57.0", "@typescript-eslint/eslint-plugin": "5.57.0",
"@typescript-eslint/parser": "5.57.0", "@typescript-eslint/parser": "5.57.0",
"@swc/jest": "0.2.24",
"eslint": "8.37.0", "eslint": "8.37.0",
"jest": "^29.5.0", "jest": "^29.5.0",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",

5580
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff