From 8ea2b4a46b8c985e2f7a4ee019d807e6325c80b7 Mon Sep 17 00:00:00 2001 From: Luiz Baldi Date: Mon, 28 Oct 2019 22:18:37 -0300 Subject: [PATCH 1/2] Improve eslint configuration with prettier --- .eslintrc.js | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index e35c69bc..6a03f056 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ module.exports = { - extends: ['airbnb', 'prettier'], + extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'], parser: 'babel-eslint', - plugins: ['prettier'], + plugins: ['react', 'prettier'], env: { browser: true, es6: true, diff --git a/package.json b/package.json index 82c28efb..a996950f 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage", - "lint": "eslint src", + "lint": "eslint src --ext .js", "lint:fix": "npm run lint -- --fix" }, "peerDependencies": { From 5cb3abefd6cafaaae00662a198784d854ce1f693 Mon Sep 17 00:00:00 2001 From: Luiz Baldi Date: Mon, 28 Oct 2019 22:20:58 -0300 Subject: [PATCH 2/2] Lint all files with eslint errors --- src/components/Anchor/Anchor.js | 20 ++--- src/components/Anchor/Anchor.spec.js | 21 +++--- src/components/Anchor/Anchor.stories.js | 9 +-- src/components/AppBar/AppBar.js | 9 +-- src/components/AppBar/AppBar.spec.js | 9 +-- src/components/AppBar/AppBar.stories.js | 20 +++-- src/components/Avatar/Avatar.js | 18 ++--- src/components/Avatar/Avatar.spec.js | 19 +++-- src/components/Avatar/Avatar.stories.js | 10 ++- src/components/Bar/Bar.js | 20 ++--- src/components/Bar/Bar.spec.js | 8 +- src/components/Bar/Bar.stories.js | 6 +- src/components/Button/Button.js | 42 +++++------ src/components/Button/Button.spec.js | 28 ++++--- src/components/Button/Button.stories.js | 52 +++++++------ src/components/Checkbox/Checkbox.js | 33 +++++---- src/components/Checkbox/Checkbox.stories.js | 61 ++++++++------- src/components/Cutout/Cutout.js | 13 +--- src/components/Cutout/Cutout.spec.js | 8 +- src/components/Cutout/Cutout.stories.js | 2 +- src/components/DatePicker/DatePicker.js | 22 +++--- .../DatePicker/DatePicker.stories.js | 2 +- src/components/Divider/Divider.js | 20 ++--- src/components/Divider/Divider.stories.js | 6 +- src/components/Fieldset/Fieldset.js | 22 +++--- src/components/Fieldset/Fieldset.stories.js | 42 ++++++----- src/components/Hourglass/Hourglass.js | 13 +--- src/components/Hourglass/Hourglass.stories.js | 2 +- src/components/Hourglass/base64hourglass.js | 3 +- src/components/Icon/LogoIcon.js | 9 +-- src/components/List/List.js | 14 ++-- src/components/List/List.stories.js | 6 +- src/components/ListItem/ListItem.js | 14 ++-- src/components/ListItem/ListItem.stories.js | 34 +++++---- src/components/NumberField/NumberField.js | 60 +++++++-------- .../NumberField/NumberField.stories.js | 2 +- src/components/Progress/Progress.js | 23 ++---- src/components/Radio/Radio.js | 31 ++++---- src/components/Radio/Radio.stories.js | 74 +++++++++---------- src/components/Select/Select.js | 48 ++++++------ src/components/Select/Select.stories.js | 12 ++- src/components/Tab/Tab.js | 14 ++-- src/components/TabBody/TabBody.js | 11 +-- src/components/Table/Table.js | 11 +-- src/components/Table/Table.stories.js | 14 +++- src/components/TableBody/TableBody.js | 11 +-- src/components/TableDataCell/TableDataCell.js | 11 +-- src/components/TableHead/TableHead.js | 11 +-- src/components/TableHeadCell/TableHeadCell.js | 7 +- src/components/TableRow/TableRow.js | 18 ++--- src/components/Tabs/Tabs.js | 11 +-- src/components/Tabs/Tabs.stories.js | 18 +++-- src/components/TextArea/TextArea.js | 22 +++--- src/components/TextArea/TextArea.stories.js | 24 +++--- src/components/TextField/TextField.js | 17 ++--- src/components/TextField/TextField.stories.js | 29 +++----- src/components/Toolbar/Toolbar.js | 13 +--- src/components/Tooltip/Tooltip.js | 9 +-- src/components/Tooltip/Tooltip.stories.js | 4 +- src/components/Window/Window.js | 8 +- src/components/Window/Window.stories.js | 12 +-- src/components/WindowContent/WindowContent.js | 13 +--- src/components/WindowHeader/WindowHeader.js | 13 +--- src/components/common/index.js | 47 ++++++------ src/components/common/system.js | 6 +- src/components/common/themes.js | 10 +-- 66 files changed, 576 insertions(+), 655 deletions(-) diff --git a/src/components/Anchor/Anchor.js b/src/components/Anchor/Anchor.js index 2a6d40e1..1533fba0 100644 --- a/src/components/Anchor/Anchor.js +++ b/src/components/Anchor/Anchor.js @@ -13,32 +13,22 @@ const StyledAnchor = styled.a` } `; -const Anchor = ({ - className, style, href, children, ...otherProps -}) => ( - +const Anchor = ({ className, style, href, children, ...otherProps }) => ( + {children} ); Anchor.defaultProps = { className: '', - style: {}, + style: {} }; Anchor.propTypes = { className: propTypes.string, href: propTypes.string.isRequired, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), - children: propTypes.node.isRequired, + style: propTypes.shape([propTypes.string, propTypes.number]), + children: propTypes.node.isRequired }; export default Anchor; diff --git a/src/components/Anchor/Anchor.spec.js b/src/components/Anchor/Anchor.spec.js index ef44e722..f6242811 100644 --- a/src/components/Anchor/Anchor.spec.js +++ b/src/components/Anchor/Anchor.spec.js @@ -5,33 +5,32 @@ import Anchor from './Anchor'; const defaultProps = { children: '', - href: '', + href: '' }; describe('', () => { it('should render href', () => { - const { container } = render(( - - )); + const { container } = render( + + ); const anchorEl = container.firstChild; expect(anchorEl).toHaveAttribute('href', 'http://yoda.com'); }); it('should render children', () => { - const { container } = render(You shall pass); + const { container } = render( + You shall pass + ); const anchorEl = container.firstChild; expect(anchorEl).toHaveTextContent('You shall pass'); }); it('should render custom style', () => { - const { container } = render(( - - )); + const { container } = render( + + ); const anchorEl = container.firstChild; expect(anchorEl).toHaveAttribute('style', 'color: papayawhip;'); diff --git a/src/components/Anchor/Anchor.stories.js b/src/components/Anchor/Anchor.stories.js index 7980f959..331337ae 100644 --- a/src/components/Anchor/Anchor.stories.js +++ b/src/components/Anchor/Anchor.stories.js @@ -8,22 +8,21 @@ storiesOf('Anchor', module)
{story()}
)) .add('default', () => ( - + Expensive Toys - {' '} )) .add('within text', () => (

- {'Everybody needs '} - + Everybody needs + Expensive Toys

diff --git a/src/components/AppBar/AppBar.js b/src/components/AppBar/AppBar.js index 33d0f0f4..3443f2be 100644 --- a/src/components/AppBar/AppBar.js +++ b/src/components/AppBar/AppBar.js @@ -39,18 +39,15 @@ AppBar.defaultProps = { shadow: true, fixed: true, style: {}, - className: '', + className: '' }; AppBar.propTypes = { - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]), shadow: propTypes.bool, className: propTypes.string, children: propTypes.node.isRequired, - fixed: propTypes.bool, + fixed: propTypes.bool }; export default AppBar; diff --git a/src/components/AppBar/AppBar.spec.js b/src/components/AppBar/AppBar.spec.js index 6303cbf9..fcc5b459 100644 --- a/src/components/AppBar/AppBar.spec.js +++ b/src/components/AppBar/AppBar.spec.js @@ -32,12 +32,9 @@ describe('', () => { }); it('should custom style', () => { - const { container } = render(( - - )); + const { container } = render( + + ); const headerEl = container.firstChild; expect(headerEl).toHaveAttribute('style', 'background-color: papayawhip;'); diff --git a/src/components/AppBar/AppBar.stories.js b/src/components/AppBar/AppBar.stories.js index 901bbdf3..1e6b1eee 100644 --- a/src/components/AppBar/AppBar.stories.js +++ b/src/components/AppBar/AppBar.stories.js @@ -17,7 +17,7 @@ storiesOf('AppBar', module)
{story()} @@ -28,7 +28,7 @@ storiesOf('AppBar', module) @@ -51,22 +51,28 @@ function Menu() {
{open && ( - 👨‍💻 + + 👨‍💻 + Profile - 📁 + + 📁 + My account - 🔙 + + 🔙 + Logout diff --git a/src/components/Avatar/Avatar.js b/src/components/Avatar/Avatar.js index ed4f17ed..2f619608 100644 --- a/src/components/Avatar/Avatar.js +++ b/src/components/Avatar/Avatar.js @@ -11,16 +11,18 @@ const StyledAvatar = styled.div` width: calc(${() => blockSizes.md} - 2px); border-radius: ${({ square }) => (square ? 0 : '50%')}; overflow: hidden; - ${({ noBorder, theme }) => !noBorder - && ` + ${({ noBorder, theme }) => + !noBorder && + ` border-top: 2px solid ${theme.borderDark}; border-left: 2px solid ${theme.borderDark}; border-bottom: 2px solid ${theme.borderLightest}; border-right: 2px solid ${theme.borderLightest}; background: ${theme.material}; `} - ${({ src }) => !src - && ` + ${({ src }) => + !src && + ` display: flex; align-items: center; justify-content: space-around; @@ -36,9 +38,7 @@ const SlyledAvatarIMG = styled.img` height: 100%; `; -const Avatar = ({ - children, noBorder, square, src, alt, ...otherProps -}) => ( +const Avatar = ({ children, noBorder, square, src, alt, ...otherProps }) => ( {src ? : children} @@ -49,7 +49,7 @@ Avatar.defaultProps = { noBorder: false, src: undefined, children: null, - alt: '', + alt: '' }; Avatar.propTypes = { @@ -57,7 +57,7 @@ Avatar.propTypes = { noBorder: propTypes.bool, children: propTypes.node, src: propTypes.string, - alt: propTypes.string, + alt: propTypes.string }; export default Avatar; diff --git a/src/components/Avatar/Avatar.spec.js b/src/components/Avatar/Avatar.spec.js index f969755e..d91c5168 100644 --- a/src/components/Avatar/Avatar.spec.js +++ b/src/components/Avatar/Avatar.spec.js @@ -20,10 +20,15 @@ describe('', () => { }); it('should handle border properly', () => { - const { container, rerender } = renderWithTheme(); + const { container, rerender } = renderWithTheme( + + ); const avatarEl = container.firstChild; - expect(avatarEl).toHaveStyleRule('border-top', `2px solid ${theme.borderDark}`); + expect(avatarEl).toHaveStyleRule( + 'border-top', + `2px solid ${theme.borderDark}` + ); rerender(); @@ -43,9 +48,7 @@ describe('', () => { it('should render with source', async () => { const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif'; - const { findByAltText } = render(( - - )); + const { findByAltText } = render(); const imageEl = await findByAltText('cat avatar'); expect(imageEl.src).toBe(catGif); @@ -53,11 +56,11 @@ describe('', () => { it('should render source with priority over children', async () => { const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif'; - const { queryByText } = render(( - + const { queryByText } = render( + Cats are cool - )); + ); const content = await queryByText(/cats are cool/i); expect(content).toBeNull(); diff --git a/src/components/Avatar/Avatar.stories.js b/src/components/Avatar/Avatar.stories.js index 3e446ad6..226a4269 100644 --- a/src/components/Avatar/Avatar.stories.js +++ b/src/components/Avatar/Avatar.stories.js @@ -11,7 +11,7 @@ storiesOf('Avatar', module)
{story()} @@ -25,7 +25,7 @@ storiesOf('Avatar', module) - + )) @@ -38,7 +38,7 @@ storiesOf('Avatar', module) Menu @@ -65,7 +65,9 @@ storiesOf('Avatar', module) Menu - 🚀 + + 🚀 + diff --git a/src/components/Bar/Bar.js b/src/components/Bar/Bar.js index 53383c72..e5beba65 100644 --- a/src/components/Bar/Bar.js +++ b/src/components/Bar/Bar.js @@ -15,28 +15,18 @@ const StyledBar = styled.div` background: ${({ theme }) => theme.material}; `; -const Bar = ({ - size, className, style, ...otherProps -}) => ( - +const Bar = ({ size, className, style, ...otherProps }) => ( + ); Bar.defaultProps = { size: 'md', className: '', - style: {}, + style: {} }; Bar.propTypes = { className: propTypes.string, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), - size: propTypes.oneOf(['sm', 'md', 'lg']), + style: propTypes.shape([propTypes.string, propTypes.number]), + size: propTypes.oneOf(['sm', 'md', 'lg']) }; export default Bar; diff --git a/src/components/Bar/Bar.spec.js b/src/components/Bar/Bar.spec.js index dd252314..873fb912 100644 --- a/src/components/Bar/Bar.spec.js +++ b/src/components/Bar/Bar.spec.js @@ -13,18 +13,20 @@ describe('', () => { }); it('should handle bar with correct size', () => { - const { container, rerender } = render(); + const { container, rerender } = render(); const barEl = container.firstChild; expect(barEl).toHaveStyleRule('height', blockSizes.sm); - rerender(); + rerender(); expect(barEl).toHaveStyleRule('height', blockSizes.lg); }); it('should handle custom style', () => { - const { container } = render(); + const { container } = render( + + ); const barEl = container.firstChild; expect(barEl).toHaveAttribute('style', 'background-color: papayawhip;'); diff --git a/src/components/Bar/Bar.stories.js b/src/components/Bar/Bar.stories.js index aca77be5..b54e1b09 100644 --- a/src/components/Bar/Bar.stories.js +++ b/src/components/Bar/Bar.stories.js @@ -11,7 +11,7 @@ storiesOf('Bar', module)
{story()} @@ -21,8 +21,8 @@ storiesOf('Bar', module) - - + diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 09fe2c44..a93f5c2d 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -9,7 +9,7 @@ import { createWellBorderStyles, createBoxStyles, createFlatBoxStyles, - createDisabledTextStyles, + createDisabledTextStyles } from '../common'; import { blockSizes, fontSizes, padding } from '../common/system'; @@ -19,7 +19,8 @@ const commonButtonStyles = css` align-items: center; justify-content: center; height: ${({ size }) => blockSizes[size]}; - width: ${({ fullWidth, square, size }) => (fullWidth ? '100%' : square ? blockSizes[size] : 'auto')}; + width: ${({ fullWidth, square, size }) => + fullWidth ? '100%' : square ? blockSizes[size] : 'auto'}; padding: ${({ square }) => (square ? 0 : `0 ${padding.sm}`)}; font-size: ${fontSizes.md}; &:active { @@ -29,16 +30,18 @@ const commonButtonStyles = css` `; const StyledButton = styled.button` - ${({ variant }) => (variant === 'flat' - ? css` - ${createFlatBoxStyles()} /* background: none; */ - ` - : variant === 'menu' + ${({ variant }) => + variant === 'flat' + ? css` + ${createFlatBoxStyles()} /* background: none; */ + ` + : variant === 'menu' ? css` ${createBoxStyles()}; border: 2px solid transparent; &:hover { - ${({ isDisabled, active }) => !isDisabled && !active && createWellBorderStyles(false)} + ${({ isDisabled, active }) => + !isDisabled && !active && createWellBorderStyles(false)} } &:active { ${({ isDisabled }) => !isDisabled && createWellBorderStyles(true)} @@ -48,17 +51,17 @@ const StyledButton = styled.button` ` : css` ${createBoxStyles()}; - ${({ active }) => (active ? createBorderStyles(true) : createBorderStyles(false))} - ${({ active, theme }) => active - && `background-image: ${ - theme.hatchedBackground - };`} + ${({ active }) => + active ? createBorderStyles(true) : createBorderStyles(false)} + ${({ active, theme }) => + active && + `background-image: ${theme.hatchedBackground};`} &:active { ${({ isDisabled }) => !isDisabled && createBorderStyles(true)} } ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} - `)} + `} ${commonButtonStyles} `; @@ -87,7 +90,7 @@ const Button = ({ square={square} active={active} className={className} - // onTouchStart below to enable button :active style on iOS + // onTouchStart below to enable button :active style on iOS onTouchStart={() => ''} {...otherProps} > @@ -105,16 +108,13 @@ Button.defaultProps = { square: false, active: false, variant: 'default', - className: '', + className: '' }; Button.propTypes = { type: propTypes.string, onClick: propTypes.func, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]), disabled: propTypes.bool, fullWidth: propTypes.bool, size: propTypes.oneOf(['sm', 'md', 'lg']), @@ -122,7 +122,7 @@ Button.propTypes = { active: propTypes.bool, variant: propTypes.oneOf(['default', 'menu', 'flat']), className: propTypes.string, - children: propTypes.node.isRequired, + children: propTypes.node.isRequired }; export default Button; diff --git a/src/components/Button/Button.spec.js b/src/components/Button/Button.spec.js index 39299a1a..660196e4 100644 --- a/src/components/Button/Button.spec.js +++ b/src/components/Button/Button.spec.js @@ -7,7 +7,7 @@ import { blockSizes } from '../common/system'; import Button from './Button'; const defaultProps = { - children: 'click me', + children: 'click me' }; describe(' )) .add('sizes', () => ( @@ -60,16 +62,16 @@ storiesOf('Button', module) alignItems: 'center', display: 'flex', width: 200, - justifyContent: 'space-between', + justifyContent: 'space-between' }} > - - -
@@ -85,14 +87,14 @@ storiesOf('Button', module)

- - @@ -116,43 +118,45 @@ function MenuButtonExample() { return ( - 🥝 + + 🥝 + Kiwi.app - -
{open && ( - Copy link + Copy link - Facebook - Twitter - Instagram + Facebook + Twitter + Instagram - + MySpace )} -
@@ -161,8 +165,8 @@ function MenuButtonExample() { kiwi diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js index 70c40902..15969fb0 100644 --- a/src/components/Checkbox/Checkbox.js +++ b/src/components/Checkbox/Checkbox.js @@ -29,10 +29,11 @@ const StyledInput = styled.input` z-index: -99; `; -const createCheckmarkSymbol = ({ checked }) => checked - && css` +const createCheckmarkSymbol = ({ checked }) => + checked && + css` &:after { - content: ""; + content: ''; display: block; position: absolute; left: 50%; @@ -56,8 +57,10 @@ const sharedCheckmarkStyles = css` `; const StyledCheckmark = styled(Cutout)` ${sharedCheckmarkStyles} - background: ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)}; - box-shadow: ${({ shadow }) => (shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none')}; + background: ${({ theme, isDisabled }) => + isDisabled ? theme.material : theme.canvas}; + box-shadow: ${({ shadow }) => + shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none'}; &:before { box-shadow: none; } @@ -65,7 +68,8 @@ const StyledCheckmark = styled(Cutout)` const StyledFlatCheckmark = styled.div` ${createFlatBoxStyles()} ${sharedCheckmarkStyles} - background: ${({ theme, isDisabled }) => (isDisabled ? theme.flatLight : theme.canvas)}; + background: ${({ theme, isDisabled }) => + isDisabled ? theme.flatLight : theme.canvas}; `; const Checkbox = ({ @@ -89,7 +93,7 @@ const Checkbox = ({ if (defaultChecked || checked === undefined) { const [state, setState] = useState(defaultChecked || false); - const handleChange = (e) => { + const handleChange = e => { const newState = e.target.checked; setState(newState); if (onChange) onChange(e); @@ -100,7 +104,7 @@ const Checkbox = ({ theme.canvas}; @@ -21,8 +16,8 @@ storiesOf('Checkbox', module) .add('controlled group', () => ) .add('uncontrolled', () => ( @@ -35,18 +30,18 @@ storiesOf('Checkbox', module)

@@ -57,13 +52,15 @@ class ControlledCheckboxGroupExample extends React.Component { state = { steak: true, tortilla: false, - pizza: false, + pizza: false }; - handleChange = (e) => { - const { target: { value } } = e; + handleChange = e => { + const { + target: { value } + } = e; this.setState(prevState => ({ - [value]: !prevState[value], + [value]: !prevState[value] })); }; @@ -71,38 +68,38 @@ class ControlledCheckboxGroupExample extends React.Component { this.setState({ steak: false, tortilla: false, - pizza: false, + pizza: false }); - } + }; render() { const { steak, tortilla, pizza } = this.state; return (
-
+


diff --git a/src/components/Cutout/Cutout.js b/src/components/Cutout/Cutout.js index 2dd251fb..2d093dfb 100644 --- a/src/components/Cutout/Cutout.js +++ b/src/components/Cutout/Cutout.js @@ -20,7 +20,7 @@ const StyledCutout = styled.div` left: 0; top: 0; z-index: 1; - content: ""; + content: ''; width: calc(100% - 4px); height: calc(100% - 4px); @@ -37,9 +37,7 @@ const StyledCutout = styled.div` `; // add padding prop ? -const Cutout = ({ - className, style, children, shadow, ...otherProps -}) => ( +const Cutout = ({ className, style, children, shadow, ...otherProps }) => ( ', () => { }); it('should render custom styles', () => { - const { container } = render(); + const { container } = render( + + ); const cutout = container.firstChild; expect(cutout).toHaveAttribute('style', 'background-color: papayawhip;'); }); it('should render children', async () => { - const { findByText } = render(( + const { findByText } = render( Cool cutout - )); + ); const content = await findByText(/cool cutout/i); expect(content).toBeInTheDocument(); diff --git a/src/components/Cutout/Cutout.stories.js b/src/components/Cutout/Cutout.stories.js index e9b4fda5..e932cb39 100644 --- a/src/components/Cutout/Cutout.stories.js +++ b/src/components/Cutout/Cutout.stories.js @@ -12,7 +12,7 @@ storiesOf('Cutout', module).add('default', () => ( fontFamily: 'times new roman', textAlign: 'center', fontSize: '3rem', - marginTop: '0.5rem', + marginTop: '0.5rem' }} > React95 diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js index f805f8b1..e6e3a693 100644 --- a/src/components/DatePicker/DatePicker.js +++ b/src/components/DatePicker/DatePicker.js @@ -39,7 +39,8 @@ const DateItem = styled.div` const DateItemContent = styled.span` cursor: pointer; - background: ${({ active, theme }) => (active ? theme.hoverBackground : 'transparent')}; + background: ${({ active, theme }) => + active ? theme.hoverBackground : 'transparent'}; color: ${({ active, theme }) => (active ? theme.textInvert : 'initial')}; &:hover { @@ -62,7 +63,7 @@ class DatePicker extends Component { shadow: propTypes.bool, onAccept: propTypes.func, onCancel: propTypes.func, - date: propTypes.instanceOf(Date), + date: propTypes.instanceOf(Date) }; static defaultProps = { @@ -70,7 +71,7 @@ class DatePicker extends Component { className: '', onAccept: null, onCancel: null, - date: null, + date: null }; constructor(props) { @@ -80,7 +81,7 @@ class DatePicker extends Component { this.state = initialDate; } - convertDateToState = (date) => { + convertDateToState = date => { const day = date.getDate(); const month = date.getMonth(); const year = date.getFullYear(); @@ -105,12 +106,7 @@ class DatePicker extends Component { render() { let { day } = this.state; const { month, year } = this.state; - const { - shadow, - className, - onAccept, - onCancel, - } = this.props; + const { shadow, className, onAccept, onCancel } = this.props; const months = [ { value: 0, label: 'January' }, @@ -124,7 +120,7 @@ class DatePicker extends Component { { value: 8, label: 'September' }, { value: 9, label: 'October' }, { value: 10, label: 'November' }, - { value: 11, label: 'December' }, + { value: 11, label: 'December' } ]; // eslint-disable-next-line @@ -163,7 +159,9 @@ class DatePicker extends Component { return ( - 📆 + + 📆 + Date diff --git a/src/components/DatePicker/DatePicker.stories.js b/src/components/DatePicker/DatePicker.stories.js index 9fc88267..c4ac624c 100644 --- a/src/components/DatePicker/DatePicker.stories.js +++ b/src/components/DatePicker/DatePicker.stories.js @@ -8,7 +8,7 @@ storiesOf('DatePicker', module)
{story()} diff --git a/src/components/Divider/Divider.js b/src/components/Divider/Divider.js index 22a45e7b..7d9cc05c 100644 --- a/src/components/Divider/Divider.js +++ b/src/components/Divider/Divider.js @@ -4,24 +4,23 @@ import styled from 'styled-components'; import { blockSizes } from '../common/system'; const StyledDivider = styled.hr` - ${({ vertical, theme, size }) => (vertical - ? ` + ${({ vertical, theme, size }) => + vertical + ? ` height: ${blockSizes[size]}; border-left: 2px solid ${theme.borderDark}; border-right: 2px solid ${theme.borderLightest}; margin: 0; ` - : ` + : ` width: 100%; border-bottom: 2px solid ${theme.borderLightest}; border-top: 2px solid ${theme.borderDark}; margin: 0; - `)} + `} `; -const Divider = ({ - vertical, className, style, ...otherProps -}) => ( +const Divider = ({ vertical, className, style, ...otherProps }) => ( {story()} @@ -28,9 +28,9 @@ storiesOf('Divider', module) .add('vertical', () => ( Item 1 - + Item 2 - + Item 3 )); diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js index 7d7d390f..1f9d2394 100644 --- a/src/components/Fieldset/Fieldset.js +++ b/src/components/Fieldset/Fieldset.js @@ -8,13 +8,15 @@ import { fontSizes, padding } from '../common/system'; const StyledFieldset = styled.fieldset` position: relative; border: 2px solid - ${({ theme, variant }) => (variant === 'flat' ? theme.flatDark : theme.borderLightest)}; + ${({ theme, variant }) => + variant === 'flat' ? theme.flatDark : theme.borderLightest}; padding: ${padding.md}; margin-top: ${padding.sm}; font-size: ${fontSizes.md}; color: ${({ theme }) => theme.text}; - ${({ variant }) => variant !== 'flat' - && css` + ${({ variant }) => + variant !== 'flat' && + css` box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark}, inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; `} @@ -27,7 +29,8 @@ const StyledLegend = styled.legend` padding: 0 ${padding.sm}; font-size: ${fontSizes.md}; - background: ${({ theme, variant }) => (variant === 'flat' ? theme.canvas : theme.material)}; + background: ${({ theme, variant }) => + variant === 'flat' ? theme.canvas : theme.material}; `; const StyledFieldsetContent = styled.div` @@ -63,23 +66,20 @@ Fieldset.defaultProps = { label: null, className: '', style: {}, - children: null, + children: null }; Fieldset.propTypes = { label: propTypes.oneOfType([ propTypes.string, propTypes.number, - propTypes.node, + propTypes.node ]), className: propTypes.string, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]), children: propTypes.node, disabled: propTypes.bool, - variant: propTypes.oneOf(['default', 'flat']), + variant: propTypes.oneOf(['default', 'flat']) }; export default Fieldset; diff --git a/src/components/Fieldset/Fieldset.stories.js b/src/components/Fieldset/Fieldset.stories.js index 6450defd..bba88407 100644 --- a/src/components/Fieldset/Fieldset.stories.js +++ b/src/components/Fieldset/Fieldset.stories.js @@ -1,16 +1,14 @@ import React, { useState } from 'react'; import { storiesOf } from '@storybook/react'; -import { - Checkbox, Cutout, Fieldset, Window, WindowContent, -} from '..'; +import { Checkbox, Cutout, Fieldset, Window, WindowContent } from '..'; storiesOf('Fieldset', module) .addDecorator(story => (
{story()} @@ -21,7 +19,9 @@ storiesOf('Fieldset', module)
Some content here - 😍 + + 😍 +
@@ -29,9 +29,11 @@ storiesOf('Fieldset', module) .add('with label', () => ( -
+
Some content here - 😍 + + 😍 +
@@ -53,25 +55,27 @@ const FlatFieldset = () => {

setState(!state)} /> -)} + } disabled={state} > Some content here - 😍 + + 😍 +
@@ -85,19 +89,21 @@ const DisabledFieldset = () => {
setState(!state)} /> - )} + } disabled={state} > Some content here - 😍 + + 😍 +
diff --git a/src/components/Hourglass/Hourglass.js b/src/components/Hourglass/Hourglass.js index 9c866379..4272ae02 100644 --- a/src/components/Hourglass/Hourglass.js +++ b/src/components/Hourglass/Hourglass.js @@ -16,15 +16,13 @@ const StyledHourglass = styled.span` width: 100%; height: 100%; `; -const Hourglass = ({ - size, className, style, ...otherProps -}) => ( +const Hourglass = ({ size, className, style, ...otherProps }) => ( @@ -35,15 +33,12 @@ const Hourglass = ({ Hourglass.defaultProps = { size: '30px', className: '', - style: {}, + style: {} }; Hourglass.propTypes = { size: propTypes.oneOfType([propTypes.string, propTypes.number]), className: propTypes.string, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]) }; export default Hourglass; diff --git a/src/components/Hourglass/Hourglass.stories.js b/src/components/Hourglass/Hourglass.stories.js index 10d0bc1e..d9c424ab 100644 --- a/src/components/Hourglass/Hourglass.stories.js +++ b/src/components/Hourglass/Hourglass.stories.js @@ -8,7 +8,7 @@ storiesOf('Hourglass', module)
{story()} diff --git a/src/components/Hourglass/base64hourglass.js b/src/components/Hourglass/base64hourglass.js index 3985513d..2794e9ec 100644 --- a/src/components/Hourglass/base64hourglass.js +++ b/src/components/Hourglass/base64hourglass.js @@ -1,2 +1,3 @@ -const base64hourglass = 'url(\'data:image/gif;base64,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\')'; +const base64hourglass = + "url('data:image/gif;base64,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')"; export default base64hourglass; diff --git a/src/components/Icon/LogoIcon.js b/src/components/Icon/LogoIcon.js index a2ff44c1..7b1804fd 100644 --- a/src/components/Icon/LogoIcon.js +++ b/src/components/Icon/LogoIcon.js @@ -11,7 +11,7 @@ const LogoIcon = ({ style }) => { > react95 logo @@ -19,14 +19,11 @@ const LogoIcon = ({ style }) => { }; LogoIcon.defaultProps = { - style: {}, + style: {} }; LogoIcon.propTypes = { - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]) }; export default LogoIcon; diff --git a/src/components/List/List.js b/src/components/List/List.js index 1aaaa8ed..6f7c148b 100644 --- a/src/components/List/List.js +++ b/src/components/List/List.js @@ -6,7 +6,7 @@ import { createBorderStyles, createBoxStyles } from '../common'; const createListPositionStyles = ({ verticalAlign = 'bottom', - horizontalAlign = 'left', + horizontalAlign = 'left' }) => ` position: absolute; ${verticalAlign === 'bottom' ? 'bottom: 0;' : 'top: 0;'} @@ -23,15 +23,17 @@ const StyledList = styled.ul` ${createBorderStyles()} ${createBoxStyles()} /* display: ${props => (props.inline ? 'inline-flex' : 'inline-block')}; */ - ${props => props.inline - && ` + ${props => + props.inline && + ` align-items: center; display: inline-flex; `} list-style: none; position: relative; - ${props => (props.horizontalAlign || props.verticalAlign) && createListPositionStyles} + ${props => + (props.horizontalAlign || props.verticalAlign) && createListPositionStyles} `; const List = ({ @@ -67,7 +69,7 @@ List.defaultProps = { className: '', children: null, verticalAlign: undefined, - horizontalAlign: undefined, + horizontalAlign: undefined }; List.propTypes = { @@ -78,7 +80,7 @@ List.propTypes = { shadow: propTypes.bool, children: propTypes.node, verticalAlign: propTypes.oneOf(['top', 'bottom']), - horizontalAlign: propTypes.oneOf(['left', 'right']), + horizontalAlign: propTypes.oneOf(['left', 'right']) }; export default List; diff --git a/src/components/List/List.stories.js b/src/components/List/List.stories.js index 185f2461..f9afe1d5 100644 --- a/src/components/List/List.stories.js +++ b/src/components/List/List.stories.js @@ -10,7 +10,7 @@ storiesOf('List', module)
{story()} @@ -26,7 +26,9 @@ storiesOf('List', module) .add('inline', () => ( - 🌿 + + 🌿 + Tackle diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js index 3eba4ce5..dfb2b30a 100644 --- a/src/components/ListItem/ListItem.js +++ b/src/components/ListItem/ListItem.js @@ -20,8 +20,9 @@ const StyledListItem = styled.li` color: ${({ theme }) => theme.text}; &:hover { - ${({ theme, isDisabled }) => !isDisabled - && ` + ${({ theme, isDisabled }) => + !isDisabled && + ` color: ${theme.textInvert}; background: ${theme.hoverBackground}; `} @@ -61,20 +62,17 @@ ListItem.defaultProps = { square: false, onClick: null, className: '', - children: null, + children: null }; ListItem.propTypes = { className: propTypes.string, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]), size: propTypes.oneOf(['sm', 'md', 'lg']), disabled: propTypes.bool, square: propTypes.bool, children: propTypes.node, - onClick: propTypes.func, + onClick: propTypes.func }; export default ListItem; diff --git a/src/components/ListItem/ListItem.stories.js b/src/components/ListItem/ListItem.stories.js index c8c4b908..7a5b8d52 100644 --- a/src/components/ListItem/ListItem.stories.js +++ b/src/components/ListItem/ListItem.stories.js @@ -11,7 +11,7 @@ storiesOf('ListItem', module)
{story()} @@ -40,25 +40,31 @@ storiesOf('ListItem', module) .add('square', () => ( - 😎 + + 😎 + - 🤖 + + 🤖 + - 🎁 + + 🎁 + )) .add('size small', () => ( - View + View - Paste - Paste Shortcut - Undo Copy + Paste + Paste Shortcut + Undo Copy - Properties + Properties )) .add('render as link', () => ( @@ -66,11 +72,13 @@ storiesOf('ListItem', module) Normal item - 🔗 + + 🔗 + Link! diff --git a/src/components/NumberField/NumberField.js b/src/components/NumberField/NumberField.js index 4deb25a0..eba95912 100644 --- a/src/components/NumberField/NumberField.js +++ b/src/components/NumberField/NumberField.js @@ -29,12 +29,14 @@ const StyledButton = styled(Button)` padding: 0; flex-shrink: 0; - ${({ isFlat }) => !isFlat && css` - border-left-color: ${({ theme }) => theme.borderLight}; - border-top-color: ${({ theme }) => theme.borderLight}; - box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest}, - inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; - `} + ${({ isFlat }) => + !isFlat && + css` + border-left-color: ${({ theme }) => theme.borderLight}; + border-top-color: ${({ theme }) => theme.borderLight}; + box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest}, + inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + `} `; const StyledButtonIcon = styled.span` @@ -54,17 +56,6 @@ const StyledButtonIcon = styled.span` `; class NumberField extends React.Component { - static defaultProps = { - variant: 'default', - disabled: false, - min: null, - max: null, - width: null, - disableKeyboardInput: false, - className: '', - style: {}, - }; - static propTypes = { variant: propTypes.oneOf(['default', 'flat']), onChange: propTypes.func.isRequired, @@ -75,10 +66,18 @@ class NumberField extends React.Component { disabled: propTypes.bool, disableKeyboardInput: propTypes.bool, className: propTypes.string, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), + style: propTypes.shape([propTypes.string, propTypes.number]) + }; + + static defaultProps = { + variant: 'default', + disabled: false, + min: null, + max: null, + width: null, + disableKeyboardInput: false, + className: '', + style: {} }; state = { @@ -86,7 +85,7 @@ class NumberField extends React.Component { value: parseInt(this.props.value, 10) || 0 }; - add = (addValue) => { + add = addValue => { const { value } = this.state; const { onChange } = this.props; @@ -95,10 +94,11 @@ class NumberField extends React.Component { this.setState({ value: newValue }); }; - handleChange = (e) => { - let newValue = e.target.value === '-' ? '-' : this.normalize(e.target.value); + handleChange = e => { + let newValue = + e.target.value === '-' ? '-' : this.normalize(e.target.value); // eslint-disable-next-line - newValue = newValue ? newValue : newValue === 0 ? 0 : ""; + newValue = newValue ? newValue : newValue === 0 ? 0 : ''; if (e.target.validity.valid) { const { onChange } = this.props; @@ -107,7 +107,7 @@ class NumberField extends React.Component { } }; - normalize = (value) => { + normalize = value => { const { min, max } = this.props; if (min && value < min) return min; @@ -123,7 +123,7 @@ class NumberField extends React.Component { className, variant, width, - style, + style } = this.props; const { value } = this.state; return ( @@ -139,9 +139,9 @@ class NumberField extends React.Component { } readOnly={disabled || disableKeyboardInput} disabled={disabled} - type="tel" - pattern="^-?[0-9]\d*\.?\d*$" - width="100%" + type='tel' + pattern='^-?[0-9]\d*\.?\d*$' + width='100%' /> console.log(value)} diff --git a/src/components/Progress/Progress.js b/src/components/Progress/Progress.js index 1b0d7357..7cccbd16 100644 --- a/src/components/Progress/Progress.js +++ b/src/components/Progress/Progress.js @@ -43,18 +43,10 @@ const BlueBar = styled.div` ); `; -const ProgressBar = ({ - width, percent, shadow, style, -}) => ( +const ProgressBar = ({ width, percent, shadow, style }) => ( - - {percent} - % - - - {percent} - % - + {percent}% + {percent}% ); @@ -62,17 +54,14 @@ ProgressBar.defaultProps = { width: '100%', percent: 0, shadow: true, - style: {}, + style: {} }; ProgressBar.propTypes = { width: propTypes.oneOfType([propTypes.string, propTypes.number]), percent: propTypes.number, - style: propTypes.shape([ - propTypes.string, - propTypes.number, - ]), - shadow: propTypes.bool, + style: propTypes.shape([propTypes.string, propTypes.number]), + shadow: propTypes.bool }; export default ProgressBar; diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js index e246d61a..76a0283f 100644 --- a/src/components/Radio/Radio.js +++ b/src/components/Radio/Radio.js @@ -28,11 +28,12 @@ const StyledInput = styled.input` opacity: 0; `; -const createCheckmarkSymbol = ({ checked }) => checked - && css` +const createCheckmarkSymbol = ({ checked }) => + checked && + css` &:after { position: absolute; - content: ""; + content: ''; display: inline-block; top: 50%; left: 50%; @@ -58,9 +59,11 @@ const sharedCheckmarkStyles = css` const StyledCheckmark = styled(Cutout)` ${sharedCheckmarkStyles} - background: ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)}; + background: ${({ theme, isDisabled }) => + isDisabled ? theme.material : theme.canvas}; - box-shadow: ${({ shadow }) => (shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none')}; + box-shadow: ${({ shadow }) => + shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none'}; &:before { content: ""; @@ -78,9 +81,10 @@ const StyledFlatCheckmark = styled.div` ${createFlatBoxStyles()} ${sharedCheckmarkStyles} outline: none; - background: ${({ theme, isDisabled }) => (isDisabled ? theme.flatLight : theme.canvas)}; + background: ${({ theme, isDisabled }) => + isDisabled ? theme.flatLight : theme.canvas}; &:before { - content: ""; + content: ''; display: inline-block; position: absolute; top: 0; @@ -112,7 +116,7 @@ const Radio = ({ (
{story()} @@ -25,7 +19,7 @@ storiesOf('Radio', module) class RadioGroup extends React.Component { state = { - checkedValue: 'Pear', + checkedValue: 'Pear' }; handleChange = e => this.setState({ checkedValue: e.target.value }); @@ -35,37 +29,37 @@ class RadioGroup extends React.Component { return ( -
+



@@ -77,7 +71,7 @@ class RadioGroup extends React.Component { class FlatRadioGroup extends React.Component { state = { - checkedValue: 'Pear', + checkedValue: 'Pear' }; handleChange = e => this.setState({ checkedValue: e.target.value }); @@ -95,43 +89,43 @@ class FlatRadioGroup extends React.Component {




diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index 2f575223..cc70b27c 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.js @@ -35,19 +35,20 @@ const StyledDropdownButton = styled(Button)` padding: 0; z-index: 1; flex-shrink: 0; - ${({ variant }) => (variant === 'flat' - ? css` + ${({ variant }) => + variant === 'flat' + ? css` height: calc(100% - 4px); margin-right: 2px; ` - : css` + : css` height: 100%; border-left-color: ${({ theme }) => theme.borderLight}; border-top-color: ${({ theme }) => theme.borderLight}; box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest}, inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; - `)} + `} `; const StyledDropdownIcon = styled.span` position: absolute; @@ -78,18 +79,19 @@ const StyledDropdownList = styled.ul` cursor: default; z-index: 99; - ${({ variant }) => (variant === 'flat' - ? css` - bottom: 2px; - width: 100%; - border: 2px solid ${({ theme }) => theme.flatDark}; - ` - : css` - box-shadow: ${props => (props.shadow ? commonShadow : 'none')}; - bottom: -2px; - width: calc(100% - 2px); - border: 2px solid ${({ theme }) => theme.borderDarkest}; - `)} + ${({ variant }) => + variant === 'flat' + ? css` + bottom: 2px; + width: 100%; + border: 2px solid ${({ theme }) => theme.flatDark}; + ` + : css` + box-shadow: ${props => (props.shadow ? commonShadow : 'none')}; + bottom: -2px; + width: calc(100% - 2px); + border: 2px solid ${({ theme }) => theme.borderDarkest}; + `} `; const StyledDropdownListItem = styled.li` box-sizing: border-box; @@ -124,12 +126,13 @@ const Select = ({ const [index, setIndex] = useState(selectedIndex); const [open, setOpen] = useState(false); - const handleSelect = (i) => { + const handleSelect = i => { if (onChange) onChange(items[i].value); setIndex(i); }; - const Wrapper = variant === 'flat' ? StyledFlatSelectWrapper : StyledSelectWrapper; + const Wrapper = + variant === 'flat' ? StyledFlatSelectWrapper : StyledSelectWrapper; return (

@@ -51,11 +49,11 @@ storiesOf('Select', module)