chore: update material-ui@4.x

package.json

@@ -13,15 +13,16 @@
   "devDependencies": {
     "@commitlint/cli": "8.1.0",
     "@commitlint/config-conventional": "8.1.0",
-    "@material-ui/core": "3.9.3",
-    "@material-ui/icons": "3.0.2",
+    "@material-ui/core": "4.3.3",
+    "@material-ui/icons": "4.2.1",
+    "@material-ui/styles": "4.3.3",
     "@octokit/rest": "16.28.7",
     "@testing-library/react": "9.1.3",
     "@types/enzyme": "3.10.3",
     "@types/jest": "24.0.18",
-    "@types/lodash": "4.14.137",
-    "@types/material-ui": "0.21.6",
-    "@types/node": "12.7.2",
+    "@types/lodash": "4.14.138",
+    "@types/material-ui": "0.21.7",
+    "@types/node": "12.7.3",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
     "@types/react-router-dom": "4.3.5",
@@ -47,14 +48,14 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.0",
     "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "1.7.0",
+    "eslint-plugin-react-hooks": "2.0.1",
     "eslint-plugin-verdaccio": "2.0.0",
     "file-loader": "4.2.0",
     "friendly-errors-webpack-plugin": "1.7.0",
     "get-stdin": "6.0.0",
     "github-markdown-css": "3.0.1",
     "html-webpack-plugin": "3.2.0",
-    "husky": "3.0.3",
+    "husky": "3.0.4",
     "identity-obj-proxy": "3.0.0",
     "in-publish": "2.0.0",
     "jest": "24.9.0",
@@ -65,6 +66,7 @@
     "jest-fetch-mock": "2.1.2",
     "js-base64": "2.5.1",
     "js-yaml": "3.13.1",
+    "lint-staged": "8.2.1",
     "localstorage-memory": "1.0.3",
     "mini-css-extract-plugin": "0.8.0",
     "node-mocks-http": "1.7.6",
@@ -97,15 +99,15 @@
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "2.1.0",
     "validator": "11.1.0",
-    "verdaccio": "4.2.1",
-    "verdaccio-auth-memory": "1.1.5",
-    "verdaccio-memory": "2.0.0",
-    "webpack": "4.39.2",
+    "verdaccio": "4.2.2",
+    "verdaccio-auth-memory": "8.0.0",
+    "verdaccio-memory": "8.0.0",
+    "webpack": "4.39.3",
     "webpack-bundle-analyzer": "3.4.1",
     "webpack-bundle-size-analyzer": "3.0.0",
     "webpack-cli": "3.3.7",
     "webpack-dev-server": "3.8.0",
-    "webpack-merge": "4.2.1",
+    "webpack-merge": "4.2.2",
     "whatwg-fetch": "3.0.0",
     "xss": "1.0.6"
   },
@@ -168,9 +170,25 @@
   },
   "husky": {
     "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -e $GIT_PARAMS"
     }
   },
