Chore: Migrate Material UI Dependencies to version 4.X.X

.eslintrc

@@ -85,7 +85,7 @@
     "react/jsx-no-bind": ["error"],
     "react/jsx-no-comment-textnodes": ["error"],
     "react/jsx-no-duplicate-props": ["error"],
-    "react/jsx-no-literals": ["error"],
+    "react/display-name": 0,
     "react/jsx-no-undef": ["error"],
     "react/prop-types": 0,
     "react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}],

package.json

@@ -13,12 +13,11 @@
   "devDependencies": {
     "@commitlint/cli": "8.0.0",
     "@commitlint/config-conventional": "8.0.0",
-    "@material-ui/core": "3.9.3",
-    "@material-ui/icons": "3.0.2",
+    "@material-ui/core": "4.2.0",
+    "@material-ui/icons": "4.2.1",
     "@octokit/rest": "16.23.2",
-    "@types/enzyme": "3.9.3",
+    "@types/enzyme": "3.10.1",
     "@types/lodash": "4.14.134",
-    "@types/material-ui": "0.21.6",
     "@types/node": "12.0.8",
     "@types/react": "16.8.16",
     "@types/react-dom": "16.8.4",

src/components/ActionBar/styles.ts

@@ -1,8 +1,8 @@
 import styled from 'react-emotion';
 import { default as MuiFab } from '@material-ui/core/Fab';
-import ListItem from '@material-ui/core/ListItem';
 
 import colors from '../../utils/styles/colors';
+import ListItem from '../ListItem';
 
 export const ActionListItem = styled(ListItem)`
   && {

src/components/Author/Author.test.tsx

@@ -27,8 +27,7 @@ describe('<Author /> component', () => {
     }));
 
     const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(<Author />).toMatchSnapshot();
   });
 
   test('should render the component when there is no author information available', () => {
@@ -70,7 +69,6 @@ describe('<Author /> component', () => {
     }));
 
     const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(<Author />).toMatchSnapshot();
   });
 });

src/components/Author/Author.tsx

@@ -1,13 +1,14 @@
 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/Version';
 import { Heading, AuthorListItem } from './styles';
 import { isEmail } from '../../utils/url';
 
+import Avatar from '../primitives/Avatar';
+
 class Authors extends Component {
   public render(): ReactElement<HTMLElement> {
     return (
@@ -40,7 +41,7 @@ class Authors extends Component {
 
     const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
     return (
-      <List subheader={<Heading variant={'subheading'}>{'Author'}</Heading>}>
+      <List subheader={<Heading variant={'subtitle1'}>{'Author'}</Heading>}>
         <AuthorListItem>
           {this.renderLinkForMail(author.email, avatarComponent, packageName, version)}
           <ListItemText primary={author.name} />

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`] = `<Authors />`;
 
