From 31ddd01c073107a2970f5af7f3c19a97a99b7b20 Mon Sep 17 00:00:00 2001 From: Dan Dean Date: Mon, 5 Nov 2018 12:11:22 -0800 Subject: [PATCH 1/4] Fix the signaure of @storybook/react .add() method The `add` method takes an optional 3rd `paramters` option which is used to configure globally installed addons for the current story. --- types/storybook__react/index.d.ts | 3 ++- types/storybook__react/storybook__react-tests.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/types/storybook__react/index.d.ts b/types/storybook__react/index.d.ts index 3aa3445f61..91b686ffcf 100644 --- a/types/storybook__react/index.d.ts +++ b/types/storybook__react/index.d.ts @@ -2,6 +2,7 @@ // Project: https://github.com/storybooks/storybook // Definitions by: Joscha Feth // Anton Izmailov +// Dan Dean // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -16,7 +17,7 @@ export type StoryDecorator = (story: RenderFunction, context: { kind: string, st export interface Story { readonly kind: string; - add(storyName: string, callback: RenderFunction): this; + add(storyName: string, callback: RenderFunction, parameters?: { [key: string]: any }): this; addDecorator(decorator: StoryDecorator): this; } diff --git a/types/storybook__react/storybook__react-tests.tsx b/types/storybook__react/storybook__react-tests.tsx index 12edecb219..ba19df798e 100644 --- a/types/storybook__react/storybook__react-tests.tsx +++ b/types/storybook__react/storybook__react-tests.tsx @@ -30,6 +30,7 @@ storiesOf('withAnyAddon', module) .addWithSideEffect('more', () =>
) .add('another story', () =>
) .add('to Storybook as Array', () => [
,
]) + .add('and a story with additional parameters', () =>
, { parameter: 'foo' }) .addWithSideEffect('even more', () =>
); // configure From feee4f8c4060c78b840897a5e674bbb79b40b836 Mon Sep 17 00:00:00 2001 From: Dan Dean Date: Mon, 5 Nov 2018 12:23:00 -0800 Subject: [PATCH 2/4] =?UTF-8?q?Bump=20from=20@storybook/react=203.0=20?= =?UTF-8?q?=E2=86=92=203.4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/storybook__react/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/storybook__react/index.d.ts b/types/storybook__react/index.d.ts index 91b686ffcf..92b173d746 100644 --- a/types/storybook__react/index.d.ts +++ b/types/storybook__react/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for @storybook/react 3.0 +// Type definitions for @storybook/react 3.4 // Project: https://github.com/storybooks/storybook // Definitions by: Joscha Feth // Anton Izmailov From b718393cf7694f323a3747f915fd6d3a1197e861 Mon Sep 17 00:00:00 2001 From: Dan Dean Date: Mon, 5 Nov 2018 21:53:20 -0800 Subject: [PATCH 3/4] Flesh out more of the parameter API Bumped the version of the associated module to 4.0 and fleshed out more of the API according to that version's source code. --- types/storybook__react/index.d.ts | 10 ++++++++-- types/storybook__react/storybook__react-tests.tsx | 10 +++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/types/storybook__react/index.d.ts b/types/storybook__react/index.d.ts index 92b173d746..41ce7b45bb 100644 --- a/types/storybook__react/index.d.ts +++ b/types/storybook__react/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for @storybook/react 3.4 +// Type definitions for @storybook/react 4.0 // Project: https://github.com/storybooks/storybook // Definitions by: Joscha Feth // Anton Izmailov @@ -13,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, parameters?: { [key: string]: any }): 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 ba19df798e..7b0df4f145 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,7 +34,7 @@ storiesOf('withAnyAddon', module) .addWithSideEffect('more', () =>
) .add('another story', () =>
) .add('to Storybook as Array', () => [
,
]) - .add('and a story with additional parameters', () =>
, { parameter: 'foo' }) + .add('and a story with additional parameters', () =>
, Parameters) .addWithSideEffect('even more', () =>
); // configure From e721da7ad42e81da39b4ff37e6189be37813a273 Mon Sep 17 00:00:00 2001 From: Dan Dean Date: Tue, 6 Nov 2018 09:36:57 -0800 Subject: [PATCH 4/4] Use correct casing for pojo variable name --- types/storybook__react/storybook__react-tests.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/types/storybook__react/storybook__react-tests.tsx b/types/storybook__react/storybook__react-tests.tsx index 7b0df4f145..bf7094c580 100644 --- a/types/storybook__react/storybook__react-tests.tsx +++ b/types/storybook__react/storybook__react-tests.tsx @@ -2,7 +2,7 @@ import * as React from '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' }; +const parameters: DecoratorParameters = { parameter: 'foo' }; forceReRender(); @@ -11,11 +11,11 @@ storiesOf('Welcome', module) .addDecorator(Decorator) .add('to Storybook', () =>
) .add('to Storybook as Array', () => [
,
]) - .add('and a story with additional parameters', () =>
, Parameters); + .add('and a story with additional parameters', () =>
, parameters); // global addDecorator addDecorator(Decorator); -addParameters(Parameters); +addParameters(parameters); clearDecorators(); // setAddon @@ -34,7 +34,7 @@ storiesOf('withAnyAddon', module) .addWithSideEffect('more', () =>
) .add('another story', () =>
) .add('to Storybook as Array', () => [
,
]) - .add('and a story with additional parameters', () =>
, Parameters) + .add('and a story with additional parameters', () =>
, parameters) .addWithSideEffect('even more', () =>
); // configure