Storybook: Knobs sharing props between two stories

[tirli]

Hi
I'm using knobs and link addon to create a story for tooltip. It's possible to open it by hover and by focus.
I created something like this:

storiesOf('Tooltip', module)
  .addDecorator(withKnobs)
  .add('closed', () => {
    const props = {
      info: 'tooltip',
      visible: false,
      trigger: select('trigger', ['hover', 'focus'], 'hover'),
      onVisibleChange: linkTo('Tooltip', 'opened')
    };

    return <Tooltip {...props}> trigger </Tooltip>;
  })
  .add('opened', () => {
    const props: TooltipPropsType = {
      info: 'tooltip',
      visible: true,
      trigger: select('trigger', ['hover', 'focus'], 'hover'),
      onVisibleChange: linkTo('Tooltip', 'closed')
    };

    return <Tooltip {...props}> trigger </Tooltip>;
  });

But when I'm using it and change trigger from hover to focused in 'closed' story, the 'opened' story still thinks that the trigger is hover. So tooltip disappears when I move the mouse away(not click outside as expected in focused behavior).
I also tried to move select('trigger', ['hover', 'focus'], 'hover') above stories. But there is an error about missing knobs contex.

Can I somehow share my trigger prop between this two stories?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[MerlinMason]

Has anybody found a solution to this? Would be really useful.

[KornelijusGlinskas]

I've found a solution to this and it is pretty simple actually. I've created a separate JS file that has methods returning knobs that should be shared across stories. Let me give an example of two:

const getLabel = () => text('Label', 'Label'); const getPlaceholder = () => text('Placeholder', 'placeholder');

Then, in the same file, I've created an exportable function that returns the object called knobs methods.

export const getSharedKnobs = () => ({ label: getLabel(), placeholder: getPlaceholder() });

And it is pretty much done with this. All you have to now is to import this function and call it by assigning it to the variable in the story.

import {getSharedKnobs } from 'PATH_TO_FILE'; const sharedKnobs = getSharedKnobs();

And at this point knobs are active and you can select knob value simply like accessing any other JS object.

sharedKnobs.placeholder