From a366b44995ad226b436e3f178047a62717d48fdd Mon Sep 17 00:00:00 2001
From: Darrel-Day Guerrero <darrelday.guerrero@shopify.com>
Date: Mon, 5 Aug 2019 19:43:31 -0400
Subject: [PATCH] Specify preact JSX element for the Renderable type (#37380)

---
 types/storybook__preact/index.d.ts            |  5 +++--
 .../storybook__preact-tests.tsx               | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/types/storybook__preact/index.d.ts b/types/storybook__preact/index.d.ts
index f543d7034f..607f94aa1e 100644
--- a/types/storybook__preact/index.d.ts
+++ b/types/storybook__preact/index.d.ts
@@ -1,6 +1,7 @@
-// Type definitions for @storybook/preact 5.0
+// Type definitions for @storybook/preact 5.2
 // Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/preact
 // Definitions by: Keisuke Kan <https://github.com/9renpoto>
+//                 Darrel Guerrero <https://github.com/ddayguerrero>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.3
 // Created with the help of storybook__react types
@@ -9,7 +10,7 @@
 
 import * as Preact from 'preact';
 
-export type Renderable = Preact.AnyComponent | JSX.Element;
+export type Renderable = Preact.AnyComponent | JSX.Element | preact.JSX.Element;
 export type RenderFunction = () => Renderable | Renderable[];
 
 export interface DecoratorParameters {
diff --git a/types/storybook__preact/storybook__preact-tests.tsx b/types/storybook__preact/storybook__preact-tests.tsx
index 72651611c5..df72d74216 100644
--- a/types/storybook__preact/storybook__preact-tests.tsx
+++ b/types/storybook__preact/storybook__preact-tests.tsx
@@ -1,8 +1,14 @@
 /** @jsx h */
-import { h } from 'preact';
+import { h, Component } from 'preact';
 import { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, RenderFunction, Story, forceReRender, DecoratorParameters, clearDecorators } from '@storybook/preact';
 
 const Decorator = (story: RenderFunction) => <div>{story()}</div>;
+class Input<P> extends Component<P> {
+    render() {
+        return <div><input type="text" id="name" name="name" /></div>;
+    }
+}
+
 const parameters: DecoratorParameters = { parameter: 'foo' };
 
 forceReRender();
@@ -31,12 +37,13 @@ const AnyAddon: AnyAddon = {
 };
 setAddon(AnyAddon);
 storiesOf<AnyAddon>('withAnyAddon', module)
-    .addWithSideEffect('custom story', () => <div/>)
-    .addWithSideEffect('more', () => <div/>)
-    .add('another story', () => <div/>)
+    .addWithSideEffect('custom story', () => <div />)
+    .addWithSideEffect('more', () => <div />)
+    .add('another story', () => <div />)
     .add('to Storybook as Array', () => [<div />, <div />])
-    .add('and a story with additional parameters', () => <div/>, parameters)
-    .addWithSideEffect('even more', () => <div/>);
+    .add('and a story with additional parameters', () => <div />, parameters)
+    .addWithSideEffect('even more', () => <div />)
+    .add('add a class component', () => <Input></Input>);
 
 // configure
 configure(() => undefined, module);