Addon-Docs: Configurable Source snippetization

Add the ability to configure Source block with per-framework snippetization, or even user-configurable snippetization. E.g.

• @CodeByAlex wants just the template: field for Angular
• etb (?) wants to remove the () => ...
• HamHam wants to remove single quotes from:

    <Story name="heading" height="100px">
      {'<h1>Hello World</h1>'}
    </Story>

• @kushalmahajan wants to include the component’s source in the story #10039

[rijkvanzanten]

You can use mdxSource on <Preview> as a temporary override. Not ideal, but provides the expected highlighted source code:

<Preview mdxSource={`
  <v-icon name="accessibility_new" color="--red" x-small />
  <v-icon name="warning" color="--purple" small />
  <v-icon name="gesture" color="--blue" />
  <v-icon name="security" color="--green" large />
  <v-icon name="person" color="--orange" x-large />
`}>

Full example

<Preview mdxSource={`
<v-icon name="accessibility_new" color="--red" x-small />
<v-icon name="warning" color="--purple" small />
<v-icon name="gesture" color="--blue" />
<v-icon name="security" color="--green" large />
<v-icon name="person" color="--orange" x-large />
`}>
	<Story name="x-small" height="50px">
		{{
			components: { VIcon },
			template: `<v-icon name="accessibility_new" color="--red" x-small />`
		}}
	</Story>
	<Story name="small" height="50px">
		{{
			components: { VIcon },
			template: `<v-icon name="warning" color="--purple" small />`
		}}
	</Story>
	<Story name="default" height="50px">
		{{
			components: { VIcon },
			template: `<v-icon name="gesture" color="--blue" />`
		}}
	</Story>
	<Story name="large" height="50px">
		{{
			components: { VIcon },
			template: `<v-icon name="security" color="--green" large />`
		}}
	</Story>
	<Story name="x-large" height="50px">
		{{
			components: { VIcon },
			template: `<v-icon name="person" color="--orange" x-large />`
		}}
	</Story>
</Preview>

</div>

Warning: adding multiple <Story> components inside <Preview> causes issue https://github.com/storybookjs/storybook/issues/6738#issuecomment-575369564 on my end

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.28 containing PR #10184 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.