Specify preact JSX element for the Renderable type (#37380)

This commit is contained in:
Darrel-Day Guerrero 2019-08-05 19:43:31 -04:00 committed by Nathan Shively-Sanders
parent 8c93782fd8
commit a366b44995
2 changed files with 16 additions and 8 deletions

View File

@ -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 {

View File

@ -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);