贡献 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-<renderer>-<builder>。
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导出是必需的。如果您的框架具有preview.js，那么这也是必需的。types：我们强烈建议您在 TypeScript 中编写框架并分发类型。dependencies和devDependencies：这些只是示例。您的可能看起来差异很大。peerDependencies：如果您的框架为要定位的库的多个版本提供支持，请确保在此处表示出来。
preset.js (示例)
预设 API 是您配置 Storybook 核心（框架使用哪个构建器和渲染器）、构建器（通过 webpackFinal 或 viteFinal 导出）、babel（通过 babel 导出）、任何必要的插件以及框架的任何可用选项的地方。
preview.js (示例)
（可选的）preview API 用于配置故事的渲染，例如全局装饰器或初始化框架按预期运行所需的一些运行时配置。如果你的框架需要此文件，请注意你还需要在 preset.js 中的 previewAnnotations 中进行配置。
types.ts (示例)
如果你使用 TypeScript 编写框架（推荐），你应该导出 StorybookConfig 的类型，它反映了你的框架的可用选项。
5. 测试你的框架
在一个全新的项目中使用 Storybook 进行测试，该项目的设置应尽可能接近你的框架。例如，对于使用 React 和 Webpack5 的 @storybook/nextjs，从一个使用 @storybook/react 和 @storybook/builder-webpack5 的项目开始。按照你的 README 中的安装说明进行操作，并确保一切按预期工作。请记住测试你支持的库的各种版本、配置和选项。
6. 让我们知道！
一旦它经过充分测试并发布，请通过在 #showcase Discord 频道中宣布或在 Twitter 上发布并提及 @storybookjs 来告知我们你的框架。我们希望制作精良的社区框架最终能够进入 Storybook 代码库，并被视为“官方”支持。
了解更多关于为 Storybook 贡献的信息