Module: shared/utils/storybook
utils
withProviders
▸ withProviders(wrapperProps?): (StoryComponent: AnnotatedStoryFn<ReactRenderer, Args>, storyContext: any) => Element
Storybook decorator to be used in webapp package
stories. It wraps the story with all needed providers and allows to pass state to it.
Parameters
| Name | Type |
|---|---|
wrapperProps | WrapperProps |
Returns
fn
▸ (StoryComponent, storyContext): Element
Parameters
| Name | Type |
|---|---|
StoryComponent | AnnotatedStoryFn<ReactRenderer, Args> |
storyContext | any |
Returns
Element
Example
Basic usage:
example.stories.tsx
export default {
title: 'ExampleComponent',
component: ExampleComponent,
decorators: [
withProviders(),
],
};
Example
Override user profile:
example.stories.tsx
import { CurrentUserType } from '@shipfast/webapp-api-client/graphql';
import { currentUserFactory, fillCommonQueryWithUser } from '@shipfast/webapp-api-client/tests/factories';
import { ExampleComponent, ExampleComponentProps } from './example.component';
type StoryArgsType = ExampleComponentProps & { profile: CurrentUserType };
const Template: StoryFn<StoryArgsType> = ({ profile, ...args }: StoryArgsType) => {
return <ExampleComponent {...args} />;
};
export default {
title: 'ExampleComponent',
component: ExampleComponent,
decorators: [
withProviders({
apolloMocks: (defaultMocks, { args: { profile } }: any) => {
return [fillCommonQueryWithUser(profile)];
},
}),
],
};
export const Default = {
render: Template,
args: { profile: currentUserFactory({ firstName: 'First name' }) },
};