貢獻 Storybook 框架

Storybook 框架是一個 node 套件，能為後設框架 (metaframework) (Next.js、NuxtJS、SvelteKit) 或建構器 (builder) (Webpack、Vite) 與渲染器 (renderer) (React、Angular、Vue 3、web components 等) 的組合提供開箱即用的支援。

對於後設框架，Storybook 框架也會處理額外的設定，以使 Storybook 的行為與後設框架產生的應用程式類似。例如，@storybook/nextjs 在 Storybook 內部重新建立或模擬了許多 Next.js 應用程式的功能。

作為參考，您可以查看所有官方 Storybook 框架，包括其完整原始碼與文件。

名稱應以 storybook-framework- 開頭，然後對應您的框架支援的項目。例如，目標為 SvelteKit 的框架會是 storybook-framework-svelte-kit，而目標為 Stencil 與 Vite 的框架會是 storybook-framework-stencil-vite。當目標不是後設框架時，命名慣例為 storybook-framework-<renderer>-<builder>。

2. 考量您的框架需要做什麼

目標是讓 Storybook 的行為盡可能地與您目標的後設框架或建構器-渲染器組合相似，而且是開箱即用。

對於後設框架，這表示嘗試重新建立後設框架提供的任何建構器或 babel 設定。您應盡可能以尊重使用者現有專案設定的方式進行。

您的框架支援的函式庫可能有多個主要版本。請考量您的框架將支援每個函式庫的哪些版本。您需要考量這些不同版本中的變更，或將您的框架拆分為不同的版本/套件本身，以支援每個函式庫版本。為了加速維護，請考慮為您的框架支援的各種函式庫版本新增整合測試。

3. 撰寫文件

在撰寫任何程式碼之前，先撰寫一份有用的 README，其中包含安裝指示與可用功能列表。使用 @storybook/nextjs 的 README 作為範本。先撰寫文件有助於引導您的其他工作。

4. 撰寫框架本身

一個框架可以包含以下部分

`package.json` (範例)

由於框架是一個 node 套件，因此必須包含 package.json 檔案。以下是您可以開始使用的範本

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 匯出是必要的。如果您的框架有 preview.js，那麼這也是必要的。
types：我們強烈建議您以 TypeScript 撰寫框架並發布類型。
dependencies 與 devDependencies：這些只是範例。您的可能看起來差異很大。
peerDependencies：如果您的框架為您目標的函式庫多個版本提供支援，請確保在此處表示。

貢獻 Storybook 框架

如何製作框架

1. 決定套件名稱

2. 考量您的框架需要做什麼

3. 撰寫文件

4. 撰寫框架本身

`package.json` (範例)

`preset.js` (範例)

`preview.js` (範例)

`types.ts` (範例)

5. 測試您的框架

6. 告訴我們！

貢獻 Storybook 框架

如何製作框架

1. 決定套件名稱

2. 考量您的框架需要做什麼

3. 撰寫文件

4. 撰寫框架本身

package.json (範例)

preset.js (範例)

preview.js (範例)

types.ts (範例)

5. 測試您的框架

6. 告訴我們！

`package.json` (範例)

`preset.js` (範例)

`preview.js` (範例)

`types.ts` (範例)