React-styleguidist: "Knobs" Coming/Feature Request?

[bluetidepro]

Are there any plans to add a way for react-styleguidist to have more interactive style "knobs" or form elements for the component's prop types. This is something I've seen on many other pattern library generators (see examples below), and I was mainly wondering if this is something that is being planned for react-styleguidist? Or is it something you'd be open to having if I looked into building it/adding it in?

Some examples would be like:

• https://scup.github.io/atellier/material-ui-atellier/
• http://bluekit.blueberry.io/demo
• https://github.com/storybooks/storybook-addon-knobs

[sapegin]

No plans yet but this is something that would be very cool ;-)

So any help if not with implementation but at least with some ideas / mockups / investigation how that should / could work in Styleguidist is greatly appreciated.

[alampros]

This is a super exciting idea. I just started playing with styleguidist yesterday, but my (very uninformed) strategy would be to rely on a common styleguide state object:

• Add react-redux to the project and wrap the whole styleguide in a store provider
• Modify <Props> and supply a component to handle each of the prop types. The values of each would be tied to styleguide[componentId][propName] in the store.
• Each <Wrapper> (or <Playground>?) in the <Examples> could then project the values from the store onto the example's props.

Example Wrapper

import { Component, PropTypes, Children, cloneElement } from 'react'
import { connect } from 'react-redux'

export default class Wrapper extends Component {
  static propTypes = {
    styleguideProps: PropTypes.object,
    children: PropTypes.node.isRequired,
  }
  render() {
    const {
      styleguideProps,
      children,
    } = this.props
    if(!styleguideProps) {
      return children
    }
    return Children.map(children, child => {
      return cloneElement(child, styleguideProps)
    })
  }
}

const mapStateToProps = (styleguideState, ownProps) => {
  return {
    styleguideProps: styleguideState[ownProps.componentId],
  }
}
export const StateMappedWrapper = connect(mapStateToProps)(Wrapper)

[sapegin]

@alampros I‘m not sure why you need Redux for that ;-) Implementation is the simplest question for this feature — UI is much harder question.

[okonet]

Yeah, also not sure why you need redux for that... 🤔

I'm wondering if it can be done in a way that https://github.com/storybooks/storybook-addon-knobs can be reused.

[sapegin]

Not sure we could reuse it — it looks very tied to Storybook but we definitely can learn from it.

[sapegin]

I’d be very to cool to have plugins in Styleguidist but I have no idea how we could implement them.

[alampros]

@sapegin totally fair point. It was the hammer I had in my hand at the time. heh

UI is much harder question

This seems like a straightforward map of propType => input component, no? Add a column to the Props table with cell renderers mapped from propType:

{
  'bool': <input type="checkbox" ... />,
  'string': <input type="text" ... />,
  'enum': <select .... />,
}

[sapegin]

This seems like a straightforward map of propType => input component, no?

In vacuum — yes ;-) But we need to add them to existing Styleguidist UI. It‘d make UI uglier if we show them by default. Also there‘s s an issue with checkboxes for example: it has two states but actually there’s three: checked, unchecked and the value defined in Markdown file for a particular example. How that should work?

[alampros]

checked, unchecked and the value defined in Markdown file for a particular example

Perhaps treat it like the context configuration option, where an object is made available to each example with the current state of the Props. However, that would mean that each markdown example would have to opt-in to using the controlled props.

[sapegin]

That won’t work ;-)

[sapegin]

Another implementation in BlueKit: http://bluekit.blueberry.io/demo

[okonet]

I really like how Carte Blanche is doing it — they not only have custom UI and custom value generators, but they actually update the source code of the examples on state change so you can commit it to the repo.

[sapegin]

I’m looking again how other tools do this and looks like we’re overcomplicate things here. All three (Attelier, Bluekit and Storybook Knobs) allows changing props only for one example, not for all examples of a component. So we could probably do it like in Storybook Knobs, as a tab under an example (where the editor is).

Which leads as to another thing: we can make a simple plugins API. Plugins will be visible as tabs under an example, they will have read/write access to example source, style guide config etc. That also means code editor could be implemented as a plugin, as well as its read only alternative.

(cc @MicheleBertoli @cef62 — snapguidist could be implemented as a plugin too.)

[okonet]

That is awesome! It would be great to have such a plugin system!

[cef62]

Yes @sapegin that plugin system is on top of my todo list since xmas but until April my work commitments are taking all my available time.
I've some rough idea on how that system could be implemented, I'll share those as soon as possible (April). If in the meantime someone else want to start working on the plugin system I'll be happy to add my contribute.

they actually update the source code of the examples on state change so you can commit it to the repo.

@okonet yes that is definitely something I'd love to have in styleguidist!

[stereobooster]

Maybe JSON like structure with editable value (inline editor, enables when you click it)

Some inspiration for UI:

• http://worrydream.com/Tangle/
• Example of "JSON like structure" https://uber.github.io/react-map-gl/#/interactivity
• Example of inline editor http://kaivi.github.io/riek/

UPD:

Check out this example with code editor https://react.semantic-ui.com/modules/dropdown#dropdown-example-search-selection

[darrylsepeda]

Does this plan still ongoing?
Is there anything I can do to help realizing this plan?

Previously I tried to add additional combobox in wrapper.js, but everytime I change the value, wrapper.js can't pass the new props to the child components (I can't find any ways to pass it in preview.js). I also don't understand how codemirror works, is it possible for codemirror to read our changes?

[sapegin]

@darrylsepeda Thanks for your interest! Any help with the plugin API would be the most valuable: #505.

I also don't understand how codemirror works, is it possible for codemirror to read our changes?

What changes do you mean? But I guess it’s possible because it updates the code every time you edit examples in Markdown files.

[darrylsepeda]

Thanks @sapegin, I will take a look at the API.

I mean, the changes that has been made by user in the website (come from our function).
For example, user choose size: 20px from combobox, if I change the Markdown files from combobox onChange, the website will be refreshed everytime user change the combobox value right?

[sapegin]

Looks like you shouldn’t change the Markdown directly as a reaction to change in combobox but some state and than filter Markdown before each render. That’s a good question for plugin API ;-)

[okonet]

One use case for updating all components in the example is theme or i18n settings: I think this should be allowed via the plugin system as well on the "root" level. Something to think about.

[danvoyce]

Has any body had any luck with moving this forward? This is my first time playing with Styleguidist and this seems like such an obvious feature that is missing, unless I'm missing something?

[danvoyce]

Has any body had any luck with moving this forward? This is my first time playing with Styleguidist and this seems like such an obvious feature that is missing, unless I'm missing something?

Why is this marked as off topic? I'm just looking to get some help on this matter?  😳

[sapegin]

This doesn't add anything to the discussion and generates lots of spam emails to everyone subscribed to issue. I'm locking the issue now. Feel free to send a pull request or open a new, more constructive, issue.