贡献 Storybook 框架
Storybook 框架是一个 Node 包，它可以为元框架（Next.js、NuxtJS、SvelteKit）或构建器 (Webpack、Vite) 加渲染器 (React、Angular、Vue 3、Web Components 等) 的组合提供开箱即用的支持。
对于元框架，Storybook 框架还负责额外的配置，以使 Storybook 的行为与元框架生成的应用程序类似。例如，@storybook/nextjs 重新创建或模拟 Next.js 应用程序中的许多功能 在 Storybook 内部。
作为参考，您可以查看 所有官方的 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 (示例)
因为框架是一个节点包，所以它必须包含一个 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 (示例)
(可选的) 预览 API 用于配置故事的渲染，例如全局装饰器或初始化框架正常运行所需的一些运行时配置。如果您的框架需要此文件，请注意您还需要 在 preset.js 中配置 previewAnnotations。
types.ts (示例)
如果您使用 TypeScript 编写框架（推荐），则应导出 StorybookConfig 的类型，该类型反映了框架的可用选项。
5. 测试您的框架
在一个新的项目中进行测试，使用尽可能接近您框架的 Storybook 设置。例如，对于 @storybook/nextjs（它使用 React 和 Webpack5），请从一个使用 @storybook/react 和 @storybook/builder-webpack5 的项目开始。按照自述文件中的安装说明进行操作，并确保一切正常。请记住测试您支持的库的各种版本、配置和选项。
6. 告诉我们！
完全测试并发布后，请通过在 #showcase Discord 频道中发布或在 Twitter 上发布并提及 @storybookjs 来告诉我们您的框架。我们希望制作精良的社区框架最终能够迁移到 Storybook 代码库中，并被视为“官方”支持。
了解有关为 Storybook 做出贡献的更多信息