Skip to content

Commit

Permalink
FIX linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@ndelangen
ndelangen committed Apr 5, 2017
1 parent f328a05 commit fc7e09b
Show file tree
Hide file tree
Showing 12 changed files with 230 additions and 257 deletions.
4 changes: 2 additions & 2 deletions packages/addon-info/example/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ Object.assign(Button, {
label: React.PropTypes.string.isRequired,
style: React.PropTypes.object,
disabled: React.PropTypes.bool,
onClick: React.PropTypes.func,
},
onClick: React.PropTypes.func
}
});

export default Button;
210 changes: 102 additions & 108 deletions packages/addon-info/example/story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,61 @@ import Button from './Button';
import { storiesOf, action } from '@kadira/storybook';
import backgrounds from 'react-storybook-addon-backgrounds';

storiesOf('Button')
.addWithInfo(
'simple usage',
`
storiesOf('Button').addWithInfo(
'simple usage',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (
<div>
<Button label="The Button" onClick={action('onClick')}/>
<br />
<p>
Click the "?" mark at top-right to view the info.
</p>
</div>
),
);
() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
<p>
Click the "?" mark at top-right to view the info.
</p>
</div>
)
);

storiesOf('Button')
.addWithInfo(
'simple usage (inline info)',
`
storiesOf('Button').addWithInfo(
'simple usage (inline info)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (<Button label="The Button" onClick={action('onClick')}/>),
{ inline: true },
);
() => <Button label="The Button" onClick={action('onClick')} />,
{ inline: true }
);

storiesOf('Button')
.addWithInfo(
'simple usage (disable source)',
`
storiesOf('Button').addWithInfo(
'simple usage (disable source)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (<Button label="The Button" onClick={action('onClick')}/>),
{ source: false, inline: true },
);
() => <Button label="The Button" onClick={action('onClick')} />,
{ source: false, inline: true }
);

storiesOf('Button')
.addWithInfo(
'simple usage (no header)',
`
storiesOf('Button').addWithInfo(
'simple usage (no header)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (<Button label="The Button" onClick={action('onClick')}/>),
{ header: false, inline: true },
);
() => <Button label="The Button" onClick={action('onClick')} />,
{ header: false, inline: true }
);

storiesOf('Button')
.addWithInfo(
'simple usage (no prop tables)',
`
storiesOf('Button').addWithInfo(
'simple usage (no prop tables)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (<Button label="The Button" onClick={action('onClick')}/>),
{ propTables: false, inline: true },
);
() => <Button label="The Button" onClick={action('onClick')} />,
{ propTables: false, inline: true }
);

storiesOf('Button')
.addWithInfo(
'simple usage (custom propTables)',
`
storiesOf('Button').addWithInfo(
'simple usage (custom propTables)',
`
This is the basic usage with the button with providing a label to show the text.
Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
Expand All @@ -79,81 +73,81 @@ storiesOf('Button')
);
~~~
`,
() => (
<div>
<Button label="The Button" onClick={action('onClick')}/>
<br />
</div>
),
{ inline: true, propTables: [Button]}
);
() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
</div>
),
{ inline: true, propTables: [Button] }
);

storiesOf('Button')
.addWithInfo(
'simple usage (JSX description)',
(<div>
<h2>This is a JSX info section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
nulla.</p>
<p>
<a
href='https://github.com/storybooks/react-storybook-addon-info'>
This is a link</a>
</p>
<p>
<img src="http://placehold.it/350x150" />
</p>
</div>),
() => (
<div>
<Button label="The Button" onClick={action('onClick')}/>
<br />
<p>
Click the "?" mark at top-right to view the info.
</p>
</div>
),
);
storiesOf('Button').addWithInfo(
'simple usage (JSX description)',
<div>
<h2>This is a JSX info section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
nulla.
</p>
<p>
<a href="https://github.com/storybooks/react-storybook-addon-info">
This is a link
</a>
</p>
<p>
<img src="http://placehold.it/350x150" />
</p>
</div>,
() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
<p>
Click the "?" mark at top-right to view the info.
</p>
</div>
)
);

