Storybook 擴充功能：JSDoc to MDX

描述

此 Storybook 擴充功能會自動掃描您的專案，尋找 JavaScript 或 TypeScript 檔案，提取 JSDoc 註解，並產生全面的 MDX 文件。它可以與 Storybook 無縫整合，透過直接從原始碼提取的詳細見解和範例，增強您的元件文件。

例如，以下 TypeScript 程式碼

/**
 * Interface representing a person with an optional age property.
 */
interface Person {
    name: string;
    age?: number;
}

/**
 * Function that prints a person's name and optionally age if provided.
 * @param {Person} person The person.
 */
function printPerson(person: Person): void {
    console.log(`Name: ${person.name}`);
    if (person.age !== undefined) {
        console.log(`Age: ${person.age}`);
    }
}

將在 Storybook 中顯示如下

目錄

1. 需求
2. 安裝
3. 用法
4. 組態設定
5. 功能
6. 未來計畫和開發
7. 貢獻
8. 授權
9. 致謝

需求

• Storybook@>=7.0.0

此擴充功能應能與任何框架良好搭配。如果您發現擴充功能無法運作，請開啟一個問題。

安裝

若要安裝擴充功能，請在您的終端機中執行以下命令

npm install storybook-addon-jsdoc-to-mdx --save-dev

或者如果您偏好使用 Yarn

yarn add storybook-addon-jsdoc-to-mdx --dev

用法

安裝後，將擴充功能新增至您的 .storybook/main.js 組態設定檔中

module.exports = {
  addons: [
    // other addons
    {
      name: 'storybook-addon-jsdoc-to-mdx',
      options: {
        folderPaths: ['./src/'], // paths to folders with JS/TS code
        extensions: ['ts', 'js'] // file extensions to include
      }
    }
  ]
};

組態設定

可以使用以下選項組態設定此擴充功能

• folderPaths：包含您的原始碼檔案的資料夾路徑陣列。
• extensions：包含在文件產生過程中的檔案擴充功能陣列。

功能

• 自動 MDX 產生：將 JSDoc 註解轉換為 Storybook 可以顯示為文件的 MDX 檔案。
• 支援多種檔案類型：適用於 JavaScript 和 TypeScript 檔案。
• 可自訂的路徑和擴充功能：您可以指定要包含的目錄和檔案類型。

未來計畫和開發

我一直在尋求改進和擴展我的 Storybook 擴充功能的功能。我正在考慮未來開發的一些功能包括

• 自訂文件範本：允許使用者為產生的文件定義自己的範本，讓他們可以更控制在 Storybook 中顯示 JS/TS 程式碼的方式。
• AI 驅動的 JSDoc 產生：探索整合進階 AI（如大型語言模型）來自動為您的程式碼產生 JSDoc 註解，使文件產生過程更加順暢。

貢獻

歡迎貢獻！如果您想貢獻，請 fork 此儲存庫並使用功能分支。我們熱烈歡迎 pull request。

授權

此專案依照 MIT 授權條款授權 - 詳細資訊請參閱 LICENSE.md 檔案。

致謝

• 感謝 Storybook 社群的持續支持和啟發。
• 特別感謝所有為使此擴充功能變得更好而做出貢獻的人。