User story: As a consumer of WVUI, I want to be able to see code samples that I can copy and paste as a starting point when I'm using a WVUI component in my project.

The docs automatically generated by Storybook feature a code sample for each story that has the following shortcomings:

1. The template is halfway between a Vue template and HTML. For example, see the Radio component docs: the v-model binding has been transformed into a modelvalue attribute, which could be confusing for users because they might think you're supposed to directly set this attribute instead of using v-model. Similarly, in the Radio Group story, the code sample shows multiple <wvui-radio> components, which has been transformed from a v-for loop, the latter of which is the way that lists of items will nearly always be generated.
2. Only the template is included in the code sample in the docs tab. In the story tab, you can look at the addons panel to see the story code, but this code is pretty Storybook-specific and doesn't represent the way a user would actually write the script for a component.

I propose we find a way to offer clear code samples that are not related to Storybook, but instead provide real-world examples that a user can use as a jumping-off point in their code. I think a user should be able to understand the code they need to write to use a component just by looking at Storybook, rather than having to dig into the source code.

Constraints

• This isn't how Storybook automatically generates code by default. We will need to figure out if there are existing plugins that do this, if we can create our own Storybook plugin to do this, or if we need our own bespoke demo tool (please no)

Acceptance criteria

• Real-world code samples are available for each component, ideally for each variant (i.e. each story)
• The samples are clear and can't be confused with the Storybook-default ones
• We confirm with library consumers that this change has a positive impact and that the code samples are clear and useful