Code Preview for Knobs

[danyball]

We are producing WebComponents with several options. The Addon "Knobs" is perfect to show the result of the combination of these knobs.
Our customers wants to compose their combination of knobs they want and copy that sourcecode. Our goal would be to show that code as a preview and give the possibility to copy that with one click.

For example we have the component "axa-button":
The code of the story is like
<axa-button variant="${allVariants}"</axa-button>

and if the user choose "red" from knobs addon, he wants to get that code-snippet to copy:
<axa-button variant="red"</axa-button>

You can find that button showcase for our project here.

Is or would that be possible?

Thanks
Daniel

[shilman]

@danyball this is a great feature. we're making a bunch of changes inside storybook that will make this easier to do in a cross-framework way, but currently don't have a timeline on delivery. i've marked this as todo so that it doesn't get lost in the noise!

[habemuscode]

Duplicate? storybookjs/storybook#9801 Close other if duplicate :)

[danyball]

Duplicate? storybookjs/storybook#9801 Close other if duplicate :)

Not a duplicate

[Stafie]

Would love to be able to do that! Looks like the guys from wix are doing it here:
https://wix-style-react.now.sh/?activeTab=Playground&path=%2Fstory%2Fcomponents-api-components--button

[shilman]

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

[colinmosher]

@shilman it doesn't seem like addon-controls addresses the original issue here?

[shilman]

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?

[shilman]

@colinmosher Not yet. But it’s in progress and when us done, it will work with controls and very likely will NOT work with knobs. Therefore it’s important that knobs users know about controls and consider migrating!