我們先建立好 storybook 來放置我們設計好的組件，可以參考 story book。

Install

到專案目錄下執行：

npx -p @storybook/cli sb init

安裝完後可以看到 package.json 中多了兩個 script

script: {
  ...
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
}

Start Storybook

執行下列指令就可以看到 storybook的畫面羅

yarn storybook

將我們的組件放到 Storybook 中

完成如下所示：

到我們的組件目錄下建立 stories.js

src/lib/Button/stories.js

import React, {Fragment} from 'react';

import Button from './index';
import theme from '../theme';
import ThemeProvider from "../ThemeProvider";

// 你的頁面標題
export default {
    component: Button,
    title: 'Button',
};


const styles = {
    button: {
      marginRight: 8
    }
  }

// 內部模板的內容
const Template = args => {
    return (
        <ThemeProvider theme={theme}>
            <Fragment>
            <Button type='filled' style={styles.button}>
            Filled Button</Button>
          <Button type='outline' style={styles.button}>Outline Button</Button>
          <Button type='text' style={styles.button}>Text Button</Button>
          </Fragment>
        </ThemeProvider>
    );
}

export const Default = Template.bind({});

// 傳入的參數
Default.args = {
    type: 'filled',
};

接下來是參數的部分，非常方便只要把 propTypes 寫好並加上註解就行了：

Button.propTypes = {
  /**
   * Click event
   */
  onClick: propTypes.func,
  /**
   * Styling object
   */
  style: propTypes.object,
  /**
   * Style type
   */
  type: propTypes.oneOfType(['filled', 'outline', 'text']),
};

Button.defaultProps = {
  type: 'filled',
  style: {},
  onClick: () => false,
};

小結

看起來真的非常漂亮又實用，覺得在設計組件的時候也可以參考storybook出來的內容，有點變向再要求程式碼要乾淨好閱讀。