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']
}

開始使用

使用字串

如果您的原始碼儲存為字串，請將其新增至您的 story，如下所示

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/<專案 ID>/repository/files/<檔案路徑 URL 編碼>/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',
    }
  },
};