Skip to content

Commit fc7e09b

Browse files
ndelangenndelangen
committed
FIX linting
1 parent f328a05 commit fc7e09b

File tree

12 files changed

+230
-257
lines changed

12 files changed

+230
-257
lines changed

‎packages/addon-info/example/Button.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberOriginal file lineDiff line numberDiff line change
@@ -12,8 +12,8 @@ Object.assign(Button, {
12
label: React.PropTypes.string.isRequired,
12
label: React.PropTypes.string.isRequired,
13
style: React.PropTypes.object,
13
style: React.PropTypes.object,
14
disabled: React.PropTypes.bool,
14
disabled: React.PropTypes.bool,
15-
onClick: React.PropTypes.func,
15+
onClick: React.PropTypes.func
16-
},
16+
}
17
});
17
});
18

18

19
export default Button;
19
export default Button;

‎packages/addon-info/example/story.js‎

Lines changed: 102 additions & 108 deletions
Original file line numberOriginal file lineDiff line numberDiff line change
@@ -3,67 +3,61 @@ import Button from './Button';
3
import { storiesOf, action } from '@kadira/storybook';
3
import { storiesOf, action } from '@kadira/storybook';
4
import backgrounds from 'react-storybook-addon-backgrounds';
4
import backgrounds from 'react-storybook-addon-backgrounds';
5

5

6-
storiesOf('Button')
6+
storiesOf('Button').addWithInfo(
7-
.addWithInfo(
7+
'simple usage',
8-
'simple usage',
8+
`
9-
`
10
This is the basic usage with the button with providing a label to show the text.
9
This is the basic usage with the button with providing a label to show the text.
11
`,
10
`,
12-
() => (
11+
() => (
13-
<div>
12+
<div>
14-
<Button label="The Button" onClick={action('onClick')}/>
13+
<Button label="The Button" onClick={action('onClick')} />
15-
<br />
14+
<br />
16-
<p>
15+
<p>
17-
Click the "?" mark at top-right to view the info.
16+
Click the "?" mark at top-right to view the info.
18-
</p>
17+
</p>
19-
</div>
18+
</div>
20-
),
19+
)
21-
);
20+
);
22

21

23-
storiesOf('Button')
22+
storiesOf('Button').addWithInfo(
24-
.addWithInfo(
23+
'simple usage (inline info)',
25-
'simple usage (inline info)',
24+
`
26-
`
27
This is the basic usage with the button with providing a label to show the text.
25
This is the basic usage with the button with providing a label to show the text.
28
`,
26
`,
29-
() => (<Button label="The Button" onClick={action('onClick')}/>),
27+
() => <Button label="The Button" onClick={action('onClick')} />,
30-
{ inline: true },
28+
{ inline: true }
31-
);
29+
);
32

30

33-
storiesOf('Button')
31+
storiesOf('Button').addWithInfo(
34-
.addWithInfo(
32+
'simple usage (disable source)',
35-
'simple usage (disable source)',
33+
`
36-
`
37
This is the basic usage with the button with providing a label to show the text.
34
This is the basic usage with the button with providing a label to show the text.
38
`,
35
`,
39-
() => (<Button label="The Button" onClick={action('onClick')}/>),
36+
() => <Button label="The Button" onClick={action('onClick')} />,
40-
{ source: false, inline: true },
37+
{ source: false, inline: true }
41-
);
38+
);
42

39

43-
storiesOf('Button')
40+
storiesOf('Button').addWithInfo(
44-
.addWithInfo(
41+
'simple usage (no header)',
45-
'simple usage (no header)',
42+
`
46-
`
47
This is the basic usage with the button with providing a label to show the text.
43
This is the basic usage with the button with providing a label to show the text.
48
`,
44
`,
49-
() => (<Button label="The Button" onClick={action('onClick')}/>),
45+
() => <Button label="The Button" onClick={action('onClick')} />,
50-
{ header: false, inline: true },
46+
{ header: false, inline: true }
51-
);
47+
);
52

48

53-
storiesOf('Button')
49+
storiesOf('Button').addWithInfo(
54-
.addWithInfo(
50+
'simple usage (no prop tables)',
55-
'simple usage (no prop tables)',
51+
`
56-
`
57
This is the basic usage with the button with providing a label to show the text.
52
This is the basic usage with the button with providing a label to show the text.
58
`,
53
`,
59-
() => (<Button label="The Button" onClick={action('onClick')}/>),
54+
() => <Button label="The Button" onClick={action('onClick')} />,
60-
{ propTables: false, inline: true },
55+
{ propTables: false, inline: true }
61-
);
56+
);
62

57

