Addon-Docs: Configurable Source snippetization

[shilman]

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 Custom source in story #10039

[mpalpha]

Perhaps adding an option globally to pass each UI pattern through a transformer would be a good approach.

[alazurenko]

Hello,
Is there is chance that it would be shipped in next 5.3.0 version? 😊

[shilman]

@alazurenko yeah, good chance of that!

[kfayelun]

Hey! I see it's not listed on the top here, but I saw it mentioned in a comment on dischord; that this fix might let us show html markup from rendered react components. Do you know if this will make it in? When will 5.3.0 ship? Will it be on a @next tag sometime soon perhaps..?
Will there be an option to show the CSS?

[shilman]

@kfayelun hopefully will work this in over the next 1-2 weeks. 5.3 will ship in early jan #8658

[o-t-w]

Is this now available in the 5.3.0-beta? I'd really like to try it! How do I get it to show both the React markup and the HTML markup?

[kfayelun]

I hate to nag, I know you guys have loads of stuff to sort out before 5.3 release. My deadline is closing in on me fast, any idea when this will be tackled?

[hsablonniere]

In our case, we cheated and would love an official way to provide a custom source snippet:

• Generate source https://github.com/CleverCloud/clever-components/blob/master/stories/lib/make-story.js#L67-L93
• Override source with mdxSource https://github.com/CleverCloud/clever-components/blob/master/stories/lib/make-story.js#L67-L93

Event better would be to be able to customize the source component used in the docs page.

[shilman]

@hsablonniere you might be able to hack in your own component today:

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#mdx-component-overrides

We should also provide better source snippetization in 6.0 (knock wood)

[hsablonniere]

@shilman I think I already tried those, does it laso work for DocsPage generated from CSF files?

[shilman]

@hsablonniere Aha unfortunately not. We'll do our best to get you a good solution in the next release cycle.

[rijkvanzanten]

@shilman Are there any outstanding things that need to be done to move this forwards? I would love to help out where possible.

[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>

Warning: adding multiple <Story> components inside <Preview> causes issue #6738 (comment) on my end

[shilman]

@rijkvanzanten that's pretty sweet!! not what i had in mind, but effective! 💯

[kerryj89]

I'm Hamham on Discord and to clarify on what I want, I would just like plain HTML output for storybook-html. It'd be cool if it could also generate the rendered HTML affected by the knobs . Thanks for all you guys do at Storybook!

[dannymcgee]

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

Forgive me for butting in here without doing a whole lot of research, but would this workaround be feasible to use with Angular? I thought I remembered reading somewhere that MDX is available now for Angular, but I can't remember where and can't find it now.

[shilman]

@dannymcgee MDX has been available for all storybook supported frameworks from the start. Documentation is catching up with the code, but check the addon-docs README for angular and also examples/angular-cli in the storybook repo

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.22 containing PR #10084 that references this issue. Upgrade today to try it out!

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

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Almost there. Next release will get it over the line. 😅

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.24 containing PR #10089 that references this issue. Upgrade today to try it out!

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

Closing this issue. Please re-open if you think there's still more to do.

[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.

[absalonv]

@shilman is there an example to just load the code inside the template: field when using angular components and mdx docs?

[shilman]

@absalonv i've seen one for vue template: but can't find it at the moment. it's just a regex.