Storybook: Access parameters within .stories.js files in .storybook/config.js

[RichardPK]

Is your feature request related to a problem? Please describe.
I have added a global select decorator within config.js to handle the html { background } css property - this allows Storybook users to select the background colour on which all components are rendered.

The website in question has 3 different possible background colours so it's useful to have this as a universal knob across all components. This is working nicely - however I would love to make the default value dynamic - as some components are always rendered on black, others on white etc.

In essence, I am looking at passing a dynamic value into the select knob's defaultValue, which is being set at the story level. This is my addDecorator method within config.js:

addDecorator(story => {
  const label = "Background color"
  const options = {
    Black: Colors.primaryBlack,
    White: Colors.white,
    Grey: Colors.grey,
  }
  const defaultValue = options.White
  const groupId = "Universal"

  const value = select(label, options, defaultValue, groupId)

  return (
    <>
      <StorybookGlobalStyle htmlColor={value} />
      {story()}
    </>
  )
})

Describe the solution you'd like
Currently within config.js - I don't seem to be able to get anything useful from either the story function that is passed into addDecorator(), or the req object that is returned from the require.context function.

My question/request can be summed up as: Is there any way to access parameters/props contained within the .stories.js file within .config.js?

[shilman]

Pretty sure the decorator function takes multiple arguments, including a context object that contains the story parameters.

[RichardPK]

Hey @shilman thanks for your reply.

Could you explain a bit more about how to get access to this within my config.js addDecorator method? As an example - I am passing a notes parameter into my stories, but I don't know how this can be accessed within the config.js addDecorator method. When accessing the story() callback within addDecorator at the config.js level - it is returning an ordinary React component.

That does mean that I am able to add a prop to the top-level component such as storybookBackground, and then access that with story().props.storybookBackground, but this feels like muddying the water a bit, and I would rather not pass new props into components that are only used within Storybook.

[shilman]

It would look something like this (typing on my phone from memory, so YMMV):

addDecorator((storyFn, { parameters } ) => {
  const background = parameters && parameters.backgroundColor || 'white';
  return (
   <>
     <StorybookGlobalStyle htmlColor={background} />
     {storyFn(context)}
   </>
  );
});

[RichardPK]

@shilman you G. Exactly what I was looking for!

[shilman]

Awesome!