GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

MIGRATE addon-context documentation to CSF & triconfig

Browse Source
This commit is contained in:
Norbert de Langen 2019-11-26 12:33:51 +01:00
parent e7fa7ec2d4
commit 8a76b43e2e
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
addons/contexts/README.md
View File

@ -47,14 +47,15 @@ To get it started, add this package into your project:
yarn add -D @storybook/addon-contexts yarn add -D @storybook/addon-contexts
``` ```
Then, register the addon by adding the following line into your `addon.js` file (you should be able to find the file within `main.js`:
under the storybook config directory of your project):
```js ```js
import '@storybook/addon-contexts/register'; module.exports = {
addons: ['@storybook/addon-contexts/register']
}
``` ```
To load your contextual setups for your stories globally, add the following lines into `config.js` file (you should To load your contextual setups for your stories globally, add the following lines into `preview.js` file (you should
see it near your `addon.js` file): see it near your `addon.js` file):
```js ```js
@ -68,29 +69,25 @@ addDecorator(withContexts(contexts));
Alternatively, like other addons, you can use this addon only for a given set of stories: Alternatively, like other addons, you can use this addon only for a given set of stories:
```js ```js
import { storiesOf } from '@storybook/[framework]';
import { withContexts } from '@storybook/addon-contexts/[framework]'; import { withContexts } from '@storybook/addon-contexts/[framework]';
import { contexts } from './configs/contexts'; import { contexts } from './configs/contexts';
const story = storiesOf('Component With Contexts', module).addDecorator(withContexts(contexts)); // use this addon with a default contextual environment setups export default {
title: 'Component With Contexts',
decorators: [withContexts(contexts)],
};
``` ```
Finally, you may want to modify the default setups at per story level. Here is how you can do this: Finally, you may want to modify the default setups at per story level. Here is how you can do this:
```js ```js
story.add( export const defaultView = () => <div />;
() => { defaultView.story = {
/* some stories */ parameters: {
}, context: [{}]
{
contexts: [
{
/* the modified setup goes here, sharing the same API signatures */
},
],
} }
); }
``` ```
## ⚙️ Setups ## ⚙️ Setups