หลังจากที่ 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 บ้าง ?