|
1 | 1 | import { storiesOf } from '@storybook/react'; |
2 | 2 | import * as React from 'react'; |
3 | | -import withRemoteRender, { RemoteRenderComponent } from '../src/components/withRemoteRender'; |
| 3 | +import withRemoteRender, { |
| 4 | + RemoteRenderComponent |
| 5 | +} from '../src/components/withRemoteRender'; |
4 | 6 | import { TestScenario } from './utils'; |
5 | 7 |
|
6 | 8 | const stories = storiesOf('With DefaultService', module); |
7 | 9 |
|
8 | 10 | type ParagraphProps = { text: string }; |
9 | | -const Paragraph: React.SFC<ParagraphProps> = ({ text }) => (<p>{text}</p>); |
| 11 | +const Paragraph: React.SFC<ParagraphProps> = ({ text }) => <p>{text}</p>; |
10 | 12 |
|
11 | | - |
12 | | -type ButtonProps = { onClick: Function, n: number }; |
| 13 | +type ButtonProps = { onClick: Function; n: number }; |
13 | 14 | const Button: React.SFC<ButtonProps> = ({ onClick, n }) => ( |
14 | 15 | <button onClick={e => onClick(n)}>Increment by {n}</button> |
15 | 16 | ); |
16 | 17 |
|
17 | | -const RRParagraph = withRemoteRender<ParagraphProps>({ name: 'Paragraph'})(Paragraph); |
18 | | -const RRButton = withRemoteRender<ButtonProps>({ name: 'Button'})(Button); |
| 18 | +const RRParagraph = withRemoteRender<ParagraphProps>({ name: 'Paragraph' })( |
| 19 | + Paragraph |
| 20 | +); |
| 21 | +const RRButton = withRemoteRender<ButtonProps>({ name: 'Button' })(Button); |
19 | 22 |
|
20 | 23 | class ButtonText extends React.Component { |
21 | | - state: { clicks: number } = { clicks: 0 } |
| 24 | + state: { clicks: number } = { clicks: 0 }; |
22 | 25 |
|
23 | | - incrementClicks = (n) => { |
| 26 | + incrementClicks = n => { |
24 | 27 | this.setState({ clicks: this.state.clicks + n }); |
25 | | - } |
| 28 | + }; |
26 | 29 |
|
27 | 30 | render() { |
28 | 31 | return ( |
29 | 32 | <div> |
30 | | - <RRButton onClick={this.incrementClicks} n={-1}/> |
31 | | - <RRButton onClick={this.incrementClicks} n={2}/> |
| 33 | + <RRButton onClick={this.incrementClicks} n={-1}/> |
| 34 | + <RRButton onClick={this.incrementClicks} n={2}/> |
32 | 35 | <RRParagraph text={`${this.state.clicks} clicks`} /> |
33 | 36 | </div> |
34 | 37 | ); |
35 | 38 | } |
36 | 39 | } |
37 | 40 |
|
38 | 41 | stories.add('Simple Example', () => ( |
39 | | - <TestScenario supportedComponents={[RRParagraph]} > |
40 | | - <RRParagraph text="Hola bebe!" /> |
41 | | - <RRParagraph text="adios mundo cruel" /> |
| 42 | + <TestScenario supportedComponents={[RRParagraph]}> |
| 43 | + <div> |
| 44 | + <RRParagraph text="Hola bebe!" /> |
| 45 | + <RRParagraph text="adios mundo cruel" /> |
| 46 | + </div> |
42 | 47 | </TestScenario> |
43 | 48 | )); |
44 | 49 |
|
45 | 50 | stories.add('Calling Action in externalized components', () => ( |
46 | | - <TestScenario supportedComponents={[RRParagraph, RRButton]}> |
| 51 | + <TestScenario supportedComponents={[RRParagraph, RRButton]}> |
47 | 52 | <ButtonText /> |
48 | 53 | </TestScenario> |
49 | 54 | )); |
0 commit comments