Storybook 源代码查看插件

它是什么？

这是由 Gauthier Fiorentino 创建的原始 Storybook-source-code-addon 的升级版，适用于 Storybook。它允许任何浏览你 Storybook 的人访问你组件的源代码。该插件为传统库提供了另一种选择，它使用户可以直接复制和粘贴你的代码，而不是将其用作库。

如何安装它？

安装非常简单

• 首先，安装依赖项

$ npm i -D @epicuristic/storybook-source-view

• 然后将其添加到你的 .storybook/main.js 中

module.exports = {
  addons: ['@epicuristic/storybook-source-view']
}

入门

使用字符串

如果你的源代码存储为字符串，请像这样将其添加到你的故事中

export default {
  title: 'Your story',
  parameters: {
    componentSource: {
      code: 'export default "This is my code"',
      language: 'javascript',
    }
  },
};

为了更好地组织，你可以将代码存储在单独的文件中

// MyComponent.code.js
export default `
const MyComponent = () => "Hello World"
`

import MyComponentCode from './MyComponent.code'

export default {
  title: 'Your story',
  parameters: {
    componentSource: {
      code: MyComponentCode,
      language: 'javascript',
    }
  },
};

使用 URL

如果你的仓库是公开可访问的，你可以向插件提供一个 URL

export default {
  title: 'Your story',
  parameters: {
    componentSource: {
      url: 'https://path.to.your.repository/file%2Etsx',
      language: 'javascript',
    }
  },
};

仓库的常见 API 模式包括

• GitLab: https://gitlab.com/api/v4/projects/<ProjectID>/repository/files/<file path URL encoded>/raw?ref=master

多个文件

要公开多个文件，可以使用 URL 数组

export default {
  title: 'Your story',
  parameters: {
    componentSource: {
      url: [
        'https://path.to.your.repository/file%2Etsx',
        'https://path.to.your.repository/file2%2Etsx',        
      ],
      language: 'javascript',
    }
  },
};

或者，如果你更喜欢使用代码字符串

export default {
  title: 'Your story',
  parameters: {
    componentSource: {
      code: [
        'export default "This is my code"',
        'export default "This is also my code"',
      ],
      language: 'javascript',
    }
  },
};