diff --git a/types/storybook__react/index.d.ts b/types/storybook__react/index.d.ts index 3aa3445f61..41ce7b45bb 100644 --- a/types/storybook__react/index.d.ts +++ b/types/storybook__react/index.d.ts @@ -1,7 +1,8 @@ -// Type definitions for @storybook/react 3.0 +// Type definitions for @storybook/react 4.0 // Project: https://github.com/storybooks/storybook // Definitions by: Joscha Feth // Anton Izmailov +// Dan Dean // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -12,15 +13,21 @@ import * as React from 'react'; export type Renderable = React.ComponentType | JSX.Element; export type RenderFunction = () => Renderable | Renderable[]; +export interface DecoratorParameters { + [key: string]: any; +} export type StoryDecorator = (story: RenderFunction, context: { kind: string, story: string }) => Renderable | null; export interface Story { readonly kind: string; - add(storyName: string, callback: RenderFunction): this; + add(storyName: string, callback: RenderFunction, parameters?: DecoratorParameters): this; addDecorator(decorator: StoryDecorator): this; + addParameters(parameters: DecoratorParameters): this; } export function addDecorator(decorator: StoryDecorator): void; +export function addParameters(parameters: DecoratorParameters): void; +export function clearDecorators(): void; export function configure(fn: () => void, module: NodeModule): void; export function setAddon(addon: object): void; export function storiesOf(name: string, module: NodeModule): Story; diff --git a/types/storybook__react/storybook__react-tests.tsx b/types/storybook__react/storybook__react-tests.tsx index 12edecb219..bf7094c580 100644 --- a/types/storybook__react/storybook__react-tests.tsx +++ b/types/storybook__react/storybook__react-tests.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { storiesOf, setAddon, addDecorator, configure, getStorybook, RenderFunction, Story, forceReRender } from '@storybook/react'; +import { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, RenderFunction, Story, forceReRender, DecoratorParameters, clearDecorators } from '@storybook/react'; const Decorator = (story: RenderFunction) =>
{story()}
; +const parameters: DecoratorParameters = { parameter: 'foo' }; forceReRender(); @@ -9,10 +10,13 @@ storiesOf('Welcome', module) // local addDecorator .addDecorator(Decorator) .add('to Storybook', () =>
) - .add('to Storybook as Array', () => [
,
]); + .add('to Storybook as Array', () => [
,
]) + .add('and a story with additional parameters', () =>
, parameters); // global addDecorator addDecorator(Decorator); +addParameters(parameters); +clearDecorators(); // setAddon interface AnyAddon { @@ -30,6 +34,7 @@ storiesOf('withAnyAddon', module) .addWithSideEffect('more', () =>
) .add('another story', () =>
) .add('to Storybook as Array', () => [
,
]) + .add('and a story with additional parameters', () =>
, parameters) .addWithSideEffect('even more', () =>
); // configure