Storybook Genie

Storybook Genie is a command line interface tool that can be used to convert files that contain React components into Storybook stories.

🌟 Features

• Select preferred GPT model
• File selection input
• JS beautify
• Use custom story template
• Change default path
• A small number of dependencies

📦 Installation

To install the storybook-genie package, run the following command:

npm install storybook-genie

🛠️ Configuration

In order to use this package, you need to set your OpenAI API key as an environment variable. You can do this by adding the following line to your .env file, or by setting it directly in your terminal:

For Unix-based systems:

export OPENAI_API_KEY=$YOUR_API_KEY

For Windows systems:

set OPENAI_API_KEY=$YOUR_API_KEY

✨ Usage

A default model and a default path can be set in storybook-genie.config.json file, just create on in the root of the project and add the following code:

{
  defaultModel: "gpt-4"
  defaultPath: "./components"
}

A default story template can be set in storybook-genie.template.js/ts file, just create on in the root of the project

To use Storybook Genie, run the following command:

npx storybook-genie

🌱 Getting Started

Clone the repository:

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

Install dependencies:

npm install

Input your OPENAI API key in the .env file, you can get your API key here:

OPENAI_API_KEY=$YOUR_API_KEY

Run the CLI:

npm run start

You will be prompted to select a file and then press enter. The generator will create a ".story.js" file in the same folder.

👥 Contributing

I welcome feedback and contributions from other developers, which can help improve the quality of the code and the application overall.

In order to create an issue or a pull request with your changes, please read our contribution guidelines, and thank you for being involved!

For a full list of all authors and contributors, see the contributors page.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.