ESLint and Prettier improvements

.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,

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": {

src/components/Anchor/Anchor.js

@@ -13,32 +13,22 @@ const StyledAnchor = styled.a`
   }
 `;
 
-const Anchor = ({
-  className, style, href, children, ...otherProps
-}) => (
-  <StyledAnchor
-    href={href}
-    className={className}
-    style={style}
-    {...otherProps}
-  >
+const Anchor = ({ className, style, href, children, ...otherProps }) => (
+  <StyledAnchor href={href} className={className} style={style} {...otherProps}>
     {children}
   </StyledAnchor>
 );
 
 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;

src/components/Anchor/Anchor.spec.js

@@ -5,33 +5,32 @@ import Anchor from './Anchor';
 
 const defaultProps = {
   children: '',
-  href: '',
+  href: ''
 };
 
 describe('<Anchor />', () => {
   it('should render href', () => {
-    const { container } = render((
-      <Anchor {...defaultProps} href="http://yoda.com" />
-    ));
+    const { container } = render(
+      <Anchor {...defaultProps} href='http://yoda.com' />
+    );
     const anchorEl = container.firstChild;
 
     expect(anchorEl).toHaveAttribute('href', 'http://yoda.com');
   });
 
   it('should render children', () => {
-    const { container } = render(<Anchor {...defaultProps}>You shall pass</Anchor>);
+    const { container } = render(
+      <Anchor {...defaultProps}>You shall pass</Anchor>
+    );
     const anchorEl = container.firstChild;
 
     expect(anchorEl).toHaveTextContent('You shall pass');
   });
 
   it('should render custom style', () => {
-    const { container } = render((
-      <Anchor
-        {...defaultProps}
-        style={{ color: 'papayawhip' }}
-      />
-    ));
+    const { container } = render(
+      <Anchor {...defaultProps} style={{ color: 'papayawhip' }} />
+    );
     const anchorEl = container.firstChild;
 
     expect(anchorEl).toHaveAttribute('style', 'color: papayawhip;');

src/components/Anchor/Anchor.stories.js

@@ -8,22 +8,21 @@ storiesOf('Anchor', module)
     <div
       style={{
         padding: '5rem',
-        background: '#ced0cf',
+        background: '#ced0cf'
       }}
     >
       {story()}
     </div>
   ))
   .add('default', () => (
-    <Anchor href="https://expensive.toys" target="_blank">
+    <Anchor href='https://expensive.toys' target='_blank'>
       Expensive Toys
-      {' '}
     </Anchor>
   ))
   .add('within text', () => (
     <h1>
-      {'Everybody needs '}
-      <Anchor href="https://expensive.toys" target="_blank">
+      Everybody needs
+      <Anchor href='https://expensive.toys' target='_blank'>
         Expensive Toys
       </Anchor>
     </h1>

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;

src/components/AppBar/AppBar.spec.js

@@ -32,12 +32,9 @@ describe('<AppBar />', () => {
   });
 
   it('should custom style', () => {
-    const { container } = render((
-      <AppBar
-        {...defaultProps}
-        style={{ backgroundColor: 'papayawhip' }}
-      />
-    ));
+    const { container } = render(
+      <AppBar {...defaultProps} style={{ backgroundColor: 'papayawhip' }} />
+    );
     const headerEl = container.firstChild;
 
     expect(headerEl).toHaveAttribute('style', 'background-color: papayawhip;');

src/components/AppBar/AppBar.stories.js

@@ -17,7 +17,7 @@ storiesOf('AppBar', module)
     <div
       style={{
         padding: '5rem',
-        background: 'teal',
+        background: 'teal'
       }}
     >
       {story()}
@@ -28,7 +28,7 @@ storiesOf('AppBar', module)
       <Toolbar style={{ justifyContent: 'space-between' }}>
         <Menu />
         <TextField
-          placeholder="Search..."
+          placeholder='Search...'
           width={150}
           style={{ marginLeft: 4 }}
         />
@@ -51,22 +51,28 @@ function Menu() {
     <div style={{ position: 'relative', display: 'inline-block' }}>
       {open && (
         <List
-          horizontalAlign="left"
-          verticalAlign="bottom"
+          horizontalAlign='left'
+          verticalAlign='bottom'
           open={open}
           onClick={handleClose}
         >
           <ListItem>
-            <span role="img" aria-label="👨‍💻">👨‍💻</span>
+            <span role='img' aria-label='👨‍💻'>
+              👨‍💻
+            </span>
             Profile
           </ListItem>
           <ListItem>
-            <span role="img" aria-label="📁">📁</span>
+            <span role='img' aria-label='📁'>
+              📁
+            </span>
             My account
           </ListItem>
           <Divider />
           <ListItem disabled>
-            <span role="img" aria-label="🔙">🔙</span>
+            <span role='img' aria-label='🔙'>
+              🔙
+            </span>
             Logout
           </ListItem>
         </List>

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 }) => (
   <StyledAvatar noBorder={noBorder} square={square} {...otherProps}>
     {src ? <SlyledAvatarIMG src={src} alt={alt} /> : children}
   </StyledAvatar>
@@ -49,15 +49,15 @@ Avatar.defaultProps = {
   noBorder: false,
   src: undefined,
   children: null,
-  alt: '',
+  alt: ''
 };
 
 Avatar.propTypes = {
   square: propTypes.bool,
   noBorder: propTypes.bool,
   children: propTypes.node,
   src: propTypes.string,
-  alt: propTypes.string,
+  alt: propTypes.string
 };
 
 export default Avatar;

src/components/Avatar/Avatar.spec.js

@@ -20,10 +20,15 @@ describe('<Avatar />', () => {
   });
 
   it('should handle border properly', () => {
-    const { container, rerender } = renderWithTheme(<Avatar noBorder={false} />);
+    const { container, rerender } = renderWithTheme(
+      <Avatar noBorder={false} />
+    );
     const avatarEl = container.firstChild;
 
-    expect(avatarEl).toHaveStyleRule('border-top', `2px solid ${theme.borderDark}`);
+    expect(avatarEl).toHaveStyleRule(
+      'border-top',
+      `2px solid ${theme.borderDark}`
+    );
 
     rerender(<Avatar noBorder />);
 
@@ -43,21 +48,19 @@ describe('<Avatar />', () => {
 
   it('should render with source', async () => {
     const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif';
-    const { findByAltText } = render((
-      <Avatar src={catGif} alt="cat avatar" />
-    ));
+    const { findByAltText } = render(<Avatar src={catGif} alt='cat avatar' />);
     const imageEl = await findByAltText('cat avatar');
 
     expect(imageEl.src).toBe(catGif);
   });
 
   it('should render source with priority over children', async () => {
     const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif';
-    const { queryByText } = render((
-      <Avatar src={catGif} alt="cat avatar">
+    const { queryByText } = render(
+      <Avatar src={catGif} alt='cat avatar'>
         Cats are cool
       </Avatar>
-    ));
+    );
     const content = await queryByText(/cats are cool/i);
 
     expect(content).toBeNull();

src/components/Avatar/Avatar.stories.js

@@ -11,7 +11,7 @@ storiesOf('Avatar', module)
     <div
       style={{
         padding: '5rem',
-        background: 'teal',
+        background: 'teal'
       }}
     >
       {story()}
@@ -25,7 +25,7 @@ storiesOf('Avatar', module)
         <Button flat accent>
           Menu
         </Button>
-        <Avatar src="https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1" />
+        <Avatar src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1' />
       </Toolbar>
     </AppBar>
   ))
@@ -38,7 +38,7 @@ storiesOf('Avatar', module)
           Menu
         </Button>
         <Avatar
-          src="https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1"
+          src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1'
           noBorder
         />
       </Toolbar>
@@ -65,7 +65,9 @@ storiesOf('Avatar', module)
           Menu
         </Button>
         <Avatar square>
-          <span role="img" aria-label="🚀">🚀</span>
+          <span role='img' aria-label='🚀'>
+            🚀
+          </span>
         </Avatar>
       </Toolbar>
     </AppBar>

src/components/Bar/Bar.js

@@ -15,28 +15,18 @@ const StyledBar = styled.div`
   background: ${({ theme }) => theme.material};
 `;
 
-const Bar = ({
-  size, className, style, ...otherProps
-}) => (
-  <StyledBar
-    size={size}
-    className={className}
-    style={style}
-    {...otherProps}
-  />
+const Bar = ({ size, className, style, ...otherProps }) => (
+  <StyledBar size={size} className={className} style={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;