🚀 v2

Signed-off-by: Bruno Meilick <[email protected]>

README.md

@@ -21,7 +21,7 @@ composer require bnomei/kirby3-storybook --dev
 
 You need to install the CLI with composer since this plugin depends on the CLI to be available either globally or locally.
 
-### Storybook
+### Storybook & Vue3
 
 Please refer to the [official docs](https://storybook.js.org/docs/get-started/install) on how to install Storybook if in doubt.
 
@@ -105,6 +105,9 @@ The plugin will use the file watcher to monitor your Snippet/Template files and
 - `Example.stories.js` defines details about your story for Storybook, like title or variants. It will only be created if missing. You can edit it as you like.
 - `Example.vue` standard Vue SFC. It references to the HTML file. This file allows you to add custom js/css or when the source is finalized remove the reference, copy the HTML into the vue-file and add support for variants etc.
 
+> [!TIP]
+> The plugin will not overwrite the `*.stories.@(js|jsx|mjs|ts|tsx)` and `*.vue` files if they already exist. This allows you to customize the stories as needed with the full power of Storybook.
+
 #### Adding your CSS and JS assets
 
 You could add the reference your a single css file manually with `<style src="./../../app.css"></style>` and import all your scripts to each vue SFC. But my suggested method [out of 6](https://betterprogramming.pub/6-ways-to-configure-global-styles-for-storybook-faa1517aaf1a) would be to import your assets in the `./storybook/preview.js` and/or `.storybook/main.js` that storybook created. See example below:

classes/Storybook.php

@@ -228,8 +228,16 @@ public function generateStorybookFiles(string $root, string $key, string $filepa
         }
 
         // stories.js, but do not overwrite existing
-        $js = "$outputFolder/$root/$base/$local.stories.js";
-        if (! F::exists($js)) {
+        // allow various JS formats
+        $exists = false;
+        foreach(['js', 'jsx', 'mjs', 'ts', 'tsx'] as $ext) {
+            $js = "$outputFolder/$root/$base/$local.stories.$ext";
+            if (F::exists($js)) {
+                $exists = true;
+                break;
+            }
+        }
+        if (! $exists) {
             F::write(
                 $js,
                 "import My$camel from './$local.vue';