Is it possible to conditionally decorate stories based on Canvas or Docs view?

[fgaleano]

I currently have a decorator for my stories that adds some HTML wrapper:

addDecorator((story) => {
  return <ContentWrapper story={story} />
});

I'd like to use a slightly different HTML wrapper style when a story is viewed in Docs mode (as opposed to Canvas mode). Ideally, I'd implement it with something like this:

addDecorator((story, config) => {
  const isDocs = config.currentView === 'docs';
  return <ContentWrapper story={story} isDocs />
});

addDecorator has a second parameter (what I called config above) but there doesn't seem to be any indicator on which view is currently active.

Is this possible at all with any other API currently available?

Thanks

[shilman]

The second function argument is typically called context and I think there's a context.viewMode in 6.0

[fgaleano]

Thanks for the reply.

I'm on v6.0.0-rc.27 and as far as I can see, there's not viewMode parameter in this context object. The following code:

addDecorator((story, context) => {
  console.log("Storybook Context", context)
  return <ContentWrapper story={story} />
});

Produces this output:

The Docs branch of this object has some functions, similar to hooks but I wouldn't expect any of those to return this viewMode value.

Is it possible it's somewhere deep in this object tree or in a different RC release?

Thank you!

[shilman]

it's probably in some branch that never got merged.. was needed for something but then we found a better way to accomplish whatever we thought we needed it for and didn't merge..