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
}

這樣就會自動解析出來。

總結

關於storybook的用法還有很多，以上是最容易實現也是最常用的，大家還可以繼續探索更多高級用法。

本文參考慕課網《React+TypeScript高仿AntDesign開發企業級UI組件庫》，張老師講的很好，強推。