Skip to content

Instantly share code, notes, and snippets.

@usulpro
Last active July 7, 2017 22:26
Show Gist options
  • Save usulpro/14c84d734f45ca9692ff7517b5d4f0a3 to your computer and use it in GitHub Desktop.
Save usulpro/14c84d734f45ca9692ff7517b5d4f0a3 to your computer and use it in GitHub Desktop.
Passing options to storiesOf

I want to continue the discussion started in storybookjs/storybook#1394 (comment)

Here are some thoughts that I have about this new API for storiesOf. I offer to use them as a starting point for this work, sure this is far from being a complete list of issues. So any ideas are very welcome!

1 storiesOf('storyKindName', { options }) vs storiesOf('storyKindName', module).setOptions()

At first glance, no big difference, but:

1.1 .setOptions() more relevant to the idea of local/global options

1.2 if we support .setOptions() how should we handle such cases:

storiesOf(...)
  .setOptions(opt1)
  .add(s1)
  .add(s2)
  .setOptions(opt2)
  .add(s3)
  .add(s4)
  • should opt2 override opt1?

  • should s1 and s2 processed with op1 but s3 and s4 with opt2

1.3 We support using setOptions (from addon-options) inside .add() at this time. How it should work/look together?

storiesOf(...)
  .setOptions(opt1)
  .add('name', () => {
    setOptions({ uiOpt });
    return <Story />
  })

Maybe it's more relevant the second question though

2 should we support local/global options?

I definitely like this idea. And it could be really helpful in many cases when we want to use same options with many storiesOf or even more flexible with functions (see part 4)

In this case storiesOf('storyKindName', module).setOptions() variant is more preferable in order to have same style for local/global using

What confuses me:

  • is it same as addon-options when it global? If not, so maybe it worth to find another name in order to not confuse them

  • Can global option support all features of local? See part 3 with example options and part 4 as a possible solution

3 first list of supported options

I think it's a pretty scalable solution, so we can add new options as we need. Here just a list of some options that I have in mind by this moment. Some of them are related to my previous experience of developing addons.

 storiesOf('storyKindKey', {
   module, // Webpack HMR module
   storyKindTitle, // <string> the title of storyKind to display in the Stories Panel. Unlike storyKindKey it should'n be unique.
   storyKindTitle, // <React Component> to be displayed instead of string title
   tooltip, // <string / React Component>  a tooltip displayed when mouse is over this storyKind at the Stories Panel
   userData, // <object/map> some user data to use for sorting storyKinds or with some kind of "middleware"
   previewMultiple, // <RegExp> to enable multistories
   previewDecorator, // < (stories) => <Decorator/> > "Global" decorator of preview area
 })

the last two are directly related to this PR storybookjs/storybook#1394

4 (proposal) setOptions( (context) => { return options} )

The @shilman 's idea that options could work like decorators inspired me. Passing a function provides one more level of flexibility (options could depend on current content same as decorators at this moment) I guess it much easy to implement in the beginning than try to do it later.

5 Please raise any other ideas/questions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment