หลังจากที่ Storybook 3.2 นั้นสนับสนุน Vue.js ไปแล้ว
ถึงคิวของ Angular บ้างสำหรับ Storybook 3.3 (ตอนนี้ไปถึง 3.3.3 แล้ว)
แต่ใช้ได้กับ Angular version 4 ขึ้นไปเท่านั้น
โดยมีการ addons ต่าง ๆ เพิ่มมานิดหน่อย เช่น
- Viewport ทำให้สามารถจำลองการทำงานบน device ขนาดต่าง ๆ
- Jest สำหรับการแสดงผลการทดสอบ
- Story panel
- Storyshot ของแต่ละ story
- สนับสนุน Markdown ใน story
ดูเพิ่มเติมได้ที่ Storybook Release
สิ่งที่ขอแนะนำคือ สนับสนุน Angular นั่นเอง
น่าจะเป็นสิ่งที่ชาว Angular รอคอยอยู่มั้ง
แต่ใช้ได้กับ version 4 ขึ้นไปเท่านั้น
สามารถใช้งานง่าย ๆ ด้วยการติดตั้ง Storybook ก่อน
$npm i -g @storybook/cli
เข้าไปยัง angular project จากนั้นเริ่มใช้งาน
$getstorybook $yarn run storybook
หรือทำการสร้าง Angular project ใหม่ก็ได้
$ng new hello $cd hello $getstorybook $yarn run storybook
แสดงผลการทำงานของ Storybook ดังนี้
ลองติดตั้ง View port add-on นิดหน่อยสิ
npm i --save-dev @storybook/addon-viewport
มีให้เลือกทั้ง iPhone 5, 6, iPad และ Android phone แสดงดังรูป
ในตอนนี้ Storybook สนับสนุน JavaScript framework หลักทั้ง 3 ตัวแล้วนะ
คือ React, Vue และ Angular
วันนี้ใครยังไม่ใช้ Storybook บ้าง ?
