search

storybookjs / addon-knobs

Storybook addon prop editor component
MIT License
12 stars 17 forks source link

Code Preview for Knobs #24

Open danyball opened 4 years ago

danyball commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

Duplicate? https://github.com/storybookjs/storybook/issues/9801 Close other if duplicate :)

danyball commented 4 years ago

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

Not a duplicate

Stafie commented 4 years ago

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 commented 4 years ago

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.

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

colinmosher commented 4 years ago

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

shilman commented 4 years ago

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 commented 4 years ago

@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!