项目介绍:Storybook Genie
概述
Storybook Genie 是一个命令行接口工具,专门用于将包含 React 组件的文件转换为 Storybook stories。这个工具可以大大简化开发者在 Storybook 中创建组件呈现的过程。
功能特色
- 选择偏好的 GPT 模型:用户可以选择自己偏好的 GPT 模型进行使用。
- 文件选择输入:支持文件选择,以便用户可以方便地选择要转换的组件文件。
- JavaScript 美化:确保生成的代码格式优美、可读性高。
- 使用自定义故事模板:用户可以通过自定义模板来创建符合自己需求的故事。
- 更改默认路径:支持更改默认的组件搜索路径。
- 较少的依赖项:减少安装和运行过程中的依赖,保证工具的轻量和高效。
安装方法
要安装 Storybook Genie 包,只需运行以下命令:
npm install storybook-genie
配置要求
在使用该工具之前,用户需要将 OpenAI 的 API 密钥设置为环境变量。在 Unix 系统上,可以通过以下方式设置:
export OPENAI_API_KEY=$YOUR_API_KEY
在 Windows 系统上,可以通过以下方式设置:
set OPENAI_API_KEY=$YOUR_API_KEY
使用方式
用户可以在项目的根目录创建 storybook-genie.config.json
文件,并添加如下代码,设置默认模型和路径:
{
"defaultModel": "gpt-4",
"defaultPath": "./components"
}
用户也可以在 storybook-genie.template.js/ts
文件中设置默认的故事模板。
要使用 Storybook Genie,只需运行以下命令:
npx storybook-genie
生成器将会在同一文件夹中创建一个 ".story.js" 文件。
快速上手
以下是快速开始使用 Storybook Genie 的步骤:
-
克隆仓库:
git clone https://github.com/eduardconstantin/storybook-genie.git
-
安装依赖:
npm install
-
在
.env
文件中输入你的 OPENAI API 密钥。 -
运行 CLI:
npm run start
系统会提示用户选择一个文件,按下回车后,生成器会在同一文件夹中创建一个 ".story.js" 文件。
贡献
欢迎开发者的反馈和贡献,以帮助提高代码质量和整体应用的效果。在提交问题或合并请求之前,请阅读我们的贡献指南。我们衷心感谢每一位参与者!
许可证
本项目采用 MIT 许可证 - 详细信息请查看 LICENSE 文件。