Storybook Docs Addon: Change 'Show code' value

[iggybotes]

I would like to be able to define what is shown in the 'Show code' section of the Docs page.

This way, if wrapper components or extra divs and elements are used in the Story template, I can filter them out to give the Docs' reader a clean, accurate copy of the implementation code.

Is this possible? Any help would be appreciated.

[sandrina-p]

@iggybotes did you find a way? I'm looking for the same :)

[smlimasu]

@iggybotes @sandrina-p

You can use the source.code.transform property. You can set a helper function at the preview, meta or story level. You have access to the story context as well, so you're able to access e.g. all story args and print them as json above the source code or filter stuff or set the original TS file as a source by accessing the documentation.json (as an example for angular).

There are more examples if you search for "transform code" in the discussions

Tip: If you use the ComponentWrapperDecorator or a decoratorFn for all your wrapper content, then it is automatically excluded from the showCode.
https://storybook.js.org/docs/writing-stories/decorators

Example:

docs: 
{ source: { transform: (code: string, storyContext: StoryContext) => { // Extract component name const componentName = typeof storyContext.component === 'string' ? storyContext.component : storyContext.componentId?.split('--')[0] || (storyContext.title?.split('/').pop()?.toLowerCase() || 'component'); let attrs = ''; // Convert args to HTML attributes for (const [key, value] of Object.entries(storyContext.args || {})) { // Convert camelCase to kebab-case for HTML attributes const attrName = key.replace(/([A-Z])/g, '-$1').toLowerCase(); if (value === true) { attrs += ` ${attrName}`; } else if (value !== false && value !== undefined && value !== null) { attrs += ` ${attrName}="${value}"`; } } return `<${componentName}${attrs}></${componentName}>`;
 }, 
}, 
},

[sandrina-p]

Thank you!