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.
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
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!
Most helpful comment
addDecoratormethod 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: