Storybook 擴充功能 Spotify

Storybook 擴充功能 Spotify 用於輕鬆嵌入 Spotify iframe，以在 Storybook 面板中顯示任何可用的 Spotify 內容類型，例如播放清單、專輯、歌曲、Podcast 或單集。

安裝

npm install storybook-spotify --save-dev

基本設定

在 Storybook 設定的 main.js 中加入以下程式碼

module.exports = {
  addons: ['storybook-spotify'],
};

使用鍵值 version 設定 story 的參數，以提供要顯示的必要資訊。

設定

屬性	必要	數值類型	描述	範例
url	✔	字串	Spotify 來源	https://open.spotify.com/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3

實作

export const parameters = {
  spotify: {
    url: 'https://open.spotify.com/embed/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3'
  }
}

Story 設定範例

在預設的 Story 設定中加入 version 參數

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    spotify: {
      url: 'https://open.spotify.com/embed/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3'
    }
  }
}

範例

播放清單

專輯

歌曲

Podcast

單集