What is Storybook ? | UI Development

What is Storybook?

เป็นเครื่องมือที่ช่วยสร้าง Design System, UI Components หรือสร้าง UI Library นำมาใช้เองได้

Framework ที่ Storybook รองรับ

• React.js
• Vue.js
• Angular

Concept of Storybook

เป็นเหมือนกับสมุดโน๊ตธรรมดา ๆ เล่มหนึ่งที่เราเอาไว้ใช้วาดเขียนสิ่งต่าง ๆ
ลงไป โดยสิ่งที่เราเขียนลงไปในสมุดโน๊ตเล่มนี้สามารถนำออกมาใช้เอง
หรือให้คนอื่นนำไปใช้ก็ได้

How to install and use Storybook

ในที่นี้จะใช้เป็น React.js นะครับ

• เริ่มต้นจากการสร้าง React Project

npx create react-app test-storybook

• ทำการติดตั้ง Storybook

npx storybook@latest init

• ทำการเปิด Storybook (Path: localhost:6006)

npm run storybook

รูปแบบไฟล์ของ Storybook

• ไฟล์ Docs จะใช้อธิบายรายละเอียดต่าง ๆ ของ Component โดยจะมีการแสดง Props ต่าง ๆ พร้อมคำอธิบายของ Props นั้น ๆ ว่าใช้ทำอะไร และยังสามารถกดดู Code ของ Component นั้นได้ด้วย
• ไฟล์ที่ 2 เป็นต้นไปจะเป็นไฟล์ Component นั้น ๆ ซึ่งภายในไฟล์นี้จะมีข้อมูล
  รายละเอียดของ Controls, Action และ Interactions บอก

โดยที่ Preset เริ่มต้นที่ Storybook ให้มาก็จะประกอบไปด้วย

• Button

ไฟล์ Docs

ไฟล์ Component

โดยจะมีบอก Actions ของ Component นั้น ๆ ด้วยว่าเกิด Event อะไรขึ้นบ้าง

• Header

ไฟล์ Docs

ไฟล์ Component

• Page

ไฟล์ Component

ตัวอย่างการใช้งาน Storybook แบบ Basic

การสร้างปุ่มสีเขียว

• ไปที่ไฟล์ Button.stories.js เพื่อสร้างปุ่มสีเขียวขึ้นมา

ก่อนจะไปขั้นตอนต่อไป ขออธิบายก่อนว่าตัวแปรในไฟล์แต่ละอันใช้ทำอะไรบ้าง

title: ใช้สำหรับจัด Categories ให้กับ Component ที่เราสร้าง
component: เป็นตัวกำหนด Component ให้กับ stories ที่เราจะใช้
(เช่น ถ้าอยากสร้างปุ่มก็ import Button อยากสร้าง Header ก็ import Header)
tags: ในที่นี้จะใช้สำหรับสร้างตัวไฟล์ Docs ที่แสดงบน Storybook
argTypes: เป็นการสร้าง Props variable โดยอ้างอิงจาก Component ที่เราตั้งค่าไว้ด้านบน ซึ่งเราสามารถเพิ่มเติม Props ต่าง ๆ ได้ตามที่ต้องการเท่าที่มีตาม Component ดั้งเดิม
“Primary”: จะเป็นส่วน Template ต่าง ๆ ที่เราสามารถเขียนขึ้นมาเองได้ตามต้องการ

• เขียน Template ปุ่มสีเขียวขึ้นมา

เมื่อเรากลับมาดูที่ Storybook (Path: localhost:6006) ก็จะมีปุ่มสีเขียวเพิ่มขึ้นมา

จะเห็นได้ว่าตัว Storybook จะทำการสร้างไฟล์ Test (Template ปุ่มสีเขียวที่สร้าง) ขึ้นมาให้ด้วย และนำมาแสดงผลลัพธ์ให้ดูในไฟล์ Docs อีกด้วย

Conclusion

ในการใช้งาน Storybook จำเป็นต้องวางโครงสร้างของ Project ให้ดี ซึ่งถ้าวางแผนดีจะทำให้ทีม Dev (Frontend, Tester) และทีม UX/UI ทำงานร่วมกันได้อย่างมีประสิทธิภาพ แต่ถ้าหากวางโครงสร้างไม่ดีจะทำให้การทำงานเกิดปัญหาขึ้นได้ เนื่องจากการใช้ Storybook จำเป็นที่จะต้องใช้ Resource เพิ่มขึ้นในการทำงาน
หากวางโครงสร้างหรือวางแผนในการทำงานไม่ดี อาจส่งผลกระทบต่องานส่วนอื่น ๆ ได้ โดยสามารถเปรียบเทียบข้อดีข้อเสียได้ตามรูปภาพตารางด้านล่างนี้ เพื่อเป็นตัวประกอบการตัดสินใจในการใช้งาน Storybook