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!
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
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
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
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.