storybook

一、安装与启动
npx -p @storybook/cli sb init

npm run storybook

二、使用
import React from ‘react’
import { storiesOf } from ‘@storybook/react’
import { action } from ‘@storybook/addon-actions’

import Button from ‘./button’

const defaultButton = () => (
<Button onClick={action(‘clicked’)}>default button
)

const buttonWithSize = () => (
<>
large button  
large button
</>
)

const buttonWithType = () => (
<>
primary button  
danger button  
link button  
</>
)

storiesOf(‘Button Component’, module)
.add(‘默认 Button’, defaultButton)
.add(‘不同尺寸的 Button’, buttonWithSize)
.add(‘不同类型的 Button’, buttonWithType)

三、设置展示详细信息
1、安装
yarn add @storybook/addon-info
yarn add @types/storybook__addon-info

2、使用
import { withInfo } from ‘@storybook/addon-info’

storiesOf(‘Button Component’, module)
.addDecorator(withInfo)
.addParameters({
info: {
text: this is a very nice component ## this is a header ~~~js const a = 'hello word!' ~~~,
inline: true
}
})
.add(‘默认 Button’, defaultButton, {info: {inline: false}})
.add(‘不同尺寸的 Button’, buttonWithSize)
.add(‘不同类型的 Button’, buttonWithType)

四、自动化部署
安装依赖
yarn add --dev react-docgen-typescript-loader