storiesOf('Button')
.addWithInfo(
'simple usage (inline JSX description)',
(<div>
<h2>This is a JSX info section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
nulla.</p>
<p>
<a
href='https://github.com/storybooks/react-storybook-addon-info'>
This is a link</a>
</p>
<p>
<img src="http://placehold.it/350x150" />
</p>
</div>),
() => (<Button label="The Button" onClick={action('onClick')}/>),
{ inline: true }
);
storiesOf('Button').addWithInfo(
'simple usage (inline JSX description)',
<div>
<h2>This is a JSX info section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
nulla.
</p>
<p>
<a href="https://github.com/storybooks/react-storybook-addon-info">
This is a link
</a>
</p>
<p>
<img src="http://placehold.it/350x150" />
</p>
</div>,
() => <Button label="The Button" onClick={action('onClick')} />,
{ inline: true }
);

storiesOf('Button')
.addDecorator(backgrounds([
{ name: 'dark', value: '#333', default: true },
]))
.addDecorator(backgrounds([{ name: 'dark', value: '#333', default: true }]))
.addWithInfo(
'with custom styles',
`
This is an example of how to customize the styles of the info components.
For the full styles available, see \`./src/components/Story.js\`
`,
() => (<Button label="The Button" onClick={action('onClick')}/>),
() => <Button label="The Button" onClick={action('onClick')} />,
{
inline: true,
styles: (stylesheet) => {
styles: stylesheet => {
stylesheet.infoPage = {
backgroundColor: '#ccc'
};
Expand Down
43 changes: 21 additions & 22 deletions packages/addon-info/src/components/Node.js
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@
import React from 'react';
import Props from './Props'

import Props from './Props';

const stylesheet = {
containerStyle: {},
tagStyle: {
color: '#777',
color: '#777'
}
}
};

export default class Node extends React.Component {
constructor(props){
super(props);
}

render(){
const {node, depth} = this.props;
let {tagStyle, containerStyle} = stylesheet;
render() {
const { node, depth } = this.props;
const { tagStyle, containerStyle } = stylesheet;

var leftPad = {
const leftPad = {
paddingLeft: 3 + (depth + 1) * 15,
paddingRight: 3,
paddingRight: 3
};

Object.assign(containerStyle, leftPad);

const {name, text, children} = getData(node);
const { name, text, children } = getData(node);

// Just text
if (!name) {
return <div style={containerStyle}>
<span style={tagStyle}>{text}</span>
</div>;
return (
<div style={containerStyle}>
<span style={tagStyle}>{text}</span>
</div>
);
}

// Single-line tag
if (!children) {
return <div style={containerStyle}>
<span style={tagStyle}>&lt;{name}</span>
return (
<div style={containerStyle}>
<span style={tagStyle}>&lt;{name}</span>
<Props node={node} singleLine />
<span style={tagStyle}>/&gt;</span>
</div>;
<span style={tagStyle}>/&gt;</span>
</div>
);
}

// Keep a copy so that further mutations to containerStyle don't impact us:
Expand All @@ -51,7 +50,7 @@ export default class Node extends React.Component {
<div>
<div style={containerStyleCopy}>
<span style={tagStyle}>&lt;{name}</span>
<Props node={node} />
<Props node={node} />
<span style={tagStyle}>&gt;</span>
</div>
{React.Children.map(children, childElement => (
Expand Down
10 changes: 4 additions & 6 deletions packages/addon-info/src/components/PropTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const stylesheet = {
propTable: {
marginLeft: -10,
borderSpacing: '10px 5px',
borderCollapse: 'separate',
},
borderCollapse: 'separate'
}
};

export default class PropTable extends React.Component {
Expand Down Expand Up @@ -61,9 +61,7 @@ export default class PropTable extends React.Component {
if (!array.length) {
return <small>No propTypes defined!</small>;
}
array.sort(function (a, b) {
return a.property > b.property;
});
array.sort((a, b) => a.property > b.property);

return (
<table style={stylesheet.propTable}>
Expand Down Expand Up @@ -92,5 +90,5 @@ export default class PropTable extends React.Component {

PropTable.displayName = 'PropTable';
PropTable.propTypes = {
type: React.PropTypes.func,
type: React.PropTypes.func
};
Loading

0 comments on commit fc7e09b

Please sign in to comment.