Storybook คืออะไร ใช้ทำอะไรนะ ? (React + Storybook + Typescript)

Storybook คือ Tool ตัวหนึ่ง ที่ใช้สำหรับ สร้าง UI Component ได้ง่ายๆ โดยรองรับ Framework ต่างๆมากมาย ไม่ว่าจะเป็น React , Angular , Vue และอื่นๆ อีกมากมาย

เหมาะสำหรับ Project ที่มีการทำ UI Library ซึ่งจะช่วยลดความซ้ำซ้อนของ Code ที่เกิดจากการทำ UI ซ้ำๆ ซึ่งความสามารถของ Storybook จะทำให้เราสามารถทำงานกับ Design ได้ง่ายขึ้น ทั้งยังสามารถ Preview UI ที่เราสร้างไว้ ว่าตรงตามที่ Design ออกแบบมาหรือไม่

Getting Started

ตัวอย่างการสร้าง Storybook ในบทความนี้จะเป็นการใช้ React Framework + Typescript

1. สร้างโปรเจค React โดยใช้ Typescript

$project_name = react-storybook-ts
npx create-react-app $project_name —template typescript
cd $project_name

3. เพิ่ม styled-components ใน dependencies

yarn add styled-components @types/styled-components

4. สร้าง Folder สำหรับ config storybook ชื่อ .storybook และสร้างไฟล์ config.ts

|— .storybook
   |— config.ts

5. Update ไฟล์ config.ts

6. สร้าง Folder สำหรับ UI Component ดังนี้

|—src
 |— components
    |— button 
       |- Colorbutton.tsx 
       |- Colorbutton.stories.tsx

7. update ไฟล์ Colorbutton.tsx ดังนี้

เพิ่มเติม — เราสามารถใช้ styled-component กับ storybook ได้ด้วยนะ แต่ใครที่ไม่ใช้ก็ไม่ต้องเพิ่มก็ได้จ้า

8. เพิ่ม stories สำหรับ ColorButton component ในไฟล์ Colorbutton.stories.tsx ดังนี้

9. เพิ่ม Storybook script สำหรับ run storybook ในไฟล์ package.json

"scripts": {
   "storybook": "start-storybook -p 9009 -s public"
}

10. Start Storybook UI

yarn storybook

Storybook UI

Action add-on

ใช้สำหรับดู log action ของ events ที่เกิดขึ้นกับ UI จาก component ที่เราสร้างขึ้น ดังนั้นเราสามารถดูผลลัพท์ที่เกิดขึ้นกับการ action บน storybook UI ได้ดังนี้

1. เพิ่ม action add-on ใน dependencies

yarn add -D @storybook/addon-actions

2. สร้างไฟล์ addons.ts

|— .storybook
   |— config.ts
   |- addons.ts

3. update ไฟล์ addons.ts ดังนี้

import '@storybook/addon-actions/register';

4. update ไฟล์ Colorbutton.stories.tsx ให้สามารถใช้ action add-on ได้ ดังนี้

5. Re-run Storybook UI

yarn storybook

action add-on storybook UI

เราสามารถ ดู log event จากการ click button ได้บน storybook ได้ง่ายๆแบบนี้เลยจ้า 🎉

ทั้งนี้อยากจะบอกว่า ถ้าต้องทำ Design System หรือแค่ใน Project มี UI component เยอะๆก็ใช้เถอะ มันทำให้เราจัดการกับการทำ UI ได้ดีและยังสามารถ Preview ให้ Designer ดูก่อนได้ด้วยว่า ทำตรงตาม Design หรือไม่ Storybook ยังมีความสามารถอีกมากมาย สามารถศึกษาความสามารถเพิ่มเติ่มอื่นๆของ Storybook ได้ที่ https://storybook.js.org/

Storybook: UI component explorer for frontend developers