Storybook 的 JIRA 插件

此插件使 JIRA 票证信息在您的故事中可见并可链接。

用法

只需将票证 ID 作为参数添加到您的组件故事中，如下所示

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    jira: {
      id: 'RING-1020'
    }
  },
};

安装

1. 要将此插件添加到您的 Storybook 配置中，首先运行 yarn add @exa-online/storybook-jira-addon。

2. 然后将其添加到 main.js 中的 addons 数组中。

   addons: [
     "storybook-jira-addon"
   ],
   

3. 您需要将以下值添加到您的 .env 文件中。

4. 在 Storybook 中，您需要运行一些中间件来设置 API。为此，在您的 .storybook 文件夹中添加一个 middleware.js 文件。为了使用经过身份验证的请求来获取 JIRA API 和安全的头像图像，此文件需要包含以下代码

   module.exports = function expressMiddleware(router) {
   
     router.get('/jira/api', (req, res) => {
         const myHeaders = new Headers()
         myHeaders.append("Authorization", `Bearer ${process.env?.STORYBOOK_JIRA_PERSONAL_ACCESS_TOKEN}`)
         myHeaders.append("Content-Type", "application/json")
       
         const myInit = {
           method: 'GET',
           headers: myHeaders,
           redirect: 'follow',
         }
   
         const myRequest = new Request(`${process.env.STORYBOOK_JIRA_API_ENDPOINT}/${req.query?.ticketId}`)
         fetch(myRequest, myInit)
           .then(response => response.json())
           .then(result => {
             res.send(result)
           })
           .catch(error => console.log('error', error));
     })
   
     router.get('/jira/avatar', (req, res) => {
       const myHeaders = new Headers()
       myHeaders.append("Authorization", `Bearer ${process.env.STORYBOOK_JIRA_PERSONAL_ACCESS_TOKEN}`)
     
       const myInit = {
         method: 'GET',
         headers: myHeaders,
         redirect: 'follow',
       }
   
       const myRequest = new Request(req.query?.url)
       return fetch(myRequest, myInit)
         
         .then(response => response.blob())
         .then((blob) => {
           res.type(blob.type)
           blob.arrayBuffer().then((buf) => {
             res.send(Buffer.from(buf))
           })
         })
         .catch(error => console.log('error', error));
     })
   }
   

   您可能仍然需要通过运行 yarn add node-fetch -D 将 node-fetch 添加到您的开发依赖项中。

部署到 Netlify

部署到 Netlify 时，您可以通过添加一个无服务器函数来使插件正常工作。

为此，我建议您按照以下步骤操作

1. 创建一个名为 netlify/functions/get-ticket-data.js 的新文件

   可以在不同的文件夹中创建此文件，但这需要在 Netlify UI 中进行额外的配置。

2. 将以下代码添加到 get-ticket-data.js 中

const fetch = require('node-fetch');

exports.handler = async function (event, context) {
  
  const myHeaders = new fetch.Headers();
  const authHeader = `Basic ${Buffer.from(`${process.env.STORYBOOK_JIRA_USERNAME}:${process.env.STORYBOOK_JIRA_API_KEY}`).toString('base64')}`
  myHeaders.append("Authorization", authHeader);

  const requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  const ticketData = await fetch(`${process.env.STORYBOOK_JIRA_API_ENDPOINT}/${event.queryStringParameters.ticketId}`, requestOptions)
  .then(response => response.text())
  .then(result => {
    return result
  })
  .catch(error => console.log('error', error));
  
  return {
    statusCode: 200,
    body: JSON.stringify(ticketData)
  }
}

3. 将相同的环境变量添加到 Netlify 以及为创建的端点添加此新变量

在此处了解更多关于在 Netlify 中设置无服务器函数的信息。