Storybook: Sharing knobs - Question

[picorelli]

Hello, guys! There is anyway to share knobs between files? I tried the example below, but didn't work. The option is shown in screen, but the options doesn't work.

File ProductA.js

export const defaultPrices = select('Price', ['US$ 20', 'US$ 30'], 'US$ 20')

storiesOf('MyStore', module)
  .addDecorator(withKnobs)
  .add('productA', () => (
    <ProductA
      price={defaultPrices}
    />
  ))

File ProductB.js

import { defaultPrices } from './ProductA'

storiesOf('MyStore', module)
  .addDecorator(withKnobs)
  .add('productB', () => (
    <ProductB
      price={defaultPrices}
    />
  ))

[Hypnosphi]

You probably should export a factory function instead:

export const defaultPrices = () => select('Price', ['US$ 20', 'US$ 30'], 'US$ 20')

[picorelli]

It worked for a single file. For example, ProductA.js with many sub-stories, but when I export the function, it doesn't work.

[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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 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!

[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