63-
storiesOf('Button')
58+
storiesOf('Button').addWithInfo(
64-
.addWithInfo(
59+
'simple usage (custom propTables)',
65-
'simple usage (custom propTables)',
60+
`
66-
`
67
This is the basic usage with the button with providing a label to show the text.
61
This is the basic usage with the button with providing a label to show the text.
68
62
69
Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
63
Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
@@ -79,81 +73,81 @@ storiesOf('Button')
79
);
73
);
80
~~~
74
~~~
81
`,
75
`,
82-
() => (
76+
() => (
83-
<div>
77+
<div>
84-
<Button label="The Button" onClick={action('onClick')}/>
78+
<Button label="The Button" onClick={action('onClick')} />
85-
<br />
79+
<br />
86-
</div>
80+
</div>
87-
),
81+
),
88-
{ inline: true, propTables: [Button]}
82+
{ inline: true, propTables: [Button] }
89-
);
83+
);
90

84

91-
storiesOf('Button')
85+
storiesOf('Button').addWithInfo(
92-
.addWithInfo(
86+
'simple usage (JSX description)',
93-
'simple usage (JSX description)',
87+
<div>
94-
(<div>
88+
<h2>This is a JSX info section</h2>
95-
<h2>This is a JSX info section</h2>
89+
<p>
96-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
90+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
97-
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
91+
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
98-
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
92+
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
99-
nulla.</p>
93+
nulla.
100-
<p>
94+
</p>
101-
<a
95+
<p>
102-
href='https://github.com/storybooks/react-storybook-addon-info'>
96+
<a href="https://github.com/storybooks/react-storybook-addon-info">
103-
This is a link</a>
97+
This is a link
104-
</p>
98+
</a>
105-
<p>
99+
</p>
106-
<img src="http://placehold.it/350x150" />
100+
<p>
107-
</p>
101+
<img src="http://placehold.it/350x150" />
108-
</div>),
102+
</p>
109-
() => (
103+
</div>,
110-
<div>
104+
() => (
111-
<Button label="The Button" onClick={action('onClick')}/>
105+
<div>
112-
<br />
106+
<Button label="The Button" onClick={action('onClick')} />
113-
<p>
107+
<br />
114-
Click the "?" mark at top-right to view the info.
108+
<p>
115-
</p>
109+
Click the "?" mark at top-right to view the info.
116-
</div>
110+
</p>
117-
),
111+
</div>
118-
);
112+
)
113+
);
119

114

120-
storiesOf('Button')
115+
storiesOf('Button').addWithInfo(
121-
.addWithInfo(
116+
'simple usage (inline JSX description)',
122-
'simple usage (inline JSX description)',
117+
<div>
123-
(<div>
118+
<h2>This is a JSX info section</h2>
124-
<h2>This is a JSX info section</h2>
119+
<p>
125-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
120+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
126-
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
121+
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
127-
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
122+
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
128-
nulla.</p>
123+
nulla.
129-
<p>
124+
</p>
130-
<a
125+
<p>
131-
href='https://github.com/storybooks/react-storybook-addon-info'>
126+
<a href="https://github.com/storybooks/react-storybook-addon-info">
132-
This is a link</a>
127+
This is a link
133-
</p>
128+
</a>
134-
<p>
129+
</p>
135-
<img src="http://placehold.it/350x150" />
130+
<p>
136-
</p>
131+
<img src="http://placehold.it/350x150" />
137-
</div>),
132+
</p>
138-
() => (<Button label="The Button" onClick={action('onClick')}/>),
133+
</div>,
139-
{ inline: true }
134+
() => <Button label="The Button" onClick={action('onClick')} />,
140-
);
135+
{ inline: true }
136+
);
141

137

