StoriesH2

Storybook支持通过JS/TS、MDX来书写Story

jsx
// Button.stories.js

import React from 'react';
import { Button } from './Button';

export const Primary = () => <Button primary>Button</Button>;

jsx
<!-- Button.stories.mdx-->

import { Meta, Story } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

<Meta title="Button" />

# Button

<Story name="Primary">
  <Button primary>Button</Button>
</Story>

ArgTypesH3

Storybook通过ArgTypes来生成页面的Controls。

Storybook会通过react-docgen 、vue-docgen-api 等自动推导出ArgTypes：Meta 定义中的component 定义的组件的Props信息（propType或者Typescript信息）

也可以进行自定义

jsx
export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

ArgsH3

组件传入不同的props，形成Stories。通过args可以快速的创建Stoires

jsx
// Button.stories.js

import React from 'react';

const Template = (args) => <Button {...args} />;

// Each story then reuses that template
export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Primary',
};

Component Story Format (CSF)H3

使用JS来写时，推荐使用MDX风格的Component Story Format (CSF)，它基于ES6模块，和MDX互通性更好。

jsx
// Checkbox.stories.js

import { Checkbox } from './Checkbox';

export default { 
    title: "MDX/Checkbox", 
    component: Checkbox
};

const Template = (args) => <Checkbox {...args} />

export const Unchecked = Template.bind({});
Unchecked.args = { label: 'Unchecked' };

文档H2

使用CSF格式书写Story时，DocsPage能够自动生成响应的文档。

反过来使用MDX书写文档时，可以自动生成Stories。

AddonsH1

@storybook/addon-essentialsH2

包括

• Docs
• Controls
• Actions
• Viewport
• Backgrounds
• Toolbars & globals

配置

java
// .storybook/main.js

module.exports = {
  addons: [{
    name: '@storybook/addon-essentials',
    options: {
      backgrounds: false,
    }
  }]
};