[Feature proposal] Integrate with the knobs add-on

[jessepinho]

The Knobs addon for Storybook allows you to change the state of a component in the UI, rather than having to build a separate story for each state.

Are there any plans of integrating this library with knobs, so that one could screenshot multiple knob states? Off the top of my head, something like:

import { text } from '@storybook/addon-knobs/react'

storiesOf('submit button', module)
  .addDecorator(withScreenshot({
    knobs: {
      'Button label': [
        'Submit',
        'Go',
        'Search',
      ],
    },
  }))
  .add('submit button', () => (
    <input type="submit" value={text('Button label', 'Submit')} />
  ))

Thoughts? Without this feature, I have to convert all my knobs to discrete stories so that they can be screenshotted individually.

[wadackel]

Hi @jessepinho, Thank you for wonderful proposal :heart:

I think the feature you suggested is very useful. I'd like to incorporate the implementation in the next version, so I'm glad if you can wait for a while.

Thanks!!

[jessepinho]

Sounds good—thanks for looking into it!

[wadackel]

Hi @jessepinho Released a version supporting Knobs integration as 1.1.0-alpha.1 :tada:

Although it's alpha version now, if behavior does not have any problem, it will be released as an official version :smiley:

Please confirm it when you have time.

---

Install

$ yarn add -D [email protected]

Example

It's almost the same as the source code you propose :+1:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
import { withScreenshot } from 'storybook-chrome-screenshot';
import Button from './Button';

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('with knobs', withScreenshot({
    knobs: {
      'Button Primary': [
        true,
        false,
      ],
      'Button Label': [
        'with Knobs',
        'Hello World!',
        '@tsuyoshiwada',
      ],
    },
  })(() => {
    return (
      <Button primary={boolean('Button Primary', true)}>
        {text('Button Label', 'with Knobs')}
      </Button>
    );
  }));

Result:

__screenshots__/Button-with-knobs-Button-Label-with-Knobs_Button-Primary-true.png
__screenshots__/Button-with-knobs-Button-Label-Hello-World!_Button-Primary-true.png
__screenshots__/Button-with-knobs-Button-Label-@tsuyoshiwada_Button-Primary-true.png
__screenshots__/Button-with-knobs-Button-Label-with-Knobs_Button-Primary-false.png
__screenshots__/Button-with-knobs-Button-Label-Hello-World!_Button-Primary-false.png
__screenshots__/Button-with-knobs-Button-Label-@tsuyoshiwada_Button-Primary-false.png

[jessepinho]

@tsuyoshiwada ahh so cool! Thanks for doing this so quickly! Will take a look as soon as I can :)

[IanVS]

Hi, it's been a while, what is the status of this issue? Does it work with knobs now?

[SebastienGllmt]

Is there any blocker on this issue other than just time to develop? I spent some time investigating this because I would like this functionality and it doesn't look like any change to the knob addon is required (but I'm not sure if they plan to rewrite their API at some point. Always a risk). Is there a reason I should not to spend more time looking into this as time permits?

EDIT: after asking around

shilman
knobs won't change, but we'll be introducing updates to storybook core that will enable a much cleaner replacement
so future versions of storycap (and tools like it) will need to adapt to those changes

[lacolaco]

Knobs has been deprecated and is superseded by Controls. I think it would be a universal solution to have args in variants to override default args of stories.