[Documentation]: Improve addon documentation

[michaelw85]

Describe the problem

I want to quickly make my own custom panel addon without creating a standalone package. I followed this documentation: https://storybook.js.org/docs/vue/addons/addon-types#panels Since I'm using vite+vue the js (or ts) extension throws an error related to jsx support, this is easily resolved by using the jsx/tsx extension so vite knows what to do with it. The second issue that took me the longest to figure out is the file you add to the main.js/ts addon array has to have a specific name for your addon or it won't actually register. It silently fails... I finally managed to get an error when importing the file directly into the addon array instead of using a string. This error showed me a missing filename.

TLDR; Explicitly mention the addon filename should be for example register.jsx|tsx with the available options and maybe some context as to why this is needed. Explain addons are written with react and you have to use jsx or tsx when using a non-react setup like vite+vue to get it to work (or I assume additional vite config can be used to support react in js/ts? and example would be nice)

Additional context

I use storybook for WordPress components written in PHP (blade). This is a very custom setup for our own theme/framework. I wanted to add an HTML panel to show the rendered output but since it's such a custom system the available addons show my vue (proxy) component loading state instead of the actual final markup.

[lalitkumawat1m]

Hello Team I want to work on this issue please assign to me

[vanessayuenn]

@lalitkumawat1m Thank you for helping out! Be sure to check the contribution guide and hop onto the Storybook Discord if you need any help getting started. Looking forward to your contribution! ✨