Support adding decorators to groups of stories by path prefix

[brmenchl]

Issue details

My team is building out a single storybook to serve as the ui kit across multiple web apps that have different themes. Right now, we're using require.context to build every .story in our monorepo, but we haven't found a simple way to apply decorators to all the stories that fall under a specific app.

For example, if we have stories:

AppA
  - namespace
    - story
  ...
AppB
  - namespace
    - story
  ...

We would like to apply theme A to AppA stories and theme B to AppB stories, in one location.

Ideal API

storiesOf('AppA').addDecorator((story) => (
  <div style={{/* AppA related themes */}}>
    {story()}
  </div>
); 

Right now, our work around is to add the theme decorator manually to every story individually

[igor-dv]

addDecorator method has a second parameter which is context, and this context contains both "story" and "kind" values.
So you can add a global decorator and decorate according to the context:

addDecorator((story, context) => {
  const style = getTheamByContext(context);
  /* */
})

[tmeasday]

We should add some documentation about this. I think we will start making a lot more use of the context soon (#2679)

[brmenchl]

This is exactly what I need, thanks!

[camslice]

I just took advantage of the context parameter to render different decorator templates based on the kind. (Full code omitted for brevity)

stories/organisms/Foo.stories.js

import Foo from './Foo';

export default {
  title: 'Organisms/Foo',
  component: Foo,
};

const Template = (args, { argTypes }) => ({
...
})

stories/pages/Bar.stories.js

import Bar from './Bar';

export default {
  title: 'Pages/Bar',
  component: Bar,
};

const Template = (args, { argTypes }) => ({
...
})

./storybook/preview.js

export const decorators = [
  (story, { kind }) => {
    const paths = kind.split('/');
    if (paths.includes('Pages')) {
      return {
        template: `<div id="page"><story/></div>`
      }
    }
    if (paths.includes('Organisms')) {
      return {
        template: `<div id="organism"><story/></div>`
      }
    }
  },
];