-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`] = `<Authors />`;

src/components/Author/styles.ts

@@ -1,7 +1,8 @@
 import styled from 'react-emotion';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 
+import ListItem from '../ListItem';
+
 export const Heading = styled(Typography)`
   && {
     font-weight: 700;

src/components/AutoComplete/AutoComplete.tsx

@@ -51,7 +51,7 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
   const matches = match(suggestion.name, query);
   const parts = parse(suggestion.name, matches);
   return (
-    <MenuItem component="div" selected={isHighlighted}>
+    <MenuItem component={'div'} selected={isHighlighted}>
       <div>
         {parts.map((part, index) => {
           const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
@@ -73,7 +73,7 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
 
 const renderMessage = (message): JSX.Element => {
   return (
-    <MenuItem component="div" selected={false}>
+    <MenuItem component={'div'} selected={false}>
       <div>{message}</div>
     </MenuItem>
   );

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<CopyToClipBoard /> component render the component 1`] = `"<div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root-15 MuiIconButton-root-9 css-56v3u0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-14\\"><svg class=\\"MuiSvgIcon-root-18\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span></button></div>"`;
+exports[`<CopyToClipBoard /> component render the component 1`] = `"<div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-56v3u0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span></button></div>"`;

src/components/CopyToClipBoard/styles.ts

@@ -1,6 +1,7 @@
-import IconButton from '@material-ui/core/IconButton';
 import styled from 'react-emotion';
 
+import IconButton from '../primitives/IconButton';
+
 export const ClipBoardCopy = styled('div')`
   && {
     display: flex;

src/components/Dependencies/Dependencies.tsx

@@ -32,7 +32,7 @@ class DepDetail extends Component<DepDetailProps, DepDetailState> {
   public render(): ReactElement<HTMLElement> {
     const { name, version } = this.state;
     const tagText = `${name}@${version}`;
-    return <Tag className={'dep-tag'} clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
+    return <Tag className={'dep-tag'} clickable={true} label={tagText} onClick={this.handleOnClick} />;
   }
 
   private handleOnClick = () => {
@@ -57,7 +57,7 @@ class DependencyBlock extends Component<{ title: string; dependencies: [] }> {
           return (
             <CardWrap>
               <CardContent>
-                <Heading variant="subheading">{`${title} (${deps.length})`}</Heading>
+                <Heading variant={'subtitle1'}>{`${title} (${deps.length})`}</Heading>
                 <Tags>{this.renderTags(deps, enableLoading)}</Tags>
               </CardContent>
             </CardWrap>
@@ -104,15 +104,15 @@ class Dependencies extends Component {
       const selectedDepndency = dependencyMap[value];
       if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
         // @ts-ignore
-        result.push(<DependencyBlock className="dependency-block" dependencies={selectedDepndency} key={key} title={value} />);
+        result.push(<DependencyBlock className={'dependency-block'} dependencies={selectedDepndency} key={key} title={value} />);
       }
       return result;
     }, []);
 
     if (dependencyList.length) {
       return <Fragment>{dependencyList}</Fragment>;
     }
-    return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
+    return <NoItems className={'no-dependencies'} text={`${name} has no dependencies.`} />;
   }
 }
 

src/components/DetailSidebar/DetailSidebar.tsx

@@ -5,7 +5,7 @@ import CardContent from '@material-ui/core/CardContent';
 import List from '@material-ui/core/List';
 
 import ActionBar from '../ActionBar/ActionBar';
-import Author from '../Author';
+import Authors from '../Author';
 import Developers from '../Developers';
 import Dist from '../Dist/Dist';
 import Engine from '../Engines/Engines';
@@ -32,7 +32,7 @@ class DetailSidebar extends Component {
             {this.renderRepository()}
             {this.renderEngine()}
             {this.renderDist()}
-            {this.renderAuthor()}
+            {this.renderAuthors()}
             {this.renderMaintainers()}
             {this.renderContributors()}
           </CardContent>
@@ -43,8 +43,8 @@ class DetailSidebar extends Component {
 
   private renderTitle = (packageName, packageMeta) => {
     return (
-      <List className="detail-info">
-        <TitleListItem alignItems="flex-start">
+      <List className={'detail-info'}>
+        <TitleListItem alignItems={'flex-start'}>
           <TitleListItemText primary={<b>{packageName}</b>} secondary={packageMeta.latest.description} />
         </TitleListItem>
       </List>
@@ -56,19 +56,19 @@ class DetailSidebar extends Component {
   };
 
   private renderMaintainers = () => {
-    return <Developers type="maintainers" />;
+    return <Developers type={'maintainers'} />;
   };
 
   private renderContributors = () => {
-    return <Developers type="contributors" />;
+    return <Developers type={'contributors'} />;
   };
 
   private renderRepository = () => {
     return <Repository />;
   };
 
-  private renderAuthor = () => {
-    return <Author />;
+  private renderAuthors = () => {
+    return <Authors />;
   };
 
   private renderEngine = () => {

src/components/DetailSidebar/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
 import Avatar from '@material-ui/core/Avatar';
-import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import colors from '../../utils/styles/colors';
+import ListItem from '../ListItem';
 
 export const TitleListItem = styled(ListItem)`
   && {

src/components/Developers/Developers.tsx

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
 
-import Avatar from '@material-ui/core/Avatar';
 import Add from '@material-ui/icons/Add';
 import Tooltip from '@material-ui/core/Tooltip';
 
 import { DetailContextConsumer } from '../../pages/version/Version';
 import { Details, Heading, Content, Fab } from './styles';
 import { isEmail } from '../../utils/url';
 
+import Avatar from '../primitives/Avatar';
+
 interface Props {
   type: 'contributors' | 'maintainers';
 }
@@ -42,13 +43,13 @@ class Developers extends Component<Props, State> {
     const { visibleDevs } = this.state;
     return (
       <>
-        <Heading variant={'subheading'}>{type}</Heading>
+        <Heading variant={'subtitle1'}>{type}</Heading>
         <Content>
           {developers.slice(0, visibleDevs).map(developer => (
             <Details key={developer.email}>{this.renderDeveloperDetails(developer, packageMeta)}</Details>
           ))}
           {visibleDevs < developers.length && (
-            <Fab onClick={this.handleLoadMore} size="small">
+            <Fab onClick={this.handleLoadMore} size={'small'}>
               <Add />
             </Fab>
           )}

src/components/Dist/Dist.tsx

@@ -48,7 +48,7 @@ class Dist extends Component {
     const { dist, license } = packageMeta && packageMeta.latest;
 
     return (
-      <List subheader={<Heading variant="subheading">{'Latest Distribution'}</Heading>}>
+      <List subheader={<Heading variant={'subtitle1'}>{'Latest Distribution'}</Heading>}>
         <DistListItem>{this.renderChips(dist, license)}</DistListItem>
       </List>
     );

src/components/Dist/styles.ts

@@ -1,10 +1,10 @@
 import styled from 'react-emotion';
 import { default as MuiFab } from '@material-ui/core/Fab';
 import Chip from '@material-ui/core/Chip';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 
 import colors from '../../utils/styles/colors';
+import ListItem from '../ListItem';
 
 export const Heading = styled(Typography)`
   && {

src/components/Engines/Engines.tsx

@@ -1,10 +1,11 @@
 import React, { Component, ReactElement } from 'react';
 
-import Avatar from '@material-ui/core/Avatar';
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 
+import Avatar from '../primitives/Avatar';
+
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
 import { Heading, EngineListItem } from './styles';
 // @ts-ignore
@@ -60,7 +61,7 @@ class Engine extends Component {
 
   private renderListItems = (heading, text) => {
     return (
-      <List subheader={<Heading variant={'subheading'}>{text.split('-').join(' ')}</Heading>}>
+      <List subheader={<Heading variant={'subtitle1'}>{text.split('-').join(' ')}</Heading>}>
         <EngineListItem>
           {ICONS[text]}
           <ListItemText primary={heading} />

src/components/Engines/styles.ts

@@ -1,7 +1,8 @@
 import styled from 'react-emotion';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 
+import ListItem from '../ListItem';
+
 export const Heading = styled(Typography)`
   && {
     font-weight: 700;

src/components/Footer/Footer.tsx

@@ -5,14 +5,14 @@ import { goToVerdaccioWebsite } from '../../utils/windows';
 
 const renderTooltip = (): JSX.Element => (
   <ToolTip>
-    <Earth name="earth" size="md" />
+    <Earth name={'earth'} size={'md'} />
     <Flags>
-      <Flag name="spain" size="md" />
-      <Flag name="nicaragua" size="md" />
-      <Flag name="india" size="md" />
-      <Flag name="brazil" size="md" />
-      <Flag name="china" size="md" />
-      <Flag name="austria" size="md" />
+      <Flag name={'spain'} size={'md'} />
+      <Flag name={'nicaragua'} size={'md'} />
+      <Flag name={'india'} size={'md'} />
+      <Flag name={'brazil'} size={'md'} />
+      <Flag name={'china'} size={'md'} />
+      <Flag name={'austria'} size={'md'} />
     </Flags>
   </ToolTip>
 );
@@ -26,7 +26,7 @@ const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
   return (
     <Right>
       {POWERED_LABEL}
-      <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
+      <Logo img={true} name={'verdaccio'} onClick={goToVerdaccioWebsite} pointer={true} size={'md'} />
       {`/ ${version}`}
     </Right>
   );