Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eduardconstantin/storybook-genie
Storybook Genie is a command line interface tool that can generate Storybook stories from React components
https://github.com/eduardconstantin/storybook-genie
cli commandline-interface components generator genie hacktoberfest openai openai-api reactjs storybook tool
Last synced: about 2 hours ago
JSON representation
Storybook Genie is a command line interface tool that can generate Storybook stories from React components
- Host: GitHub
- URL: https://github.com/eduardconstantin/storybook-genie
- Owner: eduardconstantin
- License: mit
- Created: 2023-05-05T18:45:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-17T16:36:20.000Z (about 1 month ago)
- Last Synced: 2024-11-16T14:03:15.649Z (3 days ago)
- Topics: cli, commandline-interface, components, generator, genie, hacktoberfest, openai, openai-api, reactjs, storybook, tool
- Language: JavaScript
- Homepage:
- Size: 15.5 MB
- Stars: 107
- Watchers: 2
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Storybook Genie
Storybook Genie is a command line interface tool that can be used to convert files that contain React components into
Storybook stories.
[](https://github.com/eduardconstantin/storybook-genie/graphs/contributors)
[](https://github.com/eduardconstantin/storybook-genie/issues)
[](https://github.com/eduardconstantin/storybook-genie/pulls)
[](LICENSE)
[](https://github.com/eduardconstantin/storybook-genie/stargazers)
## 🌟 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:
```bash
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:
```bash
export OPENAI_API_KEY=$YOUR_API_KEY
```
For Windows systems:
```bash
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:
```bash
{
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:
```bash
npx storybook-genie
```
## 🌱 Getting Started
Clone the repository:
```bash
git clone https://github.com/eduardconstantin/storybook-genie.git
```
Install dependencies:
```bash
npm install
```
Input your OPENAI API key in the .env file, you can get your API key
[here](https://platform.openai.com/account/api-keys):
```bash
OPENAI_API_KEY=$YOUR_API_KEY
```
Run the CLI:
```bash
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](CONTRIBUTING.md), and thank you for being involved!
For a full list of all authors and contributors, see
[the contributors page](https://github.com/eduardconstantin/storybook-genie/contributors).
## 📜 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.