Storybook: Support adding decorators to groups of stories by path prefix

Created on 17 Jan 2018  路  3Comments  路  Source: storybookjs/storybook

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:

  - 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

Most helpful comment

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);
  /* */
})

All 3 comments

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);
  /* */
})

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

This is exactly what I need, thanks!

Was this page helpful?
0 / 5 - 0 ratings