快速資訊

• 如何在 local 將 storybook 跑起來
  1. yarn storybook
  2. 透過 localhost:6006 即可進入 storybook
• 撰寫 stories 的規範須知
  • 檔案格式：*.stories.js
  • 檔案名稱前綴：和 component file name 應相同，如 Foo.vue 對應的 stories 檔案名稱為 Foo.stories.js
  • 檔案位置：和 storybook 官方建議的不同：
    • 官方建議：將 *.stories.js 統一集中放置在 ~/stories/。
    • mirror-media-nuxt：將 *.stories.js 和對應 .vue component 放在同一個位置，這麼一來 storis 檔案會和 component 檔案非常靠近
  • 檔案內容格式：由 Storybook 團隊規範的 Component Story Format(CSF)，必須遵循此格式在 *.stories.js 中撰寫 stories。
• Chromatic（Storybook 公開平台）資訊：
  • 後台連結：https://www.chromatic.com/builds?appId=60ffe53732f434003b973253
  • Deployed Storybook 連結：
    • 格式：https://${branch-name}--60ffe53732f434003b973253.chromatic.com
      • 以 dev branch 為例：https://dev--60ffe53732f434003b973253.chromatic.com
  • mirror-media-nuxt 是如何跟 Chromatic 連動的：
    • 有串 GitHub Actions，每個 branch 被 push 時都會觸發 build and publish storybook to chromatic。