https://github.com/takuma-ru/auto-story-generator

Automatic real-time story file generation from React, Vue, and Lit component files
https://github.com/takuma-ru/auto-story-generator

auto generator lit react storybook storybook-addon vue

Last synced: about 2 months ago
JSON representation

Automatic real-time story file generation from React, Vue, and Lit component files

• Host: GitHub
• URL: https://github.com/takuma-ru/auto-story-generator
• Owner: takuma-ru
• License: isc
• Created: 2024-01-11T07:43:51.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-24T10:09:18.000Z (8 months ago)
• Last Synced: 2024-05-02T05:07:39.415Z (8 months ago)
• Topics: auto, generator, lit, react, storybook, storybook-addon, vue
• Language: TypeScript
• Homepage: https://auto-story-generator.takumaru.dev
• Size: 1.09 MB
• Stars: 33
• Watchers: 1
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# @takuma-ru/auto-story-generator

![asg-thumbnail](https://auto-story-generator.takumaru.dev/asg-thumbnail-radius.png)

## Description

Automatic real-time story file generation from React, Vue, Angular and Lit component files

## Getting Started

### 1. Install the package

```bash

npm i @takuma-ru/auto-story-generator

```

### 2. Add config

Add settings to main.ts in Storybook (`./storybook/main.ts`)

For `React`, `Vite`

```ts

import type { StorybookConfig } from "@storybook/react-vite";

import { mergeConfig } from "vite";

import autoStoryGenerator from "@takuma-ru/auto-story-generator";

const config: StorybookConfig = {

  viteFinal: async (config) =>

    mergeConfig(config, {

      plugins: [

        autoStoryGenerator.vite({

          preset: "react",

          imports: ["src/components/**/*.tsx"],

        }),

      ],

    }),

};

export default config;

```

## Supported Frameworks

> ✅: Supported


> 🚧: Work in progress


> ❌: Not supported


> 📝: Not yet implemented


| Framework | Supported |

| --------- | --------- |

| React     | ✅         |

| Vue       | 🚧         |

| Lit       | ✅         |

| Angular   | 🚧         |

| Svelte    | 📝         |

| Custom    | 📝         |