moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

Merge branch 'storybook' of https://github.com/misskey-dev/misskey into storybook

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-03 13:41:55 +09:00
commit b303a80491
No known key found for this signature in database
GPG Key ID: 3E87B98A3F6BAB99
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
CONTRIBUTING.md
View File

@ -214,17 +214,14 @@ Misskey uses [Storybook](https://storybook.js.org/) for UI development.
##### Setup ##### Setup
```bash ```bash
cd path/to/packages/misskey-js pnpm --filter misskey-js build
pnpm build pnpm --filter frontend tsc -p .storybook && (node packages/frontend/.storybook/preload-locale.js & node packages/frontend/.storybook/preload-theme.js)
cd path/to/packages/frontend
pnpm tsc -p .storybook && (node .storybook/preload-locale.js & node .storybook/preload-theme.js)
``` ```
##### Run ##### Run
```bash ```bash
cd path/to/packages/frontend node packages/frontend/.storybook/generate.js && pnpm --filter frontend storybook dev
node .storybook/generate.js && pnpm storybook dev
``` ```
#### macOS & Linux #### macOS & Linux
@ -232,15 +229,13 @@ node .storybook/generate.js && pnpm storybook dev
##### Setup ##### Setup
```bash ```bash
cd path/to/packages/misskey-js pnpm --filter misskey-js build
pnpm build
``` ```
##### Run ##### Run
```bash ```bash
cd path/to/packages/frontend pnpm --filter frontend storybook-dev
pnpm storybook-dev
``` ```
### Usage ### Usage
@ -267,7 +262,7 @@ export const Default = {
computed: { computed: {
props() { props() {
return { return {
...args, ...this.args,
}; };
}, },
}, },
@ -290,7 +285,20 @@ import MyComponent from './MyComponent.vue';
void MyComponent; void MyComponent;
``` ```
You can use msw to mock API requests in the storybook. Creating a `MyComponent.stories.msw.ts` file to define the mock handlers. 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 ```ts
import { rest } from 'msw'; import { rest } from 'msw';