storybook生态初体验

本文主要是介绍storybook生态初体验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

上一篇文章简单介绍了一下storybook，这一篇用个实例来做一下。

生态

首先因为是配合React和CRA使用，所以需要一下几个插件：

@storybook/addon-info
@types/storybook__addon-info
react-docgen-typescript-loader

第一款是为了展示源代码等信息用的，第二款是类型文件，第三个是一款webpack插件，主要解决的是addon-info和react-docgen在ts环境下的使用问题。

使用

首先，我们创建一个stories.tsx文件：

import {storiesOf} from "@storybook/react";
import Button, {ButtonSize, ButtonType} from "./button";
import React from 'react'
import {action} from '@storybook/addon-actions'const defaultButton = () => <Button onClick={action('默认按钮')}>默认按钮</Button>
storiesOf('按钮组件(Button)', module).add('默认Button',defaultButton)

这样展示的效果就是一个简单的按钮。

当然为了更好的生成文档，我们还需要更多。

addon-info

addon开头，在storybook中以插件的形式存在，这款插件也是目前比较火热的，主要作用，生成这两块内容：
在这里插入图片描述

注意，一般来说为了配套说明文档，我们这里直接使用展开形式的addon-info，并在.storybook文件夹下创建一个config.tsx文件。

import { withInfo } from '@storybook/addon-info'
import { addDecorator, addParameters } from '@storybook/react';
...
addDecorator(withInfo)
addParameters({info: { inline: true, header: false}})

上述配置首先引入了addon-info，其次配置其默认是展开的，同时为了美观把header设置为false。

如果觉得样式不好看，这里还可以添加一个wrapper设置样式：

const wrapperStyle: React.CSSProperties = {padding: '20px 40px 0 40px'
}const storyWrapper = (stroyFn: any) => (<div style={wrapperStyle}><h3>组件演示</h3>{stroyFn()}</div>
)
...
addDecorator(storyWrapper)

但是即使这样做了，还可能从存在文档无法分析等问题，这是因为我们没有配置好react-docgen。

react-docgen

这是个很出名的写文档的CLI工具，只不过storybook内置了，让我们用起来很方便，在webpack.config.js（上文有写过）中加入如下配置：

      {loader: require.resolve("react-docgen-typescript-loader"),options: {shouldExtractLiteralValuesFromEnum: true,propFilter: (prop) => {if (prop.parent) {return !prop.parent.fileName.includes('node_modules')}return true}}
}

这样就可以拿到想要的字段，同时也会把enum一些类型解析出来，还是很方便的。

注释

关于怎么写storybook的注释，我们只需要代码编写接口时安装js-doc规范写一下即可：

interface BaseButtonProps {/** 设置class属性 */className ?: string,/** 设置按钮禁用 */disabled ?: boolean,/** 设置按钮尺寸 */size ?: ButtonSize,/** 设置按钮类型 */btnType ?: ButtonType,children ?: ReactNode,/** 设置链接按钮 */href ?: string
}