Skip to content
This repository was archived by the owner on Jan 31, 2024. It is now read-only.

Commit efc602d

Browse files
committed
add project annotation overrides section [skip-ci]
1 parent 5d1042e commit efc602d

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

README.md

+28
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,34 @@ test('onclick handler is called', () => {
146146
});
147147
```
148148

149+
### setting project annotations to `composeStory` or `composeStories`
150+
151+
`setProjectAnnotations` is intended to apply all the global configurations that are defined in your `.storybook/preview.js` file. This means that you might get unintended side-effects in case your preview.js imports certain mocks or other things you actually do not want to execute in your test files. If this is your case and you still need to provide some annotation overrides (decorators, parameters, etc) that normally come from preview.js, you can pass them directly as the optional last argument of both `composeStories` and `composeStory` functions:
152+
153+
**composeStories**:
154+
155+
```ts
156+
import * as stories from './Button.stories'
157+
158+
// default behavior: uses overrides from setProjectAnnotations
159+
const { Primary } = composeStories(stories)
160+
161+
// custom behavior: uses overrides defined locally
162+
const { Primary } = composeStories(stories, { decorators: [...], globalTypes: {...}, parameters: {...})
163+
```
164+
165+
**composeStory**:
166+
167+
```ts
168+
import * as stories from './Button.stories'
169+
170+
// default behavior: uses overrides from setProjectAnnotations
171+
const Primary = composeStory(stories.Primary, stories.default)
172+
173+
// custom behavior: uses overrides defined locally
174+
const Primary = composeStory(stories.Primary, stories.default, { decorators: [...], globalTypes: {...}, parameters: {...})
175+
```
176+
149177
### Reusing story properties
150178
151179
The components returned by `composeStories` or `composeStory` not only can be rendered as React components, but also come with the combined properties from story, meta and global configuration. This means that if you want to access `args` or `parameters`, for instance, you can do so:

0 commit comments

Comments
 (0)