Core: Add viewMode to StoryContext

[yannbf]

Issue: #8474 Part of #12368

What I did

Add viewMode to the context object (second parameter in decorators) so that users can apply conditional code in their decorators depending if the story is either on canvas or docs.. but most importantly it's ground work for certain addons to take advantage of it, such as the backgrounds addon.

How to test

1 - Go to any story (e.g. addon-a11y/base-button.stories.js) and apply the following decorator:

decorators: [
    (StoryFn, context) => {
      console.log({ viewMode: context.viewMode });
      return <StoryFn />;
    },
],

2 - Run yarn start
3 - Check if the viewMode is present.

*The viewMode is always story for the iframed stories such as in angular.

[shilman]

Looks great, thanks for splitting this out! 💯

[manuelmeister]

Why is it always story in iframes? Angular is currently iframe only, so this is completely useless and misleading for angular devs.

I tried to add a wrapper (decorator) that wraps only in canvas and not inside the docs. What would I need to do, to implement this for iframes?

[tmeasday]

@shilman this is an interesting problem ☝️ Let's take some time to consider it soon..

[manuelmeister]

@tmeasday how would you solve this?

[tmeasday]

@manuelmeister I'm not sure if there is a solution to your specific problem right now.