+  "lint-staged": {
+    "relative": true,
+    "linters": {
+      "*.{js,tsx,ts}": [
+        "eslint",
+        "prettier --write"
+      ],
+      "*": [
+        "git add"
+      ]
+    },
+    "ignore": [
+      "*.json"
+    ]
+  },
   "license": "MIT",
   "commitlint": {
     "extends": [

src/components/ActionBar/ActionBar.test.tsx

@@ -1,69 +1,58 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import { ActionBar } from './ActionBar';
+
+const mockPackageMeta = jest.fn(() => ({
+  latest: {
+    homepage: 'https://verdaccio.tld',
+    bugs: {
+      url: 'https://verdaccio.tld/bugs',
+    },
+    dist: {
+      tarball: 'https://verdaccio.tld/download',
+    },
+  },
+}));
+
+jest.mock('../../pages/Version', () => ({
+  DetailContextConsumer: component => {
+    return component.children({ packageMeta: mockPackageMeta() });
+  },
+}));
 
 describe('<ActionBar /> component', () => {
   beforeEach(() => {
     jest.resetModules();
+    jest.resetAllMocks();
   });
 
   test('should render the component in default state', () => {
-    const packageMeta = {
-      latest: {
-        homepage: 'https://verdaccio.tld',
-        bugs: {
-          url: 'https://verdaccio.tld/bugs',
-        },
-        dist: {
-          tarball: 'https://verdaccio.tld/download',
-        },
-      },
-    };
-
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
-
-    const ActionBar = require('./ActionBar').default;
-    const wrapper = shallow(<ActionBar />);
+    const wrapper = mount(<ActionBar />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   test('when there is no action bar data', () => {
-    const packageMeta = {
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => ({
       latest: {},
-    };
-
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
     }));
 
-    const ActionBar = require('./ActionBar').default;
-    const wrapper = shallow(<ActionBar />);
+    const wrapper = mount(<ActionBar />);
     // FIXME: this only renders the DetailContextConsumer, thus
     // the wrapper will be always empty
     expect(wrapper.html()).toEqual('');
   });
 
   test('when there is a button to download a tarball', () => {
-    const packageMeta = {
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => ({
       latest: {
         dist: {
           tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
         },
       },
-    };
-
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
     }));
 
-    const ActionBar = require('./ActionBar').default;
     const wrapper = mount(<ActionBar />);
     expect(wrapper.html()).toMatchSnapshot();
 

src/components/ActionBar/ActionBar.tsx

@@ -49,6 +49,12 @@ class ActionBar extends Component {
     return (
       <DetailContextConsumer>
         {context => {
+          const { packageMeta } = context;
+
+          if (!packageMeta) {
+            return null;
+          }
+
           return this.renderActionBar(context as VersionPageConsumerProps);
         }}
       </DetailContextConsumer>
@@ -65,12 +71,18 @@ class ActionBar extends Component {
 
   private renderActionBar = ({ packageMeta }) => {
     // @ts-ignore
-    const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
+    const { latest } = packageMeta;
+
+    if (!latest) {
+      return null;
+    }
+
+    const { homepage, bugs, dist } = latest;
 
     const actionsMap = {
       homepage,
-      issue,
-      tarball,
+      issue: bugs ? bugs.url : null,
+      tarball: dist ? dist.tarball : null,
     };
 
     const renderList = Object.keys(actionsMap).reduce((component: React.ReactElement[], value, key) => {
@@ -108,7 +120,9 @@ class ActionBar extends Component {
     if (renderList.length > 0) {
       return (
         <List>
-          <ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
+          <ActionListItem alignItems={'flex-start'} button={true}>
+            {renderList}
+          </ActionListItem>
         </List>
       );
     }
@@ -117,4 +131,4 @@ class ActionBar extends Component {
   };
 }
 
-export default ActionBar;
+export { ActionBar };

src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ActionBar /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2\\"><li class=\\"MuiListItem-root-5 MuiListItem-default-8 MuiListItem-gutters-13 MuiListItem-alignItemsFlexStart-10 css-9q3x3c eux6shq0\\"><a href=\\"https://verdaccio.tld\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></span></button></a><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span></button></li></ul>"`;
+exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
 
-exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root-47 MuiList-padding-48\\"><li class=\\"MuiListItem-root-51 MuiListItem-default-54 MuiListItem-gutters-59 MuiListItem-alignItemsFlexStart-56 css-9q3x3c eux6shq0\\"><button class=\\"MuiButtonBase-root-81 MuiFab-root-71 MuiFab-sizeSmall-79 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label-72\\"><svg class=\\"MuiSvgIcon-root-84\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-93\\"></span></button></li></ul>"`;
+exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-9q3x3c eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Author/Author.test.tsx

@@ -1,9 +1,28 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import Authors from './Author';
+
+const mockPackageMeta = jest.fn(() => ({
+  latest: {
+    homepage: 'https://verdaccio.tld',
+    bugs: {
+      url: 'https://verdaccio.tld/bugs',
+    },
+    dist: {
+      tarball: 'https://verdaccio.tld/download',
+    },
+  },
+}));
+
+jest.mock('../../pages/Version', () => ({
+  DetailContextConsumer: component => {
+    return component.children({ packageMeta: mockPackageMeta() });
+  },
+}));
 
 describe('<Author /> component', () => {
   beforeEach(() => {
-    jest.resetModules();
+    jest.resetAllMocks();
   });
 
   test('should render the component in default state', () => {
@@ -20,14 +39,10 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
+    const wrapper = mount(<Authors />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -39,14 +54,10 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
+    const wrapper = mount(<Authors />);
     expect(wrapper.html()).toEqual('');
   });
 
@@ -63,14 +74,10 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
+    const wrapper = mount(<Authors />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

src/components/Author/Author.tsx

@@ -2,18 +2,23 @@ import React, { Component, ReactNode, ReactElement } from 'react';
 
 import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import { DetailContextConsumer } from '../../pages/Version';
-import { Heading, AuthorListItem } from './styles';
+import { Heading, AuthorListItem, AuthorListItemText } from './styles';
 import { isEmail } from '../../utils/url';
 
 class Authors extends Component {
   public render(): ReactElement<HTMLElement> {
     return (
       <DetailContextConsumer>
         {context => {
-          return context && context.packageMeta && this.renderAuthor(context.packageMeta);
+          const { packageMeta } = context;
+
+          if (!packageMeta) {
+            return null;
+          }
+
+          return this.renderAuthor(packageMeta);
         }}
       </DetailContextConsumer>
     );
@@ -31,19 +36,19 @@ class Authors extends Component {
     );
   }
 
-  public renderAuthor = packageMeta => {
-    const { author, name: packageName, version } = packageMeta.latest;
+  public renderAuthor = ({ latest }) => {
+    const { author, name: packageName, version } = latest;
 
     if (!author) {
       return null;
     }
 
     const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
     return (
-      <List subheader={<Heading variant={'subheading'}>{'Author'}</Heading>}>
-        <AuthorListItem>
+      <List subheader={<Heading variant={'subtitle1'}>{'Author'}</Heading>}>
+        <AuthorListItem button={true}>
           {this.renderLinkForMail(author.email, avatarComponent, packageName, version)}
-          <ListItemText primary={author.name} />
+          <AuthorListItemText primary={author.name} />
         </AuthorListItem>
       </List>
     );

src/components/Author/__snapshots__/Author.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2 MuiList-subheader-4\\"><h3 class=\\"MuiTypography-root-5 MuiTypography-subheading-12 css-hyrz44 e1xuehjw0\\">Author</h3><li class=\\"MuiListItem-root-41 MuiListItem-default-44 MuiListItem-gutters-49 css-z8a2h0 e1xuehjw1\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root-53\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img-55\\"/></div></a><div class=\\"MuiListItemText-root-56\\"><span class=\\"MuiTypography-root-5 MuiTypography-subheading-12 MuiListItemText-primary-59\\">verdaccio user</span></div></li></ul>"`;
+exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root-62 MuiList-padding-63 MuiList-subheader-65\\"><h3 class=\\"MuiTypography-root-66 MuiTypography-subheading-73 css-hyrz44 e1xuehjw0\\">Author</h3><li class=\\"MuiListItem-root-102 MuiListItem-default-105 MuiListItem-gutters-110 css-z8a2h0 e1xuehjw1\\"><div class=\\"MuiAvatar-root-114\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img-116\\"/></div><div class=\\"MuiListItemText-root-117\\"><span class=\\"MuiTypography-root-66 MuiTypography-subheading-73 MuiListItemText-primary-120\\">verdaccio user</span></div></li></ul>"`;
+exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;