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 中的故事元数据中添加源文件名

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：用于解析文件名的函数，默认情况下返回提供的 fileName editPageLabel： “编辑此页面”链接的标签 - 默认情况下为 Edit this page render：用于自定义渲染“编辑此页面”面板的函数

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