Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update the way of creating context in "PureInboxScreen.stories.js" #774

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 40 additions & 42 deletions content/intro-to-storybook/vue/zh-CN/composite-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,62 +89,60 @@ import * as TaskStories from './Task.stories';
export default {
component: TaskList,
title: 'TaskList',
tags: ['autodocs'],
decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })],
argTypes: {
onPinTask: {},
onArchiveTask: {},
...TaskStories.ActionsData,
},
};

const Template = args => ({
components: { TaskList },
setup() {
return { args, ...TaskStories.actionsData };
export const Default = {
args: {
// Shaping the stories through args composition.
// The data was inherited from the Default story in Task.stories.js.
tasks: [
{ ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
{ ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
{ ...TaskStories.Default.args.task, id: '3', title: 'Task 3' },
{ ...TaskStories.Default.args.task, id: '4', title: 'Task 4' },
{ ...TaskStories.Default.args.task, id: '5', title: 'Task 5' },
{ ...TaskStories.Default.args.task, id: '6', title: 'Task 6' },
],
},
template: '<TaskList v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
// Shaping the stories through args composition.
// The data was inherited from the Default story in task.stories.js.
tasks: [
{ ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
{ ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
{ ...TaskStories.Default.args.task, id: '3', title: 'Task 3' },
{ ...TaskStories.Default.args.task, id: '4', title: 'Task 4' },
{ ...TaskStories.Default.args.task, id: '5', title: 'Task 5' },
{ ...TaskStories.Default.args.task, id: '6', title: 'Task 6' },
],
};

export const WithPinnedTasks = Template.bind({});
WithPinnedTasks.args = {
// Shaping the stories through args composition.
// Inherited data coming from the Default story.
tasks: [
...Default.args.tasks.slice(0, 5),
{ id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
],
export const WithPinnedTasks = {
args: {
// Shaping the stories through args composition.
// Inherited data coming from the Default story.
tasks: [
...Default.args.tasks.slice(0, 5),
{ id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
],
},
};

export const Loading = Template.bind({});
Loading.args = {
tasks: [],
loading: true,
export const Loading = {
args: {
tasks: [],
loading: true,
},
};

export const Empty = Template.bind({});
Empty.args = {
// Shaping the stories through args composition.
// Inherited data coming from the Loading story.
...Loading.args,
loading: false,
export const Empty = {
args: {
// Shaping the stories through args composition.
// Inherited data coming from the Loading story.
...Loading.args,
loading: false,
},
};
```

<div class="aside">
<a href="https://storybook.js.org/docs/vue/writing-stories/decorators"><b>Decorators - 装饰器</b></a> 提供了一种任意包装 story 的方法。上述例子中我们使用默认导出的 decorator 关键字给渲染的组件周围添加一些 <code>margin</code>。但是装饰器也可以给组件添加其他上下文,详见下文。

[**Decorators - 装饰器**](https://storybook.js.org/docs/writing-stories/decorators) 提供了一种任意包装 story 的方法。上述例子中我们使用默认导出的 decorator 关键字给渲染的组件周围添加一些 `margin`。但是装饰器也可以给组件添加其他上下文,详见下文。

</div>

通过导入 `TaskStories`,我们能够以最小的代价[组合](https://storybook.js.org/docs/vue/writing-stories/args#args-composition) story 中的参数(argument)。这样,就为每个组件保留了其所需的数据和 action(模拟回调)。
Expand All @@ -153,7 +151,7 @@ Empty.args = {

<video autoPlay muted playsInline loop>
<source
src="/intro-to-storybook/inprogress-tasklist-states-6-0.mp4"
src="/intro-to-storybook/inprogress-tasklist-states-7-0.mp4"
type="video/mp4"
/>
</video>
Expand Down Expand Up @@ -239,7 +237,7 @@ export default {

<video autoPlay muted playsInline loop>
<source
src="/intro-to-storybook/finished-tasklist-states-6-0.mp4"
src="/intro-to-storybook/finished-tasklist-states-7-0.mp4"
type="video/mp4"
/>
</video>
Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/vue/zh-CN/conclusion.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Storybook 对于 React,React Native,Vue,Angular,Svelte 及其他许多

想要更加深入?这些是一些有用的资源。

- [**Storybook 官方文档**](https://storybook.js.org/docs/vue/get-started/introduction)拥有 API 文档,社区链接和插件游廊。
- [**Storybook 官方文档**](https://storybook.js.org/docs/get-started/install)拥有 API 文档,社区链接和插件游廊。
- [**UI 测试手册**](https://storybook.js.org/blog/ui-testing-playbook/)重点介绍了 Twilio,Adobe,Peloton,和 Shopify 高速团队使用的最佳实践。
- [**回归测试手册**](https://storybook.js.org/tutorials/visual-testing-handbook/)深入描述使用 Storybook 对组件进行视觉测试。免费的 31 页电子书。
- [**Storybook Discord 聊天室**](https://discord.gg/UUt2PJb)使您与 Storybook 社区交流。从其他 Storybook 用户获取或提供帮助。
Expand Down
70 changes: 37 additions & 33 deletions content/intro-to-storybook/vue/zh-CN/data.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,12 @@ import * as TaskStories from './Task.stories';
export default {
+ component: PureTaskList,
+ title: 'PureTaskList',
tags: ['autodocs'],
decorators: [
() => ({ template: '<div style="margin: 3em;"><story/></div>' }),
],
argTypes: {
onPinTask: {},
onArchiveTask: {},
...TaskStories.ActionsData,
},
};

Expand All @@ -218,48 +218,52 @@ const Template = (args, { argTypes }) => ({
+ template: '<PureTaskList v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
// Shaping the stories through args composition.
// The data was inherited from the Default story in task.stories.js.
tasks: [
{ ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
{ ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
{ ...TaskStories.Default.args.task, id: '3', title: 'Task 3' },
{ ...TaskStories.Default.args.task, id: '4', title: 'Task 4' },
{ ...TaskStories.Default.args.task, id: '5', title: 'Task 5' },
{ ...TaskStories.Default.args.task, id: '6', title: 'Task 6' },
],
export const Default = {
args: {
// Shaping the stories through args composition.
// The data was inherited from the Default story in Task.stories.js.
tasks: [
{ ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
{ ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
{ ...TaskStories.Default.args.task, id: '3', title: 'Task 3' },
{ ...TaskStories.Default.args.task, id: '4', title: 'Task 4' },
{ ...TaskStories.Default.args.task, id: '5', title: 'Task 5' },
{ ...TaskStories.Default.args.task, id: '6', title: 'Task 6' },
],
},
};

export const WithPinnedTasks = Template.bind({});
WithPinnedTasks.args = {
// Shaping the stories through args composition.
// Inherited data coming from the Default story.
tasks: [
...Default.args.tasks.slice(0, 5),
{ id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
],
export const WithPinnedTasks = {
args: {
// Shaping the stories through args composition.
// Inherited data coming from the Default story.
tasks: [
...Default.args.tasks.slice(0, 5),
{ id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
],
},
};

export const Loading = Template.bind({});
Loading.args = {
tasks: [],
loading: true,
export const Loading = {
args: {
tasks: [],
loading: true,
},
};

export const Empty = Template.bind({});
Empty.args = {
// Shaping the stories through args composition.
// Inherited data coming from the Loading story.
...Loading.args,
loading: false,
export const Empty = {
args: {
// Shaping the stories through args composition.
// Inherited data coming from the Loading story.
...Loading.args,
loading: false,
},
};
```

<video autoPlay muted playsInline loop>
<source
src="/intro-to-storybook/finished-tasklist-states-6-0.mp4"
src="/intro-to-storybook/finished-puretasklist-states-7-0.mp4"
type="video/mp4"
/>
</video>
Expand Down
22 changes: 14 additions & 8 deletions content/intro-to-storybook/vue/zh-CN/deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ commit: '4b1cd77'

## 发布 Storybook

此教程使用 <a href="https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook">Chromatic</a>,一个 Storybook 维护者提供的免费发布服务。它使得我们可以安全的将我们的 Storybook 部署到云端。
此教程使用 [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook),一个 Storybook 维护者提供的免费发布服务。它使得我们可以安全的将我们的 Storybook 部署到云端。

### 在 GitHub 中创建一个仓库

Expand Down Expand Up @@ -66,7 +66,7 @@ yarn chromatic --project-token=<project-token>

执行完成后,您会收到一个已经发布的 Storybook 对应的链接 `https://random-uuid.chromatic.com`。请与您的团队分享链接并获得反馈。

![Storybook deployed with chromatic package](/intro-to-storybook/chromatic-manual-storybook-deploy-6-0.png)
![Storybook deployed with chromatic package](/intro-to-storybook/chromatic-manual-storybook-deploy.png)

太好了!现在我们只需要一条命令就可以发布我们的 Storybook,但是每次我们需要获取团队关于 UI 的反馈时,我们都要重复的手动执行一次命令。理想情况下,我们希望每次我们提交代码时都可以同步发布最新版本的组件。我们需要持续部署 Storybook。

Expand All @@ -89,23 +89,29 @@ on: push

# List of jobs
jobs:
test:
# Operating System
chromatic:
name: 'Run Chromatic'
runs-on: ubuntu-latest
# Job steps
steps:
- uses: actions/checkout@v1
- uses: actions/checkout@v4
with:
fetch-depth: 0
- run: yarn
#👇 Adds Chromatic as a step in the workflow
- uses: chromaui/action@v1
- uses: chromaui/action@latest
# Options required for Chromatic's GitHub Action
with:
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/vue/zh-CN/deploy/ to obtain it
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/vue/en/deploy/ to obtain it
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
```

<div class="aside"><p>出于文章的简洁起见,<a href="https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets">GitHub secrets</a> 并没有被提及。Secrets 实际上是 GitHub 提供的安全环境变量,这样我们就不需要硬编码 <code>project-token</code> 了。</p></div>
<div class="aside">

、出于文章的简洁起见,[GitHub secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) 并没有被提及。Secrets 实际上是 GitHub 提供的安全环境变量,这样我们就不需要硬编码 `project-token` 了。、

</div>

### 提交 action

Expand Down
9 changes: 3 additions & 6 deletions content/intro-to-storybook/vue/zh-CN/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,16 @@ yarn
现在通过下述的命令行我们可以快速查看应用程序中的各个环境是否正常运行:

```shell:clipboard=false
# Run the test runner (Jest) in a terminal:
yarn test:unit

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 8080:
yarn serve
# Run the frontend app proper on port 5173:
yarn dev
```

我们的三个前端应用程序模式:自动化测试(Jest),组件开发(Storybook)和应用程序本身。

![3 modalities](/intro-to-storybook/app-three-modalities-vue.png)
![3 modalities](/intro-to-storybook/app-main-modalities-vue.png)

您可以根据您目前所处理的应用程序的不同部分来决定同时运行上述三个中的一个或者多个。因为我们现在专注于创建一个简单的 UI 组件,所以我们继续运行 Storybook。

Expand Down
Loading