大家好，今天的篇章要介紹的是延續昨天的 Storybook

一樣會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day20-storybook

Storybook addons

今天要安裝展示幾項 storybook 常用的 addon

Info

用途：可以顯示 component 的 Story Source 及 Prop Types

目前參考這幾頁內的方式實作
https://storybook.js.org/docs/configurations/typescript-config/
https://github.com/strothj/react-docgen-typescript-loader

因為用了 TypeScript 來撰寫的都是 tsx，所以配置會與一般的 jsx 稍稍不一樣

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

除了安裝 addon-info 以外，還安裝了 react-docgen-typescript-loader，它是用來讀懂 tsx 的 props 型態，因為 tsx 之中就不會使用 PropTypes 了，而是改用 interface 或是直接定義 typescript 型態的方式，如果不用 addon-info 應該就不需要安裝這個 loader

修改 .storybook/webpack.config.js

然後要將這個 addon 給用在一個有接 props 的 component 上

+ src/components/ReactDnDPractice/Garbage/Garbage.stories.tsx

執行結果

Knobs

用途：設定可以自由變化的值，除了基本型態的值以外還有一些特殊的，可以參考上面的網址

npm i -D @storybook/addon-knobs

要先掛上 register

+ .storybook/addons.js

修改 src/components/ReactDnDPractice/Garbage/Garbage.stories.tsx

用 knobs 的 text 來當 name 的 prop

執行結果

其它還有很多，不過筆者也不知道哪些是最常用，或是哪些才是團隊開發中，非常重要的需求，所以就介紹到這樣，筆者認為 Note 寫下筆記或是 Readme 用 markdown 寫下筆記，這兩種可能會需要用到

額外發現

npm uninstall -D @types/storybook__react  

這個可以移除掉，@storybook/react 已經自帶 .d.ts 了

以上就是筆者使用 storybook 的幾個 addon 來展示的過程，話說，筆者有看到可能會支援 MDX @@

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day21-storybook

明天想玩看看 redux-observable，雖然算是非常的不熟悉的函式庫但想試著挑戰看看！