貢獻 Storybook 框架
Storybook 框架是一個 Node 套件，可以讓您直接支援元框架 (Next.js、NuxtJS、SvelteKit) 或 建置器 (Webpack、Vite) 與渲染器 (React、Angular、Vue 3、Web Components 等) 的組合。
對於元框架，Storybook 框架也會處理額外的設定，讓 Storybook 的行為與元框架產生的應用程式類似。例如，@storybook/nextjs 在 Storybook 內重建或模擬 Next.js 應用程式的多項功能。
您可以參考 所有官方 Storybook 框架，包括它們的完整原始碼和文件。
如何建立框架
1. 決定套件名稱
名稱應該以 storybook-framework- 開頭，然後對應您的框架所支援的內容。例如，以 SvelteKit 為目標的框架將會是 storybook-framework-svelte-kit，而以 Stencil 與 Vite 為目標的框架將會是 storybook-framework-stencil-vite。當不以元框架為目標時，命名慣例為 storybook-framework-<渲染器>-<建置器>。
2. 考量您的框架需要執行哪些動作
目標是讓 Storybook 的行為—在不進行額外設定的情況下—與您目標的元框架或建置器-渲染器組合盡可能相似。
對於元框架，這表示嘗試重新建立元框架提供的任何建置器或 Babel 設定。您應該盡可能尊重使用者現有的專案設定來嘗試執行此操作。
您的框架支援的程式庫可能會有不同的主要版本。考量您的框架將會支援每個程式庫的哪些版本。您將需要考量這些不同版本中的變更，或將您的框架本身分割成不同的版本/套件，以支援每個程式庫版本。為了加快維護速度，請考慮為您的框架支援的各種程式庫版本新增整合測試。
3. 編寫文件
在編寫任何程式碼之前，請先撰寫一個有用的 README，其中包含安裝指示和可用功能清單。使用 @storybook/nextjs 的 README 作為範本。先撰寫文件有助於指導您的其他工作。
4. 撰寫框架本身
框架可以包含下列部分
package.json (範例)
由於框架是一個 Node 套件，它必須包含一個 package.json 檔案。以下是一個您可以開始使用的範本
package.json 範本
{
"name": "<your-framework-name>",
"version": "1.0.0",
"description": "Storybook for <meta-framework-name> or <renderer> & <builder>",
"keywords": [
"Storybook",
"<meta-framework-name>",
"<renderer>",
"<builder>",
"<anything>",
"<else>",
"<relevant>"
],
"homepage": "<your package's homepage>",
"bugs": {
"url": "https://github.com/<your-org>/<your-repo>/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/<your-org>/<your-repo>.git",
"directory": "<path/to/your/framework>"
},
"license": "MIT",
"exports": {
".": {
"types": "./dist/index.d.ts",
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
"./preset": {
"types": "./dist/preset.d.ts",
"require": "./dist/preset.js",
"import": "./dist/preset.mjs"
},
"./preview.js": {
"types": "./dist/preview.d.ts",
"require": "./dist/preview.js",
"import": "./dist/preview.mjs"
},
"./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": ["dist/**/*", "types/**/*", "README.md", "*.js", "*.d.ts"],
"scripts": {
"check": "tsc --noEmit",
"test": "..."
},
"dependencies": {
"@storybook/manager-api": "^7.0.0",
"@storybook/core-common": "^7.0.0",
"@storybook/node-logger": "^7.0.0",
"@storybook/<builder>": "^7.0.0",
"@storybook/<renderer>": "^7.0.0"
},
"devDependencies": {
"typescript": "x.x.x",
"<meta-framework>": "^x.x.x",
"<builder>": "^x.x.x"
},
"peerDependencies": {
"@storybook/addon-actions": "^7.0.0",
"<meta-framework>": "^x.x.x || ^x.x.x",
"<renderer>": "^x.x.x || ^x.x.x",
"<builder>": "^x.x.x"
},
"engines": {
"node": ">=18.0.0"
},
"publishConfig": {
"access": "public"
}
}關於這些屬性的一些注意事項
exports：需要根目錄、./preset和package.json的 exports。如果您的框架有preview.js，那麼這也是必需的。types：我們強烈建議您使用 TypeScript 編寫您的框架並發布類型。dependencies和devDependencies：這些只是範例。您的可能會看起來非常不同。peerDependencies：如果您的框架為您目標的程式庫提供多個版本支援，請務必在此處表示。
preset.js (範例)
預設 API 是您配置 Storybook 核心的地方（您的框架使用哪個建構器和渲染器）、建構器（透過 webpackFinal 或 viteFinal export）、babel（透過 babel export）、任何必要的 addons，以及您的框架的任何可用選項。
preview.js (範例)
（可選的）preview API 是您配置 stories 呈現的地方，例如全域裝飾器或初始化您的框架預期行為所需的一些執行時間設定。如果您的框架需要此檔案，請注意您也需要在 preset.js 中配置 previewAnnotations。
types.ts (範例)
如果您使用 TypeScript 編寫您的框架（推薦），您應該匯出 StorybookConfig 的類型，這反映了您框架的可用選項。
5. 測試您的框架
在一個新的專案中測試它，使用盡可能接近您的框架的 Storybook 設定。例如，對於使用 React 和 Webpack5 的 @storybook/nextjs，請從使用 @storybook/react 和 @storybook/builder-webpack5 的專案開始。按照您的 README 中的安裝說明進行操作，並確保一切運作正常。請記得測試您所支援的程式庫的各種版本、設定和選項。
6. 告訴我們！
一旦經過全面測試並發布後，請在 #showcase Discord 頻道中發布，或在推特上發文並提及 @storybookjs 來告知我們您的框架。我們希望製作精良的社群框架最終可以進入 Storybook 程式碼庫並被視為「官方」支援。
深入瞭解如何貢獻 Storybook