Storybook: Editing of props

[ianlovell]

Hi, I love the concept of React Storybook - it fits very well with UX pattern libraries. There's also the concept of style guides and projects like https://github.com/devbridge/Styleguide for managing 'live' style guides. I can imagine a single tool that not only shows 'live' branding colours, fonts, font sizes etc, but also display the components of the application within a 'live' pattern library.

A simpler(?) enhancement would be the editing of component properties. i.e. a UX designer can have a form for editing each prop on the component at run time within the React Storybook UI, and the form control is based on the type of the prop (i.e. string, int, array etc) - React Storybook could provide default form controls (e.g. number picker, text box etc) and allow custom ones, mapping the PropType to another React component for form input.

This would allow UX designers to not only see components under fixed scenarios determined at design time, but also allow them to view how a component responds to any scenario of prop values at run time. Is this something that's on the radar? Thanks

[arunoda]

I think this is great and definitely, inside our radar. Pro props you can assign some configurable values and there will be a panel at the bottom allow you to edit them.

And the changes are saved in the URL. So, you can copy the current URL and pass it back and forth to get feedback.

[kevinSuttle]

Or even just a place to display the propTypes?

[dimaip]

Might be relevant, have a look at how these guys handle it: http://react-styleguidist.js.org/
They have both editable props and automatic propTypes documentation generated with react-dockgen.
I'm somehow torn between these two projects, storybook seems to be more stable (and also with storybooks.io on the horizon), but styleguidist has better documentation features. So I hope Storybook will catch up on this side.
Also related to #150

[kevinSuttle]

UIHarness

http://scup.github.io/atellier/material-ui-atellier/ doesn't really have this though.

[dimaip]

@kevinSuttle could be nice to auto-generate such examples from propTypes validation, e.g. from oneOf.

[arunoda]

@kevinSuttle @dimaip @ianlovell Thanks guys for the input. We are planning for this feature and here's how it'll be.

We call this features as "knobs".

Basically we allow to assign a knob to a prop. Like this:

import { storiesOf, createKnob } from '@kadira/storybook';

storiesOf('Button', module)
  .add('default-view', () => (
    <Button
      disable = { createKnob('disable', false) }
      style = { createKnob('style', { color: 'gree' }) }
    >
      createKnob('buttonText', 'Default Value')
    </Button>
  ))

Then we've a tab in the bottom panel called "Knobs" and they'll show a editable input component based on the type of the default value passed.

Then user's can edit those knobs and the story will be re-rendered with those changed values. Also, the edited value is encoded and attached the URL. So, you can share it here and there and look for feedback.

What do you think? Any feedback before we start building this?

[kevinSuttle]

Ah maybe #207 would cover some of this.

[dimaip]

@arunoda looks cool! Though it may be a bit annoying to write all variants of props by hand, as said, they could be (optionally) imported from the proptypes validation.

[arunoda]

@dimaip Idea is this. You don't need to write them all. This is the raw version.
We can use propTypes and defaultProps if needed instead of passing custom values.

[kevinSuttle]

Saw this in the CloudFlare UI framework

https://cloudflare.github.io/cf-ui/

[banderson]

@arunoda Is this still the plan? I'd be willing to contribute if that would help 😄

[arunoda]

@banderson yeah! That's there.
Will do a release soon.

[arunoda]

Guys, Storybook Knobs is out. Give it a try: https://github.com/kadirahq/storybook-addon-knobs
Hope I can close this issue.