142
storiesOf('Button')
138
storiesOf('Button')
143-
.addDecorator(backgrounds([
139+
.addDecorator(backgrounds([{ name: 'dark', value: '#333', default: true }]))
144-
{ name: 'dark', value: '#333', default: true },
145-
]))
146
.addWithInfo(
140
.addWithInfo(
147
'with custom styles',
141
'with custom styles',
148
`
142
`
149
This is an example of how to customize the styles of the info components.
143
This is an example of how to customize the styles of the info components.
150
144
151
For the full styles available, see \`./src/components/Story.js\`
145
For the full styles available, see \`./src/components/Story.js\`
152
`,
146
`,
153-
() => (<Button label="The Button" onClick={action('onClick')}/>),
147+
() => <Button label="The Button" onClick={action('onClick')} />,
154
{
148
{
155
inline: true,
149
inline: true,
156-
styles: (stylesheet) => {
150+
styles: stylesheet => {
157
stylesheet.infoPage = {
151
stylesheet.infoPage = {
158
backgroundColor: '#ccc'
152
backgroundColor: '#ccc'
159
};
153
};

‎packages/addon-info/src/components/Node.js‎

Lines changed: 21 additions & 22 deletions
Original file line numberOriginal file lineDiff line numberDiff line change
@@ -1,46 +1,45 @@
1
import React from 'react';
1
import React from 'react';
2-
import Props from './Props'
2+
import Props from './Props';
3-
4

3

5
const stylesheet = {
4
const stylesheet = {
6
containerStyle: {},
5
containerStyle: {},
7
tagStyle: {
6
tagStyle: {
8-
color: '#777',
7+
color: '#777'
9
}
8
}
10-
}
9+
};
11

10

12
export default class Node extends React.Component {
11
export default class Node extends React.Component {
13-
constructor(props){
12+
render() {
14-
super(props);
13+
const { node, depth } = this.props;
15-
}
14+
const { tagStyle, containerStyle } = stylesheet;
16-
17-
render(){
18-
const {node, depth} = this.props;
19-
let {tagStyle, containerStyle} = stylesheet;
20

15

21-
var leftPad = {
16+
const leftPad = {
22
paddingLeft: 3 + (depth + 1) * 15,
17
paddingLeft: 3 + (depth + 1) * 15,
23-
paddingRight: 3,
18+
paddingRight: 3
24
};
19
};
25

20

26
Object.assign(containerStyle, leftPad);
21
Object.assign(containerStyle, leftPad);
27

22

28-
const {name, text, children} = getData(node);
23+
const { name, text, children } = getData(node);
29

24

30
// Just text
25
// Just text
31
if (!name) {
26
if (!name) {
32-
return <div style={containerStyle}>
27+
return (
33-
<span style={tagStyle}>{text}</span>
28+
<div style={containerStyle}>
34-
</div>;
29+
<span style={tagStyle}>{text}</span>
30+
</div>
31+
);
35
}
32
}
36

33

37
// Single-line tag
34
// Single-line tag
38
if (!children) {
35
if (!children) {
39-
return <div style={containerStyle}>
36+
return (
40-
<span style={tagStyle}>&lt;{name}</span>
37+
<div style={containerStyle}>
38+
<span style={tagStyle}>&lt;{name}</span>
41
<Props node={node} singleLine />
39
<Props node={node} singleLine />
42-
<span style={tagStyle}>/&gt;</span>
40+
<span style={tagStyle}>/&gt;</span>
43-
</div>;
41+
</div>
42+
);
44
}
43
}
45

44

46
// Keep a copy so that further mutations to containerStyle don't impact us:
45
// Keep a copy so that further mutations to containerStyle don't impact us:
@@ -51,7 +50,7 @@ export default class Node extends React.Component {
51
<div>
50
<div>
52
<div style={containerStyleCopy}>
51
<div style={containerStyleCopy}>
53
<span style={tagStyle}>&lt;{name}</span>
52
<span style={tagStyle}>&lt;{name}</span>
54-
<Props node={node} />
53+
<Props node={node} />
55
<span style={tagStyle}>&gt;</span>
54
<span style={tagStyle}>&gt;</span>
56
</div>
55
</div>
57
{React.Children.map(children, childElement => (
56
{React.Children.map(children, childElement => (

‎packages/addon-info/src/components/PropTable.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberOriginal file lineDiff line numberDiff line change
@@ -15,8 +15,8 @@ const stylesheet = {
15
propTable: {
15
propTable: {
16
marginLeft: -10,
16
marginLeft: -10,
17
borderSpacing: '10px 5px',
17
borderSpacing: '10px 5px',
18-
borderCollapse: 'separate',
18+
borderCollapse: 'separate'
19-
},
19+
}
20
};
20
};
21

21

22
export default class PropTable extends React.Component {
22
export default class PropTable extends React.Component {
@@ -61,9 +61,7 @@ export default class PropTable extends React.Component {
61
if (!array.length) {
61
if (!array.length) {
62
return <small>No propTypes defined!</small>;
62
return <small>No propTypes defined!</small>;
63
}
63
}
64-
array.sort(function (a, b) {
64+
array.sort((a, b) => a.property > b.property);
65-
return a.property > b.property;
66-
});
67

65

68
return (
66
return (
69
<table style={stylesheet.propTable}>
67
<table style={stylesheet.propTable}>
@@ -92,5 +90,5 @@ export default class PropTable extends React.Component {
92

90

93
PropTable.displayName = 'PropTable';
91
PropTable.displayName = 'PropTable';
94
PropTable.propTypes = {
92
PropTable.propTypes = {
95-
type: React.PropTypes.func,
93+
type: React.PropTypes.func
96
};
94
};

0 commit comments

Comments
 (0)