From 54c84b9b50a41ca64cbab3cbb45553bf177e539c Mon Sep 17 00:00:00 2001
From: Joscha Feth <joscha@feth.com>
Date: Tue, 15 Aug 2017 05:38:10 +1000
Subject: [PATCH] @storybook/react add-on type definitions (#18814)

* @storbook/react add-on type definitions

* use this type
---
 types/storybook__react/index.d.ts                 |  5 +++--
 types/storybook__react/storybook__react-tests.tsx | 13 ++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/types/storybook__react/index.d.ts b/types/storybook__react/index.d.ts
index 0fdde7401b..7a52903bc7 100644
--- a/types/storybook__react/index.d.ts
+++ b/types/storybook__react/index.d.ts
@@ -14,8 +14,9 @@ export type RenderFunction = () => Renderable;
 export type StoryDecorator = (story: RenderFunction, context: { kind: string, story: string }) => Renderable | null;
 
 export interface Story {
-    add(storyName: string, callback: RenderFunction): Story;
-    addDecorator(decorator: StoryDecorator): Story;
+    readonly kind: string;
+    add(storyName: string, callback: RenderFunction): this;
+    addDecorator(decorator: StoryDecorator): this;
 }
 
 export function addDecorator(decorator: StoryDecorator): void;
diff --git a/types/storybook__react/storybook__react-tests.tsx b/types/storybook__react/storybook__react-tests.tsx
index 0c43c73a74..13cf6aff50 100644
--- a/types/storybook__react/storybook__react-tests.tsx
+++ b/types/storybook__react/storybook__react-tests.tsx
@@ -13,13 +13,20 @@ addDecorator(Decorator);
 
 // setAddon
 interface AnyAddon {
-    xyz(): void;
+    addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T;
 }
 const AnyAddon: AnyAddon = {
-    xyz() {}
+    addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T {
+        console.log(this.kind === 'withAnyAddon');
+        return this.add(storyName, storyFn);
+    }
 };
 setAddon(AnyAddon);
-storiesOf<AnyAddon>('withAnyAddon', module).xyz();
+storiesOf<AnyAddon>('withAnyAddon', module)
+    .addWithSideEffect('custom story', () => <div/>)
+    .addWithSideEffect('more', () => <div/>)
+    .add('another story', () => <div/>)
+    .addWithSideEffect('even more', () => <div/>);
 
 // configure
 configure(() => undefined, module);