Storybook 插件 Spotify

Storybook 插件 Spotify Storybook Addon Spotify 用于轻松地将 Spotify iframe 嵌入到 Storybook 面板中，以显示所有可用的 Spotify 内容类型，例如播放列表、专辑、歌曲、播客或剧集。

安装

npm install storybook-spotify --save-dev

基本设置

在 Storybook 配置的 main.js 文件中添加以下代码

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

使用键值 version 设置故事参数，以提供显示所需的信息。

配置

属性	必需	值类型	描述	示例
url	✔	字符串	Spotify 源	https://open.spotify.com/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3

实现

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

故事设置示例

在默认故事配置中添加 version 参数

import React from 'react'

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

示例

播放列表

专辑

歌曲

播客

剧集