Storybook Genie 使用教程

Storybook Genie 使用教程

storybook-genieStorybook Genie is a command line interface tool that can generate Storybook stories from React components项目地址:https://gitcode.com/gh_mirrors/st/storybook-genie

项目介绍

Storybook Genie 是一款命令行工具，旨在高效地将包含 React 组件的文件转换为 Storybook 故事。用户可以选择 GPT 模型、设置自定义模板和更改默认路径。通过简单的配置和安装，只需在终端中运行命令，即可快速生成 story.js 文件。该工具依赖少，易于使用和集成。

项目快速启动

安装

要安装 Storybook Genie 包，请运行以下命令：

npm install storybook-genie

配置

为了使用这个包，你需要将你的 OpenAI API 密钥设置为环境变量。你可以通过在你的 .env 文件中添加以下一行代码，或者直接在终端中设置它：

对于基于 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

入门

克隆仓库：

git clone https://github.com/eduardconstantin/storybook-genie.git

安装依赖：

npm install

在 .env 文件中输入你的 OpenAI API 密钥：

OPENAI_API_KEY=$YOUR_API_KEY

运行 CLI：

npm run start

你将被提示选择一个文件，然后按回车。生成器将会在相同文件夹中创建一个 story.js 文件。

应用案例和最佳实践

应用案例

假设你有一个 React 组件 Button.js，你可以使用 Storybook Genie 快速生成其对应的 Storybook 故事文件 Button.stories.js。

最佳实践

1. 自定义模板：根据项目需求，创建自定义的故事模板，以便生成的故事文件更符合项目规范。
2. 环境变量管理：确保 OpenAI API 密钥安全，使用环境变量进行管理。
3. 版本控制：将生成的故事文件纳入版本控制，以便跟踪和管理。

典型生态项目

chat-with-gpt

为 ChatGPT 添加语音功能，支持与 ElevenLabs 的无缝集成。

yt-fts

YouTube 频道字幕全文搜索与导出工具。

gptsh

跨平台命令行工具，轻松将自然语言转换为 Shell 命令。

Wechat-AI-Assistant

在微信上与 ChatGPT 进行智能多模态交互。

lobe-tts

服务器和浏览器上高效可靠的 TTS/STT 技术库。

langchain-chatbot

使用 Langchain 的复杂任务处理工具。

7-docs

OpenAI API 助力知识库构建与智能问答。

duet-gpt

实验性的 AI CLI 工具，助力编码和文件系统任务。

liboai

OpenAI API C++ 库。

通过这些生态项目，你可以进一步扩展和优化你的开发流程，提升开发效率。

storybook-genieStorybook Genie is a command line interface tool that can generate Storybook stories from React components项目地址:https://gitcode.com/gh_mirrors/st/storybook-genie