storybook-genie - Streamline React Component Integration with Storybook

Introduction to Storybook Genie

Storybook Genie is a powerful command line interface tool designed to streamline the process of converting React component files into Storybook stories. This tool is especially beneficial for developers working with React who aim to enhance the documentation and testing of their UI components using Storybook.

🌟 Key Features

Storybook Genie offers a range of features that make it a versatile tool for developers:

Select Preferred GPT Model: Users can choose which GPT model they prefer to utilize within the application.
File Selection Input: Provides an interface for selecting files that need to be converted.
JS Beautify: Ensures the generated code follows a clean and readable format.
Custom Story Template: Users can design and apply their own templates for generating stories.
Change Default Path: Offers the flexibility to specify a default path for component directories.
Minimal Dependencies: The tool requires only a small number of dependencies, facilitating easier installation and management.

📦 How to Install

Installing Storybook Genie is straightforward. You can use npm, a popular package manager for JavaScript, to install the package with the command:

npm install storybook-genie

🛠️ Configuration

To start using Storybook Genie, you will need to configure it. The most important configuration is setting up your OpenAI API key, which the tool uses for certain functionalities. Set this key as an environment variable:

For Unix-based systems:

export OPENAI_API_KEY=$YOUR_API_KEY

For Windows systems:

set OPENAI_API_KEY=$YOUR_API_KEY

✨ Usage

Customizing and utilizing Storybook Genie is easy. By creating a storybook-genie.config.json file in your project's root, you can set a default model and default path like so:

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

Additionally, you can define a default story template using storybook-genie.template.js or storybook-genie.template.ts files.

To generate story files from your components, execute:

npx storybook-genie

This will interactively guide you to select files and automatically generate .story.js files in the respective directories.

🌱 Getting Started

To kickstart your journey with Storybook Genie, you can clone the repository and set it up:

Clone the repository:

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

Install the necessary dependencies:
```
npm install
```
Input your OpenAI API key in a .env file:
```
OPENAI_API_KEY=$YOUR_API_KEY
```
Retrieve your API key from OpenAI.
Run the CLI:
```
npm run start
```

Follow the prompts to select a file, and the tool will generate the corresponding Storybook story.

👥 How to Contribute

The project is open for contributions, and feedback from other developers is welcomed to enhance the overall quality of the tool. If you're interested in contributing, you can create issues or pull requests by following the contribution guidelines detailed in the repository. Explore the list of contributors here.

📜 Licensing

Storybook Genie is released under the MIT License, ensuring it remains open-source and freely available for everyone. For detailed information about the license, refer to the LICENSE file in the repository.