Addon Docs: Ability to customize 'Show Code'

[iggybotes]

Is your feature request related to a problem? Please describe.

The 'Show code' feature that appears under the canvas frame inside the 'Docs' pages is frustrating to use. This feature just shows whatever the Story is rendering, but it would be much more useful if this could be customized.

Describe the solution you'd like

Often times, Stories will have extra html elements or styles attached to them, or they will be wrapped by story-specific components that are not related to the component being demonstrated, and we do not want these elements to display in the 'Show Code' view.

Ideally, there would be a way for us to define a type of render function that is separate to that of the actual Story, that just controls what is shown in the 'Show code' panel that gets opened. This function will need access to all of the Story's controls as well so that developers can just copy and paste the current state of the component and use that as a template for implementation.

Describe alternatives you've considered

The only alternative at the moment seems to be to create a custom Docs addon or possibly an addon that links into the Docs addon ( I don't know if this is possible).

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[pbagnall]

I've previously use @whitespace/storybook-addon-html to show code. Addon-docs does so much more, so is preferrable, but the one feature sb-addon-html had which was really useful was the ability to set the id of a root element. The code displayed would then only be elements below that root element.

This meant you could do other useful things outside that root without it being displayed as part of the component.

[smlimasu]

But you can? You can insert the transform code function in preview, meta or on the story level and pass in any parameter you like. You have access to the story context there, so f.ex. you can pass the args as a string array or the component name to call the raw typescript source file, parse the storys html code or whatever you like to do.