Angular: Show Sources of HTML and TS Code within Canvas

[bastiW]

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

We are using Angular Material with some modifications and additional custom components. Currently only the HTML Part is displayed of the component.

Describe the solution you'd like

For Angular it is required for our Library users to see the TS and the HTML Code.

I would like to have a tab that the users can select different source code options.

Suggested API:

type CanvasSource = SourceCodeProps & { name?: string }

<Canvas source={CanvasSource [] | CanvasSource }/>

then I could load the sources with webpack raw loader into an array. Like:

import sourceHtml from '!!raw-loader!./form-field-stories/input-field-with-validation-story.html';
import sourceTS from '!!raw-loader!./form-field-stories/input-field-with-validation-story';


export const sources = [{format: 'html', code: sourceHtml, name: 'HTML Component'  }, {format: 'ts', code: sourceTS , name: 'TS Component'  }]

<Canvas source={sources}/>

Describe alternatives you've considered

Having all the internal Storybook components & blocks/components exported I could write it custom and include it into our installation.
Storysource only renders one file and it is not part of the canvas.

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

yes, I can

Additional context

No response

[bastiW]

With SB 7.1 there are now "Additional Actions" on the canvas. This will be a good starting point to include the documentation. I need to test it and will provide an answer soon.

[breity]

Hey, just wondering if you ever moved forward with this solution. I'm looking to add the option to view source code for multiple files as well. Thanks!