Implement @storybook/addon-storysource

[mkernohanbc]

Storybook provide an official extension called Storysource that adds a 'Code' tab to the control panel for each component. This tab displays the source code for a component when the user is looking at the canvas view:

Expected use case is providing the user a method to quickly grab a renderable code snippet for the component story they're looking at (and may have modified or configured using Storybook's controls), and copy/paste into their dev environment.

This is a useful quality-of-life feature for users, but not a must-have for 0.1.0.

[mkernohanbc]

I have Storysource installed in Storybook on a branch: https://github.com/bcgov/design-system/commit/25cb7c495904ce2880129361dbd4d07835ab9174

The extension isn't currently behaving as expected. The code tab appears, but shows only the args for the selected component:

Expected behaviour is that the 'Code' tab shows something similar to the Canvas block:

Storybook describe a potential solution, but it doesn't seem to change anything:

Displaying full source Storybook 6.0 introduced an unintentional change to source-loader, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass the injectStoryParameters: false option.

This seems to be a known issue in Storybook: https://github.com/storybookjs/storybook/issues/22922

[mkernohanbc]

@ty2k documenting the conversation we just had, and assigning to you for further investigation if and when you have bandwidth.

As discussed, not urgent or blocking to 0.1.0, but if you have bandwidth to do some more digging, it's definitely a nice-to-have feature for users.

My working branch is 376-implement-storybookaddon-storysource