Skip to content

Commit cfc0a30

Browse files
author
Mike Mangialardi
committed
Make helix react prettier
1 parent 8b94329 commit cfc0a30

12 files changed

+245
-192
lines changed

‎package.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"start": "yarn storybook",
1010
"docs": "build-storybook -c .storybook -o public",
1111
"storybook": "start-storybook -p 6006",
12-
"build-storybook": "build-storybook"
12+
"build-storybook": "build-storybook",
13+
"prettify": "prettier --config prettier.config.js --write 'src/**/*.{js,jsx,json,css,scss}'"
1314
},
1415
"repository": {
1516
"type": "git",
@@ -45,11 +46,18 @@
4546
"@storybook/react": "^5.3.17",
4647
"babel-loader": "^8.1.0",
4748
"helix-ui": "^0.19.0",
49+
"husky": "^4.2.5",
50+
"prettier": "^2.0.4",
4851
"prop-types": "^15.7.2",
4952
"react": "^16.6.3",
5053
"react-dom": "^16.6.3"
5154
},
5255
"dependencies": {
5356
"classnames": "^2.2.6"
57+
},
58+
"husky": {
59+
"hooks": {
60+
"pre-commit": "npm run prettify"
61+
}
5462
}
5563
}

‎prettier.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
arrowParens: 'always',
3+
bracketSpacing: true,
4+
printWidth: 100,
5+
tabWidth: 2,
6+
trailingComma: 'es5',
7+
semi: true,
8+
singleQuote: true,
9+
};

‎src/Button/index.js

+37-50
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,52 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import Icon from '../Icon';
44

5-
function cssFor (modifier) {
6-
return {
7-
'large': 'hxLg',
8-
'primary': 'hxPrimary',
9-
'small': 'hxSm',
10-
'tertiary': 'hxTertiary',
11-
}[modifier];
5+
function cssFor(modifier) {
6+
return {
7+
large: 'hxLg',
8+
primary: 'hxPrimary',
9+
small: 'hxSm',
10+
tertiary: 'hxTertiary',
11+
}[modifier];
1212
}
1313

14-
function classNames (props) {
15-
return [
16-
'hxBtn',
17-
cssFor(props.variant),
18-
cssFor(props.size),
19-
props.className,
20-
].join(' ').trim();
14+
function classNames(props) {
15+
return ['hxBtn', cssFor(props.variant), cssFor(props.size), props.className].join(' ').trim();
2116
}
2217

2318
class Button extends React.Component {
24-
render () {
25-
// destructure props for JSX composition
26-
const {
27-
busy,
28-
children, // explicity placed
29-
className, // removed to prevent duplicate prop
30-
headIcon,
31-
size,
32-
tailIcon,
33-
type,
34-
variant,
35-
...props
36-
} = this.props;
19+
render() {
20+
// destructure props for JSX composition
21+
const {
22+
busy,
23+
children, // explicity placed
24+
className, // removed to prevent duplicate prop
25+
headIcon,
26+
size,
27+
tailIcon,
28+
type,
29+
variant,
30+
...props
31+
} = this.props;
3732

38-
return (
39-
<button
40-
className={classNames(this.props)}
41-
type={type || 'button'}
42-
{...props}
43-
>
44-
{headIcon && (<Icon type={headIcon} />)}
45-
{children && (<span>{children}</span>)}
46-
{busy ? (
47-
<hx-busy></hx-busy>
48-
) : (
49-
tailIcon && (<Icon type={tailIcon}/>)
50-
)}
51-
</button>
52-
);
53-
}
33+
return (
34+
<button className={classNames(this.props)} type={type || 'button'} {...props}>
35+
{headIcon && <Icon type={headIcon} />}
36+
{children && <span>{children}</span>}
37+
{busy ? <hx-busy></hx-busy> : tailIcon && <Icon type={tailIcon} />}
38+
</button>
39+
);
40+
}
5441
}
5542

5643
Button.propTypes = {
57-
busy: PropTypes.bool,
58-
disabled: PropTypes.bool,
59-
headIcon: PropTypes.string,
60-
size: PropTypes.string,
61-
tailIcon: PropTypes.string,
62-
type: PropTypes.string,
63-
variant: PropTypes.string,
44+
busy: PropTypes.bool,
45+
disabled: PropTypes.bool,
46+
headIcon: PropTypes.string,
47+
size: PropTypes.string,
48+
tailIcon: PropTypes.string,
49+
type: PropTypes.string,
50+
variant: PropTypes.string,
6451
};
6552

6653
export default Button;

‎src/Button/stories.js

+49-55
Original file line numberDiff line numberDiff line change
@@ -6,61 +6,52 @@ import { storiesOf } from '@storybook/react';
66
import { boolean, select, text } from '@storybook/addon-knobs/react';
77

88
const SIZES = {
9-
'small': 'Small',
10-
'': 'Medium',
11-
'large': 'Large',
9+
small: 'Small',
10+
'': 'Medium',
11+
large: 'Large',
1212
};
1313
const VARIANTS = {
14-
'primary': 'Primary',
15-
'': 'Secondary',
16-
'tertiary': 'Tertiary',
14+
primary: 'Primary',
15+
'': 'Secondary',
16+
tertiary: 'Tertiary',
1717
};
1818

1919
storiesOf('Button', module)
20-
.addDecorator(centered)
21-
.add('Sizes', () => {
20+
.addDecorator(centered)
21+
.add('Sizes', () => {
2222
const size = select('size', SIZES, '');
23-
return (
24-
<Button
25-
{ ...( size && { size }) }
26-
>{SIZES[size]} Button</Button>
27-
);
28-
})
29-
.add('Variants', () => {
23+
return <Button {...(size && { size })}>{SIZES[size]} Button</Button>;
24+
})
25+
.add('Variants', () => {
3026
const variant = select('variant', VARIANTS, '');
31-
return (
32-
<Button
33-
{ ...(variant && { variant }) }
34-
>{VARIANTS[variant]} Button</Button>
35-
);
36-
})
37-
.add('Icon Only', () => {
27+
return <Button {...(variant && { variant })}>{VARIANTS[variant]} Button</Button>;
28+
})
29+
.add('Icon Only', () => {
3830
const headIcon = select('headIcon', Icons, 'download').trim();
39-
return (<Button { ...( headIcon && { headIcon }) }/>);
40-
})
41-
.add('Icons and Text', () => {
31+
return <Button {...(headIcon && { headIcon })} />;
32+
})
33+
.add('Icons and Text', () => {
4234
const innerText = text('(innerText)', 'Action');
4335
const headIcon = select('headIcon', ['', ...Icons], 'cog').trim();
4436
const tailIcon = select('tailIcon', ['', ...Icons], 'angle-down').trim();
4537

4638
return (
47-
<Button
48-
{ ...( headIcon && { headIcon }) }
49-
{ ...( tailIcon && { tailIcon }) }
50-
>{innerText}</Button>
39+
<Button {...(headIcon && { headIcon })} {...(tailIcon && { tailIcon })}>
40+
{innerText}
41+
</Button>
5142
);
52-
})
53-
.add('Busy', () => {
43+
})
44+
.add('Busy', () => {
5445
const innerText = text('(innerText)', 'Loading');
5546
const busy = boolean('busy', true);
56-
return (<Button { ...( busy && { busy }) }>{innerText}</Button>);
57-
})
58-
.add('Disabled', () => {
47+
return <Button {...(busy && { busy })}>{innerText}</Button>;
48+
})
49+
.add('Disabled', () => {
5950
const innerText = text('(innerText)', 'Loading');
6051
const disabled = boolean('disabled', true);
61-
return (<Button { ...( disabled && { disabled }) }>{innerText}</Button>)
62-
})
63-
.add('All Knobs', () => {
52+
return <Button {...(disabled && { disabled })}>{innerText}</Button>;
53+
})
54+
.add('All Knobs', () => {
6455
/* ========== KNOBS ========== */
6556
let innerText = text('(innerText)', '');
6657
let busy = boolean('busy', false);
@@ -72,26 +63,29 @@ storiesOf('Button', module)
7263
let variant = select('variant', VARIANTS, '');
7364

7465
if (innerText.trim() === '') {
75-
innerText = [
76-
(busy ? 'Busy' : ''),
77-
(disabled ? 'Disabled' : ''),
78-
SIZES[size],
79-
VARIANTS[variant],
80-
'Button'
81-
].join(' ').trim();
66+
innerText = [
67+
busy ? 'Busy' : '',
68+
disabled ? 'Disabled' : '',
69+
SIZES[size],
70+
VARIANTS[variant],
71+
'Button',
72+
]
73+
.join(' ')
74+
.trim();
8275
}
8376

8477
/* ========== OUTPUT ========== */
8578
return (
86-
<Button
87-
{ ...( cssClasses && { className: cssClasses }) }
88-
{ ...( busy && { busy }) }
89-
{ ...( disabled && { disabled }) }
90-
{ ...( headIcon && headIcon !== '' && { headIcon }) }
91-
{ ...( size && { size }) }
92-
{ ...( tailIcon && tailIcon !== '' && { tailIcon }) }
93-
{ ...( variant && { variant }) }
94-
>{innerText}</Button>
79+
<Button
80+
{...(cssClasses && { className: cssClasses })}
81+
{...(busy && { busy })}
82+
{...(disabled && { disabled })}
83+
{...(headIcon && headIcon !== '' && { headIcon })}
84+
{...(size && { size })}
85+
{...(tailIcon && tailIcon !== '' && { tailIcon })}
86+
{...(variant && { variant })}
87+
>
88+
{innerText}
89+
</Button>
9590
);
96-
})
97-
;
91+
});

‎src/Icon/index.js

+5-13
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,16 @@ import PropTypes from 'prop-types';
55
export const Icons = Object.keys(HelixUI.Utils.ICONS);
66

77
class Icon extends React.Component {
8-
render () {
9-
const {
10-
type,
11-
...props
12-
} = this.props;
8+
render() {
9+
const { type, ...props } = this.props;
1310

14-
return (
15-
<hx-icon
16-
type={type}
17-
{...props}
18-
></hx-icon>
19-
);
20-
}
11+
return <hx-icon type={type} {...props}></hx-icon>;
12+
}
2113
}
2214

2315
// additional configs here
2416
Icon.propTypes = {
25-
type: PropTypes.string,
17+
type: PropTypes.string,
2618
};
2719

2820
export default Icon;

‎src/Icon/stories.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { select } from '@storybook/addon-knobs/react';
55
import { storiesOf } from '@storybook/react';
66

77
storiesOf('Icon', module)
8-
.addDecorator(centered)
9-
.add('All Knobs', () => {
8+
.addDecorator(centered)
9+
.add('All Knobs', () => {
1010
const type = select('type', Icons, 'bell');
11-
return (<Icon type={type}/>);
12-
});
11+
return <Icon type={type} />;
12+
});

‎src/Select/index.js

+3-18
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,10 @@ import classnames from 'classnames';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44

5-
const Select = ({
6-
children,
7-
disabled,
8-
id,
9-
label,
10-
onChange,
11-
optional,
12-
required,
13-
...rest
14-
}) => {
5+
const Select = ({ children, disabled, id, label, onChange, optional, required, ...rest }) => {
156
return (
167
<hx-select-control>
17-
<select
18-
id={id}
19-
disabled={disabled}
20-
onChange={onChange}
21-
required={required}
22-
{...rest}
23-
>
8+
<select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
249
{children}
2510
</select>
2611
<hx-select></hx-select>
@@ -55,4 +40,4 @@ Select.defaultProps = {
5540
required: false,
5641
};
5742

58-
export default Select;
43+
export default Select;

0 commit comments

Comments
 (0)