Storybook 編輯頁面擴充功能

Storybook 編輯頁面擴充功能可以在 Storybook 中新增「編輯此頁面」連結。

預覽
文件標籤
mdx 檔案

線上展示

sample-edit-page

安裝

npm i -D storybook-addon-edit-page

設定

然後在你的 Storybook 設定中建立一個名為 addons.js 的檔案。

將以下內容新增至其中（設定選項是可選的）

import { editPage } from 'storybook-addon-edit-page';

const gitPageResolver = ({ fileName } ) => {
  return fileName;
}
editPage({
  fileNameResolve: gitPageResolver,
  editPageLabel: 'edit this page...',
  render: ({ filePath, shortName, ...rest }) => (
    <div>
      {filePath && (
        <div>
          <h3>{shortName}</h3>
          <a target="_blank" href={filePath}>
            here
          </a>
        </div>
      )}
    </div>
  ),
});

使用方式

你可以將來源檔案名稱新增到 CSF 中的 stories metadata

export default {
  title: 'Stories|With edit',
  component: Link,
  parameters: {
    edit: {
      fileName: 'https://github.com/storybookjs/design-system/blob/master/src/components/Link.js'
    },  
  }
};

或新增到 mdx 檔案

<Meta
  title="Test mdx|Add edit on Doc tab?"
  parameters={{
    edit:{ 
      fileName: 'https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md' 
    }  
 }}/>

選項

fileNameResolve: 用於解析檔案名稱的函式，預設傳回提供的檔案名稱 editPageLabel: 「編輯此頁面」連結的標籤 - 預設為 編輯此頁面 render: 用於自訂渲染 編輯此頁面 面板的函式

parameters : {
  filePath: string, //full file path
  shortName: string, //short name of the story file (component name)
  parameters: any,  //parameters of the current story
}