• Home
  • home > webfront > ECMAS > storybook >

    storybook 编写stories的story基础语法

    Author：zhoulujun Date：

    基本编写语法很简单，是 export 任意多个 function，每一个就是一个 story。导出主要分两种：default export：默认导出，提供组件级别的配置信息。named export：命名导出，用以描述 story，如上所说，一个组件可以有若干个 story。

    编写 stories

    story 用于展示组件某个状态，每个组件可以包含任意多个 story，用来测试组件的各种场景。根据默认配置，只需要在组件的文件夹中，以 **.component.stories.ts 的格式创建即可。

    story 语法

    基本编写语法很简单，是 export 任意多个 function，每一个就是一个 story。导出主要分两种：

    1. default export：默认导出，提供组件级别的配置信息，例如以下配置会注明组件的归类，并提供 Button 组件的信息，以便渲染这个组件。

      // Button.stories.ts

import Button from './button.component';

export default {
  title: 'Components/Button',
  component: Button,
}

    2. named export：命名导出，用以描述 story，如上所说，一个组件可以有若干个 story。

      // Button.stories.ts

// 创建一个模板，方便在后续的 story 中复用
const Template = (args: Button) => ({
  props: args,
});

export const Primary = Template.bind({});  // 复制 Template
Primary.args = { background: '#ff0', label: 'Button' };
Primary.storyName = "主要状态" // 自定义 story 名

export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '222' }; // 复用上一个 story 的配置

export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '222 } // 再来一个

      通过复制模板 function，可以创建若干个 story，传入不同的参数，就可以分别渲染出组件的不同状态。每个 story 的名字默认是 function 名，也可以自定义。

    Args（属性）

    上一节看到了怎么去写一个 Story 文件，不过里面反复用到的 args 是什么呢？  
    它代表组件的输入属性（Angular 中的 @input()，Vue/React 中的 props），它有 2 个层级，方便灵活配置。

    1. story 层级：

      // Button.stories.ts

const Template = (args: Button) => ({
  props: args,
});

// 在这个 story 中传入组件属性，只影响当前 story
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Primary',
};

    2. 组件层级：

      // Button.stories.ts

import Button from './button.component';

// 组件层级（默认导出）中传入组件属性，
// 这个 Button 组件的所有 stories 的 primary 属性都会是 true
export default {
  title: "Button",
  component: Button,
  args: {
    primary: true,
  },
}

    就像上一节所看到的，不同的 story 的 args 是可以复用的，这里用到了 ES6 的解构语法：

    const Primary = ButtonStory.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
}

// 复用 Primary story 的 args，并覆盖 primary 属性
const Secondary = ButtonStory.bind({});
Secondary.args = {
  ...Primary.args, // 合并上一个 args 对象
  primary: false,
}

    简单的导出几个 function，这个按钮组件的测试用例就写好了

    可以看到，这个按钮组件可以独立于项目运行了，并且右边工具栏可以自由更改它的属性，实时查看属性改变后的效果，还可以自动生成组件文档。

    有 story 做示例，有实时的控制台，有文档，再也不怕写好的组件别人不知道怎么用了。

    额外的配置项

    除了写给组件写 story，很多时候也会需要配置插件，或者给组件提供额外的功能，这里看看是如何配置的吧。

    Parameters（参数）

    Parameters 用以配置 Storybook 和 插件，具有全局、组件、story 三个层级。

    Story 拥有大量的插件，以下以简单的 backgrounds 插件举例，它用来控制组件容器的背景色，默认自带黑/白两色。

    1. 全局定义在根目录 .storybook/preview.js 下，会影响所有的 stories。这样配置后，每个 story 界面下都可以选择红/绿两色背景：

      // .storybook/preview.js
 
export const parameters = {
  backgrounds: {
    values: [
      { name: 'red', value: '#f00' },
      { name: 'green', value: '#0f0' },
    ],
  },
};

    2. 组件层级下定义，会让这个组件的所有 stories 都可以选择指定的背景色

      // Button.story.ts

export default {
  title: 'Button',
  component: Button,
  parameters: {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
      ],
    },
  },
};

    3. story 层级下的定义只会影响当前 story，其他 story 就只能选择默认的黑/白两色了。

      // Button.story.ts

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
// 红绿背景只在这个 story 下可以选择
Primary.parameters = {
  backgrounds: {
    values: [
      { name: 'red', value: '#f00' },
      { name: 'green', value: '#0f0' },
    ],
  },
};

    Parameters 的配置是可以继承，同名的子级会覆盖父级的定义。

    Decorators（装饰器）

    每个 Decorator 也是 function，用来包裹 story，保持原有的 story 不变的情况下，额外给它添加额外的 DOM 元素、引入上下文环境、添加假数据等等。  
    和 Parameters 一样，它也可以定义在全局/组件/story 三个层级，每个 Decorator 按定义顺序依次执行，从全局到 story。

    例如，用一个额外的 <div> 包裹每个 story 的组件渲染：

    // button.stories.ts

import { Meta, Story } from '@storybook/angular';
import { ListComponent } from './list.component';

export default {
  title: 'Example/List',
  component: ListComponent,
  decorators: [
    (storyFunc) => {
      const story = storyFunc();

      return {
        ...story,
        template: `<div style="height: 60px">${story.template}</div>`,
      };
    }
  ]
} as Meta;

    这样一来，这个列表组件的所有 story，都会展示出它在一个 60 像素高的容器内的呈现效果。

    除了给组件包裹额外的元素，再例如为复合组件添加组件依赖：

    // List.stories.ts

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';

import List from './list.component';
import ListItem from './list-item.component'


// 给 list 组件添加它需要的组件和模块依赖
export default {
  title: 'List',
  component: List,
  decorators: [
    moduleMetadata({
      declarations: [ListItem],
      imports: [CommonModule],
    }),
  ],
};

const Template = (args: List) => ({
  component: List,
  props: args,
});

    就像平常需要在 ngModule 中声明似的，moduleMetadata 装饰器可以轻松测试各种组件，让你能在 Storybook 中从小到大搭建组件库。


    文章内容来源：
    Storybook 组件驱动开发（一）-- 基本使用 https://segmentfault.com/a/1190000039308365




    转载本站文章《storybook 编写stories的story基础语法》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8897.html

    收藏
    上一篇：storybook插件说明： integrations与addons推荐
    下一篇